JSFiddle - React, Tailwind, and code Playground
HTML
<h1 id="score"></h1>
<br/>
<div>Question nr. <span id="vraagNummer"></span>
<div id="vraag"></div>
</div>
<div id="antA_click">
<div id="antA"></div>
</div>
<div id="antB_click">
<div id="antB"></div>
</div>
<div id="antC_click">
<div id="antC"></div>
</div>
<div id="antD_click">
<div id="antD"></div>
</div>
<br/>Correct answer is <span id="correct">
JavaScript
var vragenArray = ["zero", "Bla bla bla?", "Boem Boem Boem?", "Boing Boing Boing?", "Floep Floep Floep?"];
var antA_Array = ["zero", "antwoord1_a", "antwoord2_a", "antwoord3_a", "antwoord4_a"];
var antB_Array = ["zero", "antwoord1_b", "antwoord2_b", "antwoord3_b", "antwoord4_b"];
var antC_Array = ["zero", "antwoord1_c", "antwoord2_c", "antwoord3_c", "antwoord4_c"];
var antD_Array = ["zero", "antwoord1_d", "antwoord2_d", "antwoord3_d", "antwoord4_d"];
var juistArray = ["zero", "B", "C", "B", "A"];
var aantalVragen = 21;
var counterVragen = 0;
var score = 0;
function laadVraag() {
console.log("laadVraag geladen");
counterVragen++;
$("#vraagNummer").text(counterVragen);
$("#vraag").text(vragenArray[counterVragen]);
$("#antA").text(antA_Array[counterVragen]);
$("#antB").text(antB_Array[counterVragen]);
$("#antC").text(antC_Array[counterVragen]);
$("#antD").text(antD_Array[counterVragen]);
$("#score").text(score);
$("#correct").text(juistArray[counterVragen]);
$("#antA_click").off('click').on('click', laadVraag);
$("#antB_click").off('click').on('click', laadVraag);
$("#antC_click").off('click').on('click', laadVraag);
$("#antD_click").off('click').on('click', laadVraag);
juisteAntwoord(juistArray[counterVragen]);
};
function juisteAntwoord(antwoord) {
console.log("juisteVraag geladen");
$("#antB_click").unbind('click');
$("#antB_click").on('click', function () {
score++;
laadVraag();
});
};
$(document).ready(function () {
laadVraag();
});