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

151 lines (130 sloc) 6.372 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 src="../khan-exercise.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 factors of <var>NUMBER</var>?</p>
<div class="problem">
<p>
You can resize this box with <var>NUMBER</var> 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 });
$(graph.dragHandle.mouseTarget[0]).bind("vmouseover", function(event) {
graph.handle.animate({ scale: 1.5, stroke: BLUE }, 50);
});
$(graph.dragHandle.mouseTarget[0]).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"></span><br/>
<span class="entry"></span><br/>
<span class="entry"></span><br/>
<span class="entry"></span><br/>
<span class="entry"></span><br/>
<span class="entry"></span><br/>
<span class="entry"></span><br/>
<span class="entry"></span>
</p>
</div>
</div>
</div>
<div class="hints">
<div data-each="FACTORS.reverse() as FACTOR">
<p>
The <var>NUMBER</var> dots can be arranged in <var>plural(NUMBER / FACTOR, "row")</var>
with <var>plural(FACTOR, "dot")</var> each, so
<code class="hint_pink"><var>NUMBER / FACTOR</var></code> is a factor of <var>NUMBER</var>:
</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 factors of <code><var>NUMBER</var></code> are
<var>toSentenceTex(FACTORS.reverse(), "and", function(){return true;}, "hint_pink")</var>.
</p>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.