Anzahl korrekte Antworten mit Button onclick

Question

Ich versuche, die richtigen Antworten in einem Quiz zu zählen, so dass, wenn der Spieler auf die richtige Antwort klickt, wird der Zähler eins hinzufügen, und am Ende des Quiz, wird der HTML sagen: Sie haben "+ korrekte +" Antworten richtig ".

Gewünschtes Ergebnis: Zeigt die Anzahl der Antworten an, die der Spieler richtig beantwortet hat.

Wie Sie sehen können habe ich schon einige Dinge ausprobiert, aber die funktionieren nicht.

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: "<i class='fa fa-gitlab fa-lg' aria-hidden='true'></i>" + "<input class='answers' type='radio' name='answer' value='incorrect'>", 
 
    ia2: "<i class='fa fa-grav fa-lg' aria-hidden='true'></i>" + "<input class='answers' type='radio' name='answer' value='incorrect'>", 
 
    ia3: "<i class='fa fa-github-alt fa-lg' aria-hidden='true'></i>" + "<input class='answers' type='radio' name='answer' value='correct'>" 
 
    correct: 3 
 
    }, 
 

 
    { 
 
    iq: "What is this? " + "<i class='fa fa-gitlab' aria-hidden='true'></i>", 
 
    ia1: "GitHub" + "<input class='answers' type='radio' name='answer' value='incorrect'>", 
 
    ia2: "Atom.io" + "<input class='answers' type='radio' name='answer' value='incorrect'>", 
 
    ia3: "GitLab" + "<input class='answers' type='radio' name='answer' value='correct'>" 
 
    }, 
 
    { 
 
    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; 
 
}

<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"> 
 
    <link href="quiz.css" rel="stylesheet"> 
 
    <script src="quiz.js"></script> 
 
</head> 
 

 
<body> 
 
    <main> 
 

 
    <div class="collapse"> 
 
     <h2>Icon Quiz</h2> 
 
     <input id="toggle" type="checkbox" checked> 
 
     <label for="toggle">take quiz</label> 
 
     <div id="expand"> 
 
     <section> 
 
      <h3 id="questionHere">Please Begin</h3> 
 
      <section> 
 
      <li id="answer1" onclick="buttonClicked(1)">This is a quiz over different icons used in the coding community!</li> 
 
      <li id="answer2" onclick="buttonClicked(2)"></li> 
 
      <li id="answer3" onclick="buttonClicked(3)"></li> 
 
      </section> 
 
     </section> 
 
     <div class="buttons"> 
 
      <button onclick="prevButton()" type="button">prev</button><button onclick="nextButton()" type="button">next</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </main> 
 
</body> 
 

 
</html>

Answer 1

mit es in der Lage sein zu arbeiten Dies ist nur ein Satz sicher Sie können eine bessere Lösung finden:

Ich habe diese Datenstruktur verwendet:

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} 
]; 

Liste der Fragen mit entsprechenden Antworten und richtigem Antwort-Index (wenn Sie die richtige Antwort in Ihrem HTML anzeigen, indem ihm correct Klasse geben kann der Benutzer betrügen).

Ich verwendete die was_correct Eigenschaft, um die Punktzahl durch richtige Antwort zu erhöhen (oder dekrementierte die Punktzahl durch falsche Antwort) nur einmal pro Frage.

2- stellen Sie sicher, dass Inkrement/dekrementiert Ihren Index im richtigen Intervall

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


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

3- Sie die Partitur einmal nach dem Klicken auf eine Schaltfläche zum Senden berechnen kann oder der Benutzer jedes Mal eine Änderung vornehmen.

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

Answer 2

Zunächst einmal stellen Sie sicher, Benutzer klicken vorherigen zuerst zu verhindern, weil Sie Index niedriger als 0 sein wird, und es wird Sie werfen einen Fehler zu versuchen, das Array mit minus Index für den Zugriff auf . Einfache if-Anweisung in prevButton() Funktion den Trick tun sollten

if (index != 0) { 
    index--; 
    code... 
} 

und das gleiche tun in nextButton() Funktion Index sollte nicht größer sein als iconquiz.length

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

Über Zähler Problem, fügen zu Ihrem Array neues Feld, das die Antwort ist richtig, zum Beispiel

{ 
    iq: "which icon is used for GitHub?", 
    ia1: "<i class='fa fa-gitlab fa-lg' aria-hidden='true'></i>" + "<button type='submit' value='submit'><i class='fa fa-heart-o' aria-hidden='true'></i></button>", 
    ia2: "<i class='fa fa-grav fa-lg' aria-hidden='true'></i>" + "<button type='submit' value='submit'><i class='fa fa-heart-o' aria-hidden='true'></i></button>", 
    ia3: "<i class='fa fa-github-alt fa-lg' aria-hidden='true'>" + "</i><button type='submit' value='submit' id='correct'><i class='fa fa-heart-o' aria-hidden='true'></i></button>", 
    correct: 3 
    } 

dann fügen Sie eine weitere Funktion, wo Sie überprüfen die geklickt Tasten mit aktuellem Array-Elemente anzeigt und seine korrekte ID-Antwort.

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

und jeder Knopf sollte mit Onclick Funktion

<li onclick="buttonClicked(1)" id="answer1"></li> 
<li onclick="buttonClicked(2)" id="answer2"></li> 
<li onclick="buttonClicked(3)" id="answer3"></li> 

Fang zugeordnet werden denke ich, sollten Sie für Ihre eigene

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"> 
    <link href="quiz.css" rel="stylesheet"> 
    <script> 
     var index = 0; 
     var counter = 0; 
     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: "<i class='fa fa-gitlab fa-lg' aria-hidden='true'></i>" + "<input class='answers' type='radio' name='answer' value='incorrect'>", 
       ia2: "<i class='fa fa-grav fa-lg' aria-hidden='true'></i>" + "<input class='answers' type='radio' name='answer' value='incorrect'>", 
       ia3: "<i class='fa fa-github-alt fa-lg' aria-hidden='true'></i>" + "<input class='answers' type='radio' name='answer' value='correct'>", 
       correct: 3 
      }, 
      { 
       iq: "What is this? " + "<i class='fa fa-gitlab' aria-hidden='true'></i>", 
       ia1: "GitHub" + "<input class='answers' type='radio' name='answer' value='incorrect'>", 
       ia2: "Atom.io" + "<input class='answers' type='radio' name='answer' value='incorrect'>", 
       ia3: "GitLab" + "<input class='answers' type='radio' name='answer' value='correct'>", 
       correct: 3 
      }, 
      { 
       iq: "question number three", 
       ia1: "1 ", 
       ia2: "2 ", 
       ia3: "3 " 
      }, 
     ]; 
     function buttonClicked(number) { 
      if (iconquiz[index].correct === number) { 
       counter++ 
      } 
     } 
     function nextButton() { 
      if (index < iconquiz.length-1) { 
       index++; 
       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 (iconquiz.length-1 === index) { 
       document.getElementById("questionHere").innerHTML = 'you got ' + counter + ' answers correct!' 
      } 
     } 

     function prevButton() { 
      if (index != 0) { 
       index--; 
       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; 
      } 
     } 


    </script> 
</head> 
<body> 
    <h2>Icon Quiz</h2> 
    <input id="toggle" type="checkbox" checked> 
    <label for="toggle">take quiz</label> 
    <div id="expand"> 
     <section> 
      <h3 id="questionHere">Please Begin</h3> 
      <section> 
       <li onclick="buttonClicked(1)" id="answer1"></li> 
       <li onclick="buttonClicked(2)" id="answer2"></li> 
       <li onclick="buttonClicked(3)" id="answer3"></li> 
      </section> 
     </section> 
     <div class="buttons"> 
      <button onclick="prevButton()" type="button">prev</button><button onclick="nextButton()" type="button">next</button> 
     </div> 
    </div> 
</body> 
</html>