Skip to content
This repository has been archived by the owner on May 11, 2021. It is now read-only.

Commit

Permalink
Merge pull request #28661 from joelburget/master
Browse files Browse the repository at this point in the history 
timeline improvements
  • Loading branch information
Ben Eater committed Sep 1, 2012
2 parents 9ce65a5 + 904d1d6 commit b946c97
Show file tree
Hide file tree
Showing 10 changed files with 346 additions and 195 deletions.
19 changes: 7 additions & 12 deletions css/khan-exercise.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,18 +266,13 @@ div.timeline-total {
width: 10000px;
}

#timeline-events:first-child {
margin-left: 5px;
}

#timeline-events:last-child {
margin-right: 5px;
}

#timeline-events:last-child:after {
content: "";
height: 1px;
display: block;
/* Allow the timeline to scroll all the way to the end with a little margin */
#timeline-events:after, #timeline-events:before {
content: "";
display: block;
width: 1px;
height: 1px;
float: left;
}

#timeline p {
Expand Down
79 changes: 60 additions & 19 deletions exercises/derivative_intuition.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@
<div id="polynomial" data-weight="4">
<div class="vars">
<var id="SCENARIO">{}</var>
<var id="POLYNOMIAL">new Polynomial( randRange(0, 3), randRange(2, 4) )</var>
<var id="POLYNOMIAL">new Polynomial(randRange(0, 3), randRange(2, 4))</var>
<var id="FNXTEXT">POLYNOMIAL.text()</var>
<var id="DDXTEXT">ddxPolynomial(POLYNOMIAL).text()</var>
<var id="FNX">function(x) { return POLYNOMIAL.evalOf(x); }</var>
<var id="DDX">function(x) { return ddxPolynomial(POLYNOMIAL).evalOf(x); }</var>
<var id="POINTS">[ -2, -1.5, -1, 0, 1, 1.5, 2 ]</var>
<var id="XRANGE">[ -2.5, 2.5 ]</var>
<var id="YMIN">min.apply( Math, $.map(POINTS, FNX).concat( $.map(POINTS, DDX )))</var>
<var id="YMAX">max.apply( Math, $.map(POINTS, FNX).concat( $.map(POINTS, DDX )))</var>
<var id="YRANGE"> [ floorTo(-1, YMIN - (YMAX-YMIN)*0.05 ), ceilTo(-1, YMAX + (YMAX-YMIN)*0.05) ] </var>
<var id="FNX">function(x) {return POLYNOMIAL.evalOf(x);}</var>
<var id="DDX">function(x) {return ddxPolynomial(POLYNOMIAL).evalOf(x);}</var>
<var id="POINTS">[-2, -1.5, -1, 0, 1, 1.5, 2]</var>
<var id="XRANGE">[-2.5, 2.5]</var>
<var id="YMIN">min.apply(Math, $.map(POINTS, FNX).concat( $.map(POINTS, DDX)))</var>
<var id="YMAX">max.apply(Math, $.map(POINTS, FNX).concat( $.map(POINTS, DDX)))</var>
<var id="YRANGE">[floorTo(-1, YMIN - (YMAX-YMIN)*0.05 ), ceilTo(-1, YMAX + (YMAX-YMIN)*0.05)]</var>
<var id="OPTIONS">{}</var>
</div>

Expand All @@ -43,7 +43,7 @@

<div class="problem">
<div class="graphie" id="ddxplot">
initAutoscaledGraph( [ XRANGE, YRANGE ], OPTIONS );
initAutoscaledGraph([ XRANGE, YRANGE], OPTIONS);

style({
stroke: "#6495ED",
Expand All @@ -54,19 +54,60 @@
}, XRANGE );
});

initDerivativeIntuition( FNX, DDX, POINTS );
initDerivativeIntuition(FNX, DDX, POINTS);
</div>
</div>

<div class="solution" data-type="multiple">
<table>
<tr data-each="POINTS as X">
<td class="sol" style="display: none" data-fallback="0"><var>roundTo(2, DDX(X))</var></td>
<td style="text-align: right" data-if="OPTIONS.xLabelFormat"><code>\frac{d}{dx} f(<var>OPTIONS.xLabelFormat(X)</var>) = </code></td>
<td style="text-align: right" data-else><code>\frac{d}{dx} f(<var>X</var>) = </code></td>
<td class="answer-label">0</td>
</tr>
</table>
<div class="solution" data-type="custom">
<div class="instruction">
<table id="answers">
<tr data-each="POINTS as X">
<td class="sol" style="display: none" data-fallback="0"><var>roundTo(2, DDX(X))</var></td>
<td style="text-align: right" data-if="OPTIONS.xLabelFormat"><code>\frac{d}{dx} f(<var>OPTIONS.xLabelFormat(X)</var>) = </code></td>
<td style="text-align: right" data-else><code>\frac{d}{dx} f(<var>X</var>) = </code></td>
<td class="answer-label">0</td>
</tr>
</table>
</div>

<div class="guess">
(function(){
var guess = [];
$("#answers").find('.answer-label').each(function(label) {
guess.push(parseFloat($(this).text()));
});
return guess;
})()
</div>
<div class="validator-function">
var allDefault = _(guess).all(function(x) {
return x === 0;
});
if (allDefault) {
return "";
}

var correct = _(points).map(function(x) {
return roundTo(2, ddx(x));
});
return guess.join() === correct.join();
</div>
<div class="show-guess">
_(guess).each(function(coordY, i) {
setSlope(i, coordY);
});
var correct = _(points).map(function(x) {
return roundTo(2, ddx(x));
});
if (guess.join() === correct.join()) {
revealDerivative(0);
}
</div>
<div class="show-guess-solutionarea">
$("#answers").find('.answer-label').each(function(index, label) {
$(label).text(guess.length ? guess[index] : 0);
});
</div>
</div>

<div class="hints">
Expand Down
80 changes: 48 additions & 32 deletions exercises/fractions_cut_and_copy_1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,20 @@
<div class="exercise">
<div class="vars">
<!-- An integer will be a starting or ending quantity 1/3 of the time -->
<var id="D_PARENT">randRangeWeighted( 3, 12, 1, 1 / 6 )</var>
<var id="D_OFFSPRING">D_PARENT === 1 ? randRange( 3, 12 ) : ( rand( 5 ) > 0 ? D_PARENT : 1 )</var>
<var id="D_PARENT">randRangeWeighted(3, 12, 1, 1 / 6)</var>
<var id="D_OFFSPRING">D_PARENT === 1 ? randRange(3, 12) : (rand(5) > 0 ? D_PARENT : 1)</var>
<div data-ensure="getGCD( N_PARENT * ( D_PARENT === 1 ? D_OFFSPRING : 1 ), N_OFFSPRING * ( D_OFFSPRING === 1 ? D_PARENT : 1 ) ) === 1 && N_PARENT / D_PARENT > N_OFFSPRING / D_OFFSPRING">
<var id="N_PARENT">D_PARENT === 1 ? randRange( 1, 4 ) : randRangeExclude( 2, 2 * D_PARENT - 1, [ D_PARENT ] )</var>
<var id="N_OFFSPRING">D_OFFSPRING === 1 ? randRange( 1, 4 ) : randRangeExclude( 2, 2 * D_OFFSPRING - 1, [ D_OFFSPRING ] )</var>
<var id="N_PARENT">D_PARENT === 1 ? randRange(1, 4) : randRangeExclude(2, 2 * D_PARENT - 1, [D_PARENT])</var>
<var id="N_OFFSPRING">D_OFFSPRING === 1 ? randRange(1, 4) : randRangeExclude(2, 2 * D_OFFSPRING - 1, [D_OFFSPRING])</var>
</div>
<var id="CODE_PARENT">D_PARENT === 1 ? N_PARENT : mixedOrImproper( N_PARENT, D_PARENT )</var>
<var id="CODE_OFFSPRING">D_OFFSPRING === 1 ? N_OFFSPRING : mixedOrImproper( N_OFFSPRING, D_OFFSPRING )</var>
<var id="CODE_PARENT">D_PARENT === 1 ? N_PARENT : mixedOrImproper(N_PARENT, D_PARENT)</var>
<var id="CODE_OFFSPRING">D_OFFSPRING === 1 ? N_OFFSPRING : mixedOrImproper(N_OFFSPRING, D_OFFSPRING)</var>
<var id="PARENT">N_PARENT / D_PARENT</var>
<var id="OFFSPRING">N_OFFSPRING / D_OFFSPRING</var>
<var id="ANSWER">OFFSPRING / PARENT</var>
<var id="D">D_PARENT === 1 ? D_OFFSPRING : D_PARENT</var>
<var id="N_PARENT_EXPANDED">N_PARENT * ( D_PARENT === 1 ? D : 1 )</var>
<var id="N_OFFSPRING_EXPANDED">N_OFFSPRING * ( D_OFFSPRING === 1 ? D : 1 )</var>
<var id="N_PARENT_EXPANDED">N_PARENT * (D_PARENT === 1 ? D : 1)</var>
<var id="N_OFFSPRING_EXPANDED">N_OFFSPRING * (D_OFFSPRING === 1 ? D : 1)</var>
</div>

<div class="problems">
Expand All @@ -32,48 +32,64 @@
<p>Starting Block:</p>

<div class="graphie" id="parent_block">
initSliceClone([ "current_block" ]);
init({ range: [ [ 0, 1 ], [ 0, 1 ] ],scale: [ 600, 25 ] });
rectchart( [ 1, 0 ], [ "#e00", "#999" ] );
initSliceClone(["current_block"]);
init({range: [[0, 1], [0, 1]], scale: [600, 25 ]});
rectchart([1, 0], ["#e00", "#999"]);
</div>

<p>Current Block:</p>

<div class="graphie" id="current_block">
init({ range: [ [ 0, 1 ], [ 0, 1 ] ],scale: [ 600, 25 ] });
rectchart( [ 1, 0 ], [ "#e00", "#999" ] );
init({ range: [[0, 1], [0, 1] ], scale: [600, 25]});
rectchart([1, 0], ["#e00", "#999"]);
</div>

<p>Goal Block:</p>

<div class="graphie" id="goal_block">
init({ range: [ [ 0, 1 ], [ 0, 1 ] ],scale: [ 600 * ANSWER, 25 ] });
rectchart( [ 1, 0 ], [ BLUE, "#999" ] );
init({range: [[0, 1], [0, 1]], scale: [600 * ANSWER, 25]});
rectchart([1, 0], [BLUE, "#999"]);
</div>

<div class="solution" data-type="multiple">
<div style="margin-bottom: 10px;">
Cut into
<input type="button" value="-" class="simple-button" onclick="KhanUtil.changePieces( false )">
<span id="pieces" style="display: inline-block; width: 54px; text-align: center;">1 piece</span>
<input type="button" value="+" class="simple-button" onclick="KhanUtil.changePieces( true )">
</div>
<div class="solution" data-type="custom">
<div class="instruction">
<div style="margin-bottom: 10px;">
Cut into
<input type="button" value="-" class="simple-button" onclick="KhanUtil.changePieces(false)">
<span id="pieces" style="display: inline-block; width: 54px; text-align: center;">1 piece</span>
<input type="button" value="+" class="simple-button" onclick="KhanUtil.changePieces(true)">
</div>

<div style="margin-bottom: 10px;">
<span style="display:inline-block; width: 42px;">Copy</span>
<input type="button" value="-" class="simple-button" onclick="KhanUtil.changeTimes( false, 'current_block' )" disabled="disabled">
<span id="current_block_times" style="display: inline-block; width: 54px; text-align: center;">1 time</span>
<input type="button" value="+" class="simple-button" onclick="KhanUtil.changeTimes( true, 'current_block' )">
<div style="margin-bottom: 10px;">
<span style="display:inline-block; width: 42px;">Copy</span>
<input type="button" value="-" class="simple-button" onclick="KhanUtil.changeTimes(false, 'current_block')" disabled="disabled">
<span id="current_block_times" style="display: inline-block; width: 54px; text-align: center;">1 time</span>
<input type="button" value="+" class="simple-button" onclick="KhanUtil.changeTimes(true, 'current_block')">
</div>
</div>

<span class="sol" id="current_block_answer" style="display: none;"><var>roundTo( 3, ANSWER )</var></span>
<div class="guess">
[pieces, times['current_block']]
</div>
<div class="validator-function">
return roundTo(3, guess[1] / guess[0]) === roundTo(3, ANSWER);
</div>
<div class="show-guess">
pieces = guess[0];
times['current_block'] = guess[1];
updateGraphAndAnswer();
</div>
<div class="show-guess-solutionarea">
$('#pieces').text(plural(guess[0], 'piece'));
$('#current_block_times').text(plural(guess[1], 'time'));
</div>
</div>

<div class="hints">
<p data-if="CODE_PARENT !== fraction( N_PARENT, D)">The starting block of length <code><var>CODE_PARENT</var></code> units
can be rewritten as <code><var>fraction( N_PARENT_EXPANDED, D )</var></code>.</p>
<p data-if="CODE_OFFSPRING !== fraction( N_OFFSPRING, D)">The goal block of length <code><var>CODE_OFFSPRING</var></code> units
can be rewritten as <code><var>fraction( N_OFFSPRING_EXPANDED, D )</var></code>.</p>
<p data-if="CODE_PARENT !== fraction(N_PARENT, D)">The starting block of length <code><var>CODE_PARENT</var></code> units
can be rewritten as <code><var>fraction(N_PARENT_EXPANDED, D)</var></code>.</p>
<p data-if="CODE_OFFSPRING !== fraction(N_OFFSPRING, D)">The goal block of length <code><var>CODE_OFFSPRING</var></code> units
can be rewritten as <code><var>fraction(N_OFFSPRING_EXPANDED, D)</var></code>.</p>
<p>Cutting the starting block into <code>x</code> pieces is the same as dividing it by <code>x</code>.</p>
<div>
<p>Therefore cutting the starting block into <code><var>N_PARENT_EXPANDED</var></code> pieces is the same as:</p>
Expand Down
Loading

0 comments on commit b946c97

Please sign in to comment.