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").click(function(){ laadVraag(); });
$("#antB_click").click(function(){ laadVraag(); });
$("#antC_click").click(function(){ laadVraag(); });
$("#antD_click").click(function(){ laadVraag(); });
juisteAntwoord(juistArray[counterVragen]);
};
function juisteAntwoord(antwoord){
console.log("juisteVraag geladen");
$("#antB_click").click(function(){
score++;
laadVraag();
});
};
$(document).ready(function() {
laadVraag();
});