spanish-quizzer

An app to quiz you on Spanish vocabulary and verb conjugations
git clone https://git.ashermorgan.net/spanish-quizzer/
Log | Files | Refs | README
commit 7dd2ca8a6e00fc6a9640377858cabdcbe0289e2a
parent 6dfd175583ad92f34f99c18c8a12379669da7d4c
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Sun,  5 Apr 2020 19:59:32 -0700

Add feature to congratulate user.

Diffstat:

MReference/index.html | 2+-


MSpanish Quizzer.js | 11+++++++++++


MStyles.css | 6+++++-


Mindex.html | 19++++++++++---------


4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/Reference/index.html b/Reference/index.html
@@ -18,7 +18,7 @@
         
         <noscript>
             <br/>
-            <label class="error">You must have JavaScript enabled to run Spanish-Quizzer.</label>
+            <label class="bad">You must have JavaScript enabled to run Spanish-Quizzer.</label>
             <br/>
         </noscript>
         
diff --git a/Spanish Quizzer.js b/Spanish Quizzer.js
@@ -359,9 +359,18 @@ function Reset() {
     // Get prompt
     Term++;
     if (Term == Terms.length) {
+        // The user just finished
         ShuffleTerms();
         Term = 0;
+        
+        // Congradulate user
+        document.getElementById("quizzerFeedback").classList.remove("bad");
+        document.getElementById("quizzerFeedback").classList.add("good");
+        document.getElementById("quizzerFeedback").textContent = "Congratulations! You made it back to the beginning!";
+        document.getElementById("quizzerFeedback").hidden = false;
     }
+
+    // Update progress
     document.getElementById("quizzerProgress").textContent = `${Term} / ${Terms.length}`;
 
     // Set prompt
@@ -419,6 +428,8 @@ function Check() {
     // Give user feedback
     if (!correct) {
         // Responce was incorrect
+        document.getElementById("quizzerFeedback").classList.remove("good");
+        document.getElementById("quizzerFeedback").classList.add("bad");
         document.getElementById("quizzerFeedback").textContent = `The correct answer is ${Terms[Term][3].toLowerCase()}.`;
         
         // Show and hide elements
diff --git a/Styles.css b/Styles.css
@@ -55,7 +55,11 @@ button:disabled {
     font-weight: normal;
 }
 
-.error {
+.good {
+	color: green;
+}
+
+.bad {
 	color: red;
 }
 
diff --git a/index.html b/index.html
@@ -12,13 +12,14 @@
     </head>
 
     <body onload="Load()" onbeforeunload="UpdateLocalStorage()">
-        <div>
-            <label id="title" onclick="Reload()">Spanish-Quizzer v2.2.0</label>
-            <noscript>
-                <br/>
-                <label class="error">You must have JavaScript enabled to run Spanish-Quizzer.</label>
-            </noscript>
-        </div>
+        <label id="title" onclick="Reload()">Spanish-Quizzer v2.2.0</label>
+        <br/>
+
+        <noscript>
+            <br/>
+            <label class="bad">You must have JavaScript enabled to run Spanish-Quizzer.</label>
+            <br/>
+        </noscript>
 
         <div id="settings">
             <template id="settingsSetTemplate">
@@ -100,7 +101,7 @@
             <div class="centered">
                 <button id="settingsStart" onclick="Start()">Start</button>
                 <br/>
-                <label id="settingsError" class="error"></label>
+                <label id="settingsError" class="bad"></label>
             </div>
         </div>
         
@@ -116,7 +117,7 @@
             <button id="quizzerSubmit" onclick="Check()">Submit</button>
             <br/>
             <br/>
-            <label id="quizzerFeedback" class="error"></label>
+            <label id="quizzerFeedback" class="bad"></label>
             <button id="quizzerContinue" onclick="Reset()">Continue</button>
         </div>