forked from gureckis/collecting_behavioral_data_online
-
Notifications
You must be signed in to change notification settings - Fork 0
/
lecture5.html
175 lines (131 loc) · 5.85 KB
/
lecture5.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="behavioral data collection, mechanical turk, psychology">
<meta name="author" content="todd m. gureckis">
<title>collecting behavioral data online - todd gureckis
(Lecture 5)
</title>
<!-- JQuery and D3.js -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- hit the Mint -->
<script src="http://gureckislab.org/mint/?js" type="text/javascript"></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/cdbo.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<ol class="breadcrumb">
<li><h4><a href="http://gureckislab.org">gureckislab</a></h4></li>
<li><h4><a href="./">collecting behavioral data online</a></h4></li>
<li class="active">Lecture 5</li>
</ol>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h2>Lecture 5:</h2><h1>Drawing things to the browser window, manipulating DOM</h1>
</div>
<center>
<a class="btn btn-default btn-md" href="slides.html?lecture=5">
<span class="glyphicon glyphicon-play-circle"></span> Lecture 5 Slide Deck
</a>
</center>
<br><br>
<p>
This week (and partly next week) we are going to
do an in-class exercise on programming in the browser, manipulating
the DOM, and adding buttons which accept user interaction.
</p>
<hr>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Video 5.1</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="span6">
<div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">
<p>
Drawing and animating in the browser.
</p>
<iframe src="//player.vimeo.com/video/88841462" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<hr>
<h3>Assignments</h3>
In class, and in the video, we step through these goals:
<ol>
<li>Draw a stimulus on the screen (e.g., a circle)</li>
<li>Add a button to advance to the next trial</li>
<li>Display a sequence of trials</li>
</ol>
Please try to follow along with these steps to make your own basic experiment.
<div class="media">
<a class="pull-left" href="files/custom.js">
<span class="glyphicon glyphicon-bookmark"></span>
</a>
<div class="media-body">
This is a direct link to the file I created in the video (<a href="files/custom.js">custom.js</a>)
</div>
</div>
<hr>
<h3>Assigned Readings</h3>
<div class="media">
<a class="pull-left" href="http://alignedleft.com/tutorials/d3/fundamentals">
<span class="glyphicon glyphicon-bookmark"></span>
</a>
<div class="media-body">
Scott Murray's <a href="http://alignedleft.com/tutorials/d3/fundamentals">Fundamentals of d3.js</a>
</div>
</div>
<div class="media">
<a class="pull-left" href="http://alignedleft.com/tutorials/d3/setup">
<span class="glyphicon glyphicon-bookmark"></span>
</a>
<div class="media-body">
Scott Murray's <a href="http://alignedleft.com/tutorials/d3/setup">Setup of d3.js</a>
</div>
</div>
<div class="media">
<a class="pull-left" href="http://alignedleft.com/tutorials/d3/adding-elements">
<span class="glyphicon glyphicon-bookmark"></span>
</a>
<div class="media-body">
Scott Murray's <a href="http://alignedleft.com/tutorials/d3/adding-elements">Adding element with d3.js</a>
</div>
</div>
<div class="media">
<a class="pull-left" href="http://alignedleft.com/tutorials/d3/chaining-methods">
<span class="glyphicon glyphicon-bookmark"></span>
</a>
<div class="media-body">
Scott Murray's <a href="http://alignedleft.com/tutorials/d3/chaining-methods">Chaining methods d3.js</a>
</div>
</div>
<br>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">(c) 2014 to <a href="http://gureckislab.org/~gureckis">tmg</a>. <a href="http://getbootstrap.com/">bootstrap</a>ped.</p>
</div>
</div>
</body>
</html>