PageRenderTime 55ms CodeModel.GetById 25ms RepoModel.GetById 1ms app.codeStats 0ms

/wp-content/plugins/khan-exercises/khan-exercises/exercises/graphing_systems_of_equations.html

https://gitlab.com/gregtyka/lfmawordpress
HTML | 299 lines | 288 code | 11 blank | 0 comment | 0 complexity | 7c9a9064ed9bc22ce2ea3cf049b6d3c5 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html data-require="math math-format expressions graphie interactive">
    3. 

  3. <head>
    4. 

  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. 

  5.     <title>Graphing systems of equations</title>
    6. 

  6.     <script src="../khan-exercise.js"></script>
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

  9. <div class="exercise">
    10. 

  10.     <div class="problems">
    11. 

  11.         <div id="standard" data-weight="4">
    12. 

  12.             <div class="vars">
    13. 

  13.                 <div data-ensure="( YINT_1 + SLOPE_1_FRAC[0] <= 10 ) && ( YINT_2 + SLOPE_2_FRAC[0] <= 10 ) && ( YINT_1 + SLOPE_1_FRAC[0] >= -10 ) && ( YINT_2 + SLOPE_2_FRAC[0] >= -10 )">
    14. 

  14.                     <var id="X">randRangeNonZero( -5, 5 )</var>
    15. 

  15.                     <var id="Y">randRange( -5, 5 )</var>
    16. 

  16.                     <div data-ensure="( abs(YINT_1 - YINT_2) > 3 ) && ( YINT_1 !== Y ) && ( YINT_2 !== Y )">
    17. 

  17.                         <var id="YINT_1">randRangeNonZero( -5, 5 )</var>
    18. 

  18.                         <var id="YINT_2">randRangeNonZero( -5, 5 )</var>
    19. 

  19.                     </div>
    20. 

  20.                     <var id="SLOPE_1">(Y - YINT_1) / X</var>
    21. 

  21.                     <var id="SLOPE_2">(Y - YINT_2) / X</var>
    22. 

  22.                     <var id="SLOPE_1_FRAC">toFraction( SLOPE_1, 0.001 )</var>
    23. 

  23.                     <var id="SLOPE_2_FRAC">toFraction( SLOPE_2, 0.001 )</var>
    24. 

  24.                 </div>
    25. 

  25.                 <var id="PRETTY_SLOPE_1">SLOPE_1 === 1 ? "" : ( SLOPE_1 === -1 ? "-" : decimalFraction( SLOPE_1, true, true ) )</var>
    26. 

  26.                 <var id="PRETTY_SLOPE_2">SLOPE_2 === 1 ? "" : ( SLOPE_2 === -1 ? "-" : decimalFraction( SLOPE_2, true, true ) )</var>
    27. 

  27.                 <var id="MULT_1">randRangeNonZero( -2, 2 )</var>
    28. 

  28.                 <var id="MULT_2">randRangeNonZero( -2, 2 )</var>
    29. 

  29.                 <var id="A1">( Y - YINT_1 ) * -MULT_1</var>
    30. 

  30.                 <var id="A2">( Y - YINT_2 ) * -MULT_2</var>
    31. 

  31.                 <var id="B1">X * MULT_1</var>
    32. 

  32.                 <var id="B2">X * MULT_2</var>
    33. 

  33.                 <var id="C1">X * YINT_1 * MULT_1</var>
    34. 

  34.                 <var id="C2">X * YINT_2 * MULT_2</var>
    35. 

  35.                 <var id="STD_FORM_1">true</var>
    36. 

  36.                 <var id="STD_FORM_2">true</var>
    37. 

  37.             </div>
    38. 

  38. 

  39.             <p class="question">Graph this system of equations and solve.</p>
    40. 

  40. 

  41.             <div class="problem">
    42. 

  42.                 <p class="hint_blue" data-if="STD_FORM_1">
    43. 

  43.                     <code><var>expr([ "+", [ "*", A1, "x" ], [ "*", B1, "y" ] ])</var> = <var>C1</var></code>
    44. 

  44.                 </p>
    45. 

  45.                 <p class="hint_blue" data-else>
    46. 

  46.                     <code>y = <var>PRETTY_SLOPE_1</var> x + <var>YINT_1</var></code>
    47. 

  47.                 </p>
    48. 

  48. 

  49.                 <p class="hint_green" data-if="STD_FORM_2">
    50. 

  50.                     <code><var>expr([ "+", [ "*", A2, "x" ], [ "*", B2, "y" ] ])</var> = <var>C2</var></code>
    51. 

  51.                 </p>
    52. 

  52.                 <p class="hint_green" data-else>
    53. 

  53.                     <code>y = <var>PRETTY_SLOPE_2</var> x + <var>YINT_2</var></code>
    54. 

  54.                 </p>
    55. 

  55. 

  56.                 <div class="graphie" id="grid">
    57. 

  57.                     graphInit({
    58. 

  58.                         range: 11,
    59. 

  59.                         scale: 20,
    60. 

  60.                         axisArrows: "&lt;-&gt;",
    61. 

  61.                         tickStep: 1,
    62. 

  62.                         labelStep: 1
    63. 

  63.                     });
    64. 

  64. 

  65.                     addMouseLayer();
    66. 

  66.                     graph.pointA = addMovablePoint({
    67. 

  67.                         coord: [ -5, 5 ],
    68. 

  68.                         snapX: 0.5,
    69. 

  69.                         snapY: 0.5,
    70. 

  70.                         normalStyle: {
    71. 

  71.                             stroke: KhanUtil.BLUE,
    72. 

  72.                             fill: KhanUtil.BLUE
    73. 

  73.                         }
    74. 

  74.                     });
    75. 

  75.                     graph.pointB = addMovablePoint({
    76. 

  76.                         coord: [ 5, 5 ],
    77. 

  77.                         snapX: 0.5,
    78. 

  78.                         snapY: 0.5,
    79. 

  79.                         normalStyle: {
    80. 

  80.                             stroke: KhanUtil.BLUE,
    81. 

  81.                             fill: KhanUtil.BLUE
    82. 

  82.                         }
    83. 

  83.                     });
    84. 

  84.                     graph.pointC = addMovablePoint({
    85. 

  85.                         coord: [ -5, -5 ],
    86. 

  86.                         snapX: 0.5,
    87. 

  87.                         snapY: 0.5,
    88. 

  88.                         normalStyle: {
    89. 

  89.                             stroke: KhanUtil.GREEN,
    90. 

  90.                             fill: KhanUtil.GREEN
    91. 

  91.                         }
    92. 

  92.                     });
    93. 

  93.                     graph.pointD = addMovablePoint({
    94. 

  94.                         coord: [ 5, -5 ],
    95. 

  95.                         snapX: 0.5,
    96. 

  96.                         snapY: 0.5,
    97. 

  97.                         normalStyle: {
    98. 

  98.                             stroke: KhanUtil.GREEN,
    99. 

  99.                             fill: KhanUtil.GREEN
    100. 

  100.                         }
    101. 

  101.                     });
    102. 

  102.                     graph.line1 = addMovableLineSegment({
    103. 

  103.                         pointA: graph.pointA,
    104. 

  104.                         pointZ: graph.pointB,
    105. 

  105.                         fixed: true,
    106. 

  106.                         extendLine: true
    107. 

  107.                     });
    108. 

  108.                     graph.line2 = addMovableLineSegment({
    109. 

  109.                         pointA: graph.pointC,
    110. 

  110.                         pointZ: graph.pointD,
    111. 

  111.                         fixed: true,
    112. 

  112.                         extendLine: true,
    113. 

  113.                         normalStyle: {
    114. 

  114.                             "stroke": KhanUtil.GREEN,
    115. 

  115.                             "stroke-width": 2
    116. 

  116.                         }
    117. 

  117.                     });
    118. 

  118. 

  119.                     // A and B can't be in the same place
    120. 

  120.                     graph.pointA.onMove = function( x, y ) {
    121. 

  121.                         return ( x != graph.pointB.coord[0] || y != graph.pointB.coord[1] );
    122. 

  122.                     }
    123. 

  123.                     graph.pointB.onMove = function( x, y ) {
    124. 

  124.                         return ( x != graph.pointA.coord[0] || y != graph.pointA.coord[1] );
    125. 

  125.                     }
    126. 

  126. 

  127.                     // C and D can't be in the same place
    128. 

  128.                     graph.pointC.onMove = function( x, y ) {
    129. 

  129.                         return ( x != graph.pointD.coord[0] || y != graph.pointD.coord[1] );
    130. 

  130.                     }
    131. 

  131.                     graph.pointD.onMove = function( x, y ) {
    132. 

  132.                         return ( x != graph.pointC.coord[0] || y != graph.pointC.coord[1] );
    133. 

  133.                     }
    134. 

  134. 

  135.                     graph.pointC.toFront();
    136. 

  136.                     graph.pointD.toFront();
    137. 

  137.                     graph.pointA.toFront();
    138. 

  138.                     graph.pointB.toFront();
    139. 

  139. 

  140.                 </div>
    141. 

  141.                 Click and drag the points to move the lines.
    142. 

  142.             </div>
    143. 

  143.             <div class="solution" data-type="multiple">
    144. 

  144.                 <p><code>x = </code> <span class="sol"><var>X</var></span></p>
    145. 

  145.                 <p><code>y = </code> <span class="sol"><var>Y</var></span></p>
    146. 

  146.                 <div class="sol" data-type="custom">
    147. 

  147.                     <div class="instruction">
    148. 

  148.                         Your graphs are also part of your answer.
    149. 

  149.                     </div>
    150. 

  150.                     <div class="guess">
    151. 

  151.                         [ graph.pointA.coord, graph.pointB.coord, graph.pointC.coord, graph.pointD.coord ]
    152. 

  152.                     </div>
    153. 

  153.                     <div class="validator-function">
    154. 

  154.                         var slope1 = ( guess[1][1] - guess[0][1] ) / ( guess[1][0] - guess[0][0] );
    155. 

  155.                         var slope2 = ( guess[3][1] - guess[2][1] ) / ( guess[3][0] - guess[2][0] );
    156. 

  156.                         var yint1 = slope1 * ( 0 - guess[0][0] ) + guess[0][1];
    157. 

  157.                         var yint2 = slope2 * ( 0 - guess[2][0] ) + guess[2][1];
    158. 

  158.                         // allows blue function to be graphed with green line and vice versa, fwiw
    159. 

  159.                         return ( abs( SLOPE_1 - slope1 ) &lt; 0.001
    160. 

  160.                             &amp;&amp; abs( SLOPE_2 - slope2 ) &lt; 0.001
    161. 

  161.                             &amp;&amp; abs( YINT_1 - yint1 ) &lt; 0.001
    162. 

  162.                             &amp;&amp; abs( YINT_2 - yint2 ) &lt; 0.001 )
    163. 

  163.                             || ( abs( SLOPE_1 - slope2 ) &lt; 0.001
    164. 

  164.                             &amp;&amp; abs( SLOPE_2 - slope1 ) &lt; 0.001
    165. 

  165.                             &amp;&amp; abs( YINT_2 - yint1 ) &lt; 0.001
    166. 

  166.                             &amp;&amp; abs( YINT_1 - yint2 ) &lt; 0.001 );
    167. 

  167.                     </div>
    168. 

  168.                     <div class="show-guess">
    169. 

  169.                         graph.pointA.setCoord( guess[0] );
    170. 

  170.                         graph.pointB.setCoord( guess[1] );
    171. 

  171.                         graph.pointC.setCoord( guess[2] );
    172. 

  172.                         graph.pointD.setCoord( guess[3] );
    173. 

  173.                         graph.line1.transform( true );
    174. 

  174.                         graph.line2.transform( true );
    175. 

  175.                     </div>
    176. 

  176.                 </div>
    177. 

  177.                 <div class="example">two integers like <code>6</code></div>
    178. 

  178.             </div>
    179. 

  179.         </div>
    180. 

  180.         <div id="slope-intercept" data-type="standard" data-weight="5">
    181. 

  181.             <div class="vars">
    182. 

  182.                 <var id="STD_FORM_1">false</var>
    183. 

  183.                 <var id="STD_FORM_2">false</var>
    184. 

  184.             </div>
    185. 

  185.         </div>
    186. 

  186.         <div id="mixed" data-type="standard" data-weight="1">
    187. 

  187.             <div class="vars">
    188. 

  188.                 <var id="STD_FORM_1">random() &lt; 0.5 ? true : false</var>
    189. 

  189.                 <var id="STD_FORM_2">!STD_FORM_1</var>
    190. 

  190.             </div>
    191. 

  191.         </div>
    192. 

  192.     </div>
    193. 

  193. 

  194.     <div class="hints">
    195. 

  195.         <div data-if="STD_FORM_1" data-unwrap>
    196. 

  196.             <p class="hint_blue">
    197. 

  197.                 Convert the first equation,
    198. 

  198.                 <code><var>expr([ "+", [ "*", A1, "x" ], [ "*", B1, "y" ] ])</var> = <var>C1</var></code>,
    199. 

  199.                 to slope-intercept form.
    200. 

  200.             </p>
    201. 

  201.             <p class="hint_blue"><code>y = <var>PRETTY_SLOPE_1</var> x + <var>YINT_1</var></code></p>
    202. 

  202.         </div>
    203. 

  203.         <p class="hint_blue">
    204. 

  204.             The y-intercept for the first equation is <code><var>YINT_1</var></code>, so the first line
    205. 

  205.             must pass through the point <code>(0, <var>YINT_1</var>)</code>.
    206. 

  206.         </p>
    207. 

  207.         <p class="hint_blue">
    208. 

  208.             The slope for the first equation is <code><var>decimalFraction( SLOPE_1, true, true )</var></code>. Remember that
    209. 

  209.             the slope tells you rise over run. So in this case for every
    210. 

  210.             <code><var>abs( SLOPE_1_FRAC[0] )</var></code>
    211. 

  211.             <var>"position" + ( abs( SLOPE_1_FRAC[0] ) !== 1 ? "s" : "" )</var>
    212. 

  212.             you move
    213. 

  213.             <span data-if="SLOPE_1_FRAC[0] < 0"><em>down</em> (because it's negative)</span>
    214. 

  214.             <span data-else>up</span>
    215. 

  215.             you must also move
    216. 

  216.             <code><var>SLOPE_1_FRAC[1]</var></code>
    217. 

  217.             <var>"position" + ( abs( SLOPE_1_FRAC[1] ) !== 1 ? "s" : "" )</var>
    218. 

  218.             to the right.
    219. 

  219.         </p>
    220. 

  220.         <p class="hint_blue">
    221. 

  221.             <code><var>SLOPE_1_FRAC[1]</var></code>
    222. 

  222.             <var>"position" + ( abs( SLOPE_1_FRAC[1] ) !== 1 ? "s" : "" )</var> to the right and
    223. 

  223.             <code><var>abs( SLOPE_1_FRAC[0] )</var></code>
    224. 

  224.             <var>"position" + ( abs( SLOPE_1_FRAC[0] ) !== 1 ? "s" : "" )</var>
    225. 

  225.             <span data-if="SLOPE_1_FRAC[0] < 0">down</span><span data-else>up</span> from
    226. 

  226.             <code>(0, <var>YINT_1</var>)</code> is
    227. 

  227.             <code>(<var>SLOPE_1_FRAC[1]</var>, <var>YINT_1 + SLOPE_1_FRAC[0]</var>)</code>.
    228. 

  228.         </p>
    229. 

  229.         <p class="hint_blue">
    230. 

  230.             Graph the blue line so it passes through
    231. 

  231.             <code>(0, <var>YINT_1</var>)</code> and
    232. 

  232.             <code>(<var>SLOPE_1_FRAC[1]</var>, <var>YINT_1 + SLOPE_1_FRAC[0]</var>)</code>.
    233. 

  233.             <br /><input type="button" value="Show me" onClick="javascript:
    234. 

  234.                 KhanUtil.currentGraph.graph.pointA.moveTo( 0, KhanUtil.tmpl.getVAR( 'YINT_1' ), true );
    235. 

  235.                 KhanUtil.currentGraph.graph.pointB.moveTo( KhanUtil.tmpl.getVAR( 'SLOPE_1_FRAC[1]' ),
    236. 

  236.                     KhanUtil.tmpl.getVAR( 'YINT_1' ) + KhanUtil.tmpl.getVAR( 'SLOPE_1_FRAC[0]' ), true );
    237. 

  237.             " />
    238. 

  238.         </p>
    239. 

  239.         <div data-if="STD_FORM_2" data-unwrap>
    240. 

  240.             <p class="hint_green">
    241. 

  241.                 Convert the second equation,
    242. 

  242.                 <code><var>expr([ "+", [ "*", A2, "x" ], [ "*", B2, "y" ] ])</var> = <var>C2</var></code>,
    243. 

  243.                 to slope-intercept form.
    244. 

  244.             </p>
    245. 

  245.             <p class="hint_green"><code>y = <var>PRETTY_SLOPE_2</var> x + <var>YINT_2</var></code></p>
    246. 

  246.         </div>
    247. 

  247.         <p class="hint_green">
    248. 

  248.             The y-intercept for the second equation is <code><var>YINT_2</var></code>, so the second line
    249. 

  249.             must pass through the point <code>(0, <var>YINT_2</var>)</code>.
    250. 

  250.         </p>
    251. 

  251.         <p class="hint_green">
    252. 

  252.             The slope for the second equation is <code><var>decimalFraction( SLOPE_2, true, true )</var></code>. Remember that
    253. 

  253.             the slope tells you rise over run. So in this case for every
    254. 

  254.             <code><var>abs( SLOPE_2_FRAC[0] )</var></code>
    255. 

  255.             <var>"position" + ( abs( SLOPE_2_FRAC[0] ) !== 1 ? "s" : "" )</var>
    256. 

  256.             you move
    257. 

  257.             <span data-if="SLOPE_2_FRAC[0] < 0"><em>down</em> (because it's negative)</span>
    258. 

  258.             <span data-else>up</span>
    259. 

  259.             you must also move
    260. 

  260.             <code><var>SLOPE_2_FRAC[1]</var></code>
    261. 

  261.             <var>"position" + ( abs( SLOPE_1_FRAC[1] ) !== 1 ? "s" : "" )</var>
    262. 

  262.             to the right.
    263. 

  263.         </p>
    264. 

  264.         <p class="hint_green">
    265. 

  265.             <code><var>SLOPE_2_FRAC[1]</var></code>
    266. 

  266.             <var>"position" + ( abs( SLOPE_2_FRAC[1] ) !== 1 ? "s" : "" )</var> to the right and
    267. 

  267.             <code><var>abs( SLOPE_2_FRAC[0] )</var></code>
    268. 

  268.             <var>"position" + ( abs( SLOPE_2_FRAC[0] ) !== 1 ? "s" : "" )</var>
    269. 

  269.             <span data-if="SLOPE_2_FRAC[0] < 0">down</span><span data-else>up</span> from
    270. 

  270.             <code>(0, <var>YINT_2</var>)</code> is
    271. 

  271.             <code>(<var>SLOPE_2_FRAC[1]</var>, <var>YINT_2 + SLOPE_2_FRAC[0]</var>)</code>.
    272. 

  272.         </p>
    273. 

  273.         <p class="hint_green">
    274. 

  274.             Graph the green line so it passes through
    275. 

  275.             <code>(0, <var>YINT_2</var>)</code> and
    276. 

  276.             <code>(<var>SLOPE_2_FRAC[1]</var>, <var>YINT_2 + SLOPE_2_FRAC[0]</var>)</code>.
    277. 

  277.             <br /><input type="button" value="Show me" onClick="javascript:
    278. 

  278.                 KhanUtil.currentGraph.graph.pointC.moveTo( 0, KhanUtil.tmpl.getVAR( 'YINT_2' ), true );
    279. 

  279.                 KhanUtil.currentGraph.graph.pointD.moveTo( KhanUtil.tmpl.getVAR( 'SLOPE_2_FRAC[1]' ),
    280. 

  280.                     KhanUtil.tmpl.getVAR( 'YINT_2' ) + KhanUtil.tmpl.getVAR( 'SLOPE_2_FRAC[0]' ), true );
    281. 

  281.             " />
    282. 

  282.         </p>
    283. 

  283.         <p>
    284. 

  284.             The solution is the point where the two lines intersect.
    285. 

  285.         </p>
    286. 

  286.         <div>
    287. 

  287.             <p>
    288. 

  288.                 The lines intersect at <code class="hint_pink">(<var>X</var>, <var>Y</var>)</code>.
    289. 

  289.             </p>
    290. 

  290.             <div class="graphie" data-update="grid">
    291. 

  291.                 style({ stroke: PINK });
    292. 

  292.                 circle( [ X, Y ], 0.5 );
    293. 

  293.             </div>
    294. 

  294.         </div>
    295. 

  295.     </div>
    296. 

  296. 

  297. </div>
    298. 

  298. </body>
    299. 

  299. </html>
    300. 

  300.