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

205 lines (167 sloc) 6.156 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 = jQuery.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 ) {
jQuery.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 jQuery.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.