Quiz scoring with javascript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • danjoplin
    New Member
    • Mar 2008
    • 3
    #1

    Quiz scoring with javascript

    I've only recently started javascript and I'm a java programmer so I'm sure I've done something obvious that I can't see. Basically this goes with an html document which has a number of questions on it, when the form is submitted it gets run through the getScore method. The questions are named q1, q2 etc.. If anyone with experience could help me it would be much appreciated.
    Thanks, Dan


    Code:
    var a = new Array(form.q1.value, form.q2.value, form.q3.value, form.q4.value, form.q5.value);
var rightAnswers = new Array(3,4,"ul",1,2);
var score = 0;

function getScore(form) {
    if(a[0] == null || a[1] == null || a[2] == "" || a[2] == null || a[3] == null || a[4] == null){
        alert("You haven't answered all of the questions yet.");
    } else {
        for(var i = 0; i<5 ; i++){
            if(a[i] == rightAnswers[i]) score++;
        }
        var percent = score*20;
        alert("You scored "+score". That's "+percent+"%.");
    }
}
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Big Quiz - 885278</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="Ex5_885278.js"></script>
</head>
<body>

<h1>The Big Quiz</h1>

<form action="" method="post">

    <h2>Question 1</h2>
    <p>Which of these code snippets is valid?</p>
    
    <ul>
        <li><input type="radio" name="q1" value="1" />&lt;a href=index.html&gt;to there</li>
        <li><input type="radio" name="q1" value="2" />&lt;a href="index.html"&gt;to there</li>
        <li><input type="radio" name="q1" value="3" />&lt;a href="index.html"&gt;to there&lt;/a&gt;</li>
        <li><input type="radio" name="q1" value="4" />&lt;a href="index.html"&gt;to there&lt;a&gt;</li>
    </ul>
    
    <h2>Question 2</h2>
    <p>Which of these colours is the most blue?</p>
    
    <p>
    <select name="q2">
        <option value="1">#330000</option>
        <option value="2">#006633</option>
        <option value="3">#FFCCCC</option>
        <option value="4">#0000FF</option>
    </select>
    </p>
    
    <h2>Question 3</h2>
    <p>What is the element name for an unordered list?</p>
    
    <p>
    <input type="text" name="q3"></input>
    </p>
    
    <h2>Question 4</h2>
    <p>Which javascript event is used for clicking events?</p>
    
    <p>
    <select name="q4">
        <option value="1">onclick</option>
        <option value="2">onhover</option>
        <option value="3">onpunch</option>
        <option value="4">onactivate</option>
    </select>
    </p>
    
    <h2>Question 5</h2>
    <p>What is the name of the organisation that develops web standards?</p>
    
    <ul>
        <li><input type="radio" name="q5" value="1" />DOM</li>
        <li><input type="radio" name="q5" value="2" />W3C</li>
        <li><input type="radio" name="q5" value="3" />Microsoft</li>
        <li><input type="radio" name="q5" value="4" />Google</li>
    </ul>
    
    <p>
    <input type="submit" value="Submit" onclick="getScore(this.form)" />
    </p>

</form>

</body>
</html>
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      hi ...

      first: you have to retrieve the values of the nodes explicitly onsubmit ... you init the array with empty-string-values ... note: string, number, boolean, function are passed by value and not by reference like objects or arrays do in JavaScript ...

      second: an empty value is an empty string and no null-value so:

      [CODE=javascript]
      '' == null [/CODE]
      will return false.

      kind regards

        Comment

        • Chibani
          New Member
          • Mar 2008
          • 8
          #3
          Hi,
          you should define your "a" array in the getScore() function.
          Idem for the score.

            Comment

            • danjoplin
              New Member
              • Mar 2008
              • 3
              #4
              Here's the latest version, I now get an alert telling me that I've scored 0 whenever I press submit.

              Any ideas?

              Code:
              function getScore() {
	var ansQ1 = document.getElementsByName("q1");
	var ansQ2 = document.getElementsByName("q2");
	var ansQ3 = document.getElementsByName("q3");
	var ansQ4 = document.getElementsByName("q4");
	var ansQ5 = document.getElementsByName("q5");
	
	var a = new Array();
	a[0] = ansQ1;
	a[1] = ansQ2;
	a[2] = ansQ3;
	a[3] = ansQ4;
	a[4] = ansQ5;
	
	var r = new Array();
	r[0] = "3";
	r[1] = "4";
	r[2] = "ul";
	r[3] = "1";
	r[4] = "2";
	
	var score = 0;
	
    if (a[0].value === "" || a[1].value === 0 || a[2].value === "" || a[3].value === 0 || a[4].value === "") {
        alert("You haven't answered all of the questions yet.");
    } else {
        for (var i = 0; i < 5; i++) {
            if (a[i].value === r[i]) {
            	score++;
            }
        }
        var percent = score * 20;
        alert("You scored " + score + " out of 5. That's " + percent + "%.");
    }
}

                Comment

                • gits
                  Recognized Expert Moderator Expert
                  • May 2007
                  • 5390
                  #5
                  hi ...

                  getElementsByNa me() returns a node-list so use:

                  [CODE=javascript]var ansQ1 = document.getEle mentsByName("q1 ")[0];[/CODE]
                  for example.

                  kind regards

                    Comment

                    • danjoplin
                      New Member
                      • Mar 2008
                      • 3
                      #6
                      Thanks for the speedy reply, I have just one last question. Everything works except the radio buttons, it doesn't seem to be reading the values or comparing them correctly. Ideas?

                      Thanks

                        Comment

                        • gits
                          Recognized Expert Moderator Expert
                          • May 2007
                          • 5390
                          #7
                          :) ... you get a node-list ... so you should loop through the 'radios-list' and check the checked property of the nodes and when it is true, then that is just the clicked radio ...

                          kind regards

                            Comment

                            • Chibani
                              New Member
                              • Mar 2008
                              • 8
                              #8
                              For your radio buttons, you should create a little function like this :
                              Loop on each radio button with a for() function
                              If is checked return it's value

                              No need of else operator, you loop till you've not found a checked button...
                              that's all ^^

                                Comment

                                • gits
                                  Recognized Expert Moderator Expert
                                  • May 2007
                                  • 5390
                                  #9
                                  Originally posted by Chibani
                                  For your radio buttons, you should create a little function like this :
                                  Loop on each radio button with a for() function
                                  If is checked return it's value

                                  No need of else operator, you loop till you've not found a checked button...
                                  that's all ^^
                                  in most cases there is no need to just repeat an already given answer ... please read the entire thread before posting ... since such post are just redundant ...

                                  kind regards

                                    Comment

                                    Previous template Next
                                    Working...