Making your First Khan Accademy Exercise

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

  1. lionaneesh

    lionaneesh Active Member

    Joined:
    Mar 21, 2010
    Messages:
    848
    Likes Received:
    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">
    <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:
      <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. areefa1230

    areefa1230 New Member

    Joined:
    Apr 26, 2012
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    Home Page:
    http://www.shaadi-direct.com
  3. lionaneesh

    lionaneesh Active Member

    Joined:
    Mar 21, 2010
    Messages:
    848
    Likes Received:
    224
    Trophy Points:
    43
    Occupation:
    Student
    Location:
    India
    Please press the thanks button, just below the article.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice