forked from pnb3ee3/jspyschIntroduction
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
315 lines (285 loc) · 11 KB
/
index.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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<img src="examples/assets/jspsych.png" alt="jspsych logo" style="height: 200px; margin: 0 auto 4rem auto; background: transparent;">
<h3>Introduction to jspsych</h3>
<p><small>Shreshth Saxena</small></p>
</section>
<section>
<section><h3>Differences in offline vs. online experiment building</h3></section>
<section>
<div align="left"> Traditional in-lab experiments: </br>
<ul style="font-size: 30px;">
<li>Same hardware-software configuration for all participants</li>
<li>Local data storage and transmission</li>
<li>Extensive choice of programming languages</li>
</ul></div>
</section>
<section>
<div align="left"> Online experiments: </br>
<ul style="font-size: 30px;">
<li>Diverse configurations of hardware-software</li>
<li>Central data storage through a server</li>
<li>Use of web development technologies</li>
</ul></div>
</section>
</section>
<section>
<section data-auto-animate><h3>So why bother with online experiments?</h3></section>
<section data-auto-animate><h3>So why bother with online experiments?</h3>
</br>
<ul style="font-size: 30px;">
<li>Ecological and external validity</li>
<ul><li>Participation from diverse home environments</li></ul>
<li>Accessiblity</li>
<ul><li>Reach rare or specific sub-populations</li></ul>
<li>Efficiency</li>
<ul><li>Saves time and money for data collection</li></ul>
<li>Reproducibility</li>
<ul><li>Open web development</li></ul>
</ul>
</section>
<section data-auto-animate><h5>but also...</h5>
</br>
<ul style="font-size: 30px;">
<li>High statistical power and better generalizability of findings</li>
<li>Reduction of experimenter effects</li>
<li>Detectability of motivational confounding</li>
<li>Experimenting around the clock</li>
<li>Avoidance of organizational problems</li>
<li>Accessiblity to research</li>
</ul>
</section>
</section>
<section>
<section data-auto-animate><h3>Web Technologies</h3></section>
<section data-auto-animate><h3>Web Technologies</h3> </br>
<ul style="font-size: 30px;">
<li>HTML - Content</li>
<ul style="font-size: 20px;"><li>Structuring web documents and apps</li></ul>
<li>CSS - Appearance</li>
<ul style="font-size: 20px;"><li>Styling web documents and apps</li></ul>
<li>JavaScript - Interactivity</li>
<ul style="font-size: 20px;"><li>Web's native programming language</li></ul>
</ul>
</section>
<section>
<h3> Quick demo </h3>
<small>open <a href = "https://codepen.io/pen">https://codepen.io/pen/</a> in your browsers to follow</small></br>
<img src="examples/assets/QR-codepen.jpeg" alt="QR2" style="height: 500px; margin: 0 auto 4rem auto; background: transparent;"></br>
</section>
<section>
<h3> Recommended tutorial</h3><a href="https://developer.mozilla.org/en-US/docs/Web/Tutorials" style="font-size: 20px;"> https://developer.mozilla.org/en-US/docs/Web/Tutorials</a></br>
<img src="examples/assets/QR-moztutorial.jpeg" alt="QR1" style="height: 500px; margin: 0 auto 4rem auto; background: transparent;"></br>
</section>
</section>
<section>
<section data-auto-animate>
<h3>Tools for online experiments</h3>
</section>
<section data-auto-animate>
<h3>Tools for online experiments</h3>
<img src="examples/assets/online-tools.jpg" alt="QR1" style="height: 400px; margin: 0 auto 4rem auto; background: transparent;">
</section>
</section>
<section>
<section><h3>Let's Code</h3></section>
<section data-auto-animate>
<h2 data-id="code-title">Classic HTML tree</h2>
<pre data-id="code-animation"><code class="hljs html" data-trim data-line-numbers>
<html>
<head>
<title>...</title>
</head>
<body>
<script>
...
</script>
</body>
</html>
</code></pre>
</section>
<section data-auto-animate>
<h2 data-id="code-title">Give it a title</h2>
<pre data-id="code-animation"><code class="hljs html" data-trim data-line-numbers="3">
<html>
<head>
<title>Hello world</title>
</head>
<body>
<script>
...
</script>
</body>
</html>
</code></pre>
</section>
<section data-auto-animate>
<h2 data-id="code-title">import jsPsych</h2>
<pre data-id="code-animation"><code class="hljs html" data-trim data-line-numbers="4,5">
<html>
<head>
<title>Hello world</title>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
</head>
<body>
<script>
...
</script>
</body>
</html>
</code></pre>
</section>
<section data-auto-animate>
<h2 data-id="code-title">Easy stylesheet import</h2>
<pre data-id="code-animation"><code class="hljs html" data-trim data-line-numbers="6">
<html>
<head>
<title>Hello world</title>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
...
</script>
</body>
</html>
</code></pre>
</section>
<section data-auto-animate>
<h2 data-id="code-title">Init jsPsych</h2>
<pre data-id="code-animation"><code class="hljs html JavaScript" data-trim data-line-numbers="10">
<html>
<head>
<title>Hello world</title>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
const jsPsych = initJsPsych();
</script>
</body>
</html>
</code></pre>
</section>
<section data-auto-animate>
<h2 data-id="code-title">Create a trial</h2>
<pre data-id="code-animation"><code class="hljs html JavaScript" data-trim data-line-numbers="12-15">
<html>
<head>
<title>Hello world</title>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
const jsPsych = initJsPsych();
const hello_trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Hello world!'
}
</script>
</body>
</html>
</code></pre>
</section>
<section data-auto-animate>
<h2 data-id="code-title">Display stored data</h2>
<pre data-id="code-animation"><code class="hljs html JavaScript" data-trim data-line-numbers="10-13">
<html>
<head>
<title>Hello world</title>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
const jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData('json');
}
});
const hello_trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Hello world!'
}
</script>
</body>
</html>
</code></pre>
</section>
<section data-auto-animate>
<h2 data-id="code-title">Run the experiment</h2>
<pre data-id="code-animation"><code class="hljs html JavaScript" data-trim data-line-numbers="17">
<html>
<head>
<title>Hello world</title>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
const jsPsych = initJsPsych();
const hello_trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Hello world!'
}
jsPsych.run([hello_trial]);
</script>
</body>
</html>
</code></pre>
</section>
<section>Save the file with an ".html" extension and open in browser</section>
<section data-background-iframe="jspsych_helloworld.html" data-background="#dddddd" data-background-interactive></section>
</section>
<section>but what if we want to allow only spacebar for response?</section>
<section>
<section>Docs are your best friend! </br> <a href= "https://www.jspsych.org/"> jspsych.org </a> </section>
<section data-background-iframe="https://www.jspsych.org/7.3/" data-background-interactive></section>
</section>
<section style="text-align: left;">
<h1>Thank you</h1>
<p>
</p>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>