CODEWITHSUNDEEP
javascript
Anthony Toon
Anthony Toon

Reputation: 11

Score in a Javascript Quiz

for a school project I am attempting to create a quiz through javascript. The premise is "Should you Vote" were we ask basic civic questions and then display a message based on the score. For example if you got 3 out of 10 questions a message will display saying "The founding fathers are not pleased" or if you get 7 out of 10 it will say "Go ahead and vote if you want". I believe I have the radial buttons and the score counter down pat, but the I am having trouble with the final phase. i.e. different messages based on score. I believe I might have to add another function but others have told me I don't. Anyways the code is below any help would be appreciated.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.a1 {
}
</style>
<script type="text/javascript">
var score = 0;
function fsubmit() 
{
    var correct1 = document.getElementById("a1")
    if (correct1.checked === true) 
    {
        score ++;
    }
    var correct2 = document.getElementById("b4")
    if (correct2.checked === true) 
    {
        score ++; 
    }           
}
// And here
</script>
</head>
<body>
Question 1:  What is the Surpreme law of the land?
<table width="200" border="1">
  <tbody>
    <tr>
      <td><input type="radio" name="input_1"  id="a1" value="a1" tabindex="1"> U.S Constitution </td>

      <td><input type="radio" name="input_2" id="a2" value="a2" tabindex="2"> Declaration of Independence</td>
    </tr>
  </tbody>
</table>
<table width="200" border="1">
  <tbody>
    <tr> </tr>
    <tr>
      <td><input type="radio" name="input_3" id="a3" value="a3" tabindex="3">Bill of Rights</td>
      <td><input type="radio" name="input_4" id="a4" value="a4" tabindex="4">Mayflower Compact</td>
    </tr>
  </tbody>
</table>

Question 9:  What are the first ten amendments to the U.S Constitution?
<table width="200" border="1">
  <tbody>
    <tr>
      <td><input type="radio" name="input_5"  id="b1" value="b1" tabindex="5"> Oprah's Favorite Things</td>

      <td><input type="radio" name="input_6" id="b2" value="b2" tabindex="6"> The list of Ten</td>
    </tr>
  </tbody>
</table>
<table width="200" border="1">
  <tbody>
    <tr> </tr>
    <tr>
      <td><input type="radio" name="input_7" id="b3" value="b3" tabindex="7">The Ten Commondments</td>
      <td><input type="radio" name="input_8" id="b4" value="b4" tabindex="8">The Bill of Rights</td>
    </tr>
  </tbody>
</table>

<input type="Submit" name="btnsubmit" id="btnsubmit" value="submit"
onclick="fsubmit()"/>
</body>
</html>

Upvotes: 1

Views: 2650

Answers (2)

tklodd
tklodd

Reputation: 1080

Joseph Earl's answer is good and correct, but if you have a lot of scores, you might consider using a switch statement instead, and an array or object would probably work even better than that. 

<script>
    var messages = {
        6: "Bad luck",
        7: "Great job!"
    }
    document.getElementById("message").innerHTML = messages[score];
</script>

Upvotes: 0

Joseph Earl
Joseph Earl

Reputation: 23432

You could add an empty paragraph below your submit button in your HTML:

<p id="message"></p>

And then in your script set the content of the paragraph - this will need to be inside the fsubmit function so it is executed when the user clicks the button:

var message = "Bad luck";
if (score >= 7) {
  message = "Great job!";
}
document.getElementById("message").innerHTML = message;

Upvotes: 2

Related Questions