Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 164 lines (142 sloc) 7.355 kB
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
1 <!DOCTYPE html>
7041f1b @jeresig Re-run the linter on the exercises.
jeresig authored
2 <html data-require="math word-problems graphie interactive">
3 <head>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
5 <title>Divisibility intuition</title>
ac1415e @spicyj Use requirejs for module loading
spicyj authored
6 <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
7 </head>
8 <body>
9 <div class="exercise">
10 <div class="problems">
11 <div>
12 <div class="vars">
13 <var id="NUMBER">randRange(4, 20)</var>
14 <var id="FACTORS">getFactors(NUMBER)</var>
15 </div>
16
a09b0b2 @petercollingridge Specific that factors should be positive and make numbers mathy
petercollingridge authored
17 <p class="question">What are the positive factors of <code><var>NUMBER</var></code>?</p>
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
18
35e1ca9 @xymostech Rearrange answer area content within some exercises
xymostech authored
19 <p class="render-answer-area-here"></p>
20
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
21 <div class="problem">
22 <p>
a09b0b2 @petercollingridge Specific that factors should be positive and make numbers mathy
petercollingridge authored
23 You can resize this box with <code><var>NUMBER</var></code> dots to help you find the factors:
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
24 </p>
25 <div class="graphie">
26 init({ range: [[-3, NUMBER + 3], [-NUMBER - 3, 3]], scale: [20, 20] });
27 addMouseLayer();
28
29 graph.width = NUMBER;
30 graph.height = 1;
31
32 graph.set = bogusShape;
33 graph.handle = bogusShape;
34 graph.topLabel = bogusShape;
35 graph.leftLabel = bogusShape;
36
37 graph.redraw = function() {
38 graph.set.remove();
39 graph.topLabel.remove();
40 graph.leftLabel.remove();
41 graph.height = ceil(NUMBER / graph.width);
42 init({ range: [[-3, graph.width + 3], [-graph.height - 2, 3]], scale: [20, 20] });
43
44 graph.set = raphael.set();
45 graph.set.push(path([
46 [-1, 1],
47 [graph.width, 1],
48 [graph.width, -graph.height],
49 [-1, -graph.height],
50 [-1, 1], [1, 1]],{ stroke: BLUE, opacity: 1.0 }));
51
52 _(NUMBER).times(function(i) {
53 graph.set.push(circle([i % graph.width, -floor(i / graph.width)], 0.25,
54 { stroke: BLUE, fill: BLUE, opacity: 0.6 }));
55 });
56
c905494 @beneater Revert to Raphael 1.5.2
beneater authored
57 graph.handle.translate(
58 graph.width * 20 - graph.handle[0].attr("translation").x,
59 graph.height * 10 - graph.handle[0].attr("translation").y);
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
60
61 graph.topLabel = label([graph.width / 2 - 0.5, 1], graph.width, "above");
62 graph.leftLabel = label([-1, -graph.height / 2 + 0.5], graph.height, "left");
63 };
64
65 graph.dragHandle = addMovablePoint({
66 coord: [graph.width, -graph.height / 2 + 0.5],
67 constraints: {
68 constrainY: true
69 },
70 snapX: 1,
71 onMove: function(x, y) {
72 graph.width = min(max(x, 1), NUMBER);
73 graph.redraw();
74 return [graph.width, -graph.height / 2 + 0.5];
75 }
76 });
77
78 graph.handle = raphael.set();
79 graph.handle.push(line(
80 [-0.12, 0],
81 [-0.12, 1], { stroke: BLUE, opacity: 1.0 }));
82 graph.handle.push(line(
83 [0.12, 0],
84 [0.12, 1], { stroke: BLUE, opacity: 1.0 }));
85
86 graph.dragHandle.visibleShape.remove();
87 graph.dragHandle.mouseTarget.attr({ scale: 2.0 });
88
a31d22f @crm416 Use mouseTarget.getMouseTarget() where applicable
crm416 authored
89 var $mouseTarget = $(graph.dragHandle.mouseTarget.getMouseTarget());
90 $mouseTarget.bind("vmouseover", function(event) {
c905494 @beneater Revert to Raphael 1.5.2
beneater authored
91 graph.handle.animate({ scale: 1.5, stroke: BLUE }, 50);
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
92 });
a31d22f @crm416 Use mouseTarget.getMouseTarget() where applicable
crm416 authored
93 $mouseTarget.bind("vmouseout", function(event) {
c905494 @beneater Revert to Raphael 1.5.2
beneater authored
94 graph.handle.animate({ scale: 1.0, stroke: BLUE }, 50);
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
95 });
96
97 graph.redraw();
98
99 </div>
100 </div>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
101 <div class="solution" data-type="set">
102 <span class="set-sol" data-each="FACTORS as FACTOR"><var>FACTOR</var></span>
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
103 <p class="input-format">
cbccff8 @jeresig Apply fixes to exercises again, after fixing some more bugs.
jeresig authored
104 Enter all the different factors you can find (one factor per box):<br>
35e1ca9 @xymostech Rearrange answer area content within some exercises
xymostech authored
105 <span class="entry" data-forms="integer"></span>
106 <span class="entry" data-forms="integer"></span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
107 <span class="entry" data-forms="integer"></span><br>
35e1ca9 @xymostech Rearrange answer area content within some exercises
xymostech authored
108 <span class="entry" data-forms="integer"></span>
109 <span class="entry" data-forms="integer"></span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
110 <span class="entry" data-forms="integer"></span><br>
35e1ca9 @xymostech Rearrange answer area content within some exercises
xymostech authored
111 <span class="entry" data-forms="integer"></span>
112 <span class="entry" data-forms="integer"></span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
113 <span class="entry" data-forms="integer"></span>
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
114 </p>
115
116 </div>
117 </div>
118 </div>
119
120 <div class="hints">
121 <div data-each="FACTORS.reverse() as FACTOR">
122 <p>
a09b0b2 @petercollingridge Specific that factors should be positive and make numbers mathy
petercollingridge authored
123 <span data-if="isSingular(NUMBER / FACTOR)">
124 The <code><var>NUMBER</var></code> dots can be arranged in <code><var>NUMBER / FACTOR</var></code> row.
125 </span><span data-else="">
126 The <code><var>NUMBER</var></code> dots can be arranged in <code><var>NUMBER / FACTOR</var></code> rows.
127 </span>
128 <span data-if="isSingular(FACTOR)">
129 Each row has <code><var>FACTOR</var></code> dot each, so
130 <code>\pink{<var>NUMBER / FACTOR</var>}</code> is a factor of <code><var>NUMBER</var></code>:
131 </span><span data-else="">
132 Each row has <code><var>FACTOR</var></code> dots each, so
133 <code>\pink{<var>NUMBER / FACTOR</var>}</code> is a factor of <code><var>NUMBER</var></code>:
134 </span>
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
135 </p>
136 <div class="graphie">
137 graph.width = FACTOR;
138 graph.height = ceil(NUMBER / graph.width);
139 init({ range: [[-3, graph.width + 3], [-graph.height - 2, 3]], scale: [7, 7] });
140
141 graph.set = raphael.set();
142 graph.set.push(path([
143 [-1, 1],
144 [graph.width, 1],
145 [graph.width, -graph.height],
146 [-1, -graph.height],
147 [-1, 1], [1, 1]],{ stroke: BLUE, opacity: 1.0 }));
148
149 _(NUMBER).times(function(i) {
150 graph.set.push(circle([i % graph.width, -floor(i / graph.width)], 0.25,
151 { stroke: BLUE, fill: BLUE, opacity: 0.6 }));
152 });
153 </div>
154 </div>
155 <p>
a09b0b2 @petercollingridge Specific that factors should be positive and make numbers mathy
petercollingridge authored
156 The positive factors of <code><var>NUMBER</var></code> are
fbe052d @csilvers Resolve some I18N todos, and simplify toSentence.
csilvers authored
157 <var>toSentenceTex(FACTORS.reverse(), function(){return true;}, "hint_pink")</var>.
7d43e3c @beneater Add exercise: Divisibility intuition
beneater authored
158 </p>
159 </div>
160
161 </div>
7041f1b @jeresig Re-run the linter on the exercises.
jeresig authored
162 </body>
163 </html>
Something went wrong with that request. Please try again.