/
about.html
192 lines (175 loc) · 12.7 KB
/
about.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
<!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>About 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/about.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/about.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/about.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 active">
<a class="nav-link navb-link" href="about.html" target="_self">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link navb-link" href="contribute.html" target="_self">How to Contribute</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>About the Course</h1>
<div>
<p>"Introductory Programming for Online Social Science Experiments" first started as a workshop taught by Dr. Jiefeng Jiang (<a href="https://myweb.uiowa.edu/jiefjiang/index.html" class="copy-link">now at UIowa</a>). Dr. Jiang taught his (then) fellow labmates (Drs. Anastasia Kiynoaga, Emma Wu-Dowd, Hanna Oh-Descher, Yu-Chin Chiu, Anthony Sali, Paul Muhle-Karbe, etc.) in <a href="http://www.egnerlab.org/" class="copy-link">Tobias Egner's lab</a> how to code in JavaScript, HTML, and CSS and how to post online experiments on Amazon Mechanical Turk. He also created the lab's server database so that the data collected online could be transformed into text files for data analysis.</p>
<p>When <a href="https://christinabejjani.github.io" class="copy-link">Christina Bejjani</a> and <a href="https://pswhitehead.com/" class="copy-link">Peter Whitehead</a> joined Dr. Egner's lab in 2016, Dr. Jiang hosted a four-hour workshop on the material. Once Dr. Jiang left Duke, Christina and Peter took over teaching the workshop and informally mentoring fellow graduate students and members of the <a href="https://dibs.duke.edu/research/centers/ccn" class="copy-link">Center for Cognitive Neuroscience</a>. Since then, Christina has expanded the material from its original powerpoint and demo format into an organized course with separated modules and explicit learning goals. A full course is shown here on Github, but there are also videos and assessments (freely) available to (Duke) students through the associated Coursera.</p>
<p>With the help of this course, students should be able to participate in social science research more readily. Moreover, the skills obtained in this course should transfer over to research outside of academia: for instance, jobs in web development require HTML/CSS/JS skills, as do some UX researcher/design roles.</p>
</div>
</section>
<hr>
<section>
<h2 class="pad1">Duke University Bass Digital Education Fellowship</h2>
<div>
<p>Through the generous support of the <a href="https://gradschool.duke.edu/professional-development/programs/bass-instructional-fellowships/bass-digital-education-fellowships" class="copy-link">Bass Digital Education Fellowship</a> at Duke University, Christina was able to convert and expand her prior experience and tutorial work into a fuller course.</p>
<p>To reflect the origins and funding from Duke, you will note that the fonts and color scheme adhere to the <a href="https://brand.duke.edu/" class="copy-link">Duke University brand guide</a> while following a basic tutorial-like design (cc: <a href="https://getbootstrap.com/docs/4.5/getting-started/introduction/" class="copy-link">Bootstrap</a>).</p>
</div>
</section>
<section>
<h2 class="pad1">About Christina</h2>
<div>
<p><a href="https://christinabejjani.github.io" class="copy-link">Christina</a> created this website and course in her fifth-year as a PhD student. To find out more about her, please visit her website.</p>
<p>You can also see all the <a href="https://github.com/socsciprogramming/socsciprogramming.github.io" class="copy-link">contributors on the Github page</a>.</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>