Count Correct Answers with Button onclick

Question

I am trying to count the correct answers in a quiz so that when the player clicks on the correct answer, the counter will add one, and at the end of the quiz, the html will say "you got" + correct + " answers correct".

Desired outcome: Displays the amount of answers the player answered correctly.

As you can see I have already tried some things, but the are not working.

var index = 0;

function nextButton() {
  document.getElementById("questionHere").innerHTML = iconquiz[index].iq;
  document.getElementById("answer1").innerHTML = iconquiz[index].ia1;
  document.getElementById("answer2").innerHTML = iconquiz[index].ia2;
  document.getElementById("answer3").innerHTML = iconquiz[index].ia3;
  if (index < iconquiz.length) {
    index++
  }
}

function prevButton() {
  document.getElementById("questionHere").innerHTML = iconquiz[index].iq;
  document.getElementById("answer1").innerHTML = iconquiz[index].ia1;
  document.getElementById("answer2").innerHTML = iconquiz[index].ia2;
  document.getElementById("answer3").innerHTML = iconquiz[index].ia3;
  if (index != 0) {
    index--
  }
}

var counter = 0;

function buttonClicked(number) {
  if (iconquiz[index].correct === number) {
    counter++
  }
}

var iconquiz = [{
    iq: "Please Begin",
    ia1: "This is a quiz over different icons used in the coding community!",
    ia2: "",
    ia3: ""
  },

  {
    iq: "which icon is used for GitHub?",
    ia1: "" + "",
    ia2: "" + "",
    ia3: "" + ""
    correct: 3
  },

  {
    iq: "What is this? " + "",
    ia1: "GitHub" + "",
    ia2: "Atom.io" + "",
    ia3: "GitLab" + ""
  },
  {
    iq: "question number three",
    ia1: "1 ",
    ia2: "2 ",
    ia3: "3 "
  },

  {
    iq: "no more!",
    ia1: "you got " + correct + " answers correct!",
    ia2: "",
    ia3: ""

  },



];

/*************
MAIN STUFFF
*************/

body {
  background: #CCC;
  font-family: 'Varela Round', sans-serif;
}

.collapse {
  color: #fff;
  background: #494949;
  border-radius: 10px;
  width: 300px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

#correct:active {
  color: #4ada95;
}

#correct:focus {
  color: #4ada95;
}


/*************
QUIZ BOXES
*************/

h2 {
  text-align: center;
}

input {
  display: none;
  visibility: hidden;
}

.answers {
  display: inline;
  visibility: visible;
}

label {
  width: 90px;
  margin: 0 auto;
  margin-bottom: 10px;
  display: block;
  text-align: center;
  color: #fff;
  background-color: #4ada95;
  border-radius: 5px;
}

label:hover {
  color: #494949;
  cursor: pointer;
}

label::before {}


/************
QUIZ CONTENT
************/

h3 {
  background-color: #707070;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0;
  padding: 10px;
}

li {
  list-style-type: none;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
}

button {
  color: #fff;
  background-color: #707070;
  border-radius: 5px;
  border-style: solid;
  border-color: #707070;
  margin: 5px;
}

.buttons {
  position: absolute;
  bottom: 0;
  text-align: center;
  margin-left: 73px;
}


/***********
QUIZES
***********/

#expand {
  height: 225px;
  overflow: hidden;
  transition: height 0.5s;
  background-color: #4ada95;
  color: #FFF;
  width: 250px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;
  position: relative;
}


/**********
FIRST QUIZ
**********/

#toggle:checked~#expand {
  height: 0px;
}

#toggle:checked~label::before {
  display: hidden;
}




  
  
  
  
  



  

    
      Icon Quiz
      
      take quiz
      
        
          Please Begin
          
            This is a quiz over different icons used in the coding community!

Amani Ben Azzouz · Accepted Answer

This is only a proposition sure you can find a better solution:

I used this data structure:

var iconquiz =[
{"question" : "Question 1" ,"answers" : ["Answer 1.1","Answer 1.2","Answer 1.3"] ,"correct" :2 ,"was_correct":0},
{"question" : "Question 2" ,"answers" : ["Answer 2.1","Answer 2.2","Answer 2.3"] ,"correct" :3,"was_correct":0},
{"question" : "Question 3" ,"answers" : ["Answer 3.1","Answer 3.2","Answer 3.3"] ,"correct" :3,"was_correct":0}
];

List of questions with related answers and correct answer index (if you indicate the correct answer in your html by giving it correct class the user can cheat).

I used the was_correct property to increment the score by correct answer (or decremented the score by wrong answer) just once pro question.

2- make sure that increment/decrements your index in the correct interval

function nextButton() {
   if(index < iconquiz.length-1 ){
      index++;
   }
}


function prevButton() {
   if(index > 0){
      index--;
   }
}

3- you can calculate the score one time after clicking a submit button or on each time the user make a change.

var radios = document.getElementsByClassName("answers");
for(radio in radios) {
   radios[radio].onchange = function() {
      if(iconquiz[this.dataset.question].was_correct==0){
        if(iconquiz[this.dataset.question].correct == this.value)   {
          correct ++;iconquiz[this.dataset.question].was_correct=1;
        }
      }
   else if(iconquiz[this.dataset.question].correct != this.value){
      correct --;iconquiz[this.dataset.question].was_correct=0;
   } 
 }

jsfiddle

Count Correct Answers with Button onclick

Answers (2)

Related Questions