Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

205 lines (167 sloc) 8.508 kB
<!DOCTYPE html>
<html data-require="math expressions graphie">
<head>
<title>Even and odd integers</title>
<script src="../khan-exercise.js"></script>
<script>
// traverses binary expression tree
function isExprEven( epr, isEvens ) {
if ( epr in isEvens ) {
return isEvens[ epr ];
} else if ( epr instanceof Array ) {
switch ( epr[0] ) {
case "+":
case "-":
return ( isExprEven( epr[1], isEvens ) === isExprEven( epr[2], isEvens ) );
case "times":
return ( isExprEven( epr[1], isEvens ) || isExprEven( epr[2], isEvens ) );
}
} else {
return ( epr % 2 === 0 );
}
}
function evenOrOdd( epr, isEvens ) {
return ( isExprEven( epr, isEvens ) ? "even" : "odd" );
}
function labelMaker( epr, evenOrOdd, colors, problemExpr, problemExprLevels ) {
var b = 0.2;
var searchStr = KhanUtil.expr( problemExpr ).replace( / \\times /g, "*" );
var exprStr = KhanUtil.expr( epr ).replace( / \\times /g, "*" );
var indices = [];
var idx = searchStr.indexOf( exprStr );
while ( idx !== -1 ) {
indices.push( idx );
idx = searchStr.indexOf( exprStr, idx + 1 );
}
var labels = $.map( indices, function( idx ) {
var x = idx / 2.5 + 0.075,
y = (problemExprLevels - 0.6) - exprStr.length / 2.5,
width = exprStr.length / 1.9;
return function( graph ) {
graph.path([ [ x, y + b ], [ x, y ],
[ ( x + width ), y ], [ ( x + width ), ( y + b ) ] ],
{ stroke: colors[ evenOrOdd ] });
graph.label( [ ( x + width / 2 ), ( y - 0.1 ) ],
"\\scriptsize{\\color{" + colors[ evenOrOdd ] + "}{\\text{" + evenOrOdd + "}}}", "center" );
};
} );
return function( graph ) {
$.each( labels, function( i, el ) {
el( graph );
} );
};
}
function getHints( epr, isEvens, colors, problemExpr, problemExprLevels ) {
var hints = [];
var eoro = evenOrOdd( epr, isEvens );
var hint = {};
hint.graph = labelMaker( epr, eoro, colors, problemExpr, problemExprLevels );
if ( epr instanceof Array ) {
// flatten child hints
hints.push( getHints( epr[1], isEvens, colors, problemExpr, problemExprLevels ) );
hints.push( getHints( epr[2], isEvens, colors, problemExpr, problemExprLevels ) );
eoro = colorEorO( eoro, colors );
switch ( epr[0] ) {
case "+":
hint.text = "An " + coloredEvenOrOdd( epr[1], isEvens, colors ) + " plus an " + coloredEvenOrOdd( epr[2], isEvens, colors ) + " is " + eoro + ".";
break;
case "-":
hint.text = "An " + coloredEvenOrOdd( epr[1], isEvens, colors ) + " minus an " + coloredEvenOrOdd( epr[2], isEvens, colors ) + " is " + eoro + ".";
break;
case "times":
hint.text = "An " + coloredEvenOrOdd( epr[1], isEvens, colors ) + " times an " + coloredEvenOrOdd( epr[2], isEvens, colors ) + " is " + eoro + ".";
break;
}
} else {
hint.text = "<code>" + epr + "</code> is " + colorEorO( eoro, colors ) + ".";
}
hints.push( hint );
// flatten hints array
return $.map( hints, function( el ) { return el; } );
}
function coloredEvenOrOdd( epr, isEvens, colors ) {
return colorEorO( evenOrOdd( epr, isEvens ), colors );
}
function colorEorO( eoro, colors ) {
return '<span style="color: ' + colors[ eoro ] + '">' + eoro + '</span>';
}
</script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="m-plus-n">
<div class="vars">
<var id="EXPR">["+", "m", "n"]</var>
<var id="EORO_COLORS">{ "even": "blue", "odd": "orange" }</var>
<var id="IS_EVENS">{ "m": rand(2) === 0, "n": rand(2) === 0 }</var>
<var id="EXPR_LEVELS">2</var>
<var id="HINTS">getHints( EXPR, IS_EVENS, EORO_COLORS, EXPR, EXPR_LEVELS )</var>
</div>
<div class="problem">
<ul>
<li><code>m</code> is <var>evenOrOdd( "m", IS_EVENS )</var>.</li>
<li><code>n</code> is <var>evenOrOdd( "n", IS_EVENS )</var>.</li>
</ul>
</div>
<p class="question">Is <code><var>expr( EXPR )</var></code> even or odd?</p>
<p class="solution"><var>( isExprEven( EXPR, IS_EVENS ) ? "Even" : "Odd" )</var></p>
<ul class="choices" data-category="true">
<li>Even</li>
<li>Odd</li>
</ul>
<div class="hints">
<div class="graphie" id="expression">
init({
range: [[0, 10], [-2, EXPR_LEVELS]],
scale: [40, 40]
});
label( [0, EXPR_LEVELS], "\\large{" + expr( EXPR ) + "}", "below right" );
</div>
<div data-each="HINTS as I, HINT">
<div class="graphie" data-update="expression">
HINTS[I].graph( KhanUtil.currentGraph );
</div>
<p><var>HINT.text</var></p>
</div>
</div>
</div>
<div id="m-times-n" data-type="m-plus-n">
<div class="vars">
<var id="EXPR">["times", "m", "n"]</var>
</div>
</div>
<div id="kn-plus-km" data-type="m-plus-n">
<div class="vars">
<var id="EXPR">["+", ["times", randRange(2, 5), "n"], ["times", randRange(2, 5), "m"]]</var>
<var id="EXPR_LEVELS">3</var>
</div>
</div>
<div id="m-plus-n-plus-p" data-type="m-plus-n">
<div class="vars">
<var id="EXPR">["+", "m", ["+", "n", "p"]]</var>
<var id="IS_EVENS">{ "m": rand(2) === 0, "n": rand(2) === 0, "p": rand(2) === 0 }</var>
<var id="EXPR_LEVELS">3</var>
</div>
<div class="problem">
<ul>
<li><code>m</code> is <var>evenOrOdd( "m", IS_EVENS )</var>.</li>
<li><code>n</code> is <var>evenOrOdd( "n", IS_EVENS )</var>.</li>
<li><code>p</code> is <var>evenOrOdd( "p", IS_EVENS )</var>.</li>
</ul>
</div>
</div>
<div id="n-times-m-plus-p" data-type="m-plus-n-plus-p">
<div class="vars">
<var id="EXPR">["times", "n", ["+", "m", "p"]]</var>
</div>
</div>
<div id="np-minus-m-plus-p" data-type="m-plus-n-plus-p">
<div class="vars">
<var id="EXPR">["+", ["-", ["times", "n", "p"], "m"], "p"]</var>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.