Skip to content
Browse files

Merge branch 'master' of http://github.com/Khan/khan-exercises

  • Loading branch information...
2 parents a52dd64 + f4d02a2 commit fb37257532dac34ac4359ceab82415a244b23adf @nsfmc nsfmc committed
View
49 exercises/graphing_inequalities.html
@@ -36,6 +36,26 @@
<code>y <var>COMP</var> <var>PRETTY_SLOPE</var> x + <var>YINT</var></code>
</p>
+ <form>
+ <input type="button" value="Shade other side" onClick="javascript:
+ KhanUtil.currentGraph.graph.shadetop = !KhanUtil.currentGraph.graph.shadetop;
+ KhanUtil.currentGraph.graph.update();
+ " />
+ <label>
+ <input name="dashradio" type="radio" value="solid" checked onClick="javascript:
+ KhanUtil.currentGraph.graph.dasharray = '';
+ KhanUtil.currentGraph.graph.update();
+ " />
+ Solid line
+ </label>
+ <label>
+ <input name="dashradio" type="radio" value="dashed" onClick="javascript:
+ KhanUtil.currentGraph.graph.dasharray = '- ';
+ KhanUtil.currentGraph.graph.update();
+ " />
+ Dashed line
+ </label>
+ </form>
<div class="graphie" id="grid">
graphInit({
range: 11,
@@ -49,7 +69,7 @@
labelOpacity: 0.5
});
- label( [ 0, 11 ], "y", "above" );
+ label( [ 0, -11 ], "y", "below" );
label( [ 11, 0 ], "x", "right" );
addMouseLayer();
@@ -128,29 +148,9 @@
graph.pointB.toFront();
</div>
- <form>
- <input type="button" value="Shade other side" onClick="javascript:
- KhanUtil.currentGraph.graph.shadetop = !KhanUtil.currentGraph.graph.shadetop;
- KhanUtil.currentGraph.graph.update();
- " />
- <label>
- <input name="dashradio" type="radio" value="solid" checked onClick="javascript:
- KhanUtil.currentGraph.graph.dasharray = '';
- KhanUtil.currentGraph.graph.update();
- " />
- Solid line
- </label>
- <label>
- <input name="dashradio" type="radio" value="dashed" onClick="javascript:
- KhanUtil.currentGraph.graph.dasharray = '- ';
- KhanUtil.currentGraph.graph.update();
- " />
- Dashed line
- </label>
- </form>
</div>
- <div class="solution" data-type="interactive">
+ <div class="solution" data-type="custom">
<div class="instruction">
Drag the two points to move the line into the correct position.
</div>
@@ -169,7 +169,7 @@
<div class="show-guess">
graph.pointA.setCoord( guess[0] );
graph.pointB.setCoord( guess[1] );
- graph.shadetop = graph.pointA.coord[0] &lt; graph.pointB.coord[0] ? guess[2] : !guess[2];
+ graph.shadetop = graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? guess[2] : !guess[2];
if ( guess[3] ) {
graph.dasharray = "";
jQuery( "input[name=dashradio][value=solid]" ).attr( "checked", true );
@@ -179,6 +179,9 @@
}
graph.update();
</div>
+ <div class="example">graph the inequality</div>
+ <div class="example">make sure the correct side is shaded</div>
+ <div class="example">make sure the line is correctly shown as solid or dashed</div>
</div>
</div>
</div>
View
49 exercises/graphing_inequalities_2.html
@@ -55,6 +55,26 @@
<code>y <var>COMP</var> <var>PRETTY_SLOPE</var> x + <var>YINT</var></code>
</p>
+ <form>
+ <input type="button" value="Shade other side" onClick="javascript:
+ KhanUtil.currentGraph.graph.shadetop = !KhanUtil.currentGraph.graph.shadetop;
+ KhanUtil.currentGraph.graph.update();
+ " />
+ <label>
+ <input name="dashradio" type="radio" value="solid" checked onClick="javascript:
+ KhanUtil.currentGraph.graph.dasharray = '';
+ KhanUtil.currentGraph.graph.update();
+ " />
+ Solid line
+ </label>
+ <label>
+ <input name="dashradio" type="radio" value="dashed" onClick="javascript:
+ KhanUtil.currentGraph.graph.dasharray = '- ';
+ KhanUtil.currentGraph.graph.update();
+ " />
+ Dashed line
+ </label>
+ </form>
<div class="graphie" id="grid">
graphInit({
range: 11,
@@ -68,7 +88,7 @@
labelOpacity: 0.5
});
- label( [ 0, 11 ], "y", "above" );
+ label( [ 0, -11 ], "y", "below" );
label( [ 11, 0 ], "x", "right" );
addMouseLayer();
@@ -147,30 +167,10 @@
graph.pointB.toFront();
</div>
- <form>
- <input type="button" value="Shade other side" onClick="javascript:
- KhanUtil.currentGraph.graph.shadetop = !KhanUtil.currentGraph.graph.shadetop;
- KhanUtil.currentGraph.graph.update();
- " />
- <label>
- <input name="dashradio" type="radio" value="solid" checked onClick="javascript:
- KhanUtil.currentGraph.graph.dasharray = '';
- KhanUtil.currentGraph.graph.update();
- " />
- Solid line
- </label>
- <label>
- <input name="dashradio" type="radio" value="dashed" onClick="javascript:
- KhanUtil.currentGraph.graph.dasharray = '- ';
- KhanUtil.currentGraph.graph.update();
- " />
- Dashed line
- </label>
- </form>
</div>
<div class="solution" data-type="multiple">
- <div class="sol" data-type="interactive">
+ <div class="sol" data-type="custom">
<div class="instruction">
Drag the two points to move the line into the correct position.
</div>
@@ -189,7 +189,7 @@
<div class="show-guess">
graph.pointA.setCoord( guess[0] );
graph.pointB.setCoord( guess[1] );
- graph.shadetop = graph.pointA.coord[0] &lt; graph.pointB.coord[0] ? guess[2] : !guess[2];
+ graph.shadetop = graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? guess[2] : !guess[2];
if ( guess[3] ) {
graph.dasharray = "";
jQuery( "input[name=dashradio][value=solid]" ).attr( "checked", true );
@@ -206,6 +206,9 @@
<label><span class="checkbox">POINT_2_SOLUTION</span><code>(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> is a solution</label>
</p>
</div>
+ <div class="example">graph the inequality</div>
+ <div class="example">make sure the correct side is shaded</div>
+ <div class="example">make sure the line is correctly shown as solid or dashed</div>
</div>
</div>
</div>
View
2 exercises/graphing_linear_equations.html
@@ -86,7 +86,7 @@
</div>
</div>
- <div class="solution" data-type="interactive">
+ <div class="solution" data-type="custom">
<div class="instruction">
Drag the two points to move the line into the correct position.
</div>
View
2 exercises/graphing_systems_of_equations.html
@@ -143,7 +143,7 @@
<div class="solution" data-type="multiple">
<p><code>x = </code> <span class="sol"><var>X</var></span></p>
<p><code>y = </code> <span class="sol"><var>Y</var></span></p>
- <div class="sol" data-type="interactive">
+ <div class="sol" data-type="custom">
<div class="instruction">
Your graphs are also part of your answer.
</div>
View
451 exercises/graphing_systems_of_inequalities.html
@@ -0,0 +1,451 @@
+<!DOCTYPE html>
+<html data-require="math math-format expressions graphie interactive">
+<head>
+ <meta charset="UTF-8" />
+ <title>Graphing systems of inequalities</title>
+ <script src="../khan-exercise.js"></script>
+</head>
+<body>
+<div class="exercise">
+ <div class="problems">
+ <div>
+ <div class="vars">
+ <div data-ensure="( YINT_1 + SLOPE_FRAC_1[0] <= 10 ) && ( YINT_2 + SLOPE_FRAC_2[0] <= 10 ) && ( YINT_1 + SLOPE_FRAC_1[0] >= -10 ) && ( YINT_2 + SLOPE_FRAC_2[0] >= -10 )">
+ <var id="X">randRangeNonZero( -5, 5 )</var>
+ <var id="Y">randRange( -5, 5 )</var>
+ <div data-ensure="( abs(YINT_1 - YINT_2) > 3 ) && ( YINT_1 !== Y ) && ( YINT_2 !== Y )">
+ <var id="YINT_1">randRangeNonZero( -5, 5 )</var>
+ <var id="YINT_2">randRangeNonZero( -5, 5 )</var>
+ </div>
+ <var id="SLOPE_1">(Y - YINT_1) / X</var>
+ <var id="SLOPE_2">(Y - YINT_2) / X</var>
+ <var id="SLOPE_FRAC_1">toFraction( SLOPE_1, 0.001 )</var>
+ <var id="SLOPE_FRAC_2">toFraction( SLOPE_2, 0.001 )</var>
+ </div>
+ <var id="PRETTY_SLOPE_1">SLOPE_1 === 1 ? "" : ( SLOPE_1 === -1 ? "-" : fraction( SLOPE_FRAC_1[0], SLOPE_FRAC_1[1], true, true ) )</var>
+ <var id="PRETTY_SLOPE_2">SLOPE_2 === 1 ? "" : ( SLOPE_2 === -1 ? "-" : fraction( SLOPE_FRAC_2[0], SLOPE_FRAC_2[1], true, true ) )</var>
+ <var id="MULT_1">randRangeNonZero( -3, 3 )</var>
+ <var id="MULT_2">randRangeNonZero( -3, 3 )</var>
+ <var id="A_1">SLOPE_FRAC_1[0] * -MULT_1</var>
+ <var id="A_2">SLOPE_FRAC_2[0] * -MULT_2</var>
+ <var id="B_1">SLOPE_FRAC_1[1] * MULT_1</var>
+ <var id="B_2">SLOPE_FRAC_2[1] * MULT_2</var>
+ <var id="C_1">SLOPE_FRAC_1[1] * YINT_1 * MULT_1</var>
+ <var id="C_2">SLOPE_FRAC_2[1] * YINT_2 * MULT_2</var>
+ <var id="STD_FORM_1">randFromArray([ true, false ])</var>
+ <var id="STD_FORM_2">randFromArray([ true, false ])</var>
+ <var id="COMP_1">randFromArray([ "&lt;", "&gt;", "&le;", "&ge;" ])</var>
+ <var id="COMP_2">randFromArray([ "&lt;", "&gt;", "&le;", "&ge;" ])</var>
+ <var id="STD_FORM_COMP_1">B_1 &lt; 0 ? { "&lt;": "&gt;", "&gt;": "&lt;", "&le;": "&ge;", "&ge;": "&le;" }[ COMP_1 ] : COMP_1</var>
+ <var id="STD_FORM_COMP_2">B_2 &lt; 0 ? { "&lt;": "&gt;", "&gt;": "&lt;", "&le;": "&ge;", "&ge;": "&le;" }[ COMP_2 ] : COMP_2</var>
+ <var id="LESS_THAN_1">COMP_1 == "&lt;" || COMP_1 == "&le;"</var>
+ <var id="LESS_THAN_2">COMP_2 == "&lt;" || COMP_2 == "&le;"</var>
+ <var id="INCLUSIVE_1">COMP_1 == "&ge;" || COMP_1 == "&le;"</var>
+ <var id="INCLUSIVE_2">COMP_2 == "&ge;" || COMP_2 == "&le;"</var>
+ </div>
+
+ <p class="question">
+ Graph the following system of inequalities:
+ </p>
+
+ <div class="problem">
+ <p class="hint_blue" data-if="STD_FORM_1">
+ <code><var>expr([ "+", [ "*", A_1, "x" ], [ "*", B_1, "y" ] ])</var> <var>STD_FORM_COMP_1</var> <var>C_1</var></code>
+ </p>
+ <p class="hint_blue" data-else>
+ <code>y <var>COMP_1</var> <var>PRETTY_SLOPE_1</var> x + <var>YINT_1</var></code>
+ </p>
+ <p class="hint_green" data-if="STD_FORM_2">
+ <code><var>expr([ "+", [ "*", A_2, "x" ], [ "*", B_2, "y" ] ])</var> <var>STD_FORM_COMP_2</var> <var>C_2</var></code>
+ </p>
+ <p class="hint_green" data-else>
+ <code>y <var>COMP_2</var> <var>PRETTY_SLOPE_2</var> x + <var>YINT_2</var></code>
+ </p>
+
+ <form>
+ <span class="hint_blue" style="width: 40px">Inequality 1:</span>
+ <input type="button" value="Shade other side" onClick="javascript:
+ KhanUtil.currentGraph.graph.shadetop1 = !KhanUtil.currentGraph.graph.shadetop1;
+ KhanUtil.currentGraph.graph.update();
+ " />
+ <label class="hint_blue">
+ <input name="dashradio1" type="radio" value="solid" checked onClick="javascript:
+ KhanUtil.currentGraph.graph.dasharray1 = '';
+ KhanUtil.currentGraph.graph.update();
+ " />
+ Solid line
+ </label>
+ <label class="hint_blue">
+ <input name="dashradio1" type="radio" value="dashed" onClick="javascript:
+ KhanUtil.currentGraph.graph.dasharray1 = '- ';
+ KhanUtil.currentGraph.graph.update();
+ " />
+ Dashed line
+ </label>
+ <br />
+ <span class="hint_green" style="width: 40px">Inequality 2:</span>
+ <input type="button" value="Shade other side" onClick="javascript:
+ KhanUtil.currentGraph.graph.shadetop2 = !KhanUtil.currentGraph.graph.shadetop2;
+ KhanUtil.currentGraph.graph.update();
+ " />
+ <label class="hint_green">
+ <input name="dashradio2" type="radio" value="solid" checked onClick="javascript:
+ KhanUtil.currentGraph.graph.dasharray2 = '';
+ KhanUtil.currentGraph.graph.update();
+ " />
+ Solid line
+ </label>
+ <label class="hint_green">
+ <input name="dashradio2" type="radio" value="dashed" onClick="javascript:
+ KhanUtil.currentGraph.graph.dasharray2 = '- ';
+ KhanUtil.currentGraph.graph.update();
+ " />
+ Dashed line
+ </label>
+ </form>
+ <div class="graphie" id="grid">
+ graphInit({
+ range: 11,
+ scale: 20,
+ axisArrows: "&lt;-&gt;",
+ tickStep: 1,
+ labelStep: 1,
+ gridOpacity: 0.05,
+ axisOpacity: 0.2,
+ tickOpacity: 0.4,
+ labelOpacity: 0.5
+ });
+
+ label( [ 0, -11 ], "y", "below" );
+ label( [ 11, 0 ], "x", "right" );
+
+ addMouseLayer();
+ graph.pointA = addMovablePoint({
+ coord: [ -5, 5 ],
+ snapX: 0.5,
+ snapY: 0.5,
+ normalStyle: {
+ stroke: KhanUtil.BLUE,
+ fill: KhanUtil.BLUE
+ }
+ });
+ graph.pointB = addMovablePoint({
+ coord: [ 5, 5 ],
+ snapX: 0.5,
+ snapY: 0.5,
+ normalStyle: {
+ stroke: KhanUtil.BLUE,
+ fill: KhanUtil.BLUE
+ }
+ });
+ graph.pointC = addMovablePoint({
+ coord: [ -5, -5 ],
+ snapX: 0.5,
+ snapY: 0.5,
+ normalStyle: {
+ stroke: KhanUtil.BLUE,
+ fill: KhanUtil.BLUE
+ }
+ });
+ graph.pointD = addMovablePoint({
+ coord: [ 5, -5 ],
+ snapX: 0.5,
+ snapY: 0.5,
+ normalStyle: {
+ stroke: KhanUtil.BLUE,
+ fill: KhanUtil.BLUE
+ }
+ });
+ graph.set = raphael.set();
+
+ graph.update = function() {
+ graph.set.remove();
+ if ( abs( graph.pointB.coord[0] - graph.pointA.coord[0] ) &gt; 0.001 ) {
+ var slope = ( graph.pointB.coord[1] - graph.pointA.coord[1] ) / ( graph.pointB.coord[0] - graph.pointA.coord[0] );
+ var yint = slope * ( 0 - graph.pointA.coord[0] ) + graph.pointA.coord[1];
+ var shadeEdge = ( ( graph.pointA.coord[0] &lt; graph.pointB.coord[0] ) ? graph.shadetop1 : !graph.shadetop1 ) ? 11 : -11;
+ style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: graph.dasharray1 }, function() {
+ graph.set.push( line( [ -11, -11 * slope + yint ], [ 11, 11 * slope + yint ] ) );
+ });
+ style({ fill: BLUE, stroke: null, opacity: 0.1 }, function() {
+ graph.set.push( path([ [ 11, shadeEdge ], [ 11, 11 * slope + yint ], [ -11, -11 * slope + yint ], [ -11, shadeEdge ] ]) );
+ });
+
+ } else {
+ // vertical line
+ var x = graph.pointA.coord[0];
+ var shadeEdge = ( ( graph.pointB.coord[1] &lt; graph.pointA.coord[1] ) ? graph.shadetop1 : !graph.shadetop1 ) ? 11 : -11;
+ style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: graph.dasharray1 }, function() {
+ graph.set.push( line( [ x, -11 ], [ x, 11 ] ) );
+ });
+ style({ fill: BLUE, stroke: null, opacity: 0.1 }, function() {
+ graph.set.push( path([ [ x, -11 ], [ x, 11 ], [ shadeEdge, 11 ], [ shadeEdge, -11 ] ]) );
+ });
+ }
+
+
+ if ( abs( graph.pointD.coord[0] - graph.pointC.coord[0] ) &gt; 0.001 ) {
+ var slope = ( graph.pointD.coord[1] - graph.pointC.coord[1] ) / ( graph.pointD.coord[0] - graph.pointC.coord[0] );
+ var yint = slope * ( 0 - graph.pointC.coord[0] ) + graph.pointC.coord[1];
+ var shadeEdge = ( ( graph.pointC.coord[0] &lt; graph.pointD.coord[0] ) ? graph.shadetop2 : !graph.shadetop2 ) ? 11 : -11;
+ style({ stroke: GREEN, strokeWidth: 2, strokeDasharray: graph.dasharray2 }, function() {
+ graph.set.push( line( [ -11, -11 * slope + yint ], [ 11, 11 * slope + yint ] ) );
+ });
+ style({ fill: GREEN, stroke: null, opacity: 0.1 }, function() {
+ graph.set.push( path([ [ 11, shadeEdge ], [ 11, 11 * slope + yint ], [ -11, -11 * slope + yint ], [ -11, shadeEdge ] ]) );
+ });
+
+ } else {
+ // vertical line
+ var x = graph.pointC.coord[0];
+ var shadeEdge = ( ( graph.pointD.coord[1] &lt; graph.pointC.coord[1] ) ? graph.shadetop2 : !graph.shadetop2 ) ? 11 : -11;
+ style({ stroke: GREEN, strokeWidth: 2, strokeDasharray: graph.dasharray2 }, function() {
+ graph.set.push( line( [ x, -11 ], [ x, 11 ] ) );
+ });
+ style({ fill: GREEN, stroke: null, opacity: 0.1 }, function() {
+ graph.set.push( path([ [ x, -11 ], [ x, 11 ], [ shadeEdge, 11 ], [ shadeEdge, -11 ] ]) );
+ });
+ }
+
+ graph.set.toBack();
+ };
+
+ // A and B can't be in the same place
+ graph.pointA.onMove = function( x, y ) {
+ if ( x != graph.pointB.coord[0] || y != graph.pointB.coord[1] ) {
+ graph.pointA.setCoord([ x, y ]);
+ graph.update();
+ return true;
+ } else {
+ return false;
+ }
+ }
+ graph.pointB.onMove = function( x, y ) {
+ if ( x != graph.pointA.coord[0] || y != graph.pointA.coord[1] ) {
+ graph.pointB.setCoord([ x, y, ]);
+ graph.update();
+ return true;
+ } else {
+ return false;
+ }
+ }
+
+ // C and D can't be in the same place
+ graph.pointC.onMove = function( x, y ) {
+ if ( x != graph.pointD.coord[0] || y != graph.pointD.coord[1] ) {
+ graph.pointC.setCoord([ x, y ]);
+ graph.update();
+ return true;
+ } else {
+ return false;
+ }
+ }
+ graph.pointD.onMove = function( x, y ) {
+ if ( x != graph.pointC.coord[0] || y != graph.pointC.coord[1] ) {
+ graph.pointD.setCoord([ x, y, ]);
+ graph.update();
+ return true;
+ } else {
+ return false;
+ }
+ }
+ graph.dasharray1 = "";
+ graph.dasharray2 = "";
+ graph.shadetop1 = true;
+ graph.shadetop2 = false;
+ graph.update();
+ graph.pointA.toFront();
+ graph.pointB.toFront();
+ graph.pointC.toFront();
+ graph.pointD.toFront();
+
+ </div>
+
+ </div>
+ <div class="solution" data-type="multiple">
+ <div class="sol" data-type="custom">
+ <div class="instruction">
+ Drag the points to move both lines into the correct positions.
+ </div>
+ <div class="guess">[ graph.pointA.coord, graph.pointB.coord,
+ graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? graph.shadetop1 : !graph.shadetop1,
+ graph.dasharray1 === "- " ? false : true,
+ graph.pointC.coord, graph.pointD.coord,
+ graph.pointC.coord[0] &gt; graph.pointD.coord[0] ? graph.shadetop2 : !graph.shadetop2,
+ graph.dasharray2 === "- " ? false : true ]
+ </div>
+ <div class="validator-function">
+ var slope1 = ( guess[1][1] - guess[0][1] ) / ( guess[1][0] - guess[0][0] );
+ var yint1 = slope1 * ( 0 - guess[0][0] ) + guess[0][1];
+ var slope2 = ( guess[5][1] - guess[4][1] ) / ( guess[5][0] - guess[4][0] );
+ var yint2 = slope2 * ( 0 - guess[4][0] ) + guess[4][1];
+ return abs( SLOPE_1 - slope1 ) &lt; 0.001
+ &amp;&amp; abs( YINT_1 - yint1 ) &lt; 0.001
+ &amp;&amp; guess[2] === LESS_THAN_1
+ &amp;&amp; guess[3] === INCLUSIVE_1
+ &amp;&amp; abs( SLOPE_2 - slope2 ) &lt; 0.001
+ &amp;&amp; abs( YINT_2 - yint2 ) &lt; 0.001
+ &amp;&amp; guess[6] === LESS_THAN_2
+ &amp;&amp; guess[7] === INCLUSIVE_2;
+ </div>
+ <div class="show-guess">
+ graph.pointA.setCoord( guess[0] );
+ graph.pointB.setCoord( guess[1] );
+ graph.pointC.setCoord( guess[4] );
+ graph.pointD.setCoord( guess[5] );
+ graph.shadetop1 = graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? guess[2] : !guess[2];
+ graph.shadetop2 = graph.pointC.coord[0] &gt; graph.pointD.coord[0] ? guess[6] : !guess[6];
+ if ( guess[3] ) {
+ graph.dasharray1 = "";
+ jQuery( "input[name=dashradio1][value=solid]" ).attr( "checked", true );
+ } else {
+ graph.dasharray1 = "- ";
+ jQuery( "input[name=dashradio1][value=dashed]" ).attr( "checked", true );
+ }
+ if ( guess[7] ) {
+ graph.dasharray2 = "";
+ jQuery( "input[name=dashradio2][value=solid]" ).attr( "checked", true );
+ } else {
+ graph.dasharray2 = "- ";
+ jQuery( "input[name=dashradio2][value=dashed]" ).attr( "checked", true );
+ }
+ graph.update();
+ </div>
+ </div>
+ <!--
+ <div class="sol" data-type="set">
+ <p class="input-format">
+ <label><span class="checkbox">POINT_1_SOLUTION</span><code>(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> is a solution</label><br />
+ <label><span class="checkbox">POINT_2_SOLUTION</span><code>(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> is a solution</label>
+ </p>
+ </div>
+ -->
+ <div class="example">graph the inequalities</div>
+ <div class="example">make sure the correct sides are shaded</div>
+ <div class="example">make sure each line is correctly shown as solid or dashed</div>
+ </div>
+ </div>
+ </div>
+ <div class="hints">
+ <div data-if="STD_FORM_1" data-unwrap>
+ <p class="hint_blue">
+ Convert the first inequality, <code><var>expr([ "+", [ "*", A_1, "x" ], [ "*", B_1, "y" ] ])</var> <var>STD_FORM_COMP_1</var> <var>C_1</var></code>,
+ to slope-intercept form by solving for <code>y</code>.
+ </p>
+ <div class="hint_blue">
+ <p>
+ <var>A_1 &lt; 0 ? "Add" : "Subtract"</var> <code><var>abs( A_1 )</var>x</code> <var>A_1 &lt; 0 ? "to" : "from"</var> both sides:
+ </p><p>
+ <code>\qquad <var>expr( [ "*", B_1, "y" ] )</var> <var>STD_FORM_COMP_1</var> <var>expr([ "+", [ "*", -A_1, "x" ], C_1 ])</var></code>
+ </p>
+ </div>
+ <div data-if="B_1 !== 1" class="hint_blue">
+ <p>
+ Divide both sides by <code><var>B_1</var></code><span data-if="B_1 < 0">. Since you're multiplying or dividing by a negative number, <strong>don't forget</strong> to flip the inequality sign</span>:
+ </p><p>
+ <code>\qquad y <var>COMP_1</var> <var>expr([ "+", "\\dfrac{" + expr([ "*", -A_1, "x" ]) + "}{" + B_1 + "}", "\\dfrac{" + C_1 + "}{" + B_1 + "}" ])</var></code>
+ </p>
+ </div>
+ </div>
+ <div class="hint_blue">
+ <p>
+ <code>\qquad y <var>COMP_1</var> \color{purple}{<var>PRETTY_SLOPE_1</var>} x \color{gray}{+ <var>YINT_1</var>}</code>
+ </p><p>
+ The y-intercept is <code class="hint_gray"><var>YINT_1</var></code> and the slope is <code class="hint_purple"><var>decimalFraction( SLOPE_1, true, true )</var></code>.
+ Since the y-intercept is <code class="hint_gray"><var>YINT_1</var></code>, the line must pass through the point <code class="hint_gray">(0, <var>YINT_1</var>)</code>.
+ </p>
+ </div>
+ <div class="hint_blue">
+ <p>
+ The slope is <code class="hint_purple"><var>decimalFraction( SLOPE_1, true, true )</var></code>. Remember that
+ the slope tells you rise over run. So in this case for every
+ <code><var>abs( SLOPE_FRAC_1[0] )</var></code>
+ <var>"position" + ( abs( SLOPE_FRAC_1[0] ) !== 1 ? "s" : "" )</var>
+ you move
+ <span data-if="SLOPE_FRAC_1[0] < 0"><em>down</em> (because it's negative)</span>
+ <span data-else>up</span>
+ you must also move
+ <code><var>SLOPE_FRAC_1[1]</var></code>
+ <var>"position" + ( abs( SLOPE_FRAC_1[1] ) !== 1 ? "s" : "" )</var>
+ to the right. So the line must also pass through <code class="hint_purple">(<var>SLOPE_FRAC_1[1]</var>, <var>YINT_1 + SLOPE_FRAC_1[0]</var>)</code>
+ </p>
+ </div>
+ <p class="hint_blue">
+ Since our inequality has a <var>LESS_THAN_1 ? "less-than" : "greater-than"</var><var>INCLUSIVE_1 ? " or equal to" : ""</var> sign, that means that any point
+ <strong><var>LESS_THAN_1 ? "below" : "above"</var></strong> the line is a solution to the inequality, so the area <var>LESS_THAN_1 ? "below" : "above"</var>
+ the line should be shaded.
+ </p>
+ <div class="hint_blue">
+ <p data-if="INCLUSIVE_1">
+ Note that since the sign is <var>LESS_THAN_1 ? "less-than" : "greater-than"</var> or <strong>equal to</strong>, any point on the line is also a solution, so the
+ line should be solid.
+ </p>
+ <p data-else>
+ Note that since the sign is <var>LESS_THAN_1 ? "less-than" : "greater-than"</var> (and not equal to), any point on the line is <strong>not</strong> part of the solution,
+ so the line should be dashed to indicate this.
+ </p>
+ </div>
+
+ <!-- **** begin hints for second equation **** -->
+ <div data-if="STD_FORM_2" data-unwrap>
+ <p class="hint_green">
+ Convert the second inequality, <code><var>expr([ "+", [ "*", A_2, "x" ], [ "*", B_2, "y" ] ])</var> <var>STD_FORM_COMP_2</var> <var>C_2</var></code>,
+ to slope-intercept form by solving for <code>y</code>.
+ </p>
+ <div class="hint_green">
+ <p>
+ <var>A_2 &lt; 0 ? "Add" : "Subtract"</var> <code><var>abs( A_2 )</var>x</code> <var>A_2 &lt; 0 ? "to" : "from"</var> both sides:
+ </p><p>
+ <code>\qquad <var>expr( [ "*", B_2, "y" ] )</var> <var>STD_FORM_COMP_2</var> <var>expr([ "+", [ "*", -A_2, "x" ], C_2 ])</var></code>
+ </p>
+ </div>
+ <div data-if="B_2 !== 1" class="hint_green">
+ <p>
+ Divide both sides by <code><var>B_2</var></code><span data-if="B_2 < 0">. Since you're multiplying or dividing by a negative number, <strong>don't forget</strong> to flip the inequality sign</span>:
+ </p><p>
+ <code>\qquad y <var>COMP_2</var> <var>expr([ "+", "\\dfrac{" + expr([ "*", -A_2, "x" ]) + "}{" + B_2 + "}", "\\dfrac{" + C_2 + "}{" + B_2 + "}" ])</var></code>
+ </p>
+ </div>
+ </div>
+ <div class="hint_green">
+ <p>
+ <code>\qquad y <var>COMP_2</var> \color{purple}{<var>PRETTY_SLOPE_2</var>} x \color{gray}{+ <var>YINT_2</var>}</code>
+ </p><p>
+ The y-intercept is <code class="hint_gray"><var>YINT_2</var></code> and the slope is <code class="hint_purple"><var>decimalFraction( SLOPE_2, true, true )</var></code>.
+ Since the y-intercept is <code class="hint_gray"><var>YINT_2</var></code>, the line must pass through the point <code class="hint_gray">(0, <var>YINT_2</var>)</code>.
+ </p>
+ </div>
+ <div class="hint_green">
+ <p>
+ The slope is <code class="hint_purple"><var>decimalFraction( SLOPE_2, true, true )</var></code>. Remember that
+ the slope tells you rise over run. So in this case for every
+ <code><var>abs( SLOPE_FRAC_2[0] )</var></code>
+ <var>"position" + ( abs( SLOPE_FRAC_2[0] ) !== 1 ? "s" : "" )</var>
+ you move
+ <span data-if="SLOPE_FRAC_2[0] < 0"><em>down</em> (because it's negative)</span>
+ <span data-else>up</span>
+ you must also move
+ <code><var>SLOPE_FRAC_2[1]</var></code>
+ <var>"position" + ( abs( SLOPE_FRAC_2[1] ) !== 1 ? "s" : "" )</var>
+ to the right. So the line must also pass through <code class="hint_purple">(<var>SLOPE_FRAC_2[1]</var>, <var>YINT_2 + SLOPE_FRAC_2[0]</var>)</code>
+ </p>
+ </div>
+ <p class="hint_green">
+ Since our inequality has a <var>LESS_THAN_2 ? "less-than" : "greater-than"</var><var>INCLUSIVE_2 ? " or equal to" : ""</var> sign, that means that any point
+ <strong><var>LESS_THAN_2 ? "below" : "above"</var></strong> the line is a solution to the inequality, so the area <var>LESS_THAN_2 ? "below" : "above"</var>
+ the line should be shaded.
+ </p>
+ <div class="hint_green">
+ <p data-if="INCLUSIVE_2">
+ Note that since the sign is <var>LESS_THAN_2 ? "less-than" : "greater-than"</var> or <strong>equal to</strong>, any point on the line is also a solution, so the
+ line should be solid.
+ </p>
+ <p data-else>
+ Note that since the sign is <var>LESS_THAN_2 ? "less-than" : "greater-than"</var> (and not equal to), any point on the line is <strong>not</strong> part of the solution,
+ so the line should be dashed to indicate this.
+ </p>
+ </div>
+ </div>
+</div>
+</body>
+</html>
View
3 exercises/line_relationships.html
@@ -22,7 +22,7 @@
<var id="M_FRAC">decimalFraction( M, "true", "true" )</var>
<var id="M_PERP_FRAC">decimalFraction( -1 / M, "true", "true" )</var>
<var id="B">randRange( -5, 5 )</var>
- <var id="X" data-ensure="abs( M * X ) &lt;= 12">randRange( 2, 8 ) * randRangeNonZero( -1, 1 )</var>
+ <var id="X" data-ensure="abs( ( -1 / M ) * X ) &lt;= 12">randRange( 2, 8 ) * randRangeNonZero( -1, 1 )</var>
<var id="Y" data-ensure="abs( Y - ( -1 / M ) * X ) &lt; 10">randRange( 2, 8 ) * randRangeNonZero( -1, 1 )</var>
<var id="LINE_TYPE">"perpendicular"</var>
</div>
@@ -86,6 +86,7 @@
<div id="parallel-graph" data-type="perpendicular-graph" data-weight="2">
<div class="vars">
<var id="LINE_TYPE">"parallel"</var>
+ <var id="X" data-ensure="abs( M * X ) &lt;= 12">randRange( 2, 8 ) * randRangeNonZero( -1, 1 )</var>
<var id="Y" data-ensure="abs( Y - M * X ) &lt; 10 && abs( Y - M * X - B ) &gt;= 1">randRange( 2, 8 ) * randRangeNonZero( -1, 1 )</var>
</div>
<div class="solution" data-type="multiple">
View
6 exercises/multiplying_polynomials.html
@@ -44,8 +44,8 @@
}
if ( likeTerms[ i + j ] === undefined ) {
- likeTerms[ i + j ] = false;
- } else if ( !likeTerms[ i + j ] ) {
+ likeTerms[ i + j ] = "";
+ } else if ( likeTerms[ i + j ] === "" ) {
likeTerms[ i + j ] = COLORS[ counter++ ];
areLikeTerms = true;
}
@@ -75,7 +75,7 @@
<div class="problems">
<div id="multiply">
<p class="question">Simplify the expression.</p>
- <p class="problem"><code><span data-each="[ POL_1, POL_2 ] as POL" data-unwrap>(<var>POL</var>)</code></p>
+ <p class="problem"><code><span data-each="[ POL_1, POL_2 ] as POL" data-unwrap>(<var>POL</var>)</span></code></p>
<p class="solution"><code><var>SOLUTION</var></code></p>
<ul class="choices" data-show="4" data-none="true">
<li><code><var>SOLUTION.multiply( -1 )</var></code></li>
View
2 exercises/trig_identities_1.html
@@ -40,7 +40,7 @@
<div class="problems">
<div>
- <p class="question">Given that x is in first quadrant and <code> \<var>FUN_NAME</var> x </code> is <code><var>FUN_VALUE</var></code> what is <code> \<var>END_NAME</var> x</code> ?</p>
+ <p class="question">Given that x is in the first quadrant and <code> \<var>FUN_NAME</var> x </code> is <code><var>FUN_VALUE</var></code>, what is <code> \<var>END_NAME</var> x</code> ?</p>
<p class="solution"><code><var>SOLUTION</var></code></p>
View
2 exercises/unit_circle.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="jquery-color math math-format graphie unit-circle">
+<html data-require="math math-format graphie unit-circle">
<head>
<meta charset="UTF-8" />
<title>Unit circle</title>
View
BIN images/next-step.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/previous-step.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
11,358 jquery-ui.js
11,358 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
96 khan-exercise.js
@@ -166,6 +166,7 @@ var Khan = (function() {
once = true,
guessLog,
+ userActivityLog,
// For loading remote exercises
remoteCount = 0,
@@ -525,15 +526,28 @@ var Khan = (function() {
// Load query string params
Khan.query = Khan.queryString();
+ if ( Khan.query.activity !== undefined ) {
+ userExercise = {
+ exercise_model: {},
+ read_only: true,
+ user_activity: JSON.parse( Khan.query.activity )
+ };
+ }
+
// Seed the random number generator with the user's hash
randomSeed = testMode && parseFloat( Khan.query.seed ) || userCRC32 || ( new Date().getTime() & 0xffffffff );
+
// Load in jQuery
var scripts = (typeof jQuery !== "undefined") ? [] : [ { src: "../jquery.js" } ];
// Actually load the scripts. This is getting evaluated when the file is loaded.
Khan.loadScripts( scripts, function() {
+ if ( testMode ) {
+ Khan.require( [ "../jquery-ui" ] );
+ };
+
// Base modules required for every problem
Khan.require( [ "answer-types", "tmpl", "underscore" ] );
@@ -851,6 +865,7 @@ var Khan = (function() {
// (this includes possibly generating the multiple choice problems,
// if this fails then we will need to try generating another one.)
guessLog = [];
+ userActivityLog = [];
validator = Khan.answerTypes[answerType]( solutionarea, solution );
// A working solution was generated
@@ -1183,9 +1198,9 @@ var Khan = (function() {
}
};
- if ( thisSlide.data( "guess" ) !== undefined && jQuery.isFunction( validator.showInteractiveGuess ) ) {
+ if ( thisSlide.data( "guess" ) !== undefined && jQuery.isFunction( validator.showCustomGuess ) ) {
KhanUtil.currentGraph = jQuery( realWorkArea ).find( ".graphie" ).data( "graphie" );
- validator.showInteractiveGuess( thisSlide.data( "guess" ) );
+ validator.showCustomGuess( thisSlide.data( "guess" ) );
MathJax.Hub.Queue( recordState );
} else {
recordState();
@@ -1353,6 +1368,20 @@ var Khan = (function() {
.attr( "href", debugURL + "&seed=" + problemSeed )
.appendTo( links );
+
+ if ( !Khan.query.activity ) {
+ links.append("<br>");
+ var historyURL = debugURL + "&seed=" + problemSeed + "&activity=";
+ jQuery( "<a>Problem history</a>" ).attr( "href", "javascript:" ).click(function( event ) {
+ window.location.href = historyURL + encodeURIComponent( JSON.stringify( userActivityLog ) );
+ }).appendTo( links );
+ } else {
+ links.append("<br>");
+ jQuery( "<a>Random problem</a>" )
+ .attr( "href", debugURL )
+ .appendTo( links );
+ }
+
links.append("<br>");
links.append("Problem type: ");
@@ -1624,12 +1653,24 @@ var Khan = (function() {
jQuery( "#extras" ).css("visibility", "hidden");
}
+ // Change form target to the current page, so that errors do not kick us
+ // back to the dashboard
+ jQuery( "#answerform" ).attr( "action", window.location.href );
+
// Watch for a solution submission
jQuery("#check-answer-button").click( handleSubmit );
jQuery("#answerform").submit( handleSubmit );
// Build the data to pass to the server
function buildAttemptData(pass, attemptNum, attemptContent, curTime) {
+ var timeTaken = Math.round((curTime - lastAction) / 1000);
+
+ if ( attemptContent !== "hint" ) {
+ userActivityLog.push([ pass ? "correct-activity" : "incorrect-activity", attemptContent, timeTaken ]);
+ } else {
+ userActivityLog.push([ "hint-activity", "0", timeTaken ]);
+ }
+
return {
// The user answered correctly
complete: pass === true ? 1 : 0,
@@ -1638,7 +1679,7 @@ var Khan = (function() {
count_hints: hintsUsed,
// How long it took them to complete the problem
- time_taken: Math.round((curTime - lastAction) / 1000),
+ time_taken: timeTaken,
// How many times the problem was attempted
attempt_number: attemptNum,
@@ -1702,15 +1743,13 @@ var Khan = (function() {
// Show the examples (acceptable answer formats) if available -- we get
// a lot of issues due to incorrect formats (eg. "3.14159" instead of
// "3pi", "log(2^5)" instead of "log(32)").
- if ( window.remindAnswerFormatAbTest ) {
- var examples = jQuery( "#examples" ),
- examplesLink = jQuery( "#examples-show" );
- if ( examplesLink.is( ":visible" ) ) {
- if ( !examples.is( ":visible" ) ) {
- examplesLink.click();
- }
- examples.effect( "pulsate", { times: 1 }, "slow" );
+ var examples = jQuery( "#examples" ),
+ examplesLink = jQuery( "#examples-show" );
+ if ( examplesLink.is( ":visible" ) ) {
+ if ( !examples.is( ":visible" ) ) {
+ examplesLink.click();
}
+ examples.effect( "pulsate", { times: 1 }, "slow" );
}
// Refocus text field so user can type a new answer
@@ -1763,21 +1802,12 @@ var Khan = (function() {
.focus();
}
nextProblem( 1 );
-
- // Bingo if user completed problem after a wrong try
- if ( attempts > 1 && typeof window.remindAnswerFormatAbTest !== "undefined" ) {
- gae_bingo.bingo( "remind_correct_after_wrong" );
- }
} else {
// Wrong answer. Enable all the input elements, but wait until
// until server acknowledges before enabling the check answer
// button.
jQuery( "#answercontent input" ).not( "#check-answer-button, #hint" )
.removeAttr( "disabled" );
-
- if ( attempts === 1 && typeof window.remindAnswerFormatAbTest !== "undefined" ) {
- gae_bingo.bingo( "remind_first_attempt_wrong" );
- }
}
// Remember when the last action was
@@ -1948,12 +1978,13 @@ var Khan = (function() {
+ "?seed=" + problemSeed
+ "&problem=" + problemID,
pathlink = "[" + path + ( exercise.data( "name" ) != null && exercise.data( "name" ) !== exerciseName ? " (" + exercise.data( "name" ) + ")" : "" ) + "](http://sandcastle.khanacademy.org/media/castles/Khan:master/exercises/" + path + "&debug)",
+ historyLink = "[Answer timeline](" + "http://sandcastle.khanacademy.org/media/castles/Khan:master/exercises/" + path + "&debug&activity=" + encodeURIComponent( JSON.stringify( userActivityLog ) ).replace( ")", "\\)" ) + ")",
agent = navigator.userAgent,
mathjaxInfo = "MathJax is " + ( typeof MathJax === "undefined" ? "NOT loaded" :
( "loaded, " + ( MathJax.isReady ? "" : "NOT ") + "ready, queue length: " + MathJax.Hub.queue.queue.length ) ),
localStorageInfo = ( typeof localStorage === "undefined" || typeof localStorage.getItem === "undefined" ? "localStorage NOT enabled" : null ),
warningInfo = jQuery( "#warning-bar-content" ).text(),
- parts = [ email ? "Reporter: " + email : null, jQuery( "#issue-body" ).val() || null, pathlink, " " + JSON.stringify( guessLog ), agent, localStorageInfo, mathjaxInfo, warningInfo ],
+ parts = [ email ? "Reporter: " + email : null, jQuery( "#issue-body" ).val() || null, pathlink, historyLink, " " + JSON.stringify( guessLog ), agent, localStorageInfo, mathjaxInfo, warningInfo ],
body = jQuery.grep( parts, function( e ) { return e != null; } ).join( "\n\n" );
var mathjaxLoadFailures = jQuery.map( MathJax.Ajax.loading, function( info, script ) {
@@ -2460,22 +2491,7 @@ var Khan = (function() {
var streakMaxWidth = jQuery(".streak-bar").width(),
// Streak and longest streak pixel widths
- streakWidth = Math.min(Math.ceil(streakMaxWidth * data.progress), streakMaxWidth),
- longestStreakWidth = Math.min(streakMaxWidth, Math.ceil((streakMaxWidth / data.required_streak) * data.longest_streak)),
-
- // Streak icon pixel width
- streakIconWidth = Math.min(streakMaxWidth - 2, Math.max(43, streakWidth)), // 43 is width of streak icon
-
- // Don't show label if not enough room
- labelWidthRequired = 20,
-
- // Don't show accumulation stats higher than 100 to stop grinding behavior,
- // and don't show labels if there isn't room in the bar to render them.
- labelStreak = streakWidth < labelWidthRequired ? "" :
- ( !data.summative && data.streak > 100 ) ? "Max" : data.streak,
-
- labelLongestStreak = ( longestStreakWidth < labelWidthRequired || (longestStreakWidth - streakWidth) < labelWidthRequired ) ? "" :
- ( !data.summative && data.longest_streak > 100 ) ? "Max" : data.longest_streak;
+ streakWidth = Math.min(Math.ceil(streakMaxWidth * data.progress), streakMaxWidth);
if ( data.summative ) {
jQuery( ".summative-help ")
@@ -2718,12 +2734,8 @@ var Khan = (function() {
if ( !testMode || !Khan.query.problem ) {
var problems = exercises.children( ".problems" ).children();
- if ( typeof userExercise !== "undefined" ) {
- problemCount = userExercise.required_streak || 10;
- }
-
weighExercises( problems );
- problemBag = makeProblemBag( problems, problemCount );
+ problemBag = makeProblemBag( problems, 10 );
}
// Generate the initial problem when dependencies are done being loaded
View
14 utils/answer-types.js
@@ -534,7 +534,7 @@ jQuery.extend( Khan.answerTypes, {
});
};
- ret.showInteractiveGuess = function( guess ) {
+ ret.showCustomGuess = function( guess ) {
guess = jQuery.extend( true, [], guess );
solutionarea.find( ".sol" ).each(function() {
@@ -544,8 +544,8 @@ jQuery.extend( Khan.answerTypes, {
// Shift regardless of whether we can show the interactive guess
var next = guess.shift();
- if ( jQuery.isFunction( validator.showInteractiveGuess ) ) {
- validator.showInteractiveGuess( next );
+ if ( jQuery.isFunction( validator.showCustomGuess ) ) {
+ validator.showCustomGuess( next );
}
}
});
@@ -925,7 +925,7 @@ jQuery.extend( Khan.answerTypes, {
return Khan.answerTypes.text( solutionarea, solution, fallback, verifier );
},
- interactive: function( solutionarea, solution ) {
+ custom: function( solutionarea, solution ) {
var isTimeline = !( solutionarea.attr( "id" ) === "solutionarea" || solutionarea.parent().attr( "id" ) === "solutionarea" );
var guessCorrect = false;
solution.find( ".instruction" ).appendTo( solutionarea );
@@ -949,17 +949,17 @@ jQuery.extend( Khan.answerTypes, {
ret.examples = solution.find( ".example" ).map(function(i, el) {
return jQuery( el ).html();
});
- ret.solution = "interactive";
+ ret.solution = "custom";
ret.showGuess = function( guess ) {
if ( isTimeline ) {
guessCorrect = validator( guess );
jQuery( solutionarea ).empty();
- jQuery( solutionarea ).append( guessCorrect ? "Interactive answer correct" : "Interactive answer incorrect" );
+ jQuery( solutionarea ).append( guessCorrect ? "Answer correct" : "Answer incorrect" );
}
}
var showGuessCode = jQuery( solution ).find( ".show-guess" ).text();
- ret.showInteractiveGuess = function( guess ) {
+ ret.showCustomGuess = function( guess ) {
var code = "(function() { var guess = " + JSON.stringify( guess ) + ";" + showGuessCode + "})()";
KhanUtil.tmpl.getVAR( code, KhanUtil.currentGraph );
}
View
123 utils/jquery-color.js
@@ -1,123 +0,0 @@
-/*
- * jQuery Color Animations
- * Copyright 2007 John Resig
- * Released under the MIT and GPL licenses.
- */
-
-(function(jQuery){
-
- // We override the animation for all of these color styles
- jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
- jQuery.fx.step[attr] = function(fx){
- if ( fx.state == 0 ) {
- fx.start = getColor( fx.elem, attr );
- fx.end = getRGB( fx.end );
- }
-
- fx.elem.style[attr] = "rgb(" + [
- Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
- Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
- Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
- ].join(",") + ")";
- }
- });
-
- // Color Conversion functions from highlightFade
- // By Blair Mitchelmore
- // http://jquery.offput.ca/highlightFade/
-
- // Parse strings looking for color tuples [255,255,255]
- function getRGB(color) {
- var result;
-
- // Check if we're already dealing with an array of colors
- if ( color && color.constructor == Array && color.length == 3 )
- return color;
-
- // Look for rgb(num,num,num)
- if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
- return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
-
- // Look for rgb(num%,num%,num%)
- if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
- return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
-
- // Look for #a0b1c2
- if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
- return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
-
- // Look for #fff
- if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
- return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
-
- // Otherwise, we're most likely dealing with a named color
- return colors[jQuery.trim(color).toLowerCase()];
- }
-
- function getColor(elem, attr) {
- var color;
-
- do {
- color = jQuery.curCSS(elem, attr);
-
- // Keep going until we find an element that has color, or we hit the body
- if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
- break;
-
- attr = "backgroundColor";
- } while ( elem = elem.parentNode );
-
- return getRGB(color);
- };
-
- // Some named colors to work with
- // From Interface by Stefan Petre
- // http://interface.eyecon.ro/
-
- var colors = {
- aqua:[0,255,255],
- azure:[240,255,255],
- beige:[245,245,220],
- black:[0,0,0],
- blue:[0,0,255],
- brown:[165,42,42],
- cyan:[0,255,255],
- darkblue:[0,0,139],
- darkcyan:[0,139,139],
- darkgrey:[169,169,169],
- darkgreen:[0,100,0],
- darkkhaki:[189,183,107],
- darkmagenta:[139,0,139],
- darkolivegreen:[85,107,47],
- darkorange:[255,140,0],
- darkorchid:[153,50,204],
- darkred:[139,0,0],
- darksalmon:[233,150,122],
- darkviolet:[148,0,211],
- fuchsia:[255,0,255],
- gold:[255,215,0],
- green:[0,128,0],
- indigo:[75,0,130],
- khaki:[240,230,140],
- lightblue:[173,216,230],
- lightcyan:[224,255,255],
- lightgreen:[144,238,144],
- lightgrey:[211,211,211],
- lightpink:[255,182,193],
- lightyellow:[255,255,224],
- lime:[0,255,0],
- magenta:[255,0,255],
- maroon:[128,0,0],
- navy:[0,0,128],
- olive:[128,128,0],
- orange:[255,165,0],
- pink:[255,192,203],
- purple:[128,0,128],
- violet:[128,0,128],
- red:[255,0,0],
- silver:[192,192,192],
- white:[255,255,255],
- yellow:[255,255,0]
- };
-
-})(jQuery);

0 comments on commit fb37257

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