spanish-quizzer

commit 9a4ffcf7c968ab91741e0843e8fc894d9e9f61c9
parent 5c0dd6a3fac6842974403380267ab38d4ba71079
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Sun,  5 Apr 2020 09:14:47 -0700

Implement prompt type option.

Diffstat:
M
Spanish Quizzer.js
 | 
57
++++++++++++++++++++++++++++++++++++++++++++-------------
M
Styles.css
 | 
7
+++++++
M
index.html
 | 
10
+++++++---

3 files changed, 58 insertions(+), 16 deletions(-)
diff --git a/Spanish Quizzer.js b/Spanish Quizzer.js
@@ -13,8 +13,8 @@ function Load() {
         document.body.classList.toggle("dark");
         document.getElementById("settingsDarkMode").checked = true;
     }
-    if (localStorage.getItem("readPrompt") == "true") {
-        document.getElementById("settingsReadPrompt").checked = true;
+    if (localStorage.getItem("PromptType")) {
+        document.getElementById("settingsPromptType").value = localStorage.getItem("PromptType");
     }
     if (localStorage.getItem("repeatPrompt")) {
         document.getElementById("settingsRepeatPrompts").value = localStorage.getItem("repeatPrompt");
@@ -251,8 +251,9 @@ function settingsSetChanged(setName) {
 
 // Update local storage
 function UpdateLocalStorage() {
+    localStorage.clear();
     localStorage.setItem("darkMode", document.getElementById("settingsDarkMode").checked);
-    localStorage.setItem("readPrompt", document.getElementById("settingsReadPrompt").checked);
+    localStorage.setItem("PromptType", document.getElementById("settingsPromptType").value);
     localStorage.setItem("repeatPrompt", document.getElementById("settingsRepeatPrompts").value);
 }
 
@@ -277,6 +278,30 @@ function ShuffleTerms() {
 
 
 
+// Reads a peice of text
+function Read(text, label)
+{
+    var msg = new SpeechSynthesisUtterance(text);
+    if (label.toLowerCase().includes("english")) {
+        msg.lang = 'en';
+    }
+    else if (label.toLowerCase().includes("spanish")){
+        msg.lang = 'es';
+    }
+    window.speechSynthesis.speak(msg);
+}
+
+
+
+// Read the prompt if audio is enabled
+function quizzerPromptClicked() {
+    if (document.getElementById("settingsPromptType").value != "Text") {
+        Read(Terms[Term][1], Terms[Term][0]);
+    }
+}
+
+
+
 // Start the quizzer
 function Start() {
     // Filter and load Sets into Terms
@@ -304,6 +329,14 @@ function Start() {
         return;
     }
 
+    // Configure prompt audio
+    if (document.getElementById("settingsPromptType").value != "Text") {
+        document.getElementById("quizzerPrompt").classList.add("audio");
+    }
+    else {
+        document.getElementById("quizzerPrompt").classList.remove("audio");
+    }
+
     // Show and hide elements
     document.getElementById("settings").hidden = true;
     document.getElementById("quizzer").hidden = false;
@@ -333,22 +366,20 @@ function Reset() {
 
     // Set prompt
     document.getElementById("quizzerPromptType").textContent = `${Terms[Term][0]}: `;
-    document.getElementById("quizzerPrompt").textContent = Terms[Term][1];
+    if (document.getElementById("settingsPromptType").value != "Audio") {
+        document.getElementById("quizzerPrompt").textContent = Terms[Term][1];
+    }
+    else {
+        document.getElementById("quizzerPrompt").textContent = "Click to hear again";
+    }
     document.getElementById("quizzerInputType").textContent = `${Terms[Term][2]}: `;
 
     // Reset responce
     document.getElementById("quizzerInput").value = "";
 
     // Read prompt
-    if (document.getElementById("settingsReadPrompt").checked) {
-        var msg = new SpeechSynthesisUtterance(Terms[Term][1]);
-        if (Terms[Term][0].includes("English")) {
-            msg.lang = 'en';
-        }
-        else if (Terms[Term][0].includes("Spanish")){
-            msg.lang = 'es';
-        }
-        window.speechSynthesis.speak(msg);
+    if (document.getElementById("settingsPromptType").value != "Text") {
+        Read(Terms[Term][1], Terms[Term][0]);
     }
 }
 
diff --git a/Styles.css b/Styles.css
@@ -60,6 +60,13 @@ button:disabled {
 
 
 
+/******** Quizzer styles ********/
+#quizzerPrompt.audio {
+    cursor: pointer;
+}
+
+
+
 /******** Other styles ********/
 #title {
     font-size: 25px;
diff --git a/index.html b/index.html
@@ -77,8 +77,12 @@
                 <input type="checkbox" id="settingsDarkMode" onchange="document.body.classList.toggle('dark');">
                 <label class="text" for="settingsDarkMode">Dark Mode</label>
                 <br/>
-                <input type="checkbox" id="settingsReadPrompt">
-                <label class="text" for="settingsReadPrompt">Read Prompt</label>
+                <label class="text" for="settingsPromptType">Prompt type</label>
+                <select id="settingsPromptType">
+                    <option>Text</option>
+                    <option>Audio</option>
+                    <option>Both</option>
+                </select>
                 <br/>
                 <label class="text" for="settingsRepeatPrompts">Repeat missed prompts</label>
                 <select id="settingsRepeatPrompts">
@@ -99,7 +103,7 @@
             <label id="quizzerProgress" class="label"></label>
             <br/>
             <label id="quizzerPromptType" class="label"></label>
-            <label id="quizzerPrompt" class="text"></label>
+            <label id="quizzerPrompt" class="text" onclick="quizzerPromptClicked()"></label>
             <br/>
             <label id="quizzerInputType" class="label"></label>
             <input id="quizzerInput" type="text" autocomplete="off" spellcheck="false" autocorrect="off">