Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 352 lines (303 sloc) 11.102 kb
bcc1b9d Steph Jang refactored telling_time_interactive, extracted analogClock to time.js, a...
stephjang authored
1 <!DOCTYPE html>
7ef3280 Steph Jang used <code> tags for hour and minute numbers in hints
stephjang authored
2 <html data-require="math math-format graphie time interactive angles word-problems">
bcc1b9d Steph Jang refactored telling_time_interactive, extracted analogClock to time.js, a...
stephjang authored
3 <head>
65eec09 Ben Alpert Content-Type meta tag for libxml2 compatibility
spicyj authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
64c5817 Ben Eater Add rounding to radial snap for telling_time_2
beneater authored
5 <title>Telling time 2</title>
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
6 <script src="../khan-exercise.js"></script>
bcc1b9d Steph Jang refactored telling_time_interactive, extracted analogClock to time.js, a...
stephjang authored
7 </head>
8 <body>
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
9 <div class="exercise">
10 <div class="problems">
11 <div id="set-hands" data-weight="3">
12
13 <div class="vars">
e6f93ca Steph Jang wrapped all involved varialbes wiables within data-ensure div
stephjang authored
14 <div data-ensure="!( HOUR === 1 && MINUTE === 0 )">
64c5817 Ben Eater Add rounding to radial snap for telling_time_2
beneater authored
15 <var id="HOUR">randRange( 1, 12 )</var>
16 <var id="MINUTE_INCREMENT">15</var>
17 <var id="MINUTE">randRange( 0, (60 / MINUTE_INCREMENT) - 1 ) * MINUTE_INCREMENT</var>
e6f93ca Steph Jang wrapped all involved varialbes wiables within data-ensure div
stephjang authored
18 </div>
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
19 <var id="MINUTE_IS_ZERO">MINUTE === 0</var>
20 <var id="NICE_MINUTE"> MINUTE &gt; 5 ? MINUTE : "0" + MINUTE</var>
21 <var id="TIME">HOUR + ":" + NICE_MINUTE</var>
22 </div>
23
9556714 Steph Jang removed confusing hint and color-coded 'hour' and 'minute' in question
stephjang authored
24 <p class="question">Set the clock to <var>TIME</var>. The <span class="hint_blue" style="font-weight: bold">hour</span> hand is <span class="hint_blue" style="font-weight: bold">blue</span> and the <span class="hint_orange" style="font-weight: bold">minute</span> hand is <span class="hint_orange" style="font-weight: bold">orange</span>.</p>
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
25
26 <div class="problem">
27
28 <div class="graphie" id="clock">
29 init({ range: [ [-4, 4 ], [ -4, 4 ] ], scale: 45 });
30
31 var clockRadius = 3.75;
32 var minuteSnapPoints = 12;
33 var hourSnapPoints = 12 * 60 / MINUTE_INCREMENT;
34
35 var outerPointRadius = clockRadius * 1.01;
36 var minuteRadius = clockRadius * 0.6;
37 var hourRadius = clockRadius * 0.45;
38
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
39 minuteStartAngle = 90;
40 hourStartAngle = 60;
2edeacb Steph Jang if hands have not been moved, return empty string
stephjang authored
41
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
42 minuteSnapDegrees = 360 / minuteSnapPoints;
43 hourSnapDegrees = 360 / hourSnapPoints;
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
44
5226cf9 Ben Eater Fewer commas and more semicolons to placate IE
beneater authored
45 var clock = addAnalogClock( { radius: clockRadius, minuteTicks: hourSnapPoints } );
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
46 clock.draw();
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
47
48 addMouseLayer();
49
50 function movePartnerPoint( options ) {
51
52 var x = options.x;
53 var y = options.y;
54 var point = options.point;
55 var outerPoint = options.outerPoint;
56 var isOuterPoint = options.isOuterPoint;
57
58 var ratio = outerPoint.constraints.fixedDistance.dist / point.constraints.fixedDistance.dist;
59
60 if (isOuterPoint) {
61 ratio = 1 / ratio;
62 point.setCoord( [ x * ratio , y * ratio ] );
63 outerPoint.setCoord( [ x, y ] );
64 } else {
65 point.setCoord( [ x, y ] );
66 outerPoint.setCoord( [ x * ratio, y * ratio ] );
67 }
68
69 point.updateLineEnds();
70 return true;
71 }
72
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
73 minutePoint = addMovablePoint({
74 coord: polar( minuteRadius, minuteStartAngle ),
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
75 constraints: {
76 fixedDistance: {
77 dist: minuteRadius,
78 point: [ 0, 0 ],
79 snapPoints: 12
80 }
81 },
82 onMove: function( x, y ) {
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
83 return movePartnerPoint( { x: x, y: y, point: this, outerPoint: outerMinutePoint, isOuterPoint: false } );
2edeacb Steph Jang if hands have not been moved, return empty string
stephjang authored
84 },
85 normalStyle: {
86 fill: ORANGE,
87 stroke: ORANGE
88 },
89 highlightStyle: {
90 fill: ORANGE,
91 stroke: ORANGE
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
92 }
93 });
94
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
95 outerMinutePoint = addMovablePoint({
96 coord: polar( outerPointRadius, minuteStartAngle ),
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
97 constraints: {
98 fixedDistance: {
99 dist: outerPointRadius,
100 point: [ 0, 0 ],
101 snapPoints: 12
102 }
103 },
104 onMove: function( x, y ) {
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
105 return movePartnerPoint( { x: x, y: y, point: minutePoint, outerPoint: this, isOuterPoint: true } );
2edeacb Steph Jang if hands have not been moved, return empty string
stephjang authored
106 },
107 normalStyle: {
108 fill: ORANGE,
109 stroke: ORANGE
110 },
111 highlightStyle: {
112 fill: ORANGE,
113 stroke: ORANGE
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
114 }
5226cf9 Ben Eater Fewer commas and more semicolons to placate IE
beneater authored
115 });
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
116
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
117 hourPoint = addMovablePoint({
118 coord: polar( hourRadius, hourStartAngle ),
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
119 constraints: {
120 fixedDistance: {
121 dist: hourRadius,
122 point: [ 0, 0 ],
123 snapPoints: hourSnapPoints
124 }
125 },
126 onMove: function( x, y ) {
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
127 return movePartnerPoint( { x: x, y: y, point: this, outerPoint: outerHourPoint, isOuterPoint: false } );
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
128 },
129 normalStyle: {
3229980 Steph Jang Fixed little bugs or formatting in telling_time_interactive.html
stephjang authored
130 fill: BLUE,
131 stroke: BLUE
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
132 },
133 highlightStyle: {
3229980 Steph Jang Fixed little bugs or formatting in telling_time_interactive.html
stephjang authored
134 fill: BLUE,
135 stroke: BLUE
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
136 }
137 });
138
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
139 outerHourPoint = addMovablePoint({
140 coord: polar( outerPointRadius, hourStartAngle ),
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
141 constraints: {
142 fixedDistance: {
143 dist: outerPointRadius,
144 point: [ 0, 0 ],
145 snapPoints: hourSnapPoints
146 }
147 },
148 onMove: function( x, y ) {
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
149 return movePartnerPoint( { x: x, y: y, point: hourPoint, outerPoint: this, isOuterPoint: true } );
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
150 },
151 normalStyle: {
3229980 Steph Jang Fixed little bugs or formatting in telling_time_interactive.html
stephjang authored
152 fill: BLUE,
153 stroke: BLUE
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
154 },
155 highlightStyle: {
3229980 Steph Jang Fixed little bugs or formatting in telling_time_interactive.html
stephjang authored
156 fill: BLUE,
157 stroke: BLUE
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
158 }
5226cf9 Ben Eater Fewer commas and more semicolons to placate IE
beneater authored
159 });
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
160
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
161 minuteHand = addMovableLineSegment({
162 pointA: minutePoint,
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
163 coordZ: [ 0, 0 ],
164 fixed: true,
165 normalStyle: {
3229980 Steph Jang Fixed little bugs or formatting in telling_time_interactive.html
stephjang authored
166 stroke: ORANGE,
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
167 "stroke-width": 10
5226cf9 Ben Eater Fewer commas and more semicolons to placate IE
beneater authored
168 }
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
169 });
170
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
171 hourHand = addMovableLineSegment({
172 pointA: hourPoint,
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
173 coordZ: [ 0, 0 ],
174 fixed: true,
175 normalStyle: {
3229980 Steph Jang Fixed little bugs or formatting in telling_time_interactive.html
stephjang authored
176 stroke: BLUE,
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
177 "stroke-width": 10
5226cf9 Ben Eater Fewer commas and more semicolons to placate IE
beneater authored
178 }
65eec09 Ben Alpert Content-Type meta tag for libxml2 compatibility
spicyj authored
179 });
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
180
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
181 centerPoint = addMovablePoint({
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
182 coord: [ 0, 0 ],
183 constraints: {
184 fixed: true
185 },
186 normalStyle: {
187 fill: "#fff",
188 stroke: "#000",
189 "stroke-width": 2
190 }
191 });
192
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
193 correctMinuteAngle = timeToDegrees( MINUTE );
194 correctHourAngle = timeToDegrees( 5 * (HOUR + MINUTE/60) );
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
195
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
196 correctMinuteAngle = roundToNearest( minuteSnapDegrees, correctMinuteAngle );
197 correctHourAngle = roundToNearest( hourSnapDegrees, correctHourAngle );
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
198 </div>
199 </div>
200
201 <div class="solution" data-type="custom">
202 <div class="instruction">
203 Drag the two hands so the clock reads <var>HOUR</var>:<var>NICE_MINUTE</var>.
204 </div>
205 <div class="guess">
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
206 [ minutePoint.coord, hourPoint.coord ]
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
207 </div>
208 <div class="validator-function">
209
60fb7b7 Steph Jang refactored coordToDegrees to crees to cartToPolar and moved to graphie.j...
stephjang authored
210 var minuteAngle = cartToPolar( guess[0] )[1];
211 var hourAngle = cartToPolar( guess[1] )[1];
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
212
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
213 minuteAngle = roundToNearest( minuteSnapDegrees, minuteAngle );
214 hourAngle = roundToNearest( hourSnapDegrees, hourAngle );
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
215
2edeacb Steph Jang if hands have not been moved, return empty string
stephjang authored
216 // if hands have not been moved, return `""`
151ccdd fixed ==== typo in telling_time_interactive.html; check for false values...
Stephanie H. Chang authored
217 if ( minuteAngle === minuteStartAngle &amp;&amp; hourAngle === hourStartAngle) {
2edeacb Steph Jang if hands have not been moved, return empty string
stephjang authored
218 return "";
219 }
220
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
221 return (minuteAngle === correctMinuteAngle) &amp;&amp; (hourAngle === correctHourAngle);
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
222
223 </div>
224 <div class="show-guess">
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
225 minutePoint.moveTo( guess[0][0], guess[0][1], true );
226 hourPoint.moveTo( guess[1][0], guess[1][1], true );
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
227 </div>
228 </div>
229
230 <div class="hints">
231
7ef3280 Steph Jang used <code> tags for hour and minute numbers in hints
stephjang authored
232 <p>The number after the <code>\Large{:}</code> symbol represents the number of minutes past the hour. So <code><var>TIME</var></code> represents <code><var>MINUTE</var></code> minutes past hour <code><var>HOUR</var></code>.</p>
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
233
d1320f6 Steph Jang clarified hints and color-co added color coding
stephjang authored
234 <p>First, let's set the <span class="hint_orange" style="font-weight: bold">minute</span> hand.</p>
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
235
236 <div>
7ef3280 Steph Jang used <code> tags for hour and minute numbers in hints
stephjang authored
237 <p>Each long tick mark is an increment of 5 minutes, because 60 minutes / 12 tick marks = 5 minutes per tick mark.</p>
c2aec50 Scott Menke minute hand points to 12 not 0
smenks13 authored
238 <p>Since we are <code><var>MINUTE</var></code> minutes past the hour, <span data-if="MINUTE_IS_ZERO">the minute hand should be at the mark numbered <code class="hint_orange">12</code>, which is the first tick mark on the clock and represents <code>0</code> minutes past the hour</span><span data-else>and there are 5 minutes per tick mark, the minute hand should be at the mark numbered <code class="hint_orange"><var>fraction(MINUTE, 5)</var> = <var>MINUTE/5</var></code></span>.</p>
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
239 </div>
240
d1320f6 Steph Jang clarified hints and color-co added color coding
stephjang authored
241 <p>Next, let's set the <span class="hint_blue" style="font-weight: bold">hour</span> hand.</p>
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
242
243 <div>
244 <p>The 12 long tick marks correspond to the hours in the day (assuming AM/PM time).</p>
65eec09 Ben Alpert Content-Type meta tag for libxml2 compatibility
spicyj authored
245 <p>If it is <code>0</code> minutes, the hour hand belongs directly on the corresponding hour mark. However, for any other number of minutes, the hour hand should be proportionally past the hour mark.</p>
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
246 </div>
247
248 <div>
249 <p data-if="MINUTE_IS_ZERO">
7ef3280 Steph Jang used <code> tags for hour and minute numbers in hints
stephjang authored
250 Since it's <code><var>HOUR</var></code> hour<code><var>plural(HOUR)</var></code> and <code>0</code> minutes, the hour hand should be right on the <code class="hint_blue"><var>HOUR</var></code> hour mark.
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
251 </p>
252 <p data-else>
89e488a Steph Jang removed unnecessary code tag in hint
stephjang authored
253 Since it's <code><var>HOUR</var></code> hour<var>plural(HOUR)</var> and <code><var>MINUTE</var></code> minutes, the hour hand should be <code class="hint_blue"><var>fraction(MINUTE, 60)</var> = <var>fraction(MINUTE, 60, false, true)</var></code> of the way past the <code class="hint_blue"><var>HOUR</var></code> hour mark.
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
254 </p>
255 </div>
256
257 <div class="graphie" data-update="clock">
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
258 var minuteRadius = minutePoint.constraints.fixedDistance.dist;
259 var hourRadius = hourPoint.constraints.fixedDistance.dist;
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
260
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
261 var minuteCoord = polar( minuteRadius, correctMinuteAngle );
262 var hourCoord = polar( hourRadius, correctHourAngle );
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
263
264 var dotOpacity = 0.4;
265 var handOpacity = 0.3;
266
267 addMovableLineSegment({
268 coordA: minuteCoord,
269 coordZ: [ 0, 0 ],
270 fixed: true,
271 normalStyle: {
3229980 Steph Jang Fixed little bugs or formatting in telling_time_interactive.html
stephjang authored
272 stroke: ORANGE,
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
273 "stroke-width": 10,
274 "stroke-dasharray": ".",
275 "stroke-linecap": "round",
276 "stroke-opacity": dotOpacity
277 },
278 });
279
280 addMovableLineSegment({
281 coordA: minuteCoord,
282 coordZ: [ 0, 0 ],
283 fixed: true,
284 normalStyle: {
3229980 Steph Jang Fixed little bugs or formatting in telling_time_interactive.html
stephjang authored
285 stroke: ORANGE,
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
286 "stroke-width": 10,
287 "stroke-linecap": "round",
288 "stroke-opacity": handOpacity
289 },
290 });
291
292 addMovableLineSegment({
293 coordA: hourCoord,
294 coordZ: [ 0, 0 ],
295 fixed: true,
296 normalStyle: {
3229980 Steph Jang Fixed little bugs or formatting in telling_time_interactive.html
stephjang authored
297 stroke: BLUE,
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
298 "stroke-width": 10,
299 "stroke-dasharray": ".",
300 "stroke-linecap": "round",
301 "stroke-opacity": dotOpacity
302 },
303 });
304
305 addMovableLineSegment({
306 coordA: hourCoord,
307 coordZ: [ 0, 0 ],
308 fixed: true,
309 normalStyle: {
3229980 Steph Jang Fixed little bugs or formatting in telling_time_interactive.html
stephjang authored
310 stroke: BLUE,
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
311 "stroke-width": 10,
312 "stroke-linecap": "round",
313 "stroke-opacity": handOpacity
314 },
315 });
316
317 // for some reason this doesn't work, so for now, create another center point
b9fca4c Steph Jang refactored telling_time and telling_time_0.5 to use time.js & removed gr...
stephjang authored
318 // centerPoint.toFront();
c002c0c Steph Jang converted spaces to tabs in telling_time_interactive.html
stephjang authored
319 addMovablePoint({
320 coord: [ 0, 0 ],
321 constraints: {
322 fixed: true
323 },
324 normalStyle: {
325 fill: "#fff",
326 stroke: "#000",
327 "stroke-dasharray": "",
328 "stroke-width": 2,
329 "stroke-opacity": 1
330 }
331 });
332 </div>
333
334 </div>
335 </div>
336
337 <div id="set-hands-20-minutes" data-type="set-hands" data-weight="2">
338 <div class="vars">
339 <var id="MINUTE_INCREMENT">20</var>
340 </div>
341 </div>
342
343 <div id="set-hands-30-minutes" data-type="set-hands" data-weight="2">
344 <div class="vars">
345 <var id="MINUTE_INCREMENT">30</var>
346 </div>
347 </div>
348 </div>
349 </div>
bcc1b9d Steph Jang refactored telling_time_interactive, extracted analogClock to time.js, a...
stephjang authored
350 </body>
65eec09 Ben Alpert Content-Type meta tag for libxml2 compatibility
spicyj authored
351 </html>
Something went wrong with that request. Please try again.