Skip to content
This repository has been archived by the owner on May 11, 2021. It is now read-only.

Writing Exercises: Introduction

Jump to bottom
marcia edited this page Oct 20, 2011 · 8 revisions

Exercise Page Intro

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.

Basic Layout

Exercises are designed to be contained within a single HTML file.

In brief, every exercise should have the following areas:

  • head which includes importing utilities and the exercise title
  • div.exercise which contains everything else to do with the exercise
  • div.vars which declares all variables to be used later
  • div.problems which includes all possible problems
  • div.hints which 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.

Add ?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

Clone this wiki locally