add inc/dec buttons to thermometer

might be easier for some kids
plabayo · Feb 11, 2024 · 3081a9d · 3081a9d
1 parent 2c35aef
commit 3081a9d
Showing 1 changed file with 58 additions and 10 deletions.
diff --git a/site/1/thermometer.html b/site/1/thermometer.html
@@ -395,7 +395,7 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                                 let exerciseFeedback = '<div class="box exercise-feedback">';
                                 switch (exercise.exercise) {
                                     case "teken":
-                                        exerciseFeedback += "<h3>kleur de themperatuur 🎨</h3>";
+                                        exerciseFeedback += "<h3>kleur de thermometer 🎨</h3>";
                                         exerciseFeedback += drawThermometer(exercise, true);
                                         break;
                                     case "schrijf":
@@ -417,10 +417,14 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                     }
                 }
 
+                function cellCount() {
+                    return (Math.ceil(window.thermomterState.countUntil / 5.0) * 5) + 5;
+                }
+
                 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) + 5;
+                    let cells = cellCount();
                     for (let i = 0; i < cells + 2; i++) {
                         const cellValue = cells - i + 1;
                         let liquidClass = '';
@@ -440,6 +444,17 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                     return thermometer;
                 }
 
+                function getThermometerValue() {
+                    let answer = 0;
+                    document.querySelectorAll('#thermometer.interactive tr:not(:last-child)>td.liquid').forEach((el) => {
+                        const value = Number(el.getAttribute('value'));
+                        if (value > answer) {
+                            answer = value;
+                        }
+                    });
+                    return answer;
+                }
+
                 function generateExercise() {
                     window.thermomterState.exerciseCount += 1;
                     document.getElementById("exercise-feedback").innerHTML = "&nbsp;";
@@ -468,8 +483,12 @@ <h3 id="exercise-feedback">&nbsp;</h3>
 
                     switch (window.thermomterState.exercise.exercise) {
                         case "teken":
-                            document.getElementById("exercise-feedback").innerHTML = "kleur de themperatuur 🎨";
+                            document.getElementById("exercise-feedback").innerHTML = "kleur de thermometer 🎨";
                             document.getElementById("form-exercise").innerHTML = drawThermometer(window.thermomterState.exercise) + `
+                                    <div id="review-buttons">
+                                        <button type="button" id="button-decrement">➖ minder</button>
+                                        <button type="button" id="button-increment">meer ➕</button>
+                                    </div>
                                     <p>
                                         <span class="box split-part">${window.thermomterState.exercise.value}</span>
                                         <span>℃</span>
@@ -491,7 +510,42 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                                     });
                                 })
                             });
+
+                            function setIncDecButtonDisabled() {
+                                const value = getThermometerValue();
+                                document.getElementById("button-decrement").disabled = value <= 0;
+                                document.getElementById("button-increment").disabled = value > cellCount();
+                            }
+
+                            document.getElementById("button-decrement").addEventListener("click", (e) => {
+                                e.preventDefault();
+
+                                const value = getThermometerValue();
+                                console.log("decrement via button", value);
+                                if (value <= 0) {
+                                    return;
+                                } else {
+                                    document.querySelector(`td:first-child#cell-${value}`).className = '';
+                                    setIncDecButtonDisabled();
+                                }
+                            });
+
+                            document.getElementById("button-increment").addEventListener("click", (e) => {
+                                e.preventDefault();
+
+                                const value = getThermometerValue();
+                                console.log("increment via button", value);
+                                if (value > cellCount()) {
+                                    return;
+                                } else {
+                                    document.querySelector(`td:first-child#cell-${value + 1}`).className = 'liquid';
+                                    setIncDecButtonDisabled();
+                                }
+                            });
+
+                            setIncDecButtonDisabled();
                             break;
+
                         case "schrijf":
                             document.getElementById("exercise-feedback").innerHTML = "schrijf de themperatuur ✏️";
                             document.getElementById("form-exercise").innerHTML = drawThermometer(window.thermomterState.exercise) + `
@@ -539,13 +593,7 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                             break;
 
                         case "teken":
-                            answer = 0;
-                            document.querySelectorAll('#thermometer.interactive tr:not(:last-child)>td.liquid').forEach((el) => {
-                                const value = Number(el.getAttribute('value'));
-                                if (value > answer) {
-                                    answer = value;
-                                }
-                            });
+                            answer = getThermometerValue();
                             valid = answer === window.thermomterState.exercise.value;
                             break;
                     }