This repository has been archived by the owner on May 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 863
/
multiplication_0.5.html
122 lines (117 loc) · 5.62 KB
/
multiplication_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
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
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Multiplying 1-digit numbers</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="missing-C">
<div class="vars" data-ensure="A !== 0 || B !== 0">
<var id="A">randRange(0, 10)</var>
<var id="B">randRange(0, 10)</var>
<var id="C">A * B</var>
</div>
<div class="question">
<code>\Huge\blue{<var>A</var>}\times\green{<var>B</var>}=\pink?</code>
</div>
<div class="solution" data-forms="integer"><var>C</var></div>
<div class="hints">
<div data-if="A > 1 && B > 1" data-unwrap="">
<div>
<p>
Let's picture this problem by drawing <code>\green{<var>B</var>}</code> rows of <code>\blue{<var>A</var>}</code> circles.
</p>
<div class="graphie">
init({
range: [[-1, 12], [-2.5, B - 2.5]],
scale: [45, 45]
});
for (var i = 0; i < B; i++) {
drawRow(A, B - 3 - i, BLACK, A * i + 1);
}
</div>
<p>
How many circles are there?
</p>
</div>
</div>
<div data-else-if="A === 0 || B === 0">
<div data-if="A === 0">
If we have <code>\green{<var>B</var>}</code> zeros, how much do we have in total?
</div>
<div data-else="">
If we have <code>\blue{<var>A</var>}</code> zeros, how much do we have in total?
</div>
</div>
<div data-else="">
<div data-if="A === 1">
If we have one <code>\green{<var>B</var>}</code>, how much do we have in total?
</div>
<div data-else="">
If we have one <code>\blue{<var>A</var>}</code>, how much do we have in total?
</div>
</div>
<div>
<code>\Huge\blue{<var>A</var>}\times\green{<var>B</var>}=\pink{<var>C</var>}</code>
</div>
</div>
</div>
<div id="missing-B">
<div class="vars">
<var id="A">randRange(1, 10)</var>
<var id="B">randRange(0, 10)</var>
<var id="C">A * B</var>
<var id="ORDER">rand(2)</var>
</div>
<div class="question">
<div data-if="ORDER" data-unwrap="">
<code>\Huge\blue{<var>A</var>}\times\green{?}=\pink{<var>C</var>}</code>
</div>
<div data-else="">
<code>\Huge\green{?}\times\blue{<var>A</var>}=\pink{<var>C</var>}</code>
</div>
</div>
<div class="solution" data-forms="integer"><var>B</var></div>
<div class="hints">
<div data-if="A > 1 && B > 1" data-unwrap="">
<div>
<p>
How many rows of <code>\blue{<var>A</var>}</code> circles do we need to make <code>\pink{<var>C</var>}</code> total circles?
</p>
<div class="graphie">
init({
range: [[-1, 12], [-2.5, B - 2.5]],
scale: [45, 45]
});
for (var i = 0; i < B; i++) {
drawRow(A, B - 3 - i, BLACK, A * i + 1);
}
</div>
<p>
We need <code>\green{<var>B</var>}</code> rows of <code>\blue{<var>A</var>}</code> circles to make <code>\pink{<var>C</var>}</code> total circles.
</p>
</div>
</div>
<div data-else-if="B === 0">
What times <code>\blue{<var>A</var>}</code> equals zero?
</div>
<div data-else="">
What can we multiply by <code>\blue{<var>A</var>}</code> to get <code>\pink{<var>C</var>}</code>?
</div>
<div>
<div data-if="ORDER" data-unwrap="">
<code>\Huge\blue{<var>A</var>}\times\green{<var>B</var>}=\pink{<var>C</var>}</code>
</div>
<div data-else="">
<code>\Huge\green{<var>B</var>}\times\blue{<var>A</var>}=\pink{<var>C</var>}</code>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>