Maak een quiz met 5 vragen over onze richting Multimedia. Dit mag gaan over druktechnieken, kleurenleer, typografie of software gebonden.

In totaal heb je 6 HTML-bestanden: vraag_1.html, vraag_2.html, vraag_3.html, vraag_4.html, vraag_5.html, eindresultaat.html. Je maakt 1 opmaak.css bestand die je kan overtypen van de pdf.

Download hier de pdf.

Je eerste HTML-pagina 'vraag_1.html' is het meeste werk, de andere pagina's zijn het vette gedeelte in de teksten aanpassen.

Jullie gaan telkens links plaatsen in de <form action="vraag_2.html" method="post"> naar de volgende pagina (vraag_3.html) en zo verder...

Op de laatste pagina "resultaat.html" komt de score weergegeven, een afbeelding als het goed of slecht gegaan is en een replay button om terug te linken naar de eerste vraag "vraag_1.html".

De beste vragen ga ik verzamelen van jullie, dus wees origineel en creatief 😉

Telkens je een eigenschap toevoegt in de CSS opmaak preview je resultaat in de browser, zo zie je telkens wat er gebeurt dankzij deze eigenschap. Veel testen dus!

Download hier het CSS-bestand.

Hier gaan we alles op 1 pagina plaatsen 'index.html' en buiten de eerste vraag alle andere vragen onzichtbaar maken in de HTML-tag


<section id="vraag_2" style="display: none">

We gaan de vragen controleren en een score toevoegen. Je hebt 3 soorten formuliervormen: radiobutton (1 keuze), checkbox (meerdere keuzes) en drag & drop

Start met de bibliotheek op te roepen van jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>

Maak een variabel score aan en geef deze de waarde 0.

	<script>
		var score= 0;
	</script>
		

Hieronder een controle voor een radiobutton

   	
$("input[name='controleer']").click(function() {
	//Blocking default click handling. Toggling a checkbox is the default action of clicking on a checkbox.
	event.preventDefault();
	
	// The .val() method is primarily used to get the values of form elements
	var radioValue = $("input[name='vraag1']:checked").val();
		  
	// vraag controleren
	if(radioValue === 'ei'){
	
	 alert('Goed gedaan!');
	
	// verhoog de score met + 1
	score++;
						
    // verberg #vraag 1 en toon de section met id="vraag 2"
		$('#vraag_2').css('display','flex');
		$('#vraag_1').css('display','none');
		// toon de score in de #result2
		$('#result2').text('Score: '+ score);  
  }
	else {
	 alert('Fout!');
		// dezelfde acties als hierboven, buiten geen optelling bij de score
		$('#vraag_2').css('display','flex');
		$('#vraag_1').css('display','none');
		$('#result2').text('Score: '+ score); 
	}
})

Hieronder een controle voor een checkbox

   
var checkValue1 = $("input[id='check1']:checked").val();
var checkValue2 = $("input[id='check2']:checked").val();
	
if(checkValue1 === 'Adiòs' || checkValue2 === 'Hasta pronto') {
	alert('Goed gedaan!');

	score++;
			
	// verberg de section met deze vraag en geef de volgende section weer
	...
}

In het laatste resultaat.html scherm toon je de score + een replay button. Geef ook een controle mee als de score < 3 geef je een foto weer dat het goed was. Anders een foto dat het beter kon.

// vraag  controleren
if(checkValue1 === 'Adiòs' || checkValue2 === 'Hasta pronto') {
		alert('Goed gedaan!');

		score++;
      
		$('#vraag_2').css('display','none');
		$('#vraag_1').css('display','none');
		$('#vraag_3').css('display','none');
		$('#resultaat').css('display','flex');

		// toon het eindresultaat
		$('#result5').text('Score: '+ score); 

		if(score >= 3) {
			$('#goed').css('display','flex');
			$('#slecht').css('display','none');
		}
		else {
			$('#slecht').css('display','flex');
			$('#goed').css('display','none');
		}
}
			  		
else {
		alert('Fout!');
		  
		$('#vraag_2').css('display','none');
		$('#vraag_1').css('display','none');
		$('#vraag_3').css('display','none');
		$('#resultaat').css('display','flex');

		// toon het eindresultaat
		$('#result5').text('Score: '+ score); 
	                
		if(score >= 3) {
			$('#goed').css('display','flex');
			$('#slecht').css('display','none');
		}
		else {
			$('#slecht').css('display','flex');
			$('#goed').css('display','none');
		}
}

Vergeet niet de score te resetten! Voor je terug springt naar de eerste vraag "vraag_1.html".

	$("input[name='Replay']").click(function() {
	
		event.preventDefault();
		
		score=0;
		location.reload();
		
	})