This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
telling_time_0.5.html
83 lines (80 loc) · 4.39 KB
/
telling_time_0.5.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
<!DOCTYPE html>
<html data-require="math math-format graphie time word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Telling time 0.5</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="HOUR">randRange( 1, 12 )</var>
<var id="MINUTE">randRange( 0, 3 ) * 15 </var>
<var id="NICE_MINUTE"> MINUTE > 5 ? MINUTE : "0" + "" + MINUTE</var>
<var id="AM_PM">icu.getDateFormatSymbols().am_pm[HOUR >= 7 ? 0 : 1]</var>
</div>
<div class="problems">
<div id="analog">
<div class="question">
<p>What time is it?</p>
<div class="graphie" id="pie" style="float: left;">
init({ range: [ [-4, 4 ], [ -4, 4 ] ], scale: 25 });
clock = addAnalogClock({ hour: HOUR, minute: MINUTE, minuteTicks: 0 });
clock.draw();
</div>
<div class="graphie" id="digital" style="float: left;">
init({ range: [ [-5, 5], [-3, 3] ], scale: 25 });
</div>
<div style="clear: both;"></div>
</div>
<div class="solution" data-type="multiple">
<p class="short">The time is:<br><span class="sol short30" data-forms="integer"><var>HOUR</var></span> : <span class="sol short30" data-forms="integer"><var>NICE_MINUTE</var></span> <var>AM_PM</var></p>
<p class="example">a 12-hour time in hours and minutes</p>
</div>
<div class="hints">
<div>
<div class="graphie" data-update="digital">
path([ [-3, -1], [3, -1], [3, 1], [-3, 1], [-3, -1] ]);
graph.time = label( [0, -0.1],
"\\Huge{\\phantom{00}:\\phantom{00}}",
"center" );
</div>
<p>The small hand is for the hour, and the big hand is for the minutes.</p>
</div>
<div>
<p data-if="MINUTE === 0"> The hour hand is pointing at <code><var>HOUR</var></code>, so the hour is <code><var>HOUR</var></code>.</p>
<p data-else-if="MINUTE > 10 && MINUTE < 45">The hour hand is between <code><var>HOUR</var></code> and <code><var>HOUR + 1 === 13 ? 1 : HOUR + 1</var></code>, so the hour is <code><var>HOUR</var></code>.</p>
<p data-else="">The hour hand is close to but hasn't passed <code><var>HOUR + 1 === 13 ? 1 : HOUR + 1</var></code>, so the hour is still <code><var>HOUR</var></code>.</p>
<div class="graphie" data-update="digital">
graph.time.remove();
var padding = HOUR < 10 ? "\\phantom{0}" : "";
graph.time = label([0, -0.1],
"\\Huge{" + padding + HOUR + ":\\phantom{00}}",
"center" );
</div>
</div>
<div>
<p>The minute hand starts pointing straight up for <code>0</code> minutes, and makes a complete circle in <code>1</code> hour.</p>
<p>For each quarter of the circle that the minute hand passes, add <code>15</code> minutes.</p>
</div>
<div>
<p data-if="isSingular(MINUTE / 15)">
The minute hand has passed <var>MINUTE / 15</var> fourth of a circle, which represents <code><var>MINUTE</var></code> minutes.
</p><p data-else="">
The minute hand has passed <var>MINUTE / 15</var> fourths of a circle, which represents <code><var>MINUTE</var></code> minutes.
</p>
<div class="graphie" data-update="digital">
graph.time.remove();
var padding = MINUTE < 10 ? "0" : "";
graph.time = label([0, -0.1],
"\\Huge{" + HOUR + ":" + padding + MINUTE + "}",
"center" );
</div>
</div>
<p>The time is <code><var>HOUR</var></code>:<code><var>NICE_MINUTE</var></code>.</p>
</div>
</div>
</div>
</div>
</body>
</html>