Exercises are specified entirely using HTML and are contained within a simple HTML page. You can specify a series of problems (which contain a problem introduction, a question, and a valid solution). Additionally you can specify a series of hints that will be provided to the user upon request.
Exercises are designed to be contained within a single HTML file.
In brief, every exercise should have the following areas:
Different pages of this wiki will go into more details of each section. The basic layout for a single, simple exercise can be found below.
<!DOCTYPE html>
<html data-require="math">
<head>
<title>Name of Your Exercise</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<!-- Your variables in here... -->
</div>
<div class="problems">
<div id="problem-type-or-description">
<p class="problem"><!-- An overview of the problem including all needed info. --></p>
<p class="question"><!-- The question to ask the student. --></p>
<p class="solution"><!-- The correct answer expected of the student. --></p>
</div>
</div>
<div class="hints">
<!-- Any hints to show to the student. -->
</div>
</div>
</body>
</html>
You can copy this markup into an HTML file and start building an exercise right away.
Add ?debug to any exercise URL to conjure a useful debug info panel. You can also type “h” to reveal the next hint.
Depending upon the type of exercise that you’re writing you’ll likely need to load one or more utility modules in order to render the exercise correctly. This can be done by specifying a data-require="..." attribute on the HTML element of the page.
There are an ever-increasing number of modules (you can find them in the utils/ directory) but the ones that you’ll most-likely need are:
There are also utils for angles, calculus, exponents, kinematics, probability, etc.
We just started working on documenting all of the utility functions. A great way to help out and become more familiar with the modules is to help us expand the documentation by editing the reference wiki. Feel free to adjust formatting, re-organize, whatever makes it easier for everyone to find the utility modules they need.
<!DOCTYPE html>
<html data-require="math word-problems"> <!-- Your modules go on this line... -->
<head>
<title>Name of Your Exercise</title>
<script src="../khan-exercise.js"></script>
</head>