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"> <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 :- “<html data-require="math">” this specifies that we want to use the math library functions in our code. “<div class="exercise"> ” this is our exercise wrapper. All exercise related processing is done. “<div class="vars"> ” this div includes variable declarations, these variables are accessible in our exercise wrapper and we can use them anywhere we want. “<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. “<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. “<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. “<div class="question">” this is the question wrapper, as the name suggests it includes the question definition. “<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. '<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. '<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> 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. '<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