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
spicyj edited this page Jul 14, 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:

  • Header which includes importing utilities, naming the exercise, and describing the exercise
  • Vars Section which declares all variables to be used later
  • Problem Section which includes the question and the solution
  • Hint Section 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.

Back to Writing Exercises: Home

Clone this wiki locally