Rekenwonder
Rekenwonder
In deze opgave gaan we een oefenprogramma schrijven voor leerlingen van het 2de studiejaar. Het programma zal de leerlingen helpen bij het oefenen van de tafels van vermenigvuldiging en deling. De leerling zal willekeurig twee getallen tussen 0 en 10 krijgen en zal de uitkomst moeten ingeven. Het programma zal de leerling laten weten of het antwoord correct is of niet. Het programma zal ook bijhouden hoeveel vragen de leerling correct heeft beantwoord.
Begin situatie
Je kan voor deze opgave starten met de volgende html/css broncode:
en de volgende css:
Afbeeldingen:
Deze pagina ziet er als volgt uit:
Stappenplan
Express applicatie opzetten
Maak een nieuw express project aan met de naam rekenwonder dat gebruik maakt van de ejs view engine. Installeer al de nodige dependencies. Zorg dat de server op de poort 3000 draait.
EJS en statische bestanden
Maak een ejs view voor deze opgave met de naam index.ejs en plaats de inhoud van de html hier in. Zorg ervoor dat de css en de afbeeldingen in een public folder staan en dat deze publiek toegankelijk zijn. Zorg ervoor dat deze pagina zichtbaar is op de root van je express applicatie (via een GET). Je moet in deze stap nog geen parameters doorgeven aan de ejs view.
De parameters
Zorg ervoor dat je de volgende parameters doorgeeft aan de ejs view:
timesCorrect: het aantal keer dat de gebruiker correct heeft geantwoord. De variabele die je hier doorgeeft mag een globale variabele zijn.timesWrong: het aantal keer dat de gebruiker foutief heeft geantwoord. De variabele die je hier doorgeeft mag een globale variabele zijn.feedback: een string die feedback geeft over het laatste antwoord van de gebruiker. In het begin is ditundefined.number1: een willekeurig getal tussen 0 en 10number2: een willekeurig getal tussen 0 en 10operator: een willekeurig operator die kan zijn*of/
Feedback
Zorg ervoor dat de feedback wordt weergegeven in de ejs view. Als er geen feedback is, dan moet er geen feedback worden weergegeven. (Tip: gebruik een if statement in de ejs view)
Score
Zorg ervoor dat de score wordt weergegeven in de ejs view. De score is het aantal keer dat de gebruiker correct heeft geantwoord op het aantal keer dat de gebruiker heeft geantwoord.
Het formulier
Zorg dat de input velden van het formulier worden ingevuld met de juiste parameters. Zorg ervoor dat de gebruiker een antwoord kan geven door het formulier in te vullen en op de knop Check te klikken. Als de gebruiker op de knop Check klikt, dan moet de gebruiker worden doorgestuurd naar de root van de express applicatie (via een POST).
De POST route
Zorg ervoor dat de POST route de volgende stappen uitvoert:
Eerst moet je de volgende parameters uit de request body halen:
number1,number2,operatorenresult. Deze parameters worden doorgegeven door het formulier.Je berekent vervolgens het juiste antwoord aan de hand van de number parameters en de operator. Zorg ervoor dat je de juiste operator gebruikt. (bv:
*of/)Je vergelijkt het juiste antwoord met het gegeven antwoord. Als het antwoord correct is, dan moet je de globale variabele
timesCorrectmet 1 verhogen. Als het antwoord foutief is, dan moet je de globale variabeletimesWrongmet 1 verhogen.Je bepaald vervolgens de feedback die je moet weergeven in de ejs view. Als het antwoord correct is, dan moet je de feedback
The answer is 5 and your answer is 5. Correct!weergeven. Als het antwoord foutief is, dan moet je de feedbackThe answer is 3 and your answer is 5. Wrong!weergeven.Vervolgens bereken je opnieuw een nieuwe willekeurige oefening (nieuwe parameters die je doorgeeft aan de ejs view). Je gebruikt hiervoor dezelfde ejs view als bij de GET route maar je geeft wel een extra parameter mee:
feedback. Deze parameter bevat de feedback die je hebt berekend in de POST route.
Last updated
