Module examen 2022 - 2023
Module examen 2022 - 2023
Download startbestanden.zip. Unzip deze bestanden. De startmap bevat het startproject. Dit startproject bevat de node_modules map nog niet, voer het pnpm install commando uit voordat je start aan het examen. De development server kan gestart worden met het commando pnpm run dev.
Tijdens dit examen bouw je een UI waarmee de verschillende graduaat en bacheloropleidingen binnen Thomas More Kempen bekeken kunnen worden. Je voegt de optie om deze opleidingen te filteren op basis van het studiegebied, de campus en of het over een dag of avondopleiding gaat.
Dit is een gesloten boek examen.
CSS
De startbestanden bevatten een stylesheet met opmaak voor dit examen. Zorg ervoor dat deze opmaak voor het volledige project ingeladen wordt.
In het verdere verloop van dit examen wordt af en toe CSS klassen vermeld die toegevoegd kunnen worden om de opmaak in de screenshots na te bouwen. Als jouw oplossing er anders uitziet is dit geen probleem. De focus van het examen ligt op de functionaliteit, focus niet op CSS problemen, deze hebben, behalve het koppelen van de .css file geen invloed op je resultaat.
Program component
Maak een nieuwe component Program deze component heeft 4 properties:
- name: De naam van de opleiding als string.
- day: Een boolean die aangeeft of de opleiding in het dagonderwijs of het avondonderwijs gegeven wordt.
- campus: De locatie van de campus waar de opleiding gegeven wordt als een object met 2 attributen, name (string) en id (string).
- english: Een property die aangeeft of de opleiding in het Engels of Nederlands gegeven wordt.
De component is omringt in een div met die de CSS-klasse program krijgt. Daarnaast is elk van de 4 kolommen ook in een div geplaatst.
Hieronder zie je enkele voorbeelden van de component. Je kan de properties voorlopig een hardgecodeerde waarde geven om je component te testen.
ThomasMore component
Zorg ervoor dat de ThomasMore component onmiddellijk getoond wordt als de applicatie start. Breid de ThomasMore component uit zodat alle opleidingen die beschikbaar zijn binnen Thomas More toont. Maak hiervoor gebruik van de getAllMatchingPrograms functie die beschikbaar is in de startbestanden (/src/API/thomasMore.js). De parameters van deze functie mag je voorlopig nog op undefined zetten.
Boolean filter
Breid de BooleanRadioFieldSet component die je in de startbestanden vindt verder uit. Deze component zal gebruikt worden om te selecteren of een opleiding in het dagonderwijs of avondonderwijs gegeven moet worden (of dat het niet uitmaakt).
De component moet minstens de volgende properties hebben:
- title: De titel van de fieldset, die in het <legend> tag komt te staan.
- trueTitle: De tekst om naast de dag/true radiobutton te plaatsen.
- falseTitle: De tekst om naast de avond/false radiobutton te plaatsen.
De startbestanden bevatten al Ă©Ă©n input element dat je kan gebruiken als de keuze niet true of false is, dus als het niet uitmaakt wanneer de opleiding gegeven wordt. De component moet 3 radio buttons tonen en tenslotte opgeroepen worden in ThomasMore component, op de daarvoor voorziene plaats.
De component moet natuurlijk ook werken, als je een All/Day/Evening selecteert moeten enkel de relevante opleidingen getoond worden. Maak opnieuw gebruik van de getAllMatchingPrograms functie, dit keer met een gepaste waarde voor de day parameter.
Radio filter
Schrijf een nieuwe component RadioFieldSet, baseer je tijdens het schrijven van deze component op de BooleanRadioFieldSet component die je in de vorige oefening geschreven hebt.
De RadioFieldSet component heeft minstens volgende properties:
- title: De titel van de fieldset
- options: De verschillende opties die beschikbaar zijn, in een array van objecten.
Gebruikt de RadioFieldSet component om onderstaande filters toe te voegen aan de ThomasMore component. Je kan de beschikbare studiegebieden ophalen via de getAllStudyAreas methode uit de startbestanden en alle campussen met getAllCampuses methode uit dezelfde bestanden.
Zorg er tenslotte voor dat alle filters samen gebruikt kunnen worden. Als er geen enkele opleiding gevonden kan worden die voldoet aan de geselecteerde filters, geef je dit ook aan.
Filters verbergen
Voeg boven de filters een knop toe waarmee de filters verborgen of getoond kunnen worden. Standaard zijn alle filters verborgen en wordt op de tekst de knop “Change filters” getoond. Als hierop gedrukt wordt, wordt de tekst gewijzigd in “Hide filters” en worden de filters getoond.
