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:
headwhich includes importing utilities and the exercise title
div.exercisewhich contains everything else to do with the exercise
div.varswhich declares all variables to be used later
div.problemswhich includes all possible problems
div.hintswhich includes hints on how to solve the problem
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.
?debug to any exercise URL to conjure a useful debug info panel. You can also type "h" to reveal the next hint.
Back to Writing Exercises: Home