Code Question for self-checking quiz

**J in Calgary** · Nov 5, 2012 11:17

Hi,

I am adding spelling quizzes to my educational site, and I've played with multiple ways to do this. I use Google Docs for most of my quizzes, but I want the spelling tests to be self-checking (I won't see the results, but the user will immediately). I also need to be able to use audio, because I'm using an audio snippet to pronounce each word.

I found some code that works, and I paste it underneath the audio snippet. However, in the example code, it corrects two questions. I adjusted the code to work EXCEPT for the part where it checks the answer--I've messed that up somehow, since it always reports the answer as 0% correct. Could anyone help me find the bug and fix this?

I apologize since this is probably a pretty basic question for most of you, but after a bunch of searching online, I clearly am not using the right terms to find what I need, and I've spent some time comparing the old code to my adjusted code, and I can't figure it out that way, either. Thanks in advance!

I'm removing the first and last <> elements, btw

script type="text/javascript"
function valid() {
cor = "0"
incor = "0"
test0 = document.myform.elements[0].value;
test1 = document.myform.elements[1].value;
if (test0.toLowerCase() == "barriers") {
++cor; }
else ++incor

alert("You are " + cor * 100 + "% correct!");
}
</script>
<body>
<form name="myform"><font face="Arial">
2. What is the correct spelling of this word?
<input type="text" name="q1">
<p>

input type="button" onClick="valid()" value="check answer"

**Pullo** · Nov 5, 2012 14:33

Hi there,

You forgot a couple of tags.
This should work.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
  </head>
  
  <body>
    <form name="myform">
      <p>What is the correct spelling of this word?</p>
      <input type="text" name="q1">
      <input type="button" onClick="valid()" value="check answer" />
    </form>
    
    <script type="text/javascript">
      function valid() {
        cor = "0"
        incor = "0"
        test0 = document.myform.elements[0].value;
        test1 = document.myform.elements[1].value;
        if (test0.toLowerCase() == "barriers"){
          ++cor;
        }else{
         ++incor;
        }
        alert("You are " + cor * 100 + "% correct!");
      }
    </script>
  </body>
</html>

**Pullo** · Nov 5, 2012 15:22

BTW, it might be better to use onsubmit for the form instead of onclick for the button.
The reason I say this is that I can submit the form by writing something in the text field, then pressing return.
This will not call your function.

Also, inline JavaScript is not the way to go.
It would be better to move the onsubmit="" into the JavaScript code block:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
  </head>
  
  <body>
    <form name="myForm" id="myForm">
      <input type="text" name="q1">
      <input type="submit" value="check answer" />
    </form>
    
    <script type="text/javascript">
      var form = document.getElementById("myForm");
      form.onsubmit = function() {
        var cor = 0;
        var incor = 0;
        test = document.myForm.elements[0].value.toLowerCase();
        if (test == "barriers"){
          ++cor;
        }else{
          ++incor;
        }
        alert("You are " + cor * 100 + "% correct!");
        return false;
      }
    </script>
  </body>
</html>

**J in Calgary** · Nov 5, 2012 15:39

Thanks very much for taking time to look at this, Pullo. By the way, I love your tagline!

I tried the first thing, but when I click on check answer, nothing happens. Here is a link to the page so you can see what I'm trying to do: http://www.conversationpieceslearnin...ling-test.html

I just saw your second post, so I'll see what I can do with that. Thanks again!

**Pullo** · Nov 5, 2012 15:53

Originally Posted by J in Calgary

Thanks very much for taking time to look at this, Pullo. By the way, I love your tagline!

You're welcome.
And we all love the Laundry Room Viking, no?

I've just had a look at the link you posted.
I'm afraid the markup is rather shot. For example, the page contains eleven opening body tags!
If I was you, I would try and make a bare bones example of your page (e.g. with one question), then implement this functionality bit by bit.

I hope you manage to solve your problem, but if not, just post back here.
I won't be around for a bit though (off to bed now).

User Tag List

Thread: Code Question for self-checking quiz

Thread Tools

Display

Code Question for self-checking quiz

Bookmarks

Bookmarks

Posting Permissions