een quiz maken

In deze reeks tutorials wordt een quiz in HTML5 gemaakt. De quiz heeft de volgende kenmerken:

• de vragen zowel als de antwoorden kunnen uit plaatjes bestaan;
• als je op een antwoord klikt, worden de andere antwoorden transparant;
• als je een antwoord vergeet, wordt je daarop geattendeerd;
• bij foute antwoorden worden de juiste antwoorden gemeld en kan je opnieuw de quiz doen;
• bij alle antwoorden goed, krijg je een positieve melding.

Nadere inspectie laat zien dat de quiz feitelijk bestaat uit een formulier.

Formulieren hebben verschillende input-soorten: we zien hier de checkbox en de radiobutton. Zulke elementen hebben een id omdat daarmee een label kan worden gekoppeld. De gebruiker kan dan op het label klikken om te selecteren. Bovendien hebben de input-elementen een value-attribuut. Dan kan het script later vaststellen welke waarde geselecteerd is.
een checkbox gebruik je als er meerdere selecties mogelijk zijn in het antwoord. Onze quiz heeft telkens maar 1 mogelijk antwoord en gebruikt dus radiobuttons. Deze hebben dan een extra attribuut name nodig om de hele groep van keuze-items te formeren. Alle antwoorden bij 1 vraag hebben dezelfde name.

Om de vragen als aparte elementen te zien, kun je ze het beste elk een eigen section geven.
Elk antwoord bij de tweede vraag heeft weer een eigen id, en hebben dezelfde name-attribuut bij de radio-inputs. Die name verschilt natuurlijk wel van die van de eerste vraag.

Als de antwoorden uit afbeeldingen bestaan, wil je ze misschien wel naast elkaar laten zien. De list-items, waar ze in zitten, zijn echter blok-elementen. We maken een stijlblad aan, waarin we de list-items een beperkte breedte geven en het display-type inline-block meegeven.

Met een jQuery script gaan we ervoor zorgen dat als je op 1 antwoord klikt, de ander antwoorden transparanter worden. We koppelen hier met een CDN-link eerst jQuery. We doen dit in de head van het document. Daarom moet er via het documenteerde event worden gecontroleerd of het hele document is geladen voordat we het script uitvoeren.
in het script selecteert jQuery de list-elementen. Als daar een click-event op plaatsvindt, selecteert deze met .syblings() de siblings (de broertjes/zusjes) van de list-element en past daar de CSS van aan: de opacity neemt af. De eigen opacity moet echter 1 worden of blijven.

We voegen een knop toe. Als daarop wordt geklikt gaat het script na of de antwoorden geven zijn.
Daarvoor maken we na het click-event variabelen van de waarden van elk van de gecheckte antwoorden. Deze variabelen kunnen we laten weergeven. Als een antwoord niet is gegeven dan blijkt die variabele ‘undefined’ te zijn.
Met een if-statement kijken we of de niet-waarde (met een uitroepteken!) van elk van de antwoord-variabelen inhoud krijgt. Dan is er een antwoord niet gegeven.

Als de antwoorden gegeven zijn kan het controleren beginnen. Dat kan in de else-deel van het if-statement. Daar kun je verwijzen naar de functie beoordelen(). In deze functie maak je een variabele van het type array, die bijhoudt welke vragen niet zijn beantwoord.
Daarnaast een variabele van het type string die de tekst gaat krijgen van de goede antwoorden.

Met een if-statement controleer je of de of aan een voorwaarde is voldaan en geef je de opdrachten die dan gewenst zijn.
In hetzelfde if-statement kun je bij else de opdrachten geven die je wenst als niet aan de voorwarde is voldaan.

Hiernaast de algemene structuur van een if-statement:

if(een controle) {
      // code voor als de controle waar is
} else {
      // code voor als de controle niet waar is
}

De voorwaarde is hier antw1 != a (als het antw1 ‘a’ had moeten zijn).
In dat geval voeg je het vraagnummer toe aan de array toe en een stukje HTML-code aan de tekst-variabele.
Mocht na alle tests de tekst-variabele nog steeds leeg zijn, dan zijn alle vragen dus goed. Je kunt de text-variabele dan wel vullen met een compliment.
Via console.log() kun je testen of het script goed ‘nakijkt’.

De feedback moet in de DOM worden geplaatst. Daarvoor geef je de betreffende section een id. In het script maak je daar een variabele van.
Met .html() vervang je de bestaande inhoud door wat je aan HTML meegeeft. Dit is een combinatie van strings en variabelen. Je kunt dit direct doen in het if-statement voor het geval dat alle goed is. Voeg er een else-statement aan toe voor de feedback van de foutief-beantwoorde vragen. Met .append() kun je extra inhoud toevoegen aan een element.
Maak ik een knop, die de pagina herlaadt. In ieder geval als er verbeterd moet worden maar in elk van de gevallen.

Om elke vraag op een ‘pagina' te plaatsen maken we er een slider van. Van http://kenwheeler.github.io/slick/ kunnen we een plug-in downloaden. Als de slick.css en slick-min.js zijn gekoppeld, kan de slider worden geïnitialiseerd.
De documenten.ready() is er al en daar selecteren we de body en geven die .slick() methode mee.
Als parameters geven we met arrows: false aan dat we de previous- en next-knoppen niet wensen.
Daarvoor maken we zelf knoppen met class-namen mee en kunnen we via de methods .slick(’slickNext’) en .slick(‘slickPrev’) er zelf voor zorgen dat de slider voortaan als er geklikt wordt.