Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

164 lines (142 sloc) 7.355 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>
Jump to Line
Something went wrong with that request. Please try again.