From c20a729bbfc69de1f4a6459284fec98a264fc06d Mon Sep 17 00:00:00 2001
From: glendc <glen.decauwsemaecker@otainsight.com>
Date: Sat, 10 Feb 2024 23:27:39 +0100
Subject: [PATCH] add thermometer exercise

---
 site/1/mathbox.html     |   2 +-
 site/1/thermometer.html | 701 ++++++++++++++++++++++++++++++++++++++++
 site/index.html         |   1 +
 3 files changed, 703 insertions(+), 1 deletion(-)
 create mode 100644 site/1/thermometer.html
diff --git a/site/1/mathbox.html b/site/1/mathbox.html
index 2b520f4..5f44442 100644
--- a/site/1/mathbox.html
+++ b/site/1/mathbox.html
@@ -8,7 +8,7 @@
     <title>rekendoos oefening</title>
 
     <link rel="icon"
-        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🏫</text></svg>">
+        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🔢</text></svg>">
 
     <meta property="og:title" content="rekendoos" />
     <meta property="og:locale" content="nl_BE" />
diff --git a/site/1/thermometer.html b/site/1/thermometer.html
new file mode 100644
index 0000000..e9f3420
--- /dev/null
+++ b/site/1/thermometer.html
@@ -0,0 +1,701 @@
+<!DOCTYPE html>
+<html lang="nl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>thermometer oefening</title>
+
+    <link rel="icon"
+        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🌡️</text></svg>">
+
+    <meta property="og:title" content="thermometer" />
+    <meta property="og:locale" content="nl_BE" />
+    <meta property="og:type" content="website">
+    <meta property="og:description"
+        content="gratis huiswerk middel voor te leren werken met een analoge thermometer in het 1ste leerjaar van de basisschool" />
+    <meta property="og:site_name" content="thermometer" />
+
+    <link rel="stylesheet" href="/css/reset.css">
+
+    <style>
+        body {
+            padding-inline: 10px;
+        }
+
+        main {
+            max-width: 800px;
+            margin-inline: auto;
+        }
+
+        h1 {
+            text-align: center;
+        }
+
+        form {
+            padding: 5px;
+        }
+
+
+        #form-setup>* {
+            margin-block-end: 10px;
+        }
+
+        #form-exercise {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        #form-exercise span,
+        #form-exercise input,
+        #form-exercise button,
+        .exercise-feedback span {
+            margin: 5px;
+            font-size: 2em;
+        }
+
+        .box {
+            border: 1px solid black;
+            padding: 10px;
+            margin: 10px;
+            width: fit-content;
+            border-radius: 5px;
+        }
+
+        .exercise-feedback {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 10px auto;
+        }
+
+        .exercise-feedback>h3 {
+            margin-block-end: 5px;
+        }
+
+        #exercise {
+            margin: 20px auto;
+        }
+
+        #exercise-feedback {
+            text-align: center;
+            margin-block: 5px;
+        }
+
+        span.split-part {
+            width: 3em;
+            display: inline-block;
+            text-align: center;
+        }
+
+        input.split-part {
+            text-align: center;
+            line-height: 2em;
+            border: 1px solid black;
+            border-radius: 5px;
+        }
+
+        #answer {
+            width: 3em;
+            padding-inline-start: 0.25em;
+        }
+
+        #exercise,
+        #answer {
+            background-color: #fffde6
+        }
+
+        #result {
+            margin: 20px auto;
+            text-align: center;
+        }
+
+        #confetti {
+            overflow-y: hidden;
+            overflow-x: hidden;
+            width: 100vw;
+            margin: 0;
+            height: 100vh;
+            position: absolute;
+            top: 0;
+            z-index: -1;
+        }
+
+        .bad {
+            background-color: rgb(253, 220, 220);
+        }
+
+        #review-buttons {
+            margin-block: 10px;
+        }
+
+        #thermometer {
+            margin-block: 15px;
+        }
+
+        #thermometer table {
+            border-spacing: 0px;
+            margin-inline-start: 50px;
+        }
+
+        #thermometer tr {
+            height: 10px;
+        }
+
+        #thermometer td {
+            width: 20px;
+        }
+
+        #thermometer tr:last-child>td:nth-child(2) {
+            border-bottom: 0;
+        }
+
+        #thermometer tr>td.marker {
+            border-bottom: 1px solid black;
+        }
+
+        #thermometer tr>td.bold-marker {
+            border-bottom: 3px solid black;
+        }
+
+        #thermometer tr>td:first-child {
+            border-inline: 3px solid black;
+        }
+
+        #thermometer tr:last-child>td:first-child {
+            background-color: red;
+        }
+
+        #thermometer tr>td:nth-child(3) {
+            width: 30px;
+            text-align: center;
+        }
+
+        #thermometer tr:first-child>td:first-child {
+            border-top: 3px solid black;
+            display: block;
+            border-top-left-radius: 50%;
+            border-top-right-radius: 50%;
+        }
+
+        #thermometer tr:last-child>td:first-child {
+            border-bottom: 3px solid black;
+            display: block;
+            border-bottom-left-radius: 50%;
+            border-bottom-right-radius: 50%;
+        }
+
+        #thermometer.interactive tr:not(:last-child)>td:first-child:hover {
+            background-color: green;
+            cursor: pointer;
+        }
+
+        #thermometer td.liquid {
+            background-color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <h1>thermometer <code>🌡️</code></h1>
+        <p>
+            <a href="/index.html">🏠 Ga terug naar de thuispagina.</a>
+        </p>
+
+        <div id="page-setup">
+            <p>
+                Deze oefening is bedoeld voor leerlingen
+                om te leren werken met een analoge thermometer.
+            </p>
+            <form id="form-setup" , action="javascript:void(0)">
+                <label for="count-until">Tot hoeveel kan het kind al werken op de thermometer?</label>
+                <input type="number" id="count-until" name="count-until" min="3" max="100" value="20" required><br>
+
+                <label for="num-exercises">Hoeveel oefeningen wenst u te doen?</label>
+                <input type="number" id="num-exercises" name="num-exercises" min="1" max="100" value="10" required><br>
+
+                <button type="submit">🟢 start met oefenen</button>
+            </form>
+        </div>
+
+        <div id="page-exercises" hidden>
+            <button class="button-reset">begin opnieuw ↩️</button>
+            <div id="exercise" class="box">
+                <h3 id="form-title"></h3>
+                <p id="exercise-feedback">&nbsp;</p>
+                <form id="form-exercise" , action="javascript:void(0)">
+                </form>
+            </div>
+        </div>
+
+        <div id="page-result" hidden>
+            <canvas id="confetti"></canvas>
+            <button class="button-reset">begin opnieuw ↩️</button>
+            <div id="result">
+            </div>
+        </div>
+
+        <script>
+            window.onload = () => {
+                console.log("thermometer loaded");
+
+                const initPageSetup = () => {
+                    console.log("show page setup");
+                    document.getElementById("page-setup").hidden = false;
+                    document.getElementById("page-exercises").hidden = true;
+                    document.getElementById("page-result").hidden = true;
+
+                    // respect previous config for easier use,
+                    // as for example a kid will probably want to do exercises with the same settings
+                    // each time they use the website
+                    try {
+                        const storedConfig = JSON.parse(localStorage.getItem("thermometerConfig"));
+                        if (storedConfig.countUntil) {
+                            document.getElementById("count-until").value = storedConfig.countUntil;
+                        }
+                        if (storedConfig.numExercises) {
+                            document.getElementById("num-exercises").value = storedConfig.numExercises;
+                        }
+                    } catch (e) { }
+                };
+                initPageSetup();
+
+                document.querySelectorAll(".button-reset").forEach((el) => {
+                    el.addEventListener("click", (el) => {
+                        el.preventDefault();
+                        initPageSetup();
+                    });
+                });
+
+                window.thermomterState = {
+                    countUntil: 0,
+                    numExercises: 0,
+                    exerciseCount: 0,
+                    exercise: {},
+                    wrongExercises: [],
+                    premadeExercises: [],
+                };
+
+                function randomAnimal() {
+                    const animals = [
+                        '🐶', '🦊', '🦄', '🐭', '🐼', '🐣', '🦉',
+                    ];
+                    return animals[Math.floor(Math.random() * animals.length)];
+                }
+
+                function trackWrongExercise() {
+                    const last = window.thermomterState.wrongExercises.length > 0
+                        ? JSON.stringify(window.thermomterState.wrongExercises[window.thermomterState.wrongExercises.length - 1])
+                        : null;
+                    const current = JSON.stringify(window.thermomterState.exercise);
+                    if (last !== current) {
+                        window.thermomterState.wrongExerciseCount += 1;
+                        window.thermomterState.wrongExercises.push(JSON.parse(current));
+
+                        const skipButton = document.getElementById("button-skip");
+                        if (skipButton) {
+                            skipButton.hidden = false;
+                        }
+                    }
+                }
+
+                function nextExercise() {
+                    const answer = Number(document.getElementById("answer") ? document.getElementById("answer").value : -1);
+                    if (window.thermomterState.exerciseCount < window.thermomterState.numExercises) {
+                        console.log(answer, "correct, next exercise");
+                        generateExercise();
+                    } else {
+                        console.log(answer, "correct, done");
+
+                        console.log("show page result");
+                        document.getElementById("page-setup").hidden = true;
+                        document.getElementById("page-exercises").hidden = true;
+                        document.getElementById("page-result").hidden = false;
+
+                        const score = window.thermomterState.exerciseCount - window.thermomterState.wrongExerciseCount;
+                        const total = window.thermomterState.exerciseCount;
+
+                        // show confetti only at max score
+                        document.getElementById("confetti").style.height = score === total ? '100vh' : '0';
+
+                        const feedback = document.getElementById("result");
+                        feedback.innerHTML = `<h2>🎉 klaar!<h2>`;
+                        feedback.innerHTML += `<h3>${score} &sol; ${total}</h3>`;
+                        if (window.thermomterState.wrongExercises.length > 0) {
+                            const animal = randomAnimal();
+                            feedback.innerHTML += `<h2>${animal} bekijk goed</h2>`;
+                            feedback.innerHTML += `
+                                <div id="review-buttons">
+                                    <button id="review-button-repeat">🟢 herhaal</button>
+                                </div>
+                                <div id="review-buttons">
+                                    <button id="review-button-back">⬅️ vorige</button>
+                                    <button id="review-button-next">volgende ➡️</button>
+                                </div>
+                                <div id="review"></div>
+                            `;
+
+                            let index = 0;
+
+                            function setReviewButtons() {
+                                document.getElementById("review-button-back").disabled = index === 0;
+                                document.getElementById("review-button-next").disabled = index === window.thermomterState.wrongExercises.length - 1;
+                            }
+
+                            document.getElementById("review-button-repeat").addEventListener("click", (e) => {
+                                e.preventDefault();
+                                window.thermomterState.numExercises = window.thermomterState.wrongExercises.length;
+                                window.thermomterState.exerciseCount = 0;
+                                window.thermomterState.wrongExerciseCount = 0;
+                                window.thermomterState.premadeExercises = window.thermomterState.wrongExercises;
+                                window.thermomterState.wrongExercises = [];
+
+                                console.log("show page exercises");
+                                document.getElementById("page-setup").hidden = true;
+                                document.getElementById("page-exercises").hidden = false;
+                                document.getElementById("page-result").hidden = true;
+
+                                generateExercise();
+                            });
+
+                            document.getElementById("review-button-back").addEventListener("click", (e) => {
+                                e.preventDefault();
+                                if (index === 0) {
+                                    return;
+                                }
+                                index -= 1;
+                                displayExercise();
+                                setReviewButtons();
+                            });
+
+                            document.getElementById("review-button-next").addEventListener("click", (e) => {
+                                e.preventDefault();
+                                if (index === window.thermomterState.wrongExercises.length - 1) {
+                                    return;
+                                }
+                                index += 1;
+                                displayExercise();
+                                setReviewButtons();
+                            });
+
+                            function displayExercise() {
+                                const exercise = window.thermomterState.wrongExercises[index];
+                                let exerciseFeedback = '<div class="box exercise-feedback">';
+                                switch (exercise.exercise) {
+                                    case "teken":
+                                        exerciseFeedback += "<h3>kleur de themperatuur 🎨</h3>";
+                                        exerciseFeedback += drawThermometer(exercise, true);
+                                        break;
+                                    case "schrijf":
+                                        exerciseFeedback += "<h3>schrijf de themperatuur ✏️</h3>";
+                                        exerciseFeedback += drawThermometer(exercise, true);
+                                        break;
+                                }
+                                exerciseFeedback += `<p>
+                                    <span class="box split-part bad">${window.thermomterState.exercise.value}</span>
+                                    <span>℃</span>
+                                </p>`;
+                                exerciseFeedback += '</div>';
+                                document.getElementById("review").innerHTML = exerciseFeedback;
+                            }
+
+                            displayExercise();
+                            setReviewButtons();
+                        }
+                    }
+                }
+
+                function drawThermometer(exercise, feedback) {
+                    let thermometer = `<div id="thermometer" class="${exercise.exercise === 'teken' ? 'interactive' : ''}">
+                        <table><tbody>`;
+                    let cells = Math.ceil(window.thermomterState.countUntil / 5.0) * 5;
+                    for (let i = 0; i < cells + 2; i++) {
+                        const cellValue = cells - i + 1;
+                        let liquidClass = '';
+                        if ((feedback || exercise.exercise === 'schrijf') && cellValue <= exercise.value) {
+                            liquidClass = 'liquid'
+                        }
+                        thermometer += `
+                            <tr>
+                                <td id="cell-${cellValue}" value="${cellValue}" class="${liquidClass}">&nbsp;</td>
+                                <td class="${i > cells ? '' : (i % 5 === 0 ? 'bold-marker' : 'marker')}">&nbsp;</td>
+                                ${i <= cells && i % 5 === 0 ? '<td rowspan="2">' + (cells - i) + '</td>' : (i <= cells && (i - 1) % 5 === 0 ? '' : '<td>&nbsp;</td>')}
+                            </tr>`;
+                    }
+                    thermometer += `</tbody></table>
+                        </div>`;
+
+                    return thermometer;
+                }
+
+                function generateExercise() {
+                    window.thermomterState.exerciseCount += 1;
+                    document.getElementById("exercise-feedback").innerHTML = "&nbsp;";
+
+                    if (window.thermomterState.premadeExercises.length > 0) {
+                        const i = Math.floor(Math.random() * window.thermomterState.premadeExercises.length);
+                        window.thermomterState.exercise = window.thermomterState.premadeExercises.splice(i, 1)[0];
+                    } else {
+                        const exercises = ["teken", "schrijf"];
+                        window.thermomterState.exercise = {
+                            value: Math.floor(Math.random() * (window.thermomterState.countUntil)),
+                            exercise: exercises[Math.floor(Math.random() * exercises.length)],
+                        };
+                    }
+
+                    console.log("exercise", window.thermomterState.exerciseCount, window.thermomterState.exercise);
+
+                    document.getElementById("form-title").innerHTML = `oefening ${window.thermomterState.exerciseCount} van ${window.thermomterState.numExercises}:`;
+
+                    switch (window.thermomterState.exercise.exercise) {
+                        case "teken":
+                            document.getElementById("exercise-feedback").innerHTML = "kleur de themperatuur 🎨";
+                            document.getElementById("form-exercise").innerHTML = drawThermometer(window.thermomterState.exercise) + `
+                                    <p>
+                                        <span class="box split-part">${window.thermomterState.exercise.value}</span>
+                                        <span>℃</span>
+                                    </p>
+                                    <button type="submit" id="button-check">👉 antwoord</button>
+                                    <button type="reset" id="button-skip" hidden>🤷 weet het niet</button>
+                                `;
+
+                            document.querySelectorAll('#thermometer.interactive tr:not(:last-child)>td:first-child').forEach((el) => {
+                                el.addEventListener('click', (e) => {
+                                    e.preventDefault();
+                                    const elementId = e.target ? e.target.id : e.srcElement.id;
+                                    const el = document.getElementById(elementId);
+                                    const maxValue = Number(el.getAttribute('value'));
+
+                                    document.querySelectorAll('#thermometer.interactive tr:not(:last-child)>td:first-child').forEach((el) => {
+                                        const value = Number(el.getAttribute('value'));
+                                        el.className = value <= maxValue ? 'liquid' : '';
+                                    });
+                                })
+                            });
+                            break;
+                        case "schrijf":
+                            document.getElementById("exercise-feedback").innerHTML = "schrijf de themperatuur ✏️";
+                            document.getElementById("form-exercise").innerHTML = drawThermometer(window.thermomterState.exercise) + `
+                                    <p>
+                                        <input type="number" id="answer" name="answer" min="0" max="${window.thermomterState.countUntil}" value="" required>
+                                        <span>℃</span>
+                                    </p>
+                                    <button type="submit" id="button-check">👉 antwoord</button>
+                                    <button type="reset" id="button-skip" hidden>🤷 weet het niet</button>
+                                `;
+                            break;
+                    }
+
+                    document.getElementById("exercise-feedback").style.color = "black";
+                    const answerEl = document.getElementById("answer");
+                    if (answerEl) {
+                        answerEl.style.backgroundColor = "#fffde6";
+                        answerEl.focus();
+                        answerEl.click();
+                    }
+
+                    const buttonSkipEl = document.getElementById("button-skip");
+                    if (buttonSkipEl) {
+                        buttonSkipEl.addEventListener("click", (e) => {
+                            e.preventDefault();
+                            trackWrongExercise();
+                            nextExercise();
+                        });
+                    }
+
+                    document.getElementById("exercise").scrollTo({
+                        behavior: "smooth",
+                    })
+                }
+
+                function validateAnswer() {
+                    console.log("validateAnswer: status data",
+                        window.thermomterState.exerciseCount, window.thermomterState.numExercises,
+                        window.thermomterState.wrongExerciseCount, window.thermomterState.exercise, window.thermomterState.wrongExercises);
+
+                    let valid = false;
+                    let answer = null;
+                    switch (window.thermomterState.exercise.exercise) {
+                        case "schrijf":
+                            answer = Number(document.getElementById("answer").value);
+                            valid = answer === window.thermomterState.exercise.value;
+                            break;
+
+                        case "teken":
+                            answer = -1;
+                            document.querySelectorAll('#thermometer.interactive tr:not(:last-child)>td.liquid').forEach((el) => {
+                                const value = Number(el.getAttribute('value'));
+                                if (value > answer) {
+                                    answer = value;
+                                }
+                            });
+                            valid = answer === window.thermomterState.exercise.value;
+                            break;
+                    }
+
+                    if (valid) {
+                        nextExercise();
+                    } else {
+                        console.log(answer, "wrong, try again");
+                        const animal = randomAnimal();
+
+                        document.getElementById("exercise-feedback").innerHTML = `${animal} Probeer het nog eens.`;
+                        document.getElementById("exercise-feedback").style.color = "red";
+                        if (document.getElementById("answer")) {
+                            document.getElementById("answer").style.backgroundColor = "rgb(253, 220, 220)";
+                        }
+
+                        trackWrongExercise();
+                    }
+                }
+
+                document.getElementById("form-setup").addEventListener("submit", (e) => {
+                    e.preventDefault();
+
+                    window.thermomterState.countUntil = Number(document.getElementById("count-until").value);
+                    window.thermomterState.numExercises = Number(document.getElementById("num-exercises").value);
+
+                    console.log("form submitted");
+                    console.log("countUntil", window.thermomterState.countUntil);
+                    console.log("numExercises", window.thermomterState.numExercises);
+
+                    // store the chosen config for later usage
+                    localStorage.setItem("thermometerConfig", JSON.stringify({
+                        countUntil: window.thermomterState.countUntil,
+                        numExercises: window.thermomterState.numExercises,
+                    }));
+
+                    window.thermomterState.exerciseCount = 0;
+                    window.thermomterState.wrongExerciseCount = 0;
+
+                    window.thermomterState.exercise = {};
+                    window.thermomterState.wrongExercises = [];
+                    window.thermomterState.premadeExercises = [];
+
+                    console.log("status data",
+                        window.thermomterState.exerciseCount, window.thermomterState.numExercises,
+                        window.thermomterState.wrongExerciseCount, window.thermomterState.exercise, window.thermomterState.wrongExercises);
+
+                    console.log("show page exercises");
+                    document.getElementById("page-setup").hidden = true;
+                    document.getElementById("page-exercises").hidden = false;
+                    document.getElementById("page-result").hidden = true;
+
+                    generateExercise();
+                });
+
+                document.getElementById("form-exercise").addEventListener("submit", (e) => {
+                    e.preventDefault();
+                    validateAnswer();
+                });
+
+                // confetti
+
+                (() => {
+                    let W = window.innerWidth;
+                    let H = window.innerHeight;
+                    const canvas = document.getElementById('confetti');
+                    const context = canvas.getContext("2d");
+                    const maxConfettis = 25;
+                    const particles = [];
+
+                    const possibleColors = [
+                        "#ff7336",
+                        "#f9e038",
+                        "#02cca4",
+                        "#383082",
+                        "#fed3f5",
+                        "#b1245a",
+                        "#f2733f"
+                    ];
+
+                    function randomFromTo(from, to) {
+                        return Math.floor(Math.random() * (to - from + 1) + from);
+                    }
+
+                    function confettiParticle() {
+                        this.x = Math.random() * W; // x
+                        this.y = Math.random() * H - H; // y
+                        this.r = randomFromTo(11, 33); // radius
+                        this.d = Math.random() * maxConfettis + 11;
+                        this.color =
+                            possibleColors[Math.floor(Math.random() * possibleColors.length)];
+                        this.tilt = Math.floor(Math.random() * 33) - 11;
+                        this.tiltAngleIncremental = Math.random() * 0.07 + 0.05;
+                        this.tiltAngle = 0;
+
+                        this.draw = function () {
+                            context.beginPath();
+                            context.lineWidth = this.r / 2;
+                            context.strokeStyle = this.color;
+                            context.moveTo(this.x + this.tilt + this.r / 3, this.y);
+                            context.lineTo(this.x + this.tilt, this.y + this.tilt + this.r / 5);
+                            return context.stroke();
+                        };
+                    }
+
+                    function Draw() {
+                        const results = [];
+
+                        // Magical recursive functional love
+                        requestAnimationFrame(Draw);
+
+                        context.clearRect(0, 0, W, window.innerHeight);
+
+                        for (var i = 0; i < maxConfettis; i++) {
+                            results.push(particles[i].draw());
+                        }
+
+                        let particle = {};
+                        let remainingFlakes = 0;
+                        for (var i = 0; i < maxConfettis; i++) {
+                            particle = particles[i];
+
+                            particle.tiltAngle += particle.tiltAngleIncremental;
+                            particle.y += (Math.cos(particle.d) + 3 + particle.r / 2) / 2;
+                            particle.tilt = Math.sin(particle.tiltAngle - i / 3) * 15;
+
+                            if (particle.y <= H) remainingFlakes++;
+
+                            // If a confetti has fluttered out of view,
+                            // bring it back to above the viewport and let if re-fall.
+                            if (particle.x > W + 30 || particle.x < -30 || particle.y > H) {
+                                particle.x = Math.random() * W;
+                                particle.y = -30;
+                                particle.tilt = Math.floor(Math.random() * 10) - 20;
+                            }
+                        }
+
+                        return results;
+                    }
+
+                    window.addEventListener(
+                        "resize",
+                        function () {
+                            W = window.innerWidth;
+                            H = window.innerHeight;
+                            canvas.width = window.innerWidth;
+                            canvas.height = window.innerHeight;
+                        },
+                        false
+                    );
+
+                    // Push new confetti objects to `particles[]`
+                    for (var i = 0; i < maxConfettis; i++) {
+                        particles.push(new confettiParticle());
+                    }
+
+                    // Initialize
+                    canvas.width = W;
+                    canvas.height = H;
+                    Draw();
+                })();
+            }
+        </script>
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/site/index.html b/site/index.html
index 07ad2ad..3124b8d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -68,6 +68,7 @@ <h1>Oefeningen Basisschool 🏫</h1>
         <h2>Leerjaar 1️⃣</h2>
         <ul>
             <li><a href="/1/mathbox.html">rekendoos <code>➕➖🟰</code></a></li>
+            <li><a href="/1/thermometer.html">thermometer <code>🌡️</code></a></li>
         </ul>
     </main>
 </body>
