Explanation of how to use JavaScript to provide a multiple-choice test that includes calculating the grade. Also refer to computer-based training, CBT, web-based training, WBT, intranet-based training, Ron Kurtus, School for Champions. Copyright © Restrictions
Graded Test Using JavaScript
by Ron Kurtus (revised 9 January 1998)
Do you want to give your students or trainees an online test that automatically calculates the grade? Using JavaScript provides an easy way to do that.
Questions you may have on this subject are:
- What does this type of test look like?
- What is the JavaScript code for this test?
- What are some problem areas?
(You can jump to to specific answer or simply read the text in order.)
This lesson will answer those questions. There is a mini-quiz near the end of the lesson.
Sample test
JavaScript code
The following code was used in programming the test. (You can also examine the HTML source material).
Script language
This material can be placed either under <head> or directly under <body> within your HTML. The bracketed numbers after elements relate to the correct answer. The 9 answers for the three questions in this test are listed as 0, 1, 2...7, 8.
- <script language="JavaScript">
- function tester() {
- var a = 0
- var b = 0
- var c = 0
- if(document.forms[0].elements[1].checked==true) {
- a = 1
- }
- if(document.forms[0].elements[3].checked==true) {
- b = 1
- }
- if(document.forms[0].elements[8].checked==true) {
- c = 1
- }
- total = a + b + c
- grade = 33*total
- if (total==3){
- alert("Your grade is 100% correct. Great Job!")
- }
- if (total < 3){
- alert("Your grade is "+ grade +"% correct.")
- }
- }
- </script>
Form material
The JavaScript code for the actual test is always within <body> of the HTML.
- <dl>
- <form method="get" onsubmit="tester()">
- <h4>1. What does "WBT" stand for?</h4>
- <p><input type="radio" checked name="R1" value="V1">a. World Boxing Association.</p>
- <p><input type="radio" name="R1" value="V2">b. Web-Based Training. </p>
- <p><input type="radio" name="R1" value="V3">c. Why Bother Testing?</p>
- <p> </p>
- <hr>
- <h4>2. What is JavaScript?</h4>
- <p><input type="radio" name="R2" value="V4">a. A programming language used with HTML.</p>
- <p><input type="radio" name="R2" value="V5">b. The same as Java code.</p>
- <p><input type="radio" name="R2" value="V6">c. The script used in the country Java.</p>
- <p> </p>
- <hr>
- <h4>3. Why use multiple choice tests in WBT?</h4>
- <p><input type="radio" name="R3" value="V7">a. To be different than regular tests.</p>
- <p><input type="radio" name="R3" value="V8">b. To cause confusion among the students. </p>
- <p><input type="radio" name="R3" value="V9">c. It is easier to program and control. </p>
- <p> </p>
- <hr>
- <div align="center"><center><p><input type="submit" value="Get Score"></p>
- </center></div>
- </form>
- </dl>
Problem areas
There are a few problems with using JavaScript.
Not included in the code is a form for the student to input his or her name, as well as a way to send the test result and name via e-mail to the instructor. That code will be included at a later date.
Also, this type of test is not perfect.
- A student familiar with HTML and JavaScript may be able check the source code and figure out the correct answers to this test.
- The student may not have a browser with JavaScript enabled.
- The browser may not be able to recognize JavaScript. I had this problem with a school that had very early versions of Netscape installed.
- If a test-taker uses the down arrow computer key to move to the next question, the answer of the previous question is changed.
Summary
Using JavaScript in this way is a simple method to give an online test to students and to have the grade automatically calculated. But there are some problems and refinements to be made.
Keep things simple -- but not too simple
Resources
The following are resources on this subject.
Websites
Books
Mini-quiz to check your understanding
If you got all three correct, you are on your way to becoming a champion in eLearning development. If you had problems, you had better look over the material again.
What do you think?
Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.
Share link
Feel free to establish a link from your website to pages in this site.
Or use our form to send this link to yourself or a friend.
Students and researchers
The Web address of this page is
www.school-for-champions.com/elearning/jstest.htm. Please include it as a reference in your report, document, or thesis.
Where can you go from here?
Graded Test Using JavaScrip