/
contribute.html
202 lines (186 loc) · 13.8 KB
/
contribute.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!doctype html>
<html lang="en">
<head>
<base target='_blank'/> <!--will make each link default open in new tab-->
<meta charset="utf-8"/>
<meta name="google-site-verification" content="Hl1D8Wi_Na9rBhnPm51m6rstMdR3t3WR38vQS9t1keo" /><!--verifying site for the purpose of google-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"/><!--viewport is user's visible area of web page-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="An online course/workshop for learning how to program online social science experiments."/><!--To increase SEO, add description, keywords, author, etc. -->
<meta name="keywords" content="Social Science, JavaScript, HTML, CSS, Qualtrics, Amazon Mechanical Turk"/>
<meta name="author" content="Christina Bejjani"/>
<title>How to Contribute to Introductory Programming for Online Social Science Experiments</title>
<!-- Favicons-->
<link href="files/favi_icon_website.png" rel="icon" type="image/x-icon" />
<link rel="apple-touch-icon" href="files/favi_icon_website_180.png" sizes="180x180">
<link rel="icon" href="files/favi_icon_website_32.png" sizes="32x32" type="image/png">
<link rel="icon" href="files/favi_icon_website_16.png" sizes="16x16" type="image/png">
<!--This is for the open graph framework, which sites like Facebook, Twitter, LinkedIn etc. use, esp when the site URL is shared -->
<meta property='og:url' content='https://socsciprogramming.github.io/contribute.html'/>
<meta property='og:title' content='Introductory Programming for Online Social Science Experiments'/>
<meta property='og:description' content='An online course/workshop for learning how to program online social science experiments.'/>
<meta property='og:type' content='website'/>
<meta property='og:image' content='files/twittercard.png'/>
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="640">
<!--This is for those little thumbnails when the link is shared on twitter -->
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@chbejjani'/>
<meta name='twitter:creator' content='@chbejjani'/>
<meta name='twitter:url' content='https://socsciprogramming.github.io/contribute.html'/>
<meta name='twitter:image' content='files/twittercard.png'/>
<meta name='twitter:description' content='An online course/workshop for learning how to program online social science experiments.'/>
<meta name='twitter:title' content='Introductory Programming for Online Social Science Experiments'/>
<!--rel canonical is a way of defining canonical page for similar or duplicate pages -->
<link href='https://socsciprogramming.github.io/contribute.html' rel='canonical'/>
<!-- Bootstrap core CSS + font awesome JS for icons-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/25e7f7a6fa.js" crossorigin="anonymous"></script>
<!-- Custom CSS -->
<link href="css/allpages.css" rel="stylesheet">
<!-- Loading fonts; pairing serif fonts in headers w/ sans serif for body-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=Playfair+Display+SC:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5K6E5T95PP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-5K6E5T95PP');
</script>
</head>
<body>
<nav class="navbar navbar-expand-md fixed-top bg-blue">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<a class="navbar-brand" href="#" target="_self">
<img src="files/logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo">
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navb-link" href="index.html" target="_self">Home</a>
</li>
<li class="nav-item">
<a class="nav-link navb-link" href="about.html" target="_self">About</a>
</li>
<li class="nav-item active">
<a class="nav-link navb-link" href="contribute.html" target="_self">How to Contribute<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link navb-link" href="wishlist.html" target="_self">Wishlist</a>
</li>
<li class="nav-item dropdown d-sm-block d-md-none">
<a class="nav-link dropdown-toggle navb-link" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Modules</a>
<div class="dropdown-menu bg-blue" aria-labelledby="smallerscreenmenu">
<a class="dropdown-item navb-link" href="module1.html" target="_self">Module 1</a>
<a class="dropdown-item navb-link" href="module2.html" target="_self">Module 2</a>
<a class="dropdown-item navb-link" href="module3.html" target="_self">Module 3</a>
<a class="dropdown-item navb-link" href="module4.html" target="_self">Module 4</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="row" id="body-row">
<div id="sidebar-container" class="d-none d-md-block col-2 bg-grey">
<ul class="list-group sticky-top sticky-offset">
<li class="list-group-item text-muted d-flex align-items-center">
<small><b>MODULES</b></small>
</li>
<!-- Normally, this would say #submenu1 as the href & data-toggle = "collapse" & class = "collapsed" & the span class would not be hidden, but I want to link to each module page and then allow people to collapse there. Therefore I'm keeping this infastructure here for other pages to use too & just adjust then.-->
<a href="module1.html" target="_self" aria-expanded="false" class="list-group-item flex-column align-items-start">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="if-collapsed fas fa-angle-up mr-3"></span>
<!--<span class="if-not-collapsed fas fa-angle-down mr-3"></span>-->
<span class="copy-link">1: Crowdsourced Experiments</span>
</div>
</a>
<a href="module2.html" target="_self" aria-expanded="false" class="list-group-item flex-column align-items-start">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="if-collapsed fas fa-angle-up mr-3"></span>
<!--<span class="if-not-collapsed fas fa-angle-down mr-3"></span>-->
<span class=" copy-link">2: Basic Survey Design</span>
</div>
</a>
<a href="module3.html" target="_self" aria-expanded="false" class="list-group-item flex-column align-items-start">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="if-collapsed fas fa-angle-up mr-3"></span>
<!--<span class="if-not-collapsed fas fa-angle-down mr-3"></span>-->
<span class="copy-link">3: Customized Design with JavaScript, HTML, & CSS</span>
</div>
</a>
<a href="module4.html" target="_self" aria-expanded="false" class="list-group-item flex-column align-items-start">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="if-collapsed fas fa-angle-up mr-3"></span>
<!--<span class="if-not-collapsed fas fa-angle-down mr-3"></span>-->
<span class="copy-link">4: Advanced Customization</span>
</div>
</a>
</ul>
</div>
<div class="col py-3" id="page-content">
<main>
<section>
<h1>How to Contribute</h1>
<div>
<p>All contributions are welcome, whether they're related to minimizing the code, including more examples/tips/tricks, or adding in an entirely new lesson. In some cases, you may even disagree with what is written, and you may wish to provide an alternate point of view. This is also welcome.</p>
<p>This page goes over the rules behind contributing.</p>
</div>
</section>
<hr>
<section>
<h2 class="pad1">Licensing</h2>
<div>
<p>First and foremost, you should know that the code listed on the website is under a <a href="https://creativecommons.org/licenses/by/4.0/" class="copy-link">Creative Commons By Attribution 4.0</a> license. This means that if you're a student and use code from here, you should give appropriate credit and indicate what changes were made. Please see the link for more details. If you're writing code that should have a MIT license (e.g., see <a href="https://getbootstrap.com/docs/4.5/about/license/" class="copy-link">Bootstrap</a>), it probably shouldn't be included here. Anyone who contributes is explicitly acknowledging that they are OK with the CC BY 4.0 license.</p>
<p>Of note, you should make sure that you understand the particular organization of this Github repository and its respective pages before contributing. For example, make sure that you understand the site design (e.g., Playfair as header fonts; subsections listed in the dropdown for the sidebar & only not-collapsing the sidebars for the corresponding module, etc.). Make sure that you are prioritizing accessibility, too (<a href="https://web.accessibility.duke.edu/learn/wcag-guidelines" class="copy-link">see guidelines</a>), for instance by checking color contrast (if you change the design), by adding <a href="https://moz.com/learn/seo/alt-text" class="copy-link">alt text</a> for images, etc.. Make sure you can also explicitly articulate WHY you are contributing.</p>
</div>
</section>
<section>
<h2 class="pad1">Learning Goals</h2>
<div>
<p>Which brings me to: Learning Goals. If you are designing a new lesson to be included in this repository, you will need to think about what you want students to get from that lesson. People who specialize in course design have already written primers on <a href="https://learninginnovation.duke.edu/resources/art-and-science-of-teaching/design-your-course/" class="copy-link">this kind of thing</a>. You need to make sure that you honor the work that went into this repository by thinking explicitly about course design with regard to your tutorials.</p>
</div>
</section>
<section>
<h2 class="pad1">Does the Tutorial Already Exist?</h2>
<div>
<p>Everyone needs to double check whether the tutorial already exists before adding more links and material. It is far easier to modify a current tutorial with up-to-date information than to edit existing pages and add in another new link. Also, please see the <a href="wishlist.html" class="copy-link" target="_self"> Wishlist page</a> for things that we've already considered that should be added.</p>
</div>
</section>
<section>
<h2 class="pad1">What Next?</h2>
<div>
<p>When you want to contribute, you should join the <a href="https://github.com/socsciprogramming" class="copy-link">Organization page with your Github account</a>. Then you will be able to edit or add additional pages to the mix. You should also add to your name to the <a href="about.html" class="copy-link" target="_self">About page</a> (and the author meta information on the page you edit).</p>
<p>Once you've contributed to the site, make sure to add your name to the <a href="https://github.com/socsciprogramming/socsciprogramming.github.io" class="copy-link">Github repository list of contributors</a>, too. Feel free to include this in your online portfolio/CV/resume. Make sure to test out your code/tutorial - e.g., does the code work in multiple browsers? Are there usability issues with your particular tutorial? The only way a repository like this can survive is if we all put in the necessary work to keep it functional. That includes making sure that your tutorial is understood by students within the target audience.</p>
</div>
<div class="scrollstyle mainfont pad1" id="top-scroll" aria-labelledby="scroll-to-top">
<a class="copy-link" href="#top" rel="tooltip" data-toggle="tooltip" aria-labelledby="tooltip" data-placement="left" title="Scroll to top">
<i class="fas fa-angle-up fa-3x"></i>
</a>
</div>
<div class="row pad-l1 pad-b75 pad-t75"></div>
</section>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
//this is the scroll to the top arrow; it selects any select that says href=#top and when you click that link, it animates the html body to slowly scroll to the top
$("a[href='#top']").click(function() {
$('html,body').animate({scrollTop: 0}, "slow");
return false;
});
//this is the tooltip hover that explains what the scroll to the top arrow is in case someone is not familiar with that
$('[rel=tooltip]').tooltip({ trigger: "hover" });
});
</script>
</body>
</html>