Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)

 lionaneesh 1Mar2012 00:17

In this tutorial I'll be covering on how to make a simple yet attractive and useful exercise using Khan API (see more), Khan Accademy is a non profit organisation with a goal of changing education for the better by providing a free world-class education to anyone anywhere. Its a great initiative and I always love to contribute to such projects. So, lets teach ourselves how to create our very own basic exercise.

Prerequisites : A little programming experience with HTML or any language, just a little bit mathematical knowledge and a little knowledge about Chemistry (Limiting Reagent) would be good to start.

### Code

HTML Code:

```<!DOCTYPE html> <html data-require="math"> <head>         <title>Limiting Reagent</title>         <script src="../khan-exercise.js"></script> </head> <body>         <div class="exercise">                 <div class="vars">                                 <var id="reagent_a">randRange( 1, 9 )</var>                                 <var id="reagent_b">randRange( 1, 9 )</var>                                 <var id="mass_a">randRange( 1, 100 )</var>                             <var id="mass_b">randRange( 1, 100 )</var>                 <var id="atomic_mass_a">randRange( 1, 50 )</var>                             <var id="atomic_mass_b">randRange( 1, 50 )</var>                 <var id="moles_of_a">mass_a / atomic_mass_a</var>                 <var id="moles_of_b">mass_b / atomic_mass_b</var>                 <var id="a">moles_of_a / reagent_a</var>                             <var id="b">moles_of_b / reagent_b</var>                 <var id="limiting_reagent">a > b ? 'B' : ((a === b) ? 'None' : 'A')</var>                 </div>                 <div class="problems">                         <div>                                 <div class="question">                                         <p>Find the limiting reagent in the following chemical reaction, if <var>mass_a</var> grams of A and <var>mass_b</var> grams of B are present in the reaction vessel before the initiation of the reaction and the atomic masses of A and B are <var>atomic_mass_a</var> g/mol and <var>atomic_mass_b</var> g/mol respectively.</p>                         <p><var>reagent_a</var>A + <var>reagent_b</var>B => A<code data-if="reagent_a > 1">_<var>reagent_a</var></code>B<code data-if="reagent_b > 1">_<var>reagent_b</code></p>                                 </div>                                 <p class="solution"><var>limiting_reagent</var></p>                 <ul class="choices" data-show="3" data-none="true">                     <li>A</li>                     <li>B</li>                     <li>Both reactants are consumed</li>                 </ul>             </div>                 </div>                 <div class="hints">                         <p>The limiting reagent is the substance that is totally consumed when the reaction is complete.</p>                         <div>                 <p><b>Step 1:</b> Calculate the number of moles of the reactants.</p>                 <p>Number of Moles of A in the reaction vessel is <var>moles_of_a</var></p>                 <p>Number of Moles of B in the reaction vessel is <var>moles_of_b</var></p>             </div>             <div>                 <p><b>Step 2:</b> Divide moles of each reagent by its stoichiometric coefficient.</p>                 <p><b>A</b> : <var>moles_of_a</var>/<var>reagent_a</var> = <var>moles_of_a/reagent_a</var></p>                 <p><b>B</b> : <var>moles_of_b</var>/<var>reagent_b</var> = <var>moles_of_b/reagent_b</var></p>             </div>             <div>                 <p><b>Step 3:</b> Identify the limiting reagent.</p>                 <p data-if="limiting_reagent === 'None'">As both the values are equal, we can conclude that both the reagents are consumed fully.</p>                 <p data-else>The limiting reagent is the smallest number i.e <var>limiting_reagent</var></p>                         </div>                 </div>         </div> </body> </html>```
Ok! So lets see how this code works :-
1. “<html data-require="math">” this specifies that we want to use the math library functions in our code.
2. “<div class="exercise">
3. ” this is our exercise wrapper. All exercise related processing is done.
4. “<div class="vars">
” this div includes variable declarations, these variables are accessible in our exercise wrapper and we can use them anywhere we want.
5. “<var id="reagent_a">randRange( 1, 9 )</var>” this sets 'reagent_a' to the output of randRange(1, 9).
randRange() is a function which takes 2 integers as input and outputs a random integer between the 2 inputs.
6. “<var id="limiting_reagent">a > b ? 'B' : ((a === b) ? 'None' : 'A')</var>” this sets the 'limiting_reagent' to 'B', 'A', or 'None' depending on whether a > b, a < b, or a == b respectively.
7. “<div class="problems">” this starts the problem wrapper, in this div we'll be adding all the problem related data i.e Question, Answer, Options etc.
8. “<div class="question">” this is the question wrapper, as the name suggests it includes the question definition.
9. “<var>mass_a</var>” this is a way how Khan API handles variables, it will evaluate to the value conained by the variable inside '<var>' and '</var>', example <var>variable1</var> will give the value contained in variable1.
10. '<code data-if="reagent_a > 1">' code tag is used to evaluate code between <code> and </code>, data-if="reagent_a > 1" , checkes whether the reagent_a > 1, if yes the code in the code blocks is executed or else its just ignored. Its like a basic ef, else construct.
11. '<p class="solution"><var>limiting_reagent</var></p>' defines a solution wraper, in which solution to the question must be contained.

HTML Code:

```<ul class="choices" data-show="3" data-none="true">                     <li>A</li>                     <li>B</li>                     <li>Both reactants are consumed</li>  </ul>```
12. This (above code) defines a set of choices and also defines that the question is actually a MCQ.
'data-show="3"' defines the number of options to print.
'data-none="true"' defines whether “None of These” can be an option.

HTML Code:

```<li>A</li> <li>B</li> <li>Both reactants are consumed</li>```
these are the options which would be printed to the user.
13. '<div class="hints">' this defines a hints wraper which contains the hints to be provided (on demand) to the student while trying to solve the question.

Under the hints wrapper every hint is specified in a paragraph tag or a div tag.

Wohoo! Yeah! That's all, You just made your first ever Khan-Exercise, Now go get a coffee, you deserve it ;)

 areefa1230 26Apr2012 12:39