Permalink
Browse files

Add fractions_cut_and_copy_1.html

  • Loading branch information...
1 parent 8534a23 commit ebb3ac5df8236c656658aaa3926257a8745a60e0 Julian Pulgarin committed Sep 29, 2011
Showing with 188 additions and 0 deletions.
  1. +79 −0 exercises/fractions_cut_and_copy_1.html
  2. +5 −0 khan-exercise.js
  3. +104 −0 utils/slice-clone.js
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html data-require="math math-format graphie graphie-helpers word-problems slice-clone">
+<head>
+ <meta charset="UTF-8" />
+ <title>Fractions cut and copy 1</title>
+ <script src="../khan-exercise.js"></script>
+</head>
+<body>
+ <div class="exercise">
+ <div class="vars">
+ <var id="D">randRange( 3, 12 )</var>
+ <div data-ensure="getGCD( D + N_PARENT, N_OFFSPRING ) === 1">
+ <var id="N_PARENT" data-ensure="getGCD( N_PARENT, D ) === 1">randRange( 1, D - 1 )</var>
+ <var id="N_OFFSPRING" data-ensure="getGCD( N_OFFSPRING, D ) === 1">randRange( 2, D - 1 )</var>
+ </div>
+ <var id="FRACTION_PARENT">fraction( N_PARENT, D )</var>
+ <var id="FRACTION_OFFSPRING">fraction( N_OFFSPRING, D )</var>
+ </div>
+
+ <div class="problems">
+ <div>
+ <p class="question">The block below is <code>1 <var>FRACTION_PARENT</var></code> units long. Use the tools to the right to create a new block that is <code><var>FRACTION_OFFSPRING</var></code> units long.</p>
+
+ <div id="slicing">
+ <p><span class="hint_blue">First</span>: Cut the block to get a smaller piece that you can later copy to create the new block.</p>
+
+
+ <p class="graphie" id="parent_block">
+ init({ range: [ [ 0, 1 ], [ 0, 1 ] ],scale: [ 600, 25 ] });
+
+ passVars( D, N_PARENT, N_OFFSPRING );
+
+ rectchart( [ 1, 0 ], ["#e00", "#999" ] );
+ </p>
+
+ <p id="slice_equation" style="display: none;"><code>1<var>FRACTION_PARENT</var>÷</code> <span id="slice_pieces"></span> <code>=</code> <span class="slice_fraction"></span></p>
+
+ <div id="slice_explanation" style="display: none;">
+ <p>You cannot make a block that is <code><var>FRACTION_OFFSPRING</var></code> units long by copying pieces that are <span class="slice_fraction"></span> units long. Try again.</p>
+ </div>
+ </div>
+
+
+ <div id="cloning" style="display: none;">
+ <p><span class="hint_blue">Second</span>: Clone the new block to create a block that is <code><var>FRACTION_OFFSPRING</var></code> units long.</p>
+
+ <div class="graphie" id="offspring_block">
+ </div>
+
+ <p id="clone_equation" style="display: none;"><span class="slice_fraction"></span> <code>×</code> <span id="clone_times"></span> <code>=</code> <span class="clone_fraction"></span></code></p>
+
+
+ </div>
+
+ <div class="solution" data-type="multiple">
+ <div id="slice_controls" style="margin-bottom: 10px;">
+ Slice into
+ <input type="button" value="-" class="simple-button action-gradient" id="decrease_pieces" onclick="KhanUtil.changePieces( false )">
+ <span id="pieces" style="display: inline-block; width: 53px; text-align: center;">1 piece</span>
+ <input type="button" value="+" class="simple-button action-gradient" id="increase_pieces" onclick="KhanUtil.changePieces( true )">
+ <input type="button" id="slice_button" value="Try It" class="simple-button action-gradient green" onclick="KhanUtil.slice()">
+ </div>
+
+ <div id="clone_controls" style="display: none; margin-bottom: 10px;">
+ Copy
+ <input type="button" value="-" class="simple-button action-gradient" id="decrease_clones" onclick="KhanUtil.changeTimes( false )" disabled="disabled">
+ <span id="times" style="display: inline-block; width: 46px; text-align: center;">1 time</span>
+ <input type="button" value="+" class="simple-button action-gradient" id="increase_clones" onclick="KhanUtil.changeTimes( true )">
+ <input type="button" id="clone_button" value="Try It" class="simple-button action-gradient green" onclick="KhanUtil.clone()">
+ </div>
+
+ <span class="sol" id="slice_answer" style="display: none;"><var>N_PARENT + D</var></span>
+ <span class="sol" id="clone_answer" style="display: none;"><var>N_OFFSPRING</var></span>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
View
@@ -779,6 +779,11 @@ function makeProblem( id, seed ) {
// Remove and store hints to delay running modules on it
hints = problem.children( ".hints" ).remove();
+ // Remove the hint box if there are no hints in the problem
+ if ( hints.length === 0 ) {
+ jQuery( ".hint-box" ).remove();
+ }
+
// Run the main method of any modules
problem.runModules( problem, "Load" );
problem.runModules( problem );
View
@@ -0,0 +1,104 @@
+// Helper for fractions_cut_and_copy_1 and fractions_cut_and_copy_2
+jQuery.extend( KhanUtil, {
+ passVars: function( d, n_parent, n_offspring ) {
+ KhanUtil.d = d;
+ KhanUtil.n_parent = n_parent;
+ KhanUtil.n_offspring = n_offspring;
+ KhanUtil.pieces = 1;
+ KhanUtil.times = 1;
+
+ jQuery( "#check-answer-button" ).hide();
+ },
+
+ // Add or remove slices
+ changePieces: function( increase ) {
+ var pieces;
+
+ if ( KhanUtil.pieces === 1 && !increase ) {
+ return;
+ }
+
+ KhanUtil.pieces += ( increase ) ? 1 : -1;
+ pieces = KhanUtil.pieces;
+
+ jQuery( "#pieces" ).text( KhanUtil.plural(pieces, "piece") );
+
+ KhanUtil.currentGraph = jQuery( "#problemarea" ).find( "#parent_block" ).data( "graphie" );
+
+ rectchart( [ 1, pieces - 1 ], ["#e00", "#999" ] );
+ },
+
+ slice: function() {
+ var pieces = KhanUtil.pieces;
+ var n_parent = KhanUtil.n_parent;
+ var d = KhanUtil.d;
+
+ jQuery( "#slice_pieces" ).html( "<code>" + pieces + "</code>" ).tmpl();
+ jQuery( ".slice_fraction" ).each(function( i, elem) {
+ var code = jQuery( "<code>" + KhanUtil.fractionReduce(n_parent + d, d * pieces) + "</code>");
+ jQuery( elem ).html( code ).tmpl();
+ });
+ jQuery( "#slice_equation" ).show();
+
+ if ( pieces % ( n_parent + d ) !== 0 ) {
+ jQuery( "#slice_explanation" ).show();
+ jQuery( "#slice_button" ).val( "Try Again" );
+ return;
+ } else {
+ jQuery( "#slice_explanation" ).hide();
+ }
+
+ jQuery( "#slice_controls" ).text( "Slice into " + KhanUtil.plural(pieces, "piece") + "." );
+ jQuery( "#cloning" ).show();
+ jQuery( "#clone_controls" ).show();
+
+ var graph = KhanUtil.currentGraph = jQuery( "#problemarea" ).find( "#offspring_block" ).data( "graphie" );
+ graph.init({ range: [ [ 0, 1 ], [ 0, 1 ] ],scale: [ 600 / pieces, 25 ] });
+ rectchart( [ 1, 0 ], ["#e00", "#999" ] );
+ },
+
+ changeTimes: function( increase ) {
+ var times;
+ var pieces = KhanUtil.pieces;
+ var d = KhanUtil.d;
+ var n_parent = KhanUtil.n_parent;
+
+ if ( KhanUtil.times === 1 && !increase || KhanUtil.times === pieces && increase ) {
+ return;
+ }
+
+ KhanUtil.times += ( increase ) ? 1 : -1;
+ times = KhanUtil.times;
+
+ jQuery( "#times" ).text( KhanUtil.plural(times, "time") );
+
+ KhanUtil.currentGraph.init({ range: [ [ 0, 1 ], [ 0, 1 ] ],scale: [ 600 / pieces * times, 25 ] });
+ rectchart( [ times, 0 ], ["#e00", "#999" ] );
+ },
+
+ clone: function() {
+ var n_parent = KhanUtil.n_parent;
+ var n_offspring = KhanUtil.n_offspring;
+ var d = KhanUtil.d;
+ var pieces = KhanUtil.pieces;
+ var times = KhanUtil.times;
+
+ jQuery( "#clone_times" ).html( "<code>" + times + "</code>" ).tmpl();
+ jQuery( ".clone_fraction" ).each(function( i, elem) {
+ var code = jQuery( "<code>" + KhanUtil.fractionReduce( ( n_parent + d ) * times, d * pieces ) + "</code>");
+ jQuery( elem ).html( code ).tmpl();
+ });
+ jQuery( "#clone_equation" ).show();
+
+ if ( times / ( pieces / ( n_parent + d ) ) !== n_offspring ) {
+ jQuery( "#clone_button" ).val( "Try Again" );
+ return;
+ }
+
+ rectchart( [ 1, 0 ], [ "#e00", "#999" ] );
+ jQuery( "#clone_controls" ).text( "Copy " + KhanUtil.plural(times, "time") + "." );
+ jQuery( "#slice_answer input" ).val( n_parent + d );
+ jQuery( "#clone_answer input" ).val( n_offspring );
+ jQuery( "#check-answer-button" ).click();
+ }
+});

0 comments on commit ebb3ac5

Please sign in to comment.