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

timeline improvements #28661

Merged
merged 14 commits into from Sep 1, 2012
Merged

timeline improvements #28661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9474dd1
Animate scrubber movement (and clean up scrubber-related code).
joelburget Aug 7, 2012
854aa2f
Add upper limit to timeline height
joelburget Aug 13, 2012
17c3d21
Fix margin at the end of the timeline
joelburget Aug 14, 2012
61053c9
Port parabola intuition 1 to use a custom answer type
joelburget Aug 15, 2012
303348d
Port parabola intuition 2 to use a custom answer type
joelburget Aug 15, 2012
037cb1f
Port line graph intuition to use a custom answer type
joelburget Aug 15, 2012
bb4a8a2
Port derivative intuition to use a custom answer type
joelburget Aug 23, 2012
4d6fd61
Port fractions cut and copy 1 to use a custom answer type
joelburget Aug 23, 2012
578bb46
Port fractions cut and copy 2 to use a custom answer type
joelburget Aug 23, 2012
e1984fa
Port the complex plane to use a custom answer type
joelburget Aug 24, 2012
011af1e
Stop using id's as globals (facepalm)
joelburget Aug 27, 2012
0184536
Derivative intuition review feedback
joelburget Aug 27, 2012
42dced0
Remove unneeded KhanUtils
joelburget Aug 27, 2012
904d1d6
Get derivative graph working with timeline
joelburget Aug 31, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 7 additions & 12 deletions css/khan-exercise.css
View file
Open in desktop
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
Open in desktop
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();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The old version didn't do this, but it'd be cool to add a check to see if you haven't moved any of the points and return "" so you don't get marked wrong for clicking the "Next question" button a little too overzealously. Just sayin'

</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
Open in desktop
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