Add exercise -- line graph intuition

Khan · Jun 24, 2011 · 62b80f8 · 62b80f8
1 parent 88ea4bc
commit 62b80f8
Show file tree

Hide file tree

Showing 2 changed files with 129 additions and 1 deletion.
diff --git a/exercises/line_graph_intuition.html b/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>
diff --git a/utils/graphie.js b/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();
 };