Skip to main content

A simple accessible XHTML quiz designed to be easily re-purposed.


English to French word comparison quiz

Developed as an example of an accessible alternative to a Flash French language quiz for LanguagePlus. The original Flash versions are more engaging and far better at providing interactivity but were inaccessible. This quiz in XHTML strict and PHP was developed as an example for inclusion as an accessible alternative.

The quiz was developed with ease of implementation in mind and has the following features:

  1. Only three files needed; The HTML quiz; The PHP answers; The style sheet
  2. Questions and answers are defined in the XHTML
  3. One "mark answers" page will deal with many different comparison quizzes.
  4. Easily modified.

All files used here are available for download in a single zip file [6KB].

How it works


  1. The name of the quiz is defined by a hidden field called "title". Upon submission the "title" is picked up by the answers page (mark_answers.php) which uses it to:
    1. Define the page title
    2. Define the page heading
    3. Define the link to retry the quiz
    It is important that the XHTML quiz uses this "title" as part of the filename, that is: "title_quiz.html". The example given uses: title="Animal", converts to lowercase and references "animal_quiz.html".
    <input type="hidden" name="title" value="Animal" />
  2. The number of questions is set in the hidden field "number_of_questions". This value is used to loop through the questions to mark each.
    <input type="hidden" name="number_of_questions" value="4" />
  3. The hidden field "show_answers" allows the constructor to decide how the quiz is marked. There are three possibilities:
    1. a value of 0; only mark the questions
    2. a value of 1; mark the questions and display the correct answers where wrong
    3. a value of 2; mark questions and show a link to display the correct answers
    <input type="hidden" name="show_answers" value="2" />
  4. Each question has four parts used as comparisons when marking. Example given is for question three:
    1. the English question is set in a field followed by the question number: english_question_1, english_question_2, etc
      <input type="hidden" value="Frog" name="english_question_3" />
    2. the English answer is also set in a field followed by the question number: english_answer_1, english_answer_2, etc.
      <input type="hidden" value="Frog" name="english_answer_3" />
    3. the French question is set in a field followed by the question number: french_question_1, french_question_2, etc
      <input type="text" value="" id="french_question_3" name="french_question_3" lang="fr" />
      Because this input is visible and in French it's language is stated by lang="fr". The id associates the label text to the input. There has to be a label associated to each visible input.
      <label for="french_question_3">What is the French animal name for Frog?</label>
    4. the French answer follows the same format: french_answer_1, french_answer_2, etc
      <input type="hidden" value="Grenouille" name="french_answer_3" />
    In many cases it may be appropriate to have the question and answer the same in one language. As in the above example of question three.

By setting the above variables in the question XHTML it is possible to automate a marked response.

The marking program compares the English question with the English answer, the same occurs for the French.

A correct answer is one where the English question is equal to the English answer, and the French question is equal to the French answer.

In these examples the questions are asked in an ordered list. This provides the question number and the "answer to question" number. Again this is to allow automated marking by the one file mark_answers.php.

Why it's accessible

  1. Every input has an associated label for ease of use:
    1. question 1 labels are hidden and are included to give clues to screen readers only
    2. question 2 has visible labels that associate an input to the radio button. This has the added benefit of providing the user a larger area to click. Try clicking on the text in question 2 and notice how the radio is selected.
    3. The text in question 3 and 4 is also clickable moving the focus directly to the input.
    Labelling in this manner aides those with hand shakes by providing a larger clickable area.
  2. Font-sizing is scalable.
  3. Structured XHTML mark-up is employed. This is proven to be advantageous to assistive technologies such as braille devices.
  4. Validated XHTML also aides alternate technologies in accessing the quiz.
  5. The use of lang="fr" allows assistive technologies to pick up the primary language changes.
  6. The tick and cross graphics used to mark the quiz replace the text "Correct" and "Sorry wrong answer". The display gets a graphic, while other technologies receive the text.
  7. The page title, and heading, uniquely identify the purpose of the web page.
  8. Presentational styling is provided separately in a style sheet.
  9. No JavaScript used

Extending the quiz

To add alternate quizzes it is only necessary to change the HTML file:

  1. copy "animal_quiz.html", rename it, for example "number_quiz.html"
  2. change the page title from "Animal quiz" to "Number quiz" [line 4]
  3. change the page heading (h1) from "Animal quiz" to "Number quiz" [line 10]
  4. change the input field "title" value from "Animal" to "Number" [line 14]
  5. change the value of the field "number_of_questions" to suit [line 18]
  6. change "show_answers" value to 0,1, or 2 [line 22]
  7. change, or add, questions in the formats given to suit the new heading [lines 33 on]

And that should be it. No changes to the style sheet or the mark_answers.php should be required: French number quiz.

Changing the language used from French would require each occurrence of lang="fr" to be replaced with a new language code in both the title_quiz.html and mark_answers.php. If an all English quiz then the lang attribute could be dropped completely.

For convenience, all files including the number quiz and graphics are available for download in a single zip file [6KB].

If you find this resource useful I'd appreciate an email saying where it's used. A link to this article would be nice but by no means essential. Good luck.

An ASP version

My good friend Stefan McMullan has replicated the original PHP quiz in ASP. I cannot comment it but it is available for download: ASP quiz zip[6KB]

If anyone reading this has skills in Coldfusion and could spare the time to replicate the quiz in that language it would be appreciated