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.

“<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.

“<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.

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.

'<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