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
/
adding_and_subtracting_negative_numbers.html
119 lines (116 loc) · 5.29 KB
/
adding_and_subtracting_negative_numbers.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
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Adding and subtracting negative numbers</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="A">randRange( -10, 10 )</var>
<var id="B">randRange( -10, -1 )</var>
</div>
<div class="problems">
<div id="PLUS">
<div class="vars">
<var id="ANSWER">A + B</var>
<var id="PADDING">ceil( ( 10 - ANSWER + A ) / 2)</var>
<var id="START">A - PADDING</var>
<var id="END">ANSWER + PADDING</var>
<var id="REMOVE">[]</var>
</div>
<div class="question">
<div class="graphie" id="numbers">
init({
range: [ [0, 13], [-3, 1] ]
});
label( [0, 0],
"\\Huge{\\color{#6495ED}{" + A + "} + \\color{#28AE7B}{(" + B + ")} = {?}}",
"right" );
</div>
</div>
<div class="solution" data-forms="integer"><var>ANSWER</var></div>
<div class="hints">
<div class="graphie" data-update="numbers">
REMOVE = label( [0, -1],
"\\Huge{\\color{#6495ED}{" + A + "} \\color{#28AE7B}{" + B + "} = {?}}",
"right" );
</div>
<div class="graphie" data-update="numbers">
numberLine( START, END, 1, 1, -2 );
circle( [ 1 + A - START, -2 ], 5/40, { stroke: "none", fill: "#6495ed" } );
</div>
<div class="graphie" data-update="numbers">
style({
stroke: "#28AE7B",
arrows: "->"
}, function(){
path( [ [ 1 + A - START, -2 ], [ 1 + ANSWER - START, -2] ] );
});
</div>
<div class="graphie" data-update="numbers">
circle( [ 1 + ANSWER - START, -2 ], 5/40, { stroke: "none", fill: "#FF00AF" } );
</div>
<div class="graphie" data-update="numbers">
REMOVE.remove();
label( [0, -1],
"\\Huge{\\color{#6495ED}{" + A + "} \\color{#28AE7B}{" + B + "} = "
+ "\\color{#FF00AF}{" + ANSWER + "}}",
"right" );
</div>
</div>
</div>
<div id="MINUS">
<div class="vars">
<var id="ANSWER">A - B</var>
<var id="PADDING">ceil( ( 10 - ANSWER + A ) / 2)</var>
<var id="START">A - PADDING</var>
<var id="END">ANSWER + PADDING</var>
<var id="REMOVE">[]</var>
</div>
<div class="question">
<div class="graphie" id="numbers">
init({
range: [ [0, 13], [-3, 1] ]
});
label( [0, 0],
"\\Huge{\\color{#6495ED}{" + A + "} - \\color{#28AE7B}{(" + B + ")} = {?}}",
"right" );
</div>
</div>
<div class="solution" data-forms="integer"><var>ANSWER</var></div>
<div class="hints">
<div class="graphie" data-update="numbers">
REMOVE = label( [0, -1],
"\\Huge{\\color{#6495ED}{" + A + "} \\color{#28AE7B}{ +" + abs( B ) + "} = {?}}",
"right" );
</div>
<div class="graphie" data-update="numbers">
numberLine( START, END, 1, 1, -2 );
circle( [ 1 + A - START, -2 ], 5/40, { stroke: "none", fill: "#6495ed" } );
</div>
<div class="graphie" data-update="numbers">
style({
stroke: "#28AE7B",
arrows: "->"
}, function(){
path( [ [ 1 + A - START, -2 ], [ 1 + ANSWER - START, -2] ] );
});
</div>
<div class="graphie" data-update="numbers">
circle( [ 1 + ANSWER - START, -2 ], 5/40, { stroke: "none", fill: "#FF00AF" } );
</div>
<div class="graphie" data-update="numbers">
REMOVE.remove();
label( [0, -1],
"\\Huge{\\color{#6495ED}{" + A + "} \\color{#28AE7B}{ +" + abs( B ) + "} = "
+ "\\color{#FF00AF}{" + ANSWER + "}}",
"right" );
</div>
</div>
</div>
</div>
</div>
</body>
</html>