Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 117 lines (106 sloc) 5.817 kB
bcc1b9d @stephjang refactored telling_time_interactive, extracted analogClock to time.js…
stephjang authored
1 <!DOCTYPE html>
cee9b1c @petercollingridge Rename files and move create interactiveAnalogueClock function
petercollingridge authored
2 <html data-require="math math-format graphie interactive time">
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored
3 <head>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
5 <title>Telling time 2</title>
ac1415e @spicyj Use requirejs for module loading
spicyj authored
6 <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
bcc1b9d @stephjang refactored telling_time_interactive, extracted analogClock to time.js…
stephjang authored
7 </head>
8 <body>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
9 <div class="exercise">
cee9b1c @petercollingridge Rename files and move create interactiveAnalogueClock function
petercollingridge authored
10 <div class="problems">
11 <div id="set-hands">
12 <div class="vars">
13 <div data-ensure="!(HOUR === 1 &amp;&amp; MINUTE === 0)">
14 <var id="HOUR">randRange(1, 12)</var>
15 <var id="MINUTE_INCREMENT">randFromArray([15, 20])</var>
16 <var id="MINUTE">randRange(0, (60 / MINUTE_INCREMENT) - 1) * MINUTE_INCREMENT</var>
17 </div>
18 <var id="MINUTE_IS_ZERO">MINUTE === 0</var>
19 <var id="NICE_MINUTE">MINUTE &gt; 5 ? MINUTE : "0" + MINUTE</var>
20 <var id="TIME">HOUR + ":" + NICE_MINUTE</var>
21 </div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
22
cee9b1c @petercollingridge Rename files and move create interactiveAnalogueClock function
petercollingridge authored
23 <p class="question">Set the clock to <var>TIME</var>.</p>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
24
cee9b1c @petercollingridge Rename files and move create interactiveAnalogueClock function
petercollingridge authored
25 <div class="problem">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
26
cee9b1c @petercollingridge Rename files and move create interactiveAnalogueClock function
petercollingridge authored
27 <div class="graphie" id="clock">
28 init({ range: [[-4.5, 4.5], [-4.5, 4.5]], scale: 30 });
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
29
cee9b1c @petercollingridge Rename files and move create interactiveAnalogueClock function
petercollingridge authored
30 clock = addInteractiveAnalogClock({
31 radius: 3.75,
32 minuteTicks: 60,
33 minuteIncrement: MINUTE_INCREMENT
34 });
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
35 </div>
36 </div>
37
cee9b1c @petercollingridge Rename files and move create interactiveAnalogueClock function
petercollingridge authored
38 <div class="solution" data-type="custom">
39 <div class="instruction">
40 Drag the two hands so the clock reads <var>HOUR</var>:<var>NICE_MINUTE</var>.
41 </div>
42 <div class="guess">clock.getHandPositions()</div>
43 <div class="validator-function">
44 return clock.validate(guess, MINUTE, HOUR);
45 </div>
46 <div class="show-guess">
47 clock.minutePoint.moveTo(guess[0][0], guess[0][1], true);
48 clock.hourPoint.moveTo(guess[1][0], guess[1][1], true);
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
49 </div>
50 </div>
51
cee9b1c @petercollingridge Rename files and move create interactiveAnalogueClock function
petercollingridge authored
52 <div class="hints">
53 <p>
54 The <span class="hint_blue" style="font-weight: bold">hour</span> hand is the short
55 <span class="hint_blue" style="font-weight: bold">blue</span> bar and the
56 <span class="hint_red" style="font-weight: bold">minute</span> hand is the long
57 <span class="hint_red" style="font-weight: bold">red</span> bar.
58 </p>
59
60 <p>
61 The number after the <code>\Large{:}</code> symbol represents the number of minutes past
62 the hour. So <code><var>TIME</var></code> represents <code>\red{<var>MINUTE</var>}</code>
63 minutes past hour <code>\blue{<var>HOUR</var>}</code>.
64 </p>
65
66 <p data-if="MINUTE_IS_ZERO">
67 Since it's <code><var>MINUTE</var></code> minutes past the hour, the minute hand should
68 be at the mark numbered <code>\red{12}</code>.
69 </p>
70 <p data-else>
71 Since it's <code><var>MINUTE</var></code> minutes past the hour, and there are <code>5</code> minutes
72 per tick mark, the minute hand should be at the mark numbered
73 <code>\red{<var>fraction(MINUTE, 5)</var> = <var>MINUTE/5</var>}</code>
74 </p>
75
76 <div>
77 <p data-if="MINUTE_IS_ZERO">
78 Since it's <code>0</code> minutes past the hour, the hour hand should be right on the
79 <code>\blue{<var>HOUR</var>}</code> hour mark.
80 </p>
81 <div data-else="" data-unwrap="">
82 <p>
83 Since it's <code><var>MINUTE</var></code> minutes past the hour, the hour hand will have traveled
84 <code>\blue{<var>fraction(MINUTE, 60)</var> = <var>fraction(MINUTE, 60, false, true)</var>}</code>
85 of the way to the <code><var>HOUR + 1 === 13 ? 1 : HOUR + 1</var></code> hour mark.
86 </p>
87 <p data-if="MINUTE === 20">
88 So the hour hand needs to be placed just before the second small tick mark past the
89 <code>\blue{<var>HOUR</var>}</code> hour mark.
90 </p>
91 <p data-else-if="MINUTE === 40">
92 So the hour hand needs to be placed just past the third small tick mark past the
93 <code>\blue{<var>HOUR</var>}</code> hour mark.
94 </p>
95 <p data-else-if="MINUTE === 15">
96 So the hour hand needs to be placed just past the first small tick mark past the
97 <code>\blue{<var>HOUR</var>}</code> hour mark.
98 </p>
99 <p data-else-if="MINUTE === 30">
100 So the hour hand needs to be placed between the second and third small tick mark past the
101 <code>\blue{<var>HOUR</var>}</code> hour mark.
102 </p>
103 <p data-else>
104 So the hour hand needs to be placed just before the fourth small tick mark past the
105 <code>\blue{<var>HOUR</var>}</code> hour mark.
106 </p>
107 </div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
108 </div>
cee9b1c @petercollingridge Rename files and move create interactiveAnalogueClock function
petercollingridge authored
109
110 <div class="graphie" data-update="clock">clock.showCorrectTime(MINUTE, HOUR);</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
111 </div>
112 </div>
113 </div>
cee9b1c @petercollingridge Rename files and move create interactiveAnalogueClock function
petercollingridge authored
114 </div>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored
115 </body>
116 </html>
Something went wrong with that request. Please try again.