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

300 lines (282 sloc) 14.566 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([
[$._("Spunky Sam"), "spunky-sam.png"],
[$._("Mr. Pink"), "mr-pink.png"],
[$._("Orange Juice Squid"), "orange-juice-squid.png"],
[$._("Purple Pi"), "purple-pi.png"],
[$._("Pants"), "mr-pants.png"],
[$._("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 $._("Make sure %(name)s is alone on " +
"one side of the scale.", {name: UNKNOWN});
}
if (guess[1] + X !== guess[2]) {
return $._("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>
Jump to Line
Something went wrong with that request. Please try again.