We gaan een quiz vragen met 10 vragen

Je start eerst met het maken van de de HTML pagina:

Voorbeeld:

Maak nu een externe quiz.js bestand. Maak eerst de functie check(); die je via de button oproept.

Stap 1: Plaats de waarden van de vragen in een variabele

function check() {

	var question1 = document.quiz.question1.value;
	var question2 = document.quiz.question2.value;
// tem question10 ...
}

Stap 2: Maak een variabele correct, telkens de vraag goed is verhoog je de correct

var correct = 0;
	
	if (question1 == "Warschau") {
		correct++;
	}
	if (question2 == "Albany") {
		correct++;
	}

Stap 3: Geef de div id #naKlikken weer + toon een tekst boodschap + het aantal correcte antwoorden

document.getElementById("naKlikken").style.visibility = "visible";
document.getElementById("nummer_correct").innerHTML = "Je hebt " + correct + " correct";

Stap 4: We gaan bij elk juist antwoorden een andere tekst boodschap weergeven mbv array

JavaScript arrays worden gebruikt om meerdere waarden opslaan in een enkele variabele.

var cars = ["Saab", "Volvo", "BMW"];

// de oude manier zou te lang duren als je bv 300 auto's wilt bewaren
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

Tip: Je kan het ook met spaties en enters zo schrijven om het overzichtelijker te houden:

var cars = [
"Saab",
"Volvo",
"BMW"
];

In ons voorbeeld geven we dit mee (vb voor 3 vragen)

var boodschap = ["Goed gedaan!", "Het is oke", "Doe beter je best"];

document.getElementById("message").innerHTML =  boodschap[zin];	

Array indexen beginnen met 0. Dus boodschap[0] is het eerste element. boodschap[1] is het tweede element. We halen het getal op uit de variabele zin.

if (correct == 0) {
		zin = 2;
	}
// 2 is het aantal vragen
	if (correct > 0 && correct < 2) {
		zin = 1;
	}

	if (correct == 2) {
		zin = 0;
	}

Als er niets correct is dan krijgt score de waarde 2 mee. Hij springt dan naar zin 2 "Doe beter je best" in de array messages. Als je 2 juiste vragen hebt dan maak je de score 0 of de eerste zin "Goed gedaan".

Stap 5: Maak het nu wat vrolijker door leuke afbeeldingen of gif-animaties

var pictures = ["img/win.gif", "img/meh.jpeg", "img/lose.gif"];
document.getElementById("picture").src = pictures[score];

We maaken een variabele pictures en plaatsen opnieuw de foto's in een array mbv van het getal van score haalt hij de juiste afbeelding op zoals bij messages.

Nu dat alles werkt mag het wel grafischer en aantrekelijker worden mbv CSS

Hieronder een paar voorbeelden, de onderste zijn van Duolingo (taal-app)

Hieronder de CSS die ik gebruikt heb:

@charset "UTF-8";
/* CSS Document */
body {
	font-family: 'Lato', sans-serif;
}

#quiz {
	margin-left: 10px;
	background: #d2def2;
	padding: 10px 20px 10px 20px;
	width: 400px;
	border-radius: 20px;
	float: left;
}

input {
	margin-bottom: 20px;
	display: block;
}

#textbox {
	height: 25px;
	font-size: 16px;
	border-radius: 5px;
	border: none;
	padding-left: 5px;
}


#button {
	background: green;
	border: none;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-size: 16px;
	transition-duration: .5s;
	margin-top: 15px;
}



#button:hover {
	background: white;
	border: 1px solid green;
	color: black;
	cursor: pointer;
}

#naKlikken {
	visibility: hidden;
	background: #ff5459;
	padding: 10px 20px 10px 20px;
	width: 400px;
	border-radius: 20px;
	float: left;
	margin-left: 20px;
	font-size: 30px;
}

#picture {
	width: 375px;
	height: 245px;
}

#mc {
	display: inline;
}