Educational JavaScripting : Exercises

[Workshop] [Contents] [Experiments] [First Page] [Custom] [Quiz/Score] [Story] [Quiz/Timed] [Quiz/Math] [Stats]


An Automatically Scored Quiz

Summary: Using conditionals and simple forms, we'll build a quiz that allows the student to check/confirm his or her answers.

Prerequisites: Experience with forms, particularly radio buttons.

Provides: Understanding of conditionals.

References: Conditionals in JavaScript, Forms and JavaScript.

Overview:


Introduction

Often, we give our students quizzes to help them ensure that they've learned a particular topic. For some quizzes, it may be more efficient to have the computer do the grading (particularly if the quiz is only used for self-testing). In this exercise, we will build a self-grading quiz.


Build a simple quiz

Create a simple quiz using HTML forms. Make sure your quiz has at least three questions. I'd recommend creating a multiple choice quiz, as it is easiest to check, but it's up to you. It is probably easiest to make a separate form for each question. (See below for a sample question.)


Build verification functions for each question

For each question, write a function, checkXXX() that looks at the answer(s) the student has given and returns a string or numeric value describing the student's performance. For example,

<script language="javascript" src="misc.js">
</script>
<script>
// Function
//   checkEdu(platform)
// Description
//   Looks at a choice of computer platform for education
//   and makes a biased and inane comment
function checkEdu(platform)
{
  // alert("You selected '" + platform + "'") // DEBUG
  if (platform == "") {
    return "Don't you think students should use some form of computer?"
  }
  else if (platform.indexOf("Windows") == 0) {
    return "Do you really want your students using that unfriendly a machine?"
  }
  else if (platform == "Apple II") {
    return "That's a little old, isn't it?"
  }
  else if (platform == "Unix with X-Windows") {
    return "Aren't students overpowered by Unix?"
  }
  else if (platform == "Macintosh") {
    return "We agree on that"
  }
  else {
    return "Has anyone ever heard of " + platform + "?"
  }
} // checkEdu
</script>
<form name="edu">
The best computer platform for education is <br>
<input type="radio" name="platform" value="Apple II">Apple II <br>
<input type="radio" name="platform" value="Macintosh">Macintosh <br>
<input type="radio" name="platform" value="Unix with X-Windows">Unix with X-Windows<br>
<input type="radio" name="platform" value="Windows'95">Windows'95<br>
<input type="radio" name="platform" value="Windows 3.1">Windows 3.1<br>
<input type="radio" name="platform" value="Windows NT">Windows NT<br>
<input type="button" name="check" value="Check"
  onclick="alert(checkEdu(whichChecked(document.edu.platform)))">
</form>


Add buttons

Add a button to each question that allows the student to check his or her answer for that question.


[Workshop] [Contents] [Experiments] [First Page] [Custom] [Quiz/Score] [Story] [Quiz/Timed] [Quiz/Math] [Stats]

This page created Wed Jun 11 14:30:24 1997 by SamR's Site Suite.