Vademecum Khan exercises

A Khan exercise makes it possible to deal with a mathematical topic interactively, individually and repeatedly. This is done numerically, graphically or semantically. Further features are

Here we provide a quick introduction -- see also FAQ.

Questions of programming elegance or performance are not the focus here. Usually, these do not play a role in the small parameter space.

Examples from a collection

Deploying an Khan exercise

Deployment does not require integration. A Khan exercise runs in a browser, even on mobile devices. Direct linking, e.g. for or in classical exercise series, is done with href or related commands.

Elementary adjustments (e.g. notations) are made in an html file.

The anonymous data on interactions with a task (input, new parameters, hints) are recorded and can then be analyzed.

Structure

A Khan exercise is an html file. It is based on the Khan Exercise Framework, further developed into kekse -- our version of Khan.

The document type, the (global) language and the coding are defined in the exercise header. The paths for the CSS stylesheets and the title displayed in the browser tab are specified. It is usually sufficient to give the exercise a title

<head> 
	. . . 
	<title>Is displayed in the browser tab</title> 
</head>
It gets interesting after <body>. The actual framework of the entire exercise, including validation, is defined in the body. The path to the JavaScript bundle is specified at the very end of the <body> element.

This can be used directly.<script src="../blob/dist/kexe.bundle.js"></script>. The kekse bundle is our further development of the Khan Exercise Framework.

Meta

In <div class="meta">...</div>, local language and coding are defined:

Vars

The variables used in the exercise are defined in the <div class="vars">...</div> environment, and each variable by <var id="name">value</var>. Here

The variable values are read out later in the html of the exercise (see below). For example, 
<var id="A">10</var> 
<var id="B">A/2</var>
defines two variables A and B with values 10 and 5. Variables with a random value are more interesting. For example (see also Khan's partly outdated manual):<var id="A">randRangeExclude(-12,12,[-1,0,1])</var>. Here, the variable A can take integer values between -12 and 12 (including boundary), which are not equal to -1, 0 or 1.

Random numbers between N and M are generated with randRange(N,M). Instead of randRangeExclude(N,M,[0]), one can use also randRangeNonZero(N,M).

With <var id="L">randFromArray([L1,L2,...])</var>, one of the variables L1, L2, etc. is selected at random and its value is assigned to the variable L. The variables L1, L2, etc. are previously defined.

Using <div data-ensure="..."> ensures a further restricted selection: 

<div data-ensure="A > B"> 
<var id="A">randRange(1, 10)</var>
<var id="B">randRange(1, 10)</var>
See also test functions in the list of Khan functions.

Further examples are:

  1. Derived from Example: To ensure that the vectors \(\left(\begin{smallmatrix} A \\ B \\ C \end{smallmatrix}\right)\) and \( \left(\begin{smallmatrix} D \\ E \\ F \end{smallmatrix}\right)\) are orthogonal, write (for example) 
    <div data-ensure="kvector.dot([A,B,C],[D,E,F]) == 0">
	<var id="A">randRange(-4,4)</var> 
	<var id="B">randRangeExclude(-4,4,[A])</var> 
	<var id="C">randRange(-4,4)</var>                               
	<var id="D">randRange(-4,4)</var>
	<var id="E">randRangeExclude(-4,4,[D])</var>
	<var id="F">randRange(-4,4)</var>
</div>
  2. Derives from example: For a \( 2 \times 2\) - matrix \(\left(\begin{smallmatrix} A & B \\ C & D \end{smallmatrix} \right)\) with non-zero determinant write (for example) 
    <div data-ensure="A*D-B*C !== 0"> 
	<var id="A">randRangeNonZero(-8,8)</var> 
	<var id="B">randRangeNonZero(-8,8)</var> 
	<var id="D">randRangeNonZero(-8,8)</var> 
	<var id="C">randRangeNonZero(-8,8)</var> 
</div>
  3. Taken from example: Logical operations are also possible: 
    <div data-ensure="K<0 && -K!=4 && -K!= 9 && -K!=16"> 
	<var id="N">randRangeExclude(-4,4,[-1,0])</var> 
	<var id="T">2*N+1</var> 
	<var id="D">randRange(2,24)</var>
 	<var id="K">T*T - 4*D</var>
</div>
    It is ensured that K is negative and D is not one of the square numbers, alternatively define the variable D with : 
     <var id="D">randRangeExclude(2,24,[4,9,16])</var>
  4. Comes from example: Arrays can also be defined: 
    <var id="functionBank">[ 
<!-- [f, g, f', g', f*g', f'*g, g*f - \int f'*g, skp, UG,OG] --> 
["x", "\\sin(x)", "1", "\\cos(x)", "x\\cos(x)", 
"\\sin(x)", "x\\sin(x) + \\cos(x)", "0","-\\pi","\\pi"], 
["x", "\\sin(x)", "1", "\\cos(x)", "x\\cos(x)", "\\sin(x)", 
"x\\sin(x) + \\cos(x)", "0","-\\frac{\\pi}{2}","\\frac{\\pi}{2}"],
 .... 
 ] 
 </var> 
 <var id="fNum">randRange(0,functionBank.length-1)</var> 
 <var id="f">functionBank[fNum]</var>

  5. If single-choice answers are assembled from several random variables, it can happen that two answers are the same even though the original variables were not equal. For example if two answers are fractions X1/Y1 and X2/Y2. Although X1 != X2 and Y1 != X2, it might happen that X1/Y1 == X2/Y2, e.g. \(\frac12 = \frac 24\): 

    <div class="vars"> 
	<var id="X1">randRange(-10,10)</var> 
	<var id="X2">randRangeExclude(-10,10,X1)</var> 
	<var id="Y1">randRange(-10,10)</var> 
	<var id="Y2">randRangeExclude(-10,10,Y1)</var> 
</div>

    One possible solution is more careful programming with data-ensure, e.g. 

    <div class="vars" data-ensure="X1/Y1!=X2/Y2"> 
	<var id="X1">randRange(-10,10)</var> 
	<var id="X2">randRange(-10,10)</var> 
	<var id="Y1">randRange(-10,10)</var>
  	<var id="Y2">randRange(-10,10)</var> 
</div>
    or we can generate more than enough answers and then clean up this selection, as in the following example

Question

In <div class="question">...</div> is the given task as html.

These three tools (KaTeX, variables, data-if) can also be used in the "Solution" and "Hints" parts of the exercise (see next two sections). See also the list of Khan functions.

Solution

In <div class="solution">...</div> it is determined how the solution to the exercise can be entered and which input(s) are considered to be correct. The syntax for this division is determined by the answer type specified above in the meta division <div class="meta">...</div>.

Answer types and their syntax are described in a supplementary manual (at present only in German). We provide a brief overview here using examples.

  1. Answer types with textbox input are e.g. text, number, rational or decimal. In the simplest case, the correct solution is specified directly in the <div class="solution">. For example 
    <div class="solution"><var>X</var></div>
    Here, the correct answer is stored in the variable X and validated as true (correct) after pressing the check button. An example: 
    <div class="solution"> 
	<var>a*(B*B/2)</var> 
</div>
  2. For answer types with a text box, there is also an extended syntax that allows the text box to be customized: 
    <div class="solution"> 
	<span class="xlabel"><code>\displaystyle \int_\gamma K d\gamma=</span> 
	<span class="value"><var>result</var></span>
</div>

    The element <span class="value"> contains the value of the solution and is the only necessary one in the division <div class="solution">. The element <span class="xlabel"> defines a label (also with KaTeX) on the left-hand side of the text box.

  3. The answer type radio is required for single-choice. The following example is taken from:
  4. The multiple answer type allows tasks with multiple answers. Example 
    <div class="solution"> 
	<div class="sol" data-type="number"> 
		<span class="label">Lower boundary:</span> 
		<span class="xlabel"> <span style="width: 7em">Lower boundary:</span></span> 
		<span id="sol_c" class="value"> 
			<var>RANGE[0]</var> 
		</span> 
	</div> 
	<div class="sol" data-type="number"> 
		<span class="label">Upper boundary:</span> 
		<span class="xlabel"><span style="width: 7em">Upper boundary:</span></span> 
		<span id="sol_a" class="value"> 
			<var>RANGE[1]</var> 
		</span> 
	</div>
</div>
    Two numerical entries are expected: "lower boundary" and "upper boundary". There are automatically two input fields for this. In general, there must be an element <div class=sol data-type="..."> for each required partial response, where data-type specifies the answer type of the partial response.

    There is an old syntax for multiple, which only works for compatibility reasons. The above example would be 

    <div class="solution"> 
	<div> 
		<span class="label">lower boundary:</span> 
		<span class="xlabel">lower boundary:</span> 
		<span id="sol_c" class="sol" data-type="number"><var>RANGE[0]</var></span>
	</div> 
	<div> 
		<span class="label">Upper bound:</span> 
		<span class="xlabel">upper boundary:</span> 
		<span id="sol_a" class="sol" data-type="number"><var>RANGE[1]</var></span>
	</div> 
</div>

    Some existing tasks in the collection still use the old multiple syntax, even if only a partial answer is required.

    Example of a multiple task in the old format. Here it is possible to use <data-if> to incorporate switches depending on the random parameters: 

    <span data-if="L3 == L2" id="sol_c" class="sol" data-type="number">0</span> 
<span data-if="L3 == L1" id="sol_d" class="sol" data-type="number">1</span>
  5. Derives from Example: If there is no unique solution, or if the solution depends on the current variables or the input is independent of the order of the input, the answer type set is suitable. As for multiple, a sub-answer type must be selected for set. In the following example, this is expression: 
    <div class="solution"> 
	<div data-if="K == 0" class="set-sol" data-type="expression"> 
		<div class="sol" data-type="expression">(A+B*t)e^{<var>L1</var>*t}
		</div> 
	</div> 
	<div data-if="K == 0" class="set-sol" data-type="expression"> 
		<div class="sol" data-type="expression">
			(A*t+B)e^{<var>L1</var>*t} 
		</div> 
	</div> 
	<div data-if="K > 0" class="set-sol" data-type="expression"> 
		<div class="sol" data-type="expression"> 
			Ae^{<var>L1</var>*t} + Be^{<var>L2</var>*t} 
		</div> 
	</div> 
	<div data-if="K > 0" class="set-sol" data-type="expression"> 
		<div class="sol" data-type="expression"> 
			Ae^{<var>L2</var>*t} + Be^{<var>L1</var>*t} 
		</div> 
	</div> 
	<div class="input-format"> 
		<div class="entry" data-type="expression"> 
			<span class="xlabel"><code>y(t) =</code></span> 
			<span class="value"></span> 
		</div> 
	</div> 
</div>

  6. The expression answer type asks for mathematical expressions such as \sin(5x) or e^{<var>L1</var>*t} as in the previous example.

  7. With answer type custom, customized tasks are possible, but also more demanding. The example above "Demo custom with linear equation" could certainly be more elementary.

    1. Example of a geometric validation:

    2. With custom, I can also evaluate numbers in an interval as correct: the validator function must then implement size comparisons:

      <div class="solution"> 
	<div class="instruction"> 
		<form class="needs-validation" autocomplete="off" novalidate=""> 
			<label for="custom_input" class="control-label visually-hidden">B=</label> 
			<div class="input-group"> 
				<span class="input-group-text bk-input-group-addon"> 
					<code>{\color{red}X=}</code> 
				</span> 
				<input id="custom_input" type="text" class="form-control" autocapitalize="off" /> 
			</div> 
		</form> 
	</div>
	<div class="guess">[document.getElementById("custom_input").value]</div>
	<div class="validator-function"> 
		return (X &gt; a) && (X &lt; b); 
	</div> 
</div>

      Here, X is evaluated as correct if X > a and X < b, where a and b are variables. With &gt;= and &lt;=, numbers can be checked in closed intervals. The html in <div class="instruction"> determines the appearance of the input field. This is used here, for example:

      Example:

Hints

The hints are (hidden) in the <div class="hints"> ... </div> block. With a series of <div>, hints are displayed step by step, each time by pressing the Hint button. KaTeX and variables can also be used here. Useful points are again shown using examples:

  1. Comes from Example: Here, too, <data-if> can be used to insert switches depending on the random parameters: 
    <div data-if="V == W"> 
	<p>Here, is the orientataion of <code>\gamma</code> <b>positive</b>.</p> 
</div> 
<div data-if="V !== W"> 
	<p>Here, the orientation of <code>\gamma</code> is <b>negative</b>.</p> 	
</div>
  2. Comes from Example: Graphical elements can be updated in the hint: 
    Let
<div class="graphie" id="rennen">
 ... 
</div> 
be given. 
Then 
<div class="graphie" data-update="rennen"> 
... 
</div> 
adds a component to the existing graph.

Graphie and Friends

The use of graphical elements is a leap that is best mastered by copy & paste.

In addition to the examples above the collection contains also

KaTeX vs. JS vs. html

As an html file, a Khan exercise is primarily interpreted by the browser as html. Only when the exercise concludes with kekse, our version of Khan,<script src="blob/dist/kexe.bundle.js"></script>is the html of the exercise specially interpreted and the ready-to-use Khan exercise built from it. Therefore, a Khan exercise may look "broken" if kekse is not loaded correctly (slowly).

In contrast to standard html, the contents of certain html elements of the exercise have special meanings. For example, there are elements that can/should contain JavaScript code or LaTeX code, even if this is not usually possible in html.

html escape

Conversely, if the special html characters <, >, & are required in such content, they must be written with html escape sequences &lt;, &gt;, & amp;. For example, if there is a size comparison in a JavaScript sectionif (x > y), then if (x &gt; y) must be written there.

Direct html

There are sections in which the html of the exercise is interpreted directly as html:

Wherever html is interpreted directly as such, LaTeX code can be inserted using<code>...</code>, which is then displayed accordingly as a formula. This is done with KaTeX, so the command set of KaTeX is decisive, see examples above.

JavaScript

JavaScript is expected in the following places:

It is possible to use <var> within <code>, see examples above.