CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
overflowstack9
overflowstack9

Reputation: 345

How to get quiz test score as text without popup

I want to implement online quiz in my blog. Below is my code after selecting all the options when user click view results it displays result score as popup.

But i want to display as result as text in the form itself as shown in the below image.

score

var answers = ["A","C","B"], 
    tot = answers.length;

function getCheckedValue( radioName ){
    var radios = document.getElementsByName( radioName ); // Get radio group by-name
    for(var y=0; y<radios.length; y++)
      if(radios[y].checked) return radios[y].value; // return the checked value
}

function getScore(){
  var score = 0;
  for (var i=0; i<tot; i++)
    if(getCheckedValue("question"+i)===answers[i]) score += 1; // increment only
  return score;
}

function returnScore(){
  alert("Your score is "+ getScore() +"/"+ tot);
}
<ul>
  <li>
    <h3>How many letters are there in "ZZ"?</h3>
    <input type="radio" name="question0" value="A">2<br>
    <input type="radio" name="question0" value="B">1<br>
    <input type="radio" name="question0" value="C">3<br>
    <input type="radio" name="question0" value="D">4<br>
  </li>
  <li>
    <h3>How many letters are there in "ZZX"?</h3>
    <input type="radio" name="question1" value="A">2<br>
    <input type="radio" name="question1" value="B">1<br>
    <input type="radio" name="question1" value="C">3<br>
    <input type="radio" name="question1" value="D">4<br>
  </li>
  <li>
    <h3>How many letters are there in "V"?</h3>
    <input type="radio" name="question2" value="A">2<br>
    <input type="radio" name="question2" value="B">1<br>
    <input type="radio" name="question2" value="C">3<br>
    <input type="radio" name="question2" value="D">4<br>
  </li>
</ul>

<button onclick="returnScore()">View Results</button>

Upvotes: 0

Views: 51

Answers (1)

willywonka
willywonka

Reputation: 117

You need to make a place in the DOM for the score to go.

<div id="show-score"></div>

Then use the returnScore function to place the result there instead of alerting. 

function returnScore(){
    document.getElementById('show-score').innerHTML = 
       "Your score is "+ getScore() +"/"+ tot;
}

See fiddle: https://jsfiddle.net/7Ly00p2z/

Upvotes: 1

Related Questions