Skip to content
Browse files

Add exercise -- line graph intuition

  • Loading branch information...
1 parent 88ea4bc commit 62b80f8d2cd09b13c1f2cae1de725e0d0e118bd5 @marcia marcia committed
Showing with 129 additions and 1 deletion.
  1. +128 −0 exercises/line_graph_intuition.html
  2. +1 −1 utils/graphie.js
View
128 exercises/line_graph_intuition.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html data-require="math math-format graphie">
+<head>
+ <title>Line Graph Intuition</title>
+ <script src="../khan-exercise.js"></script>
+ <script>
+ // Eh...
+ function updateEquation() {
+ with( jQuery.tmpl.VARS ) {
+ with( KhanUtil.currentGraph ) {
+ PLOT.remove();
+ style({
+ clipRect:[ [-10, -10], [20, 20] ]
+ }, function() {
+ PLOT = plot( function( x ) {
+ return x * MN / MD + BN / BD;
+ }, [-10, 10]);
+ });
+
+ LABEL.remove();
+ LABEL = label( [1, 11], "y = " + KhanUtil.fractionReduce(MN, MD) + "x +" + KhanUtil.fractionReduce(BN, BD));
+
+ jQuery( "#slope-sol input" ).val( MN + "/" + MD );
+ jQuery( "#intercept-sol input" ).val( BN + "/" + BD );
+ }
+ }
+ }
+
+ function changeSlope( dir ) {
+ with ( jQuery.tmpl.VARS ) {
+ var prevDenominator = MD;
+ MD = KhanUtil.getLCM( prevDenominator, INCR );
+ MN = ( MD / prevDenominator * MN )
+ + ( dir * MD / INCR );
+
+ updateEquation();
+ }
+ }
+
+ function changeIntercept( dir ) {
+ with( jQuery.tmpl.VARS ) {
+ var prevDenominator = BD;
+ BD = KhanUtil.getLCM( prevDenominator, INCR );
+ BN = ( BD / prevDenominator * BN )
+ + ( dir * BD / INCR );
+ updateEquation();
+ }
+ }
+ </script>
+</head>
+<body>
+ <div class="exercise">
+ <div class="vars" data-ensure="X1 !== X2 && !(M === 1 && B === 0)">
+ <var id="X1">randRange( -8, 8 )</var>
+ <var id="X2">randRange( -8, 8 )</var>
+ <var id="Y1">randRange( -8, 8 )</var>
+ <var id="Y2">randRange( -8, 8 )</var>
+ <var id="RISE">Y1 - Y2</var>
+ <var id="RUN">X1 - X2</var>
+ <var id="M">RISE / RUN</var>
+ <var id="B">Y1 - X1 * M</var>
+ <var id="MN">1</var>
+ <var id="MD">1</var>
+ <var id="BN">1</var>
+ <var id="BD">1</var>
+ <var id="INCR">abs( RUN ) / getGCD( abs( RISE), abs( RUN ) )</var>
+ <var id="PLOT">{}</var>
+ <var id="LABEL">{}</var>
+ </div>
+
+ <div class="problems">
+ <div>
+ <div class="question">
+ Adjust the slope and y-intercept until it connects the two points. How do the slope and y-intercept values affect the line?
+ </div>
+
+ <div class="graphie" id="grid">
+ (function(){
+ init({
+ range: [[-10, 10], [-10, 12]],
+ scale: [30, 30]
+ });
+
+ grid( [-10, 10], [-10, 10], {
+ stroke: "#ccc"
+ });
+
+ style({
+ stroke: "#888",
+ strokeWidth: 2
+ });
+ path( [ [-10, 0], [10, 0] ] );
+ path( [ [0, -10], [0, 10] ] );
+
+ style({
+ stroke: "#6495ED",
+ fill: "#6495ED"
+ });
+
+ circle( [X1, Y1], 0.15 );
+ circle( [X2, Y2], 0.15 );
+
+ style({
+ clipRect:[ [-10, -10], [20, 20] ]
+ }, function() {
+ PLOT = plot( function( x ) {
+ return x * MN / MD + BN / BD;
+ }, [-10, 10]);
+ });
+
+ LABEL = label( [1, 11], "y = " + KhanUtil.fractionReduce(MN, MD) + "x +" + KhanUtil.fractionReduce(BN, BD));
+ })()
+
+ </div>
+ <div class="solution" data-type="multiple">
+ <div><input type="button" value="Increase slope" onclick="changeSlope(1)"></div>
+ <div><input type="button" value="Decrease slope" onclick="changeSlope(-1)"></div>
+ <div><input type="button" value="Increase y-intercept" onclick="changeIntercept(1)"></div>
+ <div style="padding: 0px 0px 10px 0px"><input type="button" value="Decrease y-intercept" onclick="changeIntercept(-1)"></div>
+
+ <span class="sol" data-type="rational" data-simplify="optional" style="display: none" id="slope-sol"><var>M</var></span>
+ <span class="sol" data-type="rational" data-simplify="optional" style="display: none" id="intercept-sol"><var>B</var></span>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
View
2 utils/graphie.js
@@ -326,6 +326,6 @@ jQuery.fn.graphie = function() {
// Execute the graph-specific code
KhanUtil.currentGraph = graphie;
jQuery.tmpl.getVAR( code, graphie );
- delete KhanUtil.currentGraph;
+ // delete KhanUtil.currentGraph;
}).end();
};

0 comments on commit 62b80f8

Please sign in to comment.
Something went wrong with that request. Please try again.