|
A Short Answer Quiz with Time Pressure!
Here's another easy to adapt script for you to cut and paste. It's a set of short answer questions that each appear on the screen for just a few seconds (I seem to be making a bit of a habit out of quizzes with time limits recently!). The student has to type the answer into a text box and hit a button to submit it to the program before the next question appears. At the end of the quiz the program displays the student's score. The student can try again as many times as he/she likes, or use the "Answers" button to display the solution. The stuff between the dark blue lines is what you'll get in your browser window after you've cut and pasted it.
Script by
Matt Stanton 2002
http://members.tripod.com/matt_stanton/
The script is very flexible. You can easily adjust the number of seconds that each question displays for, and also the number of seconds for the interval between questions (students can still submit their answer during this period). You can have as many questions as you like and the script will take care of the necessary adjustments to the guidance above the "Start" button and the sentence for returning the score, automatically. The answers are case sensitive, so students need to use correct capitalisation.
There is just one little snag with the script: it doesn't work with Netscape. I don't really want to get too technical, but it's because it takes advantage of the wonderful IE DOM (Document Object Model), which allows you to easily control though JavaScript almost any aspect of your HTML document. Often referred to as Dynamic HTML, this allows you, among other things, to change the contents of DIV tags after the page has loaded, which is what I'm doing with this script. To be fair, Netscape 6 also allows you to do this, but it requires far heavier scripting. I could do a work around using a browser sniff but to be honest I can't really face it! Cross-browser scripting for DHTML is widely-known as the cause of a sharp increase in suicide rates among web programmers, and anyway, unless you're designing a commerical website there isn't a lot of point in getting involved because hardly anyone uses Netscape these days anyway.
OK, let's give you the script. This is the bit that you should copy into the HEAD of your document. It declares the variables and contains the processing functions that the script uses. You don't have to put it in the head, but it's nice to stick it up there out of the way. Sorry if it's a bit small and hard to read. The reason for this is purely cosmetic. I've displayed it using the PRE tag, which doesn't allow text to wrap, meaning my tables would be messed up if I used a larger font. You can find the adaptation instructions inside the script itself inside asterisks. They are pretty clear so I won't bother with a separate explanation here. As always when playing around with JavaScripts, be careful not to press Enter when you're adapting it. Doing so signals the end of a line of code at that point, and if the code before it is not syntactically complete, the script won't work.
<script language="javascript">
<!--
// Script by Matt Stanton 2002
// http://members.tripod.com/matt_stanton/
// cyberefl@email.com
// *** Set the number of seconds each question ***
// *** will appear for here: ***
var delay1 = 7
// *** Set the number of seconds for white ***
// *** space between each question here: ***
var delay2 = 1
// *** You can set the questions and answers here: ***
// *** You can add as many questions as you like. ***
// *** You need to use SQUARE brackets! ***
var question = new Array();
question[0] = "Christmas falls in this month.";
question[1] = "This is the shortest month of the year.";
question[2] = "The first month of the year.";
question[3] = "This month has the longest day of the year.";
var answer = new Array();
answer[0] = "December";
answer[1] = "February";
answer[2] = "January";
answer[3] = "June";
// ***
var i=-1;
var score=0;
//Show white space for a time between questions
function dispSpace(){
myDiv.innerText="";
setTimeout("incI()",delay2*1000);
}
//Show the questions at intervals
function dispQuests(){
if(i<question.length){
myDiv.innerText=question[i];
setTimeout("dispSpace()",delay1*1000);
}else{
myDiv.innerText="You scored "+score+" out of "+question.length+".";
i=-1;
score=0
}
}
//Check the student's answer against the correct answer
function checkAnswer(){
if(document.myForm.myField.value == answer[i]){
score++;
}
document.myForm.myField.value="";
document.myForm.myField.focus();
}
//Function to increment i AFTER the white space
function incI(){
i++;
dispQuests();
}
//Write the questions and answers in the empty text fields
function showAnswers(){
for(var k=0;k<question.length;k++){
document.myForm2.elements[k].value=" "+question[k]+" Answer: "+answer[k];
}
}
//Clear the answer key
function clearAnswers(){
for(var k=0;k<question.length;k++){
document.myForm2.elements[k].value="";
}
}
//-->
</script>
Now I'll give you the script and HTML that goes inside the BODY tags. It sets up the interface and includes instructions for dealing with user events. There isn't much to adapt here except the size of the text boxes for the students' answers and the answer key. The font size you are using for the page affects text box size so check everything looks good when you've made your quiz.
<script language="javascript">
<!--
document.write("This quiz contains "+question.length+" questions.<br>");
document.write("Each question will display for "+delay1+" seconds.<br><br>");
//-->
</script>
<form name="myForm" onkeydown="
if(event.keyCode==13){
event.returnValue=false;
}">
<input type="button" value="Start" onClick="
document.myForm.myField.focus();dispSpace();"><br><br>
<div id="myDiv">Click "Start" when you're ready.</div><br>
<!-- *** You can change the size of the input field here: *** -->
<input type="text" name="myField" size="10" value="">
<!-- *** -->
<input type="button" value="Check it" onClick="checkAnswer()">
<br><br><br>
<input type="button" value="Answers" onClick="showAnswers()">
</form>
<form name="myForm2">
<script language="javascript">
<!--
for(var j=0;j<question.length;j++){
// *** You can adjust the size of the text fields for ***
// *** the answer key here: ***
document.write('<input type="text" size="56"><br>');
// ***
}
//-->
</script>
<br>
<input type="button" value="Clear Answers" onClick="clearAnswers()">
</form>
<small><small>
Script by <a href="mailto:cyberefl@email.com">
Matt Stanton</a> 2002<br>
<a href="http://members.tripod.com/matt_stanton/">
http://members.tripod.com/matt_stanton/</a>
</small>
</small>
Have fun!
|
Last Edited: 21 April 2002
© 2002 Matt Stanton
|
|
