Classic mode almost finished

vtp6 · Jul 1, 2024 · fc78202 · fc78202
1 parent ca02c94
commit fc78202
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 28 deletions.
diff --git a/folders/spanish/gcse8698/index.html b/folders/spanish/gcse8698/index.html
@@ -269,7 +269,7 @@
 la aceituna	olive
 el arroz	rice
 atento/a	attentive
-la basura	rubbish, junk
+la basura	rubbish, litter, junk
 el bocadillo	sandwich
 el/la camarero/a	waiter / waitress
 chino/a	Chinese
@@ -465,7 +465,7 @@
 aparte de	apart from
 asistir (a)	(to) attend
 el barrio	area, neighbourhood
-la basura	rubbish, litter
+la basura	rubbish, litter, junk
 el/la bombero/a	firefighter
 bonito/a	pretty
 la cantidad	quantity
@@ -701,7 +701,7 @@
 la venta	sale
 
 # Unit 7
-la basura	rubbish
+la basura	rubbish, litter, junk
 la bombilla (de bajo consumo)	(low-energy) light bulb
 el combustible	fuel
 combatir	(to) fight, (to) combat

diff --git a/scripts/folders-classic.js b/scripts/folders-classic.js
@@ -10,11 +10,11 @@ let textbox = undefined;
 let correct = 0;
 let wrong = 0;
 
-const THRESHOLD = 0.8
+const THRESHOLD = 0.2; // 80% typo detection threshold
 
-function set_progress_bar_background(val, col) {
-    document.getElementById("progress-bar-container").style.background =
-        `linear-gradient(to right, ${col} ${val * 100}%, let(--other-colour) ${(1 - val) * 100}%)`;
+function set_progress_bar_background(val) {
+    document.getElementById("progress-bar")
+        .style.width = `${100 - val}%`;
 }
 
 function new_question() {
@@ -23,15 +23,28 @@ function new_question() {
 
     split_answer = answer.split(",")
         .map(str => str.split("/")).flat()
-        .map(remove_punctuation)
         .map(expand_parens);
+
+    textbox.focus();
 }
 
-function check_input_classic() {
-    let value = textbox.value;
+function update_bar_text() {
+    let total = correct + wrong;
+    let percentage = correct / total * 100;
+    document.getElementById("progress-bar-text").innerHTML =
+        `${correct}/${total} (${percentage.toFixed(2)}%)`;
+    set_progress_bar_background(percentage);
+}
+
+function check_input(value) {
     let unpunctuated = remove_punctuation(value);
     textbox.value = "";
 
+    let typo_p = document.getElementById("typo-text");
+
+    let typo = typo_p.innerHTML === `<span class="orange">Typo?</span> Try again.`;
+    typo_p.innerHTML = "&nbsp;";
+
     let rickroll = [            // Hey there!
         "thonnu",               // 
         "thunno",               // You're looking at the code
@@ -50,48 +63,98 @@ function check_input_classic() {
             "https://youtu.be/xvFZjo5PgG0", // This is the link.
         "_blank").focus();
 
-    if (split_answer.some(lst => lst.includes(unpunctuated)))
-        return true;
+    if (split_answer.some(lst =>
+        lst.map(remove_punctuation).includes(unpunctuated))
+    ) return true;
 
-    if (split_answer.flat().some(s =>
-        levDist(s, unpunctuated) / s.length >= THRESHOLD
-    )) {
-        // tell the user there's a typo
+    if (typo) return false;
+
+    if (split_answer.flat().some(s => {
+        let ans = levDist(remove_punctuation(s), unpunctuated) /
+            remove_punctuation(s).length;
+        console.log(ans);
+        return ans <= THRESHOLD;
+    })) {
+        textbox.value = value;
+        typo_p.innerHTML = `<span class="orange">Typo?</span> Try again.`;
         return undefined;
     }
 
     return false;
 }
 
+function check_input_classic() {
+    let result = check_input(textbox.value);
+
+    if (result === undefined) return;
+
+    if (OPTIONS["all"]) {
+        // coming soon...
+    } else {
+        textbox.classList.remove("correct");
+        textbox.classList.remove("wrong");
+        textbox.offsetWidth;
+        if (result) {
+            correct++;
+            textbox.classList.add("correct");
+            document.getElementById("typo-text").innerHTML = `
+                <span class="green">Correct!</span>
+            `;
+        } else {
+            wrong++;
+            textbox.classList.add("wrong");
+            document.getElementById("typo-text").innerHTML = `
+                <span class="red">Wrong:</span>
+                ${answer}
+            `;
+        }
+        new_question();
+    }
+    update_bar_text();
+}
+
 function folders_start_classic(terms) {
     full_terms_list = [...terms];
     randomised_terms = random_shuffle(terms);
 
     let classic_div = document.createElement("div");
     classic_div.innerHTML = `
         <div id="progress-bar-div">
-            <div id="progress-bar-container"></div>
+            <div id="progress-bar-container"><div id="progress-bar"></div></div>
             <span id="progress-bar-text">0/0 (0.00%)</span>
         </div>
         <h1 id="classic-question">
+            <button class="start-button" id="skip-button">Skip &rarr;</button>
             <span id="classic-question-text"></span>
             <button class="start-button" id="finish-button">Finish!</button>
         </h1>
+        <div id="small-screen-button-row">
+            <button class="start-button" id="skip-button2">Skip &rarr;</button>
+            <button class="start-button" id="finish-button2">Finish!</button>
+        </div>
         <input type="text" id="classic-input"
             placeholder="Type the definition here..."
             autocomplete="off" autocorrect="off"
             spellcheck="false" />
+        <p id="typo-text">&nbsp;</p>
     `;
     classic_div.id = "classic-div";
     document.getElementById("content")
         .insertBefore(classic_div, document.getElementById("margin"));
 
     textbox = document.getElementById("classic-input");
-    textbox.focus();
+
+    document.getElementById("skip-button").addEventListener("click", () =>
+        (textbox.value = "") || check_input_classic()
+    );
+
+    document.getElementById("skip-button2").addEventListener("click", () =>
+        (textbox.value = "") || check_input_classic()
+    );
 
     textbox.addEventListener("keyup", ({ key }) => {
         if (key === "Enter") {
-            console.log(check_input_classic());
+            check_input_classic();
         }
     });
 

diff --git a/styles/folders.css b/styles/folders.css
@@ -261,7 +261,7 @@ div#match-div {
 
         div.match-text-div.done {
             display: flex;
-            animation: correct 500ms forwards;
+            animation: correctMatch 500ms forwards;
             padding: 0px;
             max-height: calc((100vh - 200px) / 6);
 
@@ -272,7 +272,7 @@ div#match-div {
         }
 
         div.match-text-div.wrong {
-            animation: wrong 500ms;
+            animation: wrongMatch 500ms;
         }
     }
 }
@@ -293,9 +293,15 @@ div#classic-div {
         div#progress-bar-container {
             box-sizing: border-box;
             width: calc(100% - 200px);
-            border: 2px solid;
+            /* border: 2px solid; */
             border-radius: 12.5px;
-            background: white;
+            background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
+
+            div#progress-bar {
+                float: right;
+                background-color: var(--other-colour);
+                width: 100%;
+            }
         }
 
         span#progress-bar-text {
@@ -314,6 +320,14 @@ div#classic-div {
         padding: 5px;
     }
 
+    input#classic-input.correct {
+        animation: correctClassic 500ms;
+    }
+
+    input#classic-input.wrong {
+        animation: wrongClassic 500ms;
+    }
+
     h1#classic-question {
         text-align: center;
         height: 48px;
@@ -328,13 +342,48 @@ div#classic-div {
         }
 
         button#finish-button {
-            float: right;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+            margin: 0px;
+        }
+
+        button#skip-button {
             position: relative;
             top: 50%;
             transform: translateY(-50%);
             margin: 0px;
         }
     }
+
+    button#finish-button, button#finish-button2 {
+        float: right;
+    }
+
+    button#skip-button, button#skip-button2 {
+        float: left;
+    }
+
+    div#small-screen-button-row {
+        display: none;
+    }
+
+    p#typo-text {
+        text-align: center;
+        font-style: italic;
+
+        span.orange {
+            color: orange;
+        }
+
+        span.green {
+            color: #50c878;
+        }
+
+        span.red {
+            color: #ed4337;
+        }
+    }
 }
 
 @media (max-width: 999px) {
@@ -369,6 +418,19 @@ div#classic-div {
     div.match-line-div {
         min-height: 50px;
     }
+
+    div#classic-div h1#classic-question {
+        margin: 20px 0px;
+    }
+
+    div#small-screen-button-row {
+        display: block;
+        margin-bottom: 20px;
+    }
+
+    button#finish-button, button#skip-button {
+        display: none;
+    }
 }
 
 @media (hover: none) {
@@ -378,6 +440,8 @@ div#classic-div {
 }
 
 body.light-theme {
+    --green: #50c878
+
     div.folders-flexbox {
         border-color: #0093cb;
     }
@@ -437,6 +501,8 @@ body.light-theme {
 }
 
 body.dark-theme {
+    --green: green;
+
     div.folders-flexbox {
         border-color: #2a8c8c;
     }
@@ -532,7 +598,6 @@ body.dark-theme {
 
     div#classic-div {
         div#progress-bar-div div#progress-bar-container {
-            background: #111111;
             --other-colour: #111111;
         }
 
@@ -544,20 +609,38 @@ body.dark-theme {
     }
 }
 
-@keyframes correct {
+@keyframes correctMatch {
     50% {
-        background-color: #50c878;
+        background-color: var(--green);
     }
     100% {
         background-color: darkgray;
     }
 }
 
-@keyframes wrong {
+@keyframes wrongMatch {
     50% {
         background-color: #ed4337;
     }
     100% {
         background-color: initial;
     }
+}
+
+@keyframes correctClassic {
+    0% {
+        background-color: var(--green);
+    }
+    100% {
+        background-color: initial;
+    }
+}
+
+@keyframes wrongClassic {
+    0% {
+        background-color: #ed4337;
+    }
+    100% {
+        background-color: initial;
+    }
 }