Fetching contributors…
Cannot retrieve contributors at this time
164 lines (142 sloc) 7.18 KB
<!DOCTYPE html>
<html data-require="math word-problems graphie interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Divisibility intuition</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div>
<div class="vars">
<var id="NUMBER">randRange(4, 20)</var>
<var id="FACTORS">getFactors(NUMBER)</var>
</div>
<p class="question">What are the positive factors of <code><var>NUMBER</var></code>?</p>
<p class="render-answer-area-here"></p>
<div class="problem">
<p>
You can resize this box with <code><var>NUMBER</var></code> dots to help you find the factors:
</p>
<div class="graphie">
init({ range: [[-3, NUMBER + 3], [-NUMBER - 3, 3]], scale: [20, 20] });
addMouseLayer();
graph.width = NUMBER;
graph.height = 1;
graph.set = bogusShape;
graph.handle = bogusShape;
graph.topLabel = bogusShape;
graph.leftLabel = bogusShape;
graph.redraw = function() {
graph.set.remove();
graph.topLabel.remove();
graph.leftLabel.remove();
graph.height = ceil(NUMBER / graph.width);
init({ range: [[-3, graph.width + 3], [-graph.height - 2, 3]], scale: [20, 20] });
graph.set = raphael.set();
graph.set.push(path([
[-1, 1],
[graph.width, 1],
[graph.width, -graph.height],
[-1, -graph.height],
[-1, 1], [1, 1]],{ stroke: BLUE, opacity: 1.0 }));
_(NUMBER).times(function(i) {
graph.set.push(circle([i % graph.width, -floor(i / graph.width)], 0.25,
{ stroke: BLUE, fill: BLUE, opacity: 0.6 }));
});
graph.handle.translate(
graph.width * 20 - graph.handle[0].attr("translation").x,
graph.height * 10 - graph.handle[0].attr("translation").y);
graph.topLabel = label([graph.width / 2 - 0.5, 1], graph.width, "above");
graph.leftLabel = label([-1, -graph.height / 2 + 0.5], graph.height, "left");
};
graph.dragHandle = addMovablePoint({
coord: [graph.width, -graph.height / 2 + 0.5],
constraints: {
constrainY: true
},
snapX: 1,
onMove: function(x, y) {
graph.width = min(max(x, 1), NUMBER);
graph.redraw();
return [graph.width, -graph.height / 2 + 0.5];
}
});
graph.handle = raphael.set();
graph.handle.push(line(
[-0.12, 0],
[-0.12, 1], { stroke: BLUE, opacity: 1.0 }));
graph.handle.push(line(
[0.12, 0],
[0.12, 1], { stroke: BLUE, opacity: 1.0 }));
graph.dragHandle.visibleShape.remove();
graph.dragHandle.mouseTarget.attr({ scale: 2.0 });
var $mouseTarget = $(graph.dragHandle.mouseTarget.getMouseTarget());
$mouseTarget.bind("vmouseover", function(event) {
graph.handle.animate({ scale: 1.5, stroke: BLUE }, 50);
});
$mouseTarget.bind("vmouseout", function(event) {
graph.handle.animate({ scale: 1.0, stroke: BLUE }, 50);
});
graph.redraw();
</div>
</div>
<div class="solution" data-type="set">
<span class="set-sol" data-each="FACTORS as FACTOR"><var>FACTOR</var></span>
<p class="input-format">
Enter all the different factors you can find (one factor per box):<br>
<span class="entry" data-forms="integer"></span>
<span class="entry" data-forms="integer"></span>
<span class="entry" data-forms="integer"></span><br>
<span class="entry" data-forms="integer"></span>
<span class="entry" data-forms="integer"></span>
<span class="entry" data-forms="integer"></span><br>
<span class="entry" data-forms="integer"></span>
<span class="entry" data-forms="integer"></span>
<span class="entry" data-forms="integer"></span>
</p>
</div>
</div>
</div>
<div class="hints">
<div data-each="FACTORS.reverse() as FACTOR">
<p>
<span data-if="isSingular(NUMBER / FACTOR)">
The <code><var>NUMBER</var></code> dots can be arranged in <code><var>NUMBER / FACTOR</var></code> row.
</span><span data-else="">
The <code><var>NUMBER</var></code> dots can be arranged in <code><var>NUMBER / FACTOR</var></code> rows.
</span>
<span data-if="isSingular(FACTOR)">
Each row has <code><var>FACTOR</var></code> dot each, so
<code>\pink{<var>NUMBER / FACTOR</var>}</code> is a factor of <code><var>NUMBER</var></code>:
</span><span data-else="">
Each row has <code><var>FACTOR</var></code> dots each, so
<code>\pink{<var>NUMBER / FACTOR</var>}</code> is a factor of <code><var>NUMBER</var></code>:
</span>
</p>
<div class="graphie">
graph.width = FACTOR;
graph.height = ceil(NUMBER / graph.width);
init({ range: [[-3, graph.width + 3], [-graph.height - 2, 3]], scale: [7, 7] });
graph.set = raphael.set();
graph.set.push(path([
[-1, 1],
[graph.width, 1],
[graph.width, -graph.height],
[-1, -graph.height],
[-1, 1], [1, 1]],{ stroke: BLUE, opacity: 1.0 }));
_(NUMBER).times(function(i) {
graph.set.push(circle([i % graph.width, -floor(i / graph.width)], 0.25,
{ stroke: BLUE, fill: BLUE, opacity: 0.6 }));
});
</div>
</div>
<p>
The positive factors of <code><var>NUMBER</var></code> are
<var>toSentenceTex(FACTORS.reverse(), function(){return true;}, "hint_pink")</var>.
</p>
</div>
</div>
</body>
</html>