Permalink
Browse files

Split measuring_segments into 4 exercises

  • Loading branch information...
1 parent 4af09e4 commit d1032857476fa60f54a472c9f6d9307fada5991f @beneater beneater committed Apr 3, 2012
@@ -1,318 +0,0 @@
-<!DOCTYPE html>
-<html data-require="math graphie expressions">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Measuring segments</title>
- <script src="../khan-exercise.js"></script>
- <style>
- .lcol { text-align:left; width:200px; display:inline-block; }
- .rcol { text-align:left; width:auto; display:inline-block; }
- </style>
-
-</head>
-<body>
-<div class="exercise">
- <div class="problems">
- <div id="distance">
- <div class="vars">
- <var id="POINTS">sortNumbers( randRangeUnique( -5, 5, 4 ) )</var>
- <var id="COLORS">[ BLUE, GREEN, PINK, ORANGE ]</var>
- <var id="IDX_1,IDX_2">randRangeUnique( 0, 4, 2 )</var>
- <var id="POINT_1">[ "A", "B", "C", "D" ][ IDX_1 ]</var>
- <var id="POINT_2">[ "A", "B", "C", "D" ][ IDX_2 ]</var>
- <var id="SEGMENT">POINT_1 + POINT_2</var>
- <var id="SOLUTION">abs( POINTS[ IDX_1 ] - POINTS[ IDX_2 ] )</var>
- </div>
- <p class="question">What is <code><var>SEGMENT</var></code>?</p>
- <div class="problem">
- <div class="graphie" id="number-line">
- init({
- range: [ [ -6, 6 ], [ -1, 1 ] ]
- });
- style({ stroke: "#999" });
- line( [ -5, 0 ], [ 5, 0 ] );
- for ( var x = -5; x &lt;= 5; x++ ) {
- line( [ x, -0.2 ], [ x, 0.2 ] );
- label( [ x, -0.53 ], String( x ).replace( /-(\d)/g, "\\llap{-}$1" ), "center", { color: "#999" } );
- }
- style({ strokeWidth: 3.5 });
- line( [ 0, -0.2], [0, 0.2]);
-
- style({ stroke: COLORS[ 0 ], fill: COLORS[ 0 ] });
- circle( [ POINTS[ 0 ], 0 ], 0.10 );
- style({ stroke: COLORS[ 1 ], fill: COLORS[ 1 ] });
- circle( [ POINTS[ 1 ], 0 ], 0.10 );
- style({ stroke: COLORS[ 2 ], fill: COLORS[ 2 ] });
- circle( [ POINTS[ 2 ], 0 ], 0.10 );
- style({ stroke: COLORS[ 3 ], fill: COLORS[ 3 ] });
- circle( [ POINTS[ 3 ], 0 ], 0.10 );
- label( [ POINTS[ 0 ], 0 ], "A", "above", { color: COLORS[ 0 ] } );
- label( [ POINTS[ 1 ], 0 ], "B", "above", { color: COLORS[ 1 ] } );
- label( [ POINTS[ 2 ], 0 ], "C", "above", { color: COLORS[ 2 ] } );
- label( [ POINTS[ 3 ], 0 ], "D", "above", { color: COLORS[ 3 ] } );
- </div>
- </div>
- <div class="solution" data-forms="integer"><var>SOLUTION</var></div>
-
- <div class="hints">
- <p>
- <code><var>SEGMENT</var></code> means the distance from <code>\color{<var>COLORS[ IDX_1 ]</var>}{<var>POINT_1</var>}</code> to
- <code>\color{<var>COLORS[ IDX_2 ]</var>}{<var>POINT_2</var>}</code>.
- </p>
- <p><code><var>SEGMENT</var> = |\color{<var>COLORS[ IDX_1 ]</var>}{<var>POINTS[ IDX_1 ]</var>} - \color{<var>COLORS[ IDX_2 ]</var>}{<var>POINTS[ IDX_2 ]</var>}|</code></p>
- <p><code><var>SEGMENT</var> = |<var>POINTS[ IDX_1 ] - POINTS[ IDX_2 ]</var>|</code></p>
- <p><code><var>SEGMENT</var> = <var>SOLUTION</var></code></p>
- </div>
- </div>
-
- <div id="algebra">
- <div class="vars">
- <var id="POINTS">randFromArray([ [ "A", "B", "C" ], [ "J", "K", "L" ], [ "C", "J", "T" ] ])</var>
- <var id="SEG_1">POINTS[ 0 ] + POINTS[ 1 ]</var>
- <var id="SEG_2">POINTS[ 1 ] + POINTS[ 2 ]</var>
- <var id="SEG_TOTAL">POINTS[ 0 ] + POINTS[ 2 ]</var>
- <var id="COEF_1">randRangeNonZero( 2, 9 )</var>
- <var id="CONST_1">randRangeNonZero( 2, 9 )</var>
- <var id="COEF_2">randRangeNonZero( 2, 9 )</var>
- <var id="CONST_2">randRangeNonZero( 2, 9 )</var>
- <var id="X">randRange( 1, 9 )</var>
- <var id="TOTAL">( COEF_1 * X + CONST_1 ) + ( COEF_2 * X + CONST_2 )</var>
- <var id="GIVEN">shuffle([
- [ BLUE, SEG_1 + " = " + COEF_1 + "x + " + CONST_1 ],
- [ GREEN, SEG_2 + " = " + COEF_2 + "x + " + CONST_2 ],
- [ "purple", SEG_TOTAL + " = " + TOTAL ]
- ])</var>
- </div>
- <div class="problem">
- <div class="graphie" id="number-line">
- init({
- range: [ [ -1, 11 ], [ -1, 1 ] ]
- });
- line( [ 0, 0 ], [ 10, 0 ] );
- style({ stroke: "#000", fill: "#000" });
- graph.points = raphael.set();
- graph.points.push( circle( [ 0, 0 ], 0.10 ) );
- graph.points.push( circle( [ 10 * ( COEF_1 * X + CONST_1 ) / TOTAL, 0 ], 0.10 ) );
- graph.points.push( circle( [ 10, 0 ], 0.10 ) );
- label( [ 0, 0 ], POINTS[ 0 ], "below" );
- label( [ 10 * ( COEF_1 * X + CONST_1 ) / TOTAL, 0 ], POINTS[ 1 ], "below" );
- label( [ 10, 0 ], POINTS[ 2 ], "below" );
- </div>
- <p>
- If:<br />
- <span id="given0"><code>\qquad <var>GIVEN[ 0 ][ 1 ]</var></code></span>,<br />
- <span id="given1"><code>\qquad <var>GIVEN[ 1 ][ 1 ]</var></code></span>, and<br />
- <span id="given2"><code>\qquad <var>GIVEN[ 2 ][ 1 ]</var></code></span>,
- </p>
- </div>
- <p class="question">Find <code><var>SEG_2</var></code>.</p>
- <div class="solution" data-forms="integer"><var>COEF_2 * X + CONST_2</var></div>
- <div class="hints">
- <div>
- <div class="graphie" data-update="number-line">
- style({ stroke: BLUE, strokeWidth: 3 });
- line( [ 0, 0 ], [ 10 * ( COEF_1 * X + CONST_1 ) / TOTAL, 0 ] );
- style({ stroke: GREEN, strokeWidth: 3 });
- line( [ 10 * ( COEF_1 * X + CONST_1 ) / TOTAL, 0 ], [ 10, 0 ] );
- graph.points.toFront();
- jQuery( "#given0" ).css({ "color": GIVEN[ 0 ][ 0 ] });
- jQuery( "#given1" ).css({ "color": GIVEN[ 1 ][ 0 ] });
- jQuery( "#given2" ).css({ "color": GIVEN[ 2 ][ 0 ] });
- </div>
- <p>From the diagram, we can see that the total length of <code>\purple{<var>SEG_TOTAL</var>}</code> is the sum of <code>\blue{<var>SEG_1</var>}</code> and <code>\green{<var>SEG_2</var>}</code>:</p>
- <p><code>\qquad \blue{<var>SEG_1</var>} + \green{<var>SEG_2</var>} = \purple{<var>SEG_TOTAL</var>}</code></p>
- </div>
- <div>
- <p>Substitute in the expressions that were given for each length:</p>
- <p><code>\qquad \blue{<var>COEF_1</var>x + <var>CONST_1</var>} + \green{<var>COEF_2</var>x + <var>CONST_2</var>} = \purple{<var>TOTAL</var>}</code></p>
- </div>
- <div>
- <p>Combine like terms:</p>
- <p><code>\qquad<var>COEF_1 + COEF_2</var>x + <var>CONST_1 + CONST_2</var> = \purple{<var>TOTAL</var>}</code></p>
- </div>
- <div>
- <p>Subtract <code><var>CONST_1 + CONST_2</var></code> from both sides:</p>
- <p><code>\qquad<var>COEF_1 + COEF_2</var>x = <var>TOTAL - CONST_1 - CONST_2</var></code></p>
- </div>
- <div>
- <p>Divide both sides by <code><var>COEF_1 + COEF_2</var></code> to find <code class="hint_pink">x</code>:</p>
- <p><code class="hint_pink">\qquad x = <var>X</var></code></p>
- </div>
- <div>
- <p>Substitute <code class="hint_pink"><var>X</var></code> for <code class="hint_pink">x</code> in the expression that was given for <code><var>SEG_2</var></code>:
- <p><code class="hint_green">\qquad <var>SEG_2</var> = <var>COEF_2</var>(\pink{<var>X</var>}) + <var>CONST_2</var></code></p>
- </div>
- <div>
- <p>Simplify:</p>
- <p><code>\qquad \green{<var>SEG_2</var> = <var>COEF_2 * X</var> + <var>CONST_2</var>}</code></p>
- </div>
- <div>
- <p class="final_answer">Simplify to find <code>\green{<var>SEG_2</var>}</code>:</p>
- <p><code>\qquad \green{<var>SEG_2</var> = <var>COEF_2 * X + CONST_2</var>}</code></p>
- </div>
- </div>
- </div>
-
- <div id="congruent">
- <div class="vars">
- <var id="SOLUTION">random() < 0.5 ? "Yes" : "No"</var>
- <div data-ensure="( SOLUTION === 'Yes' && POINTS[ 1 ] - POINTS[ 0 ] === POINTS[ 3 ] - POINTS[ 2 ] ) || ( SOLUTION === 'No' && POINTS[ 1 ] - POINTS[ 0 ] !== POINTS[ 3 ] - POINTS[ 2 ] )">
- <var id="POINTS">sortNumbers( randRangeUnique( -5, 5, 4 ) )</var>
- </div>
- <var id="COLORS">[ BLUE, GREEN, PINK, ORANGE ]</var>
- </div>
- <p class="question">Are <code>\overline{AB}</code> and <code>\overline{CD}</code> congruent?</p>
- <div class="problem">
- <div class="graphie" id="number-line">
- init({
- range: [ [ -6, 6 ], [ -1, 1 ] ]
- });
- style({ stroke: "#999" });
- line( [ -5, 0 ], [ 5, 0 ] );
- for ( var x = -5; x &lt;= 5; x++ ) {
- line( [ x, -0.2 ], [ x, 0.2 ] );
- label( [ x, -0.53 ], String( x ).replace( /-(\d)/g, "\\llap{-}$1" ), "center", { color: "#999" } );
- }
- style({ strokeWidth: 3.5 });
- line( [ 0, -0.2], [0, 0.2]);
-
- style({ stroke: COLORS[ 0 ], fill: COLORS[ 0 ] });
- circle( [ POINTS[ 0 ], 0 ], 0.10 );
- style({ stroke: COLORS[ 1 ], fill: COLORS[ 1 ] });
- circle( [ POINTS[ 1 ], 0 ], 0.10 );
- style({ stroke: COLORS[ 2 ], fill: COLORS[ 2 ] });
- circle( [ POINTS[ 2 ], 0 ], 0.10 );
- style({ stroke: COLORS[ 3 ], fill: COLORS[ 3 ] });
- circle( [ POINTS[ 3 ], 0 ], 0.10 );
- label( [ POINTS[ 0 ], 0 ], "A", "above", { color: COLORS[ 0 ] } );
- label( [ POINTS[ 1 ], 0 ], "B", "above", { color: COLORS[ 1 ] } );
- label( [ POINTS[ 2 ], 0 ], "C", "above", { color: COLORS[ 2 ] } );
- label( [ POINTS[ 3 ], 0 ], "D", "above", { color: COLORS[ 3 ] } );
- </div>
- </div>
- <div class="solution"><var>SOLUTION</var></div>
- <ul class="choices" data-category="true">
- <li>Yes</li>
- <li>No</li>
- </ul>
-
- <div class="hints">
- <p>Congruent segments have equal lengths.</p>
- <div>
- <p>Find the lengths of <code>\overline{AB}</code> and <code>\overline{CD}</code>:</p>
- <p>
- <span class="lcol"><code>AB = |\color{<var>COLORS[ 0 ]</var>}{<var>POINTS[ 0 ]</var>} - \color{<var>COLORS[ 1 ]</var>}{<var>POINTS[ 1 ]</var>}|</code></span>
- <span class="rcol"><code>CD = |\color{<var>COLORS[ 2 ]</var>}{<var>POINTS[ 2 ]</var>} - \color{<var>COLORS[ 3 ]</var>}{<var>POINTS[ 3 ]</var>}|</code></span>
- </p>
- </div>
- <p>
- <span class="lcol"><code>AB = |<var>POINTS[ 0 ] - POINTS[ 1 ]</var>|</code></span>
- <span class="rcol"><code>CD = |<var>POINTS[ 2 ] - POINTS[ 3 ]</var>|</code></span>
- </p>
- <p>
- <span class="lcol"><code>AB = <var>POINTS[ 1 ] - POINTS[ 0 ]</var></code></span>
- <span class="rcol"><code>CD = <var>POINTS[ 3 ] - POINTS[ 2 ]</var></code></span>
- </p>
- <div data-if="SOLUTION === 'Yes'" data-unwrap>
- <p><code>AB = CD</code></p>
- <p class="final_answer">Yes, <code>\overline{AB}</code> and <code>\overline{CD}</code> are congruent.</p>
- </div>
- <div data-else data-unwrap>
- <p><code>AB \neq CD</code></p>
- <p class="final_answer">No, <code>\overline{AB}</code> and <code>\overline{CD}</code> are not congruent.</p>
- </div>
- </div>
- </div>
-
- <div id="midpoint">
- <div class="vars">
- <var id="POINTS">randFromArray([ [ "A", "B", "C" ], [ "J", "K", "L" ], [ "C", "J", "T" ] ])</var>
- <var id="SEG_1">POINTS[ 0 ] + POINTS[ 1 ]</var>
- <var id="SEG_2">POINTS[ 1 ] + POINTS[ 2 ]</var>
- <var id="SEG_TOTAL">POINTS[ 0 ] + POINTS[ 2 ]</var>
- <div data-ensure="( COEF_1 !== COEF_2 || CONST_1 !== CONST_2 ) && ( TOTAL > 0 ) && ( CONST_2 !== 0 )">
- <var id="X">randRange( 1, 9 )</var>
- <var id="COEF_1">randRangeNonZero( 2, 9 )</var>
- <var id="CONST_1">randRangeNonZero( -9, 9 )</var>
- <var id="COEF_2">randRangeNonZero( 2, 9 )</var>
- <var id="CONST_2">COEF_1 * X + CONST_1 - COEF_2 * X</var>
- <var id="TOTAL">( COEF_1 * X + CONST_1 ) + ( COEF_2 * X + CONST_2 )</var>
- </div>
- </div>
- <div class="problem">
- <p><code><var>POINTS[ 1 ]</var></code> is the midpoint of <code>\overline{<var>SEG_TOTAL</var>}</code></p>
- <div class="graphie" id="number-line">
- init({
- range: [ [ -1, 11 ], [ -1, 1 ] ]
- });
- line( [ 0, 0 ], [ 10, 0 ] );
- style({ stroke: "#000", fill: "#000" });
- graph.points = raphael.set();
- graph.points.push( circle( [ 0, 0 ], 0.10 ) );
- graph.points.push( circle( [ 5, 0 ], 0.10 ) );
- graph.points.push( circle( [ 10, 0 ], 0.10 ) );
- label( [ 0, 0 ], POINTS[ 0 ], "below" );
- label( [ 5, 0 ], POINTS[ 1 ], "below" );
- label( [ 10, 0 ], POINTS[ 2 ], "below" );
- </div>
- <p>
- If:<br />
- <span id="given1"><code>\qquad <var>SEG_1</var> = <var>COEF_1</var>x + <var>CONST_1</var></code></span> and<br />
- <span id="given2"><code>\qquad <var>SEG_2</var> = <var>COEF_2</var>x + <var>CONST_2</var></code></span><br />
- </p>
- </div>
- <p class="question">Find <code><var>SEG_TOTAL</var></code>.</p>
- <div class="solution" data-forms="integer"><var>TOTAL</var></div>
- <div class="hints">
- <p>A midpoint divides a segment into two segments with equal lengths.</p>
- <div>
- <div class="graphie" data-update="number-line">
- style({ stroke: BLUE, strokeWidth: 3 });
- line( [ 0, 0 ], [ 5, 0 ] );
- style({ stroke: GREEN, strokeWidth: 3 });
- line( [ 5, 0 ], [ 10, 0 ] );
- graph.points.toFront();
- jQuery( "#given1" ).css({ "color": BLUE });
- jQuery( "#given2" ).css({ "color": GREEN });
- </div>
- <p><code>\blue{<var>SEG_1</var>} = \green{<var>SEG_2</var>}</code></p>
- </div>
- <div>
- <p>Substitute in the expressions that were given for each length:</p>
- <p><code>\qquad \blue{<var>COEF_1</var>x + <var>CONST_1</var>} = \green{<var>COEF_2</var>x + <var>CONST_2</var>}</code></p>
- </div>
- <div>
- <p>Solve for <code class="hint_pink">x</code>:</p>
- <p><code class="hint_pink">\qquad <var>expr([ "*", COEF_1 - COEF_2, "x" ])</var> = <var>CONST_2 - CONST_1</var></code></p>
- </div>
- <p data-if="abs( COEF_1 - COEF_2 - 1 ) > 0.001" class="hint_pink"><code>\qquad x = <var>X</var></code></p>
- <div>
- <p>
- Substitute <code class="hint_pink"><var>X</var></code> for <code class="hint_pink">x</code> in the expressions that were given for
- <code class="hint_blue"><var>SEG_1</var></code> and <code class="hint_green"><var>SEG_2</var></code>:
- </p>
- <p>
- <span class="lcol"><code class="hint_blue">\qquad <var>SEG_1</var> = <var>COEF_1</var>(\pink{<var>X</var>}) + <var>CONST_1</var></code></span>
- <span class="rcol"><code class="hint_green">\qquad <var>SEG_2</var> = <var>COEF_2</var>(\pink{<var>X</var>}) + <var>CONST_2</var></code></span>
- </p>
- </div>
- <p>
- <span class="lcol"><code class="hint_blue">\qquad <var>SEG_1</var> = <var>COEF_1 * X</var> + <var>CONST_1</var></code></span>
- <span class="rcol"><code class="hint_green">\qquad <var>SEG_2</var> = <var>COEF_2 * X</var> + <var>CONST_2</var></code></span>
- </p>
- <p>
- <span class="lcol"><code class="hint_blue">\qquad <var>SEG_1</var> = <var>COEF_1 * X + CONST_1</var></code></span>
- <span class="rcol"><code class="hint_green">\qquad <var>SEG_2</var> = <var>COEF_2 * X + CONST_2</var></code></span>
- </p>
- <div>
- <p>To find the length <code><var>SEG_TOTAL</var></code>, add the lengths <code>\blue{<var>SEG_1</var>}</code> and <code>\green{<var>SEG_2</var>}</code>:</p>
- <p><code>\qquad <var>SEG_TOTAL</var> = \blue{<var>SEG_1</var>} + \green{<var>SEG_2</var>}</code></p>
- </div>
- <p><code>\qquad <var>SEG_TOTAL</var> = \blue{<var>COEF_1 * X + CONST_1</var>} + \green{<var>COEF_2 * X + CONST_2</var>}</code></p>
- <p><code>\qquad <var>SEG_TOTAL</var> = <var>TOTAL</var></code></p>
- </div>
- </div>
- </div>
-</div>
-</body>
-</html>
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html data-require="math graphie expressions">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <title>Measuring segments 1</title>
+ <script src="../khan-exercise.js"></script>
+</head>
+<body>
+<div class="exercise">
+ <div class="problems">
+ <div>
+ <div class="vars">
+ <var id="POINTS">sortNumbers( randRangeUnique( -5, 5, 4 ) )</var>
+ <var id="COLORS">[ BLUE, GREEN, PINK, ORANGE ]</var>
+ <var id="IDX_1,IDX_2">randRangeUnique( 0, 4, 2 )</var>
+ <var id="POINT_1">[ "A", "B", "C", "D" ][ IDX_1 ]</var>
+ <var id="POINT_2">[ "A", "B", "C", "D" ][ IDX_2 ]</var>
+ <var id="SEGMENT">POINT_1 + POINT_2</var>
+ <var id="SOLUTION">abs( POINTS[ IDX_1 ] - POINTS[ IDX_2 ] )</var>
+ </div>
+ <p class="question">What is <code><var>SEGMENT</var></code>?</p>
+ <div class="problem">
+ <div class="graphie" id="number-line">
+ init({
+ range: [ [ -6, 6 ], [ -1, 1 ] ]
+ });
+ style({ stroke: "#999" });
+ line( [ -5, 0 ], [ 5, 0 ] );
+ for ( var x = -5; x &lt;= 5; x++ ) {
+ line( [ x, -0.2 ], [ x, 0.2 ] );
+ label( [ x, -0.53 ], String( x ).replace( /-(\d)/g, "\\llap{-}$1" ), "center", { color: "#999" } );
+ }
+ style({ strokeWidth: 3.5 });
+ line( [ 0, -0.2], [0, 0.2]);
+
+ style({ stroke: COLORS[ 0 ], fill: COLORS[ 0 ] });
+ circle( [ POINTS[ 0 ], 0 ], 0.10 );
+ style({ stroke: COLORS[ 1 ], fill: COLORS[ 1 ] });
+ circle( [ POINTS[ 1 ], 0 ], 0.10 );
+ style({ stroke: COLORS[ 2 ], fill: COLORS[ 2 ] });
+ circle( [ POINTS[ 2 ], 0 ], 0.10 );
+ style({ stroke: COLORS[ 3 ], fill: COLORS[ 3 ] });
+ circle( [ POINTS[ 3 ], 0 ], 0.10 );
+ label( [ POINTS[ 0 ], 0 ], "A", "above", { color: COLORS[ 0 ] } );
+ label( [ POINTS[ 1 ], 0 ], "B", "above", { color: COLORS[ 1 ] } );
+ label( [ POINTS[ 2 ], 0 ], "C", "above", { color: COLORS[ 2 ] } );
+ label( [ POINTS[ 3 ], 0 ], "D", "above", { color: COLORS[ 3 ] } );
+ </div>
+ </div>
+ <div class="solution" data-forms="integer"><var>SOLUTION</var></div>
+
+ <div class="hints">
+ <p>
+ <code><var>SEGMENT</var></code> means the distance from <code>\color{<var>COLORS[ IDX_1 ]</var>}{<var>POINT_1</var>}</code> to
+ <code>\color{<var>COLORS[ IDX_2 ]</var>}{<var>POINT_2</var>}</code>.
+ </p>
+ <p><code><var>SEGMENT</var> = |\color{<var>COLORS[ IDX_1 ]</var>}{<var>POINTS[ IDX_1 ]</var>} - \color{<var>COLORS[ IDX_2 ]</var>}{<var>POINTS[ IDX_2 ]</var>}|</code></p>
+ <p><code><var>SEGMENT</var> = |<var>POINTS[ IDX_1 ] - POINTS[ IDX_2 ]</var>|</code></p>
+ <p><code><var>SEGMENT</var> = <var>SOLUTION</var></code></p>
+ </div>
+ </div>
+ </div>
+</div>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit d103285

Please sign in to comment.