Permalink
Browse files

Retool framework, move Math and Graph logic out of khan-exercise.js a…

…nd into their respective modules. Re-work markup conventions to no longer use IDs. Fixes #13 and #14.
  • Loading branch information...
1 parent 9c227ad commit 190610b400de6690f3c0d52d5d36c068279fc670 @jeresig jeresig committed May 18, 2011
View
@@ -34,20 +34,22 @@ Exercises are designed to contained within a single HTML file. The basic layout
<script src="../khan-exercise.js"></script>
</head>
<body>
- <div id="vars">
- <!-- Your variables in here... -->
- </div>
+ <div class="exercise">
+ <div class="vars">
+ <!-- Your variables in here... -->
+ </div>
- <div id="problems">
- <div class="problem">
- <div class="problem"><!-- An overview of the problem. --></div>
- <p class="question"><!-- The question to ask the student. --></p>
- <p class="solution"><!-- The correct answer expected of the student. --></p>
+ <div class="problems">
+ <div>
+ <p class="problem"><!-- An overview of the problem. --></p>
+ <p class="question"><!-- The question to ask the student. --></p>
+ <p class="solution"><!-- The correct answer expected of the student. --></p>
+ </div>
</div>
- </div>
- <div id="hints">
- <!-- Any hints to show to the student. -->
+ <div class="hints">
+ <!-- Any hints to show to the student. -->
+ </div>
</div>
</body>
</html>
@@ -64,7 +66,7 @@ There are an ever-increasing number of modules (you can find them in the `utils/
Most mathematical problems that you generate will have some bit of random-ness to them (in order to make for an interesting, not-identical, problem). You can generate these values up-front so that you can re-use them again in your problems.
-To start you'll want to populate some variables inside the `<div id="vars">...</div>`. Variables are typically defined by using a `<var></var>` element. You'll want to specify an ID for the var as that'll be the name that you'll refer to in the future.
+To start you'll want to populate some variables inside the `<div class="vars">...</div>`. Variables are typically defined by using a `<var></var>` element. You'll want to specify an ID for the var as that'll be the name that you'll refer to in the future.
For example to make a variable named `SPEED1` that is a number from 11 to 20 you would do:
@@ -130,11 +132,11 @@ You can feel free to put formulas in your problems, questions, hints, solution,
### Problems
-Problems are a collection of a problem overview, a question, and a solution. All problems are contained within an element with an ID of "problems".
+Problems are a collection of a problem overview, a question, and a solution. All problems are contained within an element with a class of "problems".
The basic structure of a problem looks something like this:
- <div class="problem">
+ <div>
<div class="problem"><!-- An overview of the problem. --></div>
<p class="question"><!-- The question to ask the student. --></p>
<p class="solution"><!-- The correct answer expected of the student. --></p>
@@ -198,7 +200,7 @@ Thankfully you won't have to re-write the entire problem from scratch, you'll on
For example in the following markup we create two types of problems. One is the base, core, problem (with the ID of "original") and the other is the problem that inherits from the original.
- <div id="original" class="problem">
+ <div id="original">
<div class="problem">
<p>Alice traveled by <var>VEHICLE1</var> at an average speed of <var>SPEED1</var> miles per hour.</p>
<p>Then, she traveled by <var>VEHICLE2</var> at an average speed of <var>SPEED2</var> miles per hour.</p>
@@ -207,7 +209,7 @@ For example in the following markup we create two types of problems. One is the
<p class="question">How many miles did Alice travel by <var>VEHICLE1</var>? (Round to the nearest mile.)</p>
<p class="solution"><var>round(DIST1)</var></p>
</div>
- <div class="problem" data-type="original">
+ <div data-type="original">
<p class="question">How many miles did Alice travel by <var>VEHICLE2</var>? (Round to the nearest mile.)</p>
<p class="solution"><var>round(DIST2)</var></p>
</div>
@@ -250,9 +252,9 @@ An example full graph definition is as follows:
A common need of students that are still learning is to have frequent hints that can help to direct them towards a solution. How the hints affect the overall flow of the education should be left up to the framework (for example, in Khan Academy, retrieving a hint will reset your "streak", forcing you to re-do problems that you've done before).
-Hints are contained within a `<div id="hints"> ... </div>` block. The markup that you use inside the block is completely at your discretion.
+Hints are contained within a `<div class="hints"> ... </div>` block. The markup that you use inside the block is completely at your discretion.
- <div id="hints">
+ <div class="hints">
<p>Remember that <code>d = r * t</code>, or written another way, <code>t = d / r</code></p>
<div>
<p><code>d_<var>V1</var> =</code> distance that Alice traveled by <var>VEHICLE1</var></p>
@@ -271,7 +273,7 @@ If you wish to provide hints that are specific to the problem that the user is w
For example, in this particular exercise there is a hint block that contains two placeholders: "hint1" and "hint2". These placeholders to not contain any hints and will be populated later by specific problems.
- <div id="hints">
+ <div class="hints">
<p>Let's break this problem into smaller and easier pieces.</p>
<p class="hint1"></p>
<p><code><var>A</var> * x = </code><code class="hint_orange"><var>A</var>x</code></p>
@@ -284,10 +286,10 @@ Inside a problem the author may write something like the following:
<div class="problem">
...
- <div class="hint">
+ <div class="hints">
<p class="hint1">What is <span class="hint_orange">the product of <var>A</var> and x</span>?</p>
<p class="hint2">What is <span class="hint_blue">the sum of <var>B</var></span> and <code class="hint_orange"><var>A</var>x</code>?</p>
</div>
</div>
-The framework will take the above markup contained within the `<div class="hint"> ... </div>`, go through each of the child elements (in this case, the paragraphs), and replace the associated paragraphs in the main "hints" block (thus "hint1" will replace "hint1", "hint2" will replace "hint2" and so on). What class names you wish to use can be completely at your discretion.
+The framework will take the above markup contained within the `<div class="hints"> ... </div>`, go through each of the child elements (in this case, the paragraphs), and replace the associated paragraphs in the main "hints" block (thus "hint1" will replace "hint1", "hint2" will replace "hint2" and so on). What class names you wish to use can be completely at your discretion.
View
@@ -1,20 +1,22 @@
<!DOCTYPE html>
<html data-require="math">
<head>
- <title>Addition 1</title>
- <script src="../khan-exercise.js"></script>
+ <title>Addition 1</title>
+ <script src="../khan-exercise.js"></script>
</head>
<body>
- <div id="vars">
- <var id="A">rand(10)</var>
- <var id="B">rand(10)</var>
- </div>
+ <div class="exercise">
+ <div class="vars">
+ <var id="A">rand(10)</var>
+ <var id="B">rand(10)</var>
+ </div>
- <div id="problems">
- <div class="problem">
- <p class="question"><var>A</var> + <var>B</var> = ?</p>
- <div class="solution"><var>A + B</var></div>
- </div>
- </div>
+ <div class="problems">
+ <div>
+ <p class="question"><var>A</var> + <var>B</var> = ?</p>
+ <div class="solution"><var>A + B</var></div>
+ </div>
+ </div>
+ </div>
</body>
</html>
@@ -1,41 +1,39 @@
<!DOCTYPE html>
<html data-require="math">
<head>
- <title>Divisibility 0.5</title>
- <script src="../khan-exercise.js"></script>
+ <title>Divisibility 0.5</title>
+ <script src="../khan-exercise.js"></script>
</head>
<body>
- <script type="text/javascript">
- // TODO: Banish this!
- var number = Math.floor(Math.random() * 100); // TODO: probably don't want prime #'s
- var factorization = getPrimeFactorization( number );
- var num_factors = 2; // TODO: what is some reasonable # of factors for the answer?
- var answer = 1;
- for (var i = 0; i < num_factors; i++) {
- var index = Math.floor( factorization.length * Math.random() );
- answer *= factorization[index];
- factorization = $.merge( factorization.slice(0, index), factorization.slice(index + 1) );
- }
-
- var rounded = roundToPosition(answer, 1);
- var low = (answer > rounded) ? rounded : rounded - 10;
- var high = low + 10;
-
- </script>
-
- <div id="vars">
- <var id="NUMBER">number</var>
- <var id="LOW">low</var>
- <var id="HIGH">high</var>
- <var id="ANSWER">answer</var>
- </div>
+ <div class="exercise">
+ <div class="vars">
+ <var id="NUMBER">rand( 100 )</var>
+ <var id="ANSWER">
+ // TODO: what is some reasonable # of factors for the answer?
+ var factorization = getPrimeFactorization( NUMBER ),
+ num_factors = 2,
+ answer = 1;
+
+ for (var i = 0; i &lt; num_factors && i &lt; factorization.length; i++) {
+ var index = floor( random() * factorization.length );
+ answer *= factorization[index];
+ factorization = jQuery.merge( factorization.slice(0, index), factorization.slice(index + 1) );
+ }
+
+ return answer;
+ </var>
+ <var id="ROUNDED">roundTo(1, ANSWER)</var>
+ <var id="LOW">ANSWER > ROUNDED ? ROUNDED : ROUNDED - 10</var>
+ <var id="HIGH">LOW + 10</var>
+ </div>
- <div id="problems">
- <div class="problem" id="original">
- <div class="question">What is a number between <var>LOW</var> and <var>HIGH</var> that divides into <var>NUMBER</var>?</div>
- <p class="solution"><var>ANSWER</var></p>
- </div>
- </div>
+ <div class="problems">
+ <div>
+ <div class="question">What is a number between <var>LOW</var> and <var>HIGH</var> that divides into <var>NUMBER</var>?</div>
+ <p class="solution"><var>ANSWER</var></p>
+ </div>
+ </div>
+ </div>
</body>
</html>
@@ -5,39 +5,40 @@
<script src="../khan-exercise.js"></script>
</head>
<body>
- <div id="vars">
- <!-- TODO: Need checks for uniqueness, or perhaps okay with having A = B -->
-
- <var id="A_START">randRange( 1, 10 )</var>
- <var id="B_START">randRange( 1, 10 )</var>
- <var id="FACTOR">randRange( 1, 5 )</var>
-
- <var id="A">A_START * FACTOR</var>
- <var id="B">B_START * FACTOR</var>
- <var id="GCD">getGCD( A, B )</var>
- <var id="A_FACTORS">getFactors( A ).join( ", " )</var>
- <var id="B_FACTORS">getFactors( B ).join( ", " )</var>
- </div>
+ <div class="exercise">
+ <div class="vars">
+ <!-- TODO: Need checks for uniqueness, or perhaps okay with having A = B -->
+ <var id="A_START">randRange( 1, 10 )</var>
+ <var id="B_START">randRange( 1, 10 )</var>
+ <var id="FACTOR">randRange( 1, 5 )</var>
+
+ <var id="A">A_START * FACTOR</var>
+ <var id="B">B_START * FACTOR</var>
+ <var id="GCD">getGCD( A, B )</var>
+ <var id="A_FACTORS">getFactors( A ).join( ", " )</var>
+ <var id="B_FACTORS">getFactors( B ).join( ", " )</var>
+ </div>
- <div id="problems">
- <div class="problem">
- <div class="question">
- <p>What is the greatest common divisor (or factor) of <var>A</var> and <var>B</var>?</p>
- <p>Another way to say this is: </p>
- <p>GCD(<var>A</var>, <var>B</var>) = ?</p>
- </div>
+ <div class="problems">
+ <div>
+ <div class="question">
+ <p>What is the greatest common divisor (or factor) of <var>A</var> and <var>B</var>?</p>
+ <p>Another way to say this is: </p>
+ <p>GCD(<var>A</var>, <var>B</var>) = ?</p>
+ </div>
- <p class="solution"><var>GCD</var></p>
+ <p class="solution"><var>GCD</var></p>
+ </div>
</div>
- </div>
- <div id="hints">
- <p>The greatest common divisor is the largest number that is a factor (or divisor) of both <var>A</var> and <var>B</var>.</p>
- <p>The factors (or divisors) of <var>A</var> are: <var>A_FACTORS</var>.</p>
- <p>The factors (or divisors) of <var>B</var> are: <var>B_FACTORS</var>.</p>
- <div>Thus, the greatest common divisor of <var>A</var> and <var>B</var> is <var>GCD</var>.
- <p>GCD(<var>A</var>, <var>B</var>) = <var>GCD</var></p>
- </div>
+ <div class="hints">
+ <p>The greatest common divisor is the largest number that is a factor (or divisor) of both <var>A</var> and <var>B</var>.</p>
+ <p>The factors (or divisors) of <var>A</var> are: <var>A_FACTORS</var>.</p>
+ <p>The factors (or divisors) of <var>B</var> are: <var>B_FACTORS</var>.</p>
+ <div>Thus, the greatest common divisor of <var>A</var> and <var>B</var> is <var>GCD</var>.
+ <p>GCD(<var>A</var>, <var>B</var>) = <var>GCD</var></p>
+ </div>
+ </div>
</div>
</body>
</html>
@@ -1,43 +1,44 @@
<!DOCTYPE html>
<html data-require="math">
<head>
- <title>Least Common Multiple</title>
- <script src="../khan-exercise.js"></script>
+ <title>Least Common Multiple</title>
+ <script src="../khan-exercise.js"></script>
</head>
<body>
- <div id="vars">
- <var id="C">randRange( 2, 6 )</var>
- <var id="A">randRange( 1, 10 ) * C</var>
- <var id="B">randRange( 1, 10 ) * C</var>
- <var id="BIGGER">Math.max( A, B )</var>
- <var id="SMALLER">Math.min( A, B )</var>
- <var id="PRODUCT">A * B</var>
- <var id="GCD">getGCD( A, B )</var>
- <var id="LCM">PRODUCT / GCD</var>
- <var id="MULTIPLES">getMultiples( A, LCM ).join( ", " )</var>
- </div>
+ <div class="exercise">
+ <div class="vars">
+ <var id="C">randRange( 2, 6 )</var>
+ <var id="A">randRange( 1, 10 ) * C</var>
+ <var id="B">randRange( 1, 10 ) * C</var>
+ <var id="BIGGER">Math.max( A, B )</var>
+ <var id="SMALLER">Math.min( A, B )</var>
+ <var id="PRODUCT">A * B</var>
+ <var id="GCD">getGCD( A, B )</var>
+ <var id="LCM">PRODUCT / GCD</var>
+ <var id="MULTIPLES">getMultiples( A, LCM ).join( ", " )</var>
+ </div>
- <div id="problems">
- <div class="problem">
- <div class="question">
- <p>What is the least common multiple of <var>A</var> and <var>B</var>?</p>
- <p>Another way to say this is:</p>
- <p>LCM(<var>A</var>, <var>B</var>) = ?</p>
- </div>
- <p class="solution"><var>LCM</var></p>
- </div>
- </div>
+ <div class="problems">
+ <div>
+ <div class="question">
+ <p>What is the least common multiple of <var>A</var> and <var>B</var>?</p>
+ <p>Another way to say this is:</p>
+ <p>LCM(<var>A</var>, <var>B</var>) = ?</p>
+ </div>
+ <p class="solution"><var>LCM</var></p>
+ </div>
+ </div>
- <div id="hints">
- <p>The least common multiple is the smallest number that is a multiple of <var>A</var> and <var>B</var>.</p>
- <p>We know that <var>A</var> x <var>B</var> (or <var>PRODUCT</var>) is a common multiple,
- but is it the least common multiple?</p>
- <p>Write out the multiples of <var>BIGGER</var> until we find a number divisible by <var>SMALLER</var>.</p>
- <p><var>MULTIPLES</var></p>
- <p>So, <var>LCM</var> is the least common multiple of <var>A</var> and <var>B</var>.</p>
- <p><var>PRODUCT</var> divided by <var>GCD</var> is <var>LCM</var>. Do you think that it is a coincidence
- that <var>GCD</var> is the greatest common divisor of <var>A</var> and <var>B</var>?</p>
-
- </div>
+ <div class="hints">
+ <p>The least common multiple is the smallest number that is a multiple of <var>A</var> and <var>B</var>.</p>
+ <p>We know that <var>A</var> x <var>B</var> (or <var>PRODUCT</var>) is a common multiple,
+ but is it the least common multiple?</p>
+ <p>Write out the multiples of <var>BIGGER</var> until we find a number divisible by <var>SMALLER</var>.</p>
+ <p><var>MULTIPLES</var></p>
+ <p>So, <var>LCM</var> is the least common multiple of <var>A</var> and <var>B</var>.</p>
+ <p><var>PRODUCT</var> divided by <var>GCD</var> is <var>LCM</var>. Do you think that it is a coincidence
+ that <var>GCD</var> is the greatest common divisor of <var>A</var> and <var>B</var>?</p>
+ </div>
+ </div>
</body>
</html>
Oops, something went wrong.

0 comments on commit 190610b

Please sign in to comment.