# 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:

```html
<!DOCTYPE html>
<html>
    <head>
        <title>Rekenwonder</title>
        <link rel="stylesheet" href="/css/style.css" />
    </head>
    <body>
        <section class="container">
            <section class="feedback">
                The answer is 10 and your answer is 1. Correct!
            </section>
            <form class="math-form" method="post">
                <input type="number" name="number1" value="4" class="num1" readonly />
                <input type="hidden" name="operator" value="/" />
                <span class="operator">
                    <img src="/images/multiply.png" alt="divide" />
                </span>
                <input type="number" name="number2" value="7" class="num1" readonly />
                <span class="equals">
                    <img src="/images/equals.png" alt="equals" />
                </span>
                <input type="number" name="result" value="0" class="result" />
                <input type="submit" value="Check" class="check" />
            </form>
            <div class="score">
                1 of 1 correct.
            </div>
        </div>
    </body>
</html>
```

en de volgende css:

```css
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background: linear-gradient(to bottom right, #ff758c, #ff7eb3, #8b78ff);
}

.math-form {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    position: relative;
    padding-bottom: 80px;
}

.math-form input[type="number"] {
    width: 100px;
    height: 50px;
    background-color: #f5f5f5;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    border: none;
    border-radius: 10px;
    color: #ff758c;
}

.math-form .operator {
    font-size: 36px;
    font-weight: bold;
    color: #ff7eb3;
    display: flex;
    justify-content: center;
    align-items: center;

}

.math-form .equals {
    font-size: 36px;
    font-weight: bold;
    color: #8b78ff;
}

.math-form .check {
    position: absolute; 
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    font-size: 24px;
    background: #8b78ff;
    color: #fff;
    border: none;
    border-radius: 0 0 10px 10px;
    cursor: pointer;
}

.math-form img {
    margin-left: 10px;
    margin-right: 10px;
    width: 50px;
    height: 50px;
}

.feedback {
    color: white;
    text-shadow: 2px 2px #8b78ff;
    font-size: 22px;
    text-align: center;
    margin-bottom: 10px;
}

.score {
    color: white;
    text-shadow: 2px 2px #8b78ff;
    font-size: 22px;
    text-align: center;
    margin-top: 10px;
}
```

Afbeeldingen:

<div><figure><img src="https://1263710825-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSbo6ZBzWEGFI0idnIB%2Fuploads%2FA2p4qZZWdiEAxJWmww9a%2Fdivision.png?alt=media&#x26;token=9eb59739-4275-41da-86b1-d33c0650e5f2" alt=""><figcaption></figcaption></figure> <figure><img src="https://1263710825-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSbo6ZBzWEGFI0idnIB%2Fuploads%2FxxZqZqrDppznMMCl0KYb%2Fequals.png?alt=media&#x26;token=6839a00f-d081-4217-8701-aaf130e4140b" alt=""><figcaption></figcaption></figure> <figure><img src="https://1263710825-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSbo6ZBzWEGFI0idnIB%2Fuploads%2F84kfcT9f2aHha81v9c4X%2Fmultiplication.png?alt=media&#x26;token=76c55087-d0ad-4c94-8221-f881521a0fc1" alt=""><figcaption></figcaption></figure></div>

Deze pagina ziet er als volgt uit:

<figure><img src="https://1263710825-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSbo6ZBzWEGFI0idnIB%2Fuploads%2FCB09DSY9gCUDeEt0Ef2b%2FScreenshot%202023-03-25%20at%2021.42.31.png?alt=media&#x26;token=fda271a5-fb27-43af-b169-b828d707bb09" alt=""><figcaption></figcaption></figure>

### 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 dit `undefined`.
* `number1`: een willekeurig getal tussen 0 en 10
* `number2`: een willekeurig getal tussen 0 en 10
* `operator`: 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`, `operator` en `result`. 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 `timesCorrect` met 1 verhogen. Als het antwoord foutief is, dan moet je de globale variabele `timesWrong` met 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 feedback `The 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.
