Discussion in 'Web Design, HTML And CSS' started by lionaneesh, Feb 29, 2012.

1. ### lionaneeshActive Member

Joined:
Mar 21, 2010
Messages:
848
224
Trophy Points:
43
Occupation:
Student
Location:
India
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:
```<!DOCTYPE html>
<html data-require="math">
<title>Limiting Reagent</title>
<script src="../khan-exercise.js"></script>
<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:
```<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:
```<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 2. ### areefa1230New Member

Joined:
Apr 26, 2012
Messages:
2
0
Trophy Points:
0
thank you

Joined:
Mar 21, 2010
Messages:
848