Permalink
Fetching contributors…
Cannot retrieve contributors at this time
300 lines (282 sloc) 14.2 KB
<!DOCTYPE html>
<html data-require="math graphie algebra-intuition">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>One step equation intuition</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<style>
div.description {
border: 1px dashed #aaaaaa;
background: #f5f5f5;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
margin-left: 20px;
margin-right: 20px;
padding: 0px 22px;
}
a.small-button {
font-size: 12px;
}
input.small-button {
padding: 5px 10px;
line-height: 15px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="A">randRange(1, 6)</var>
<var id="B">randRange(A + 1, 10)</var>
<var id="X">B - A</var>
<var id="UNKNOWN, AVATAR">randFromArray([
[i18n._("Spunky Sam"), "spunky-sam.png"],
[i18n._("Mr. Pink"), "mr-pink.png"],
[i18n._("Orange Juice Squid"), "orange-juice-squid.png"],
[i18n._("Purple Pi"), "purple-pi.png"],
[i18n._("Pants"), "mr-pants.png"],
[i18n._("Old Spice Man"), "old-spice-man.png"],
])</var>
</div>
<div class="problems">
<div>
<p class="question">
How much does <var>UNKNOWN</var> weigh?
</p>
<div class="render-answer-area-here"></div>
<div class="clearfix" style="width: 480px;">
<div style="float: left; margin-left: 130px;">
<form>
<input class="simple-button small-button" id="sub-left" onclick="javascript:
KhanUtil.scale.subtractLeftWeight();
" type="button" value="- 1">
<input class="simple-button small-button" id="add-left" onclick="javascript:
KhanUtil.scale.addLeftWeight();
" type="button" value="+ 1">
</form>
</div>
<div style="float: right; margin-right: 130px;">
<form>
<input class="simple-button small-button" id="sub-right" onclick="javascript:
KhanUtil.scale.subtractRightWeight();
" type="button" value="- 1">
<input class="simple-button small-button" id="add-right" onclick="javascript:
KhanUtil.scale.addRightWeight();
" type="button" value="+ 1">
</form>
</div>
</div>
<div class="graphie" id="scale">
KhanUtil.scale.onChange = function(leftCoef, a, rightCoef, b) {
$("#sub-left").prop("disabled", a === 0);
$("#add-left").prop("disabled", a === 10);
$("#sub-right").prop("disabled", b === 0);
$("#add-right").prop("disabled", b === 10);
var leftOp = "";
var rightOp = "";
var leftOpSign = (a - A &gt; 0) ? "+" : "-";
var rightOpSign = (b - B &gt; 0) ? "+" : "-";
$(".desc-a").text(abs(a - A));
$(".desc-b").text(abs(b - B));
$("#description1").children().hide();
$("#description2").parent().show();
var desc2Text = "";
var desc4Text = "";
if (a - A !== 0 &amp;&amp; b - B !== 0) {
leftOp = " \\blue{" + leftOpSign + abs(a - A) + "}";
rightOp = " \\green{" + rightOpSign + abs(b - B) + "}"
if (a - A &lt; 0 &amp;&amp; b - B &lt; 0) {
$("#description1 .opt-1").show();
} else if (a - A &lt; 0 &amp;&amp; b - B &gt; 0) {
$("#description1 .opt-2").show();
} else if (a - A &gt; 0 &amp;&amp; b - B &lt; 0) {
$("#description1 .opt-3").show();
} else if (a - A &gt; 0 &amp;&amp; b - B &gt; 0) {
$("#description1 .opt-4").show();
}
} else if (a - A !== 0) {
leftOp = " \\blue{" + leftOpSign + abs(a - A) + "}";
if (a - A &lt; 0) {
$("#description1 .opt-5").show();
} else if (a - A &gt; 0) {
$("#description1 .opt-6").show();
}
} else if (b - B !== 0) {
rightOp = " \\green{" + rightOpSign + abs(b - B) + "}"
if (b - B &lt; 0) {
$("#description1 .opt-7").show();
} else if (b - B &gt; 0) {
$("#description1 .opt-8").show();
}
} else {
$("#description1 .opt-none").show();
$("#description2").parent().hide();
}
desc2Text =
"\\qquad x + " + A + leftOp +
(a - A === b - B ?
" \\quad=\\quad " :
" \\quad\\neq\\quad ") +
B + rightOp;
$("#description3").children().hide();
if (a - A === b - B) {
if (a - A !== 0) {
if (a === 0) {
$("#description3 .opt-done").show();
desc4Text = "\\qquad x \\quad=\\quad " + X;
} else {
$("#description3 .opt-notdone").show();
desc4Text = "\\qquad x + " + a +
" \\quad=\\quad " + b;
}
$("#description3").show()
$("#description4").parent().show();
} else {
$("#description3").hide()
$("#description4").parent().hide();
}
} else {
$("#description3 .opt-different").show();
$("#description3").show()
$("#description4").parent().hide();
}
KhanUtil.processMath($("#description2")[0], desc2Text, true);
KhanUtil.processMath($("#description4")[0], desc4Text, true);
};
// TODO(emily): make this faster (don't re-init every time)
KhanUtil.scale.init({
unknown: X,
leftConst: A,
rightConst: B,
image: Khan.imageBase + "avatars/" + AVATAR
});
</div>
<p></p>
<div style="width: 480px; position: relative; top: -60px; right: 50px;">
<div style="text-align: center; float: right;">
<a href="#" class="simple-button small-button" onclick="javascript:
return KhanUtil.scale.resetProblem();
">reset</a>
</div>
</div>
<div class="description" style="clear: both;">
<p><b>This is algebra?</b></p>
<p>
Yep! We can represent the problem with an equation if
we let the letter <code>x</code> represent
<var>UNKNOWN</var>'s weight:
</p>
<p><code>
\qquad x + <var>A</var> \quad=\quad <var>B</var>
</code></p>
<p id="description1">
<span class="opt-1">You
<span class="hint_blue">subtracted
<span class="desc-a"><var>A</var></span>
from the left side</span>
and
<span class="hint_green">subtracted
<span class="desc-b"><var>B</var></span>
from the right side</span>:</span>
<span class="opt-2">You
<span class="hint_blue">subtracted
<span class="desc-a"><var>A</var></span>
from the left side</span>
and
<span class="hint_green">added
<span class="desc-b"><var>B</var></span>
to the right side</span>:</span>
<span class="opt-3">You
<span class="hint_blue">added
<span class="desc-a"><var>A</var></span>
to the left side</span>
and
<span class="hint_green">subtracted
<span class="desc-b"><var>B</var></span>
from the right side</span>:</span>
<span class="opt-4">You
<span class="hint_blue">added
<span class="desc-a"><var>A</var></span>
to the left side</span>
and
<span class="hint_green">added
<span class="desc-b"><var>B</var></span>
to the right side</span>:</span>
<span class="opt-5">You
<span class="hint_blue">subtracted
<span class="desc-a"><var>A</var></span>
to the left side</span>:</span>
<span class="opt-6">You
<span class="hint_blue">added
<span class="desc-a"><var>A</var></span>
to the left side</span>:</span>
<span class="opt-7">You
<span class="hint_green">subtracted
<span class="desc-b"><var>B</var></span>
from the right side</span>:</span>
<span class="opt-8">You
<span class="hint_green">added
<span class="desc-b"><var>B</var></span>
to the right side</span>:</span>
<span class="opt-none">You haven't added or removed
anything from either side, so we can't directly
tell what <var>UNKNOWN</var>'s weight is from the
equation.</span>
</p>
<p><code id="description2"></code></p>
<p id="description3">
<span class="opt-done">
Simplifying, we can see <var>UNKNOWN</var>'s weight:
</span>
<span class="opt-notdone">
Simplifying, we still can't directly see
<var>UNKNOWN</var>'s weight:
</span>
<span class="opt-different">
Since you did something different to each side of
the equation, the left and right side are no longer
equal and you can't tell what <var>UNKNOWN</var>'s
weight is.
</span>
</p>
<p><code id="description4"></code></p>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
<p>Balance the scale with <var>UNKNOWN</var> <b>alone on
one side</b> and enter the weight:</p>
<p><input id="answer" type="text"></p>
</div>
<div class="guess">[
$("input#answer").val(),
KhanUtil.scale.leftConst,
KhanUtil.scale.rightConst
]</div>
<div class="validator-function">
if (guess[0] === "") {
return "";
}
if (guess[1] !== 0) {
return i18n._("Make sure %(name)s is alone on " +
"one side of the scale.", {name: UNKNOWN});
}
if (guess[1] + X !== guess[2]) {
return i18n._("Make sure the scale is balanced.");
}
return +guess[0] === X;
</div>
<div class="show-guess">
KhanUtil.scale.setLeftWeight(guess[1]);
KhanUtil.scale.setRightWeight(guess[2]);
</div>
<div class="show-guess-solutionarea">
$("input#answer").val(guess[0]);
</div>
</div>
</div>
</div>
</div>
</body>
</html>