Making your First Khan Accademy Exercise

lionaneesh's Avatar author of Making your First Khan Accademy Exercise
This is an article on Making your First Khan Accademy Exercise in Web Design, HTML And CSS Tutorials.
Rated 5.00 By 1 users
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's Avatar, Join Date: Apr 2012
Newbie Member
thank you
lionaneesh's Avatar, Join Date: Mar 2010
Invasive contributor
Quote:
Originally Posted by areefa1230 View Post
thank you
Please press the thanks button, just below the article.