Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   Making your First Khan Accademy Exercise (http://www.go4expert.com/articles/khan-accademy-exercise-t27922/)

lionaneesh 1Mar2012 00:17

Making your First Khan Accademy Exercise
 
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

Re: Making your First Khan Accademy Exercise
 
thank you

lionaneesh 26Apr2012 14:43

Re: Making your First Khan Accademy Exercise
 
Quote:

Originally Posted by areefa1230 (Post 94525)
thank you

Please press the thanks button, just below the article.


All times are GMT +5.5. The time now is 03:18.