spanish-quizzer

commit 17f06ba0dbafb029d1b5bf802aa0a1488f7658a8
parent b8466aee7d278180270f1e9e484f8accc30625e9
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Sat, 27 Mar 2021 13:57:47 -0700

Add quizzer buttons to read prompt and answer

Diffstat:
M
css/quizzer.css
 | 
5
+++++
A
images/sound.svg
 | 
2
++
M
js/quizzer.js
 | 
10
++++++++--
M
service-worker.js
 | 
4
+++-

4 files changed, 18 insertions(+), 3 deletions(-)
diff --git a/css/quizzer.css b/css/quizzer.css
@@ -50,6 +50,11 @@
     background-color: #222426;
 }
 
+/* Audio buttons */
+.quizzerPrompt button.icon img, .quizzerFeedback button.icon img {
+    margin-left: 5px;
+}
+
 /* Buttons */
 .quizzerButtons {
     display: flex;
diff --git a/images/sound.svg b/images/sound.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
+\ No newline at end of file
diff --git a/js/quizzer.js b/js/quizzer.js
@@ -97,10 +97,10 @@ const quizzer = Vue.component("quizzer", {
          * Handles keyup events and implements quizzer keyboard shortcuts
          */
         keyup: function(e) {
-            if (e.keyCode === 13 && e.ctrlKey) {
+            if (e.keyCode === 13 && e.ctrlKey && document.activeElement.tagName !== "BUTTON") {
                 this.Reset();
             }
-            else if (e.keyCode === 13 && !e.ctrlKey) {
+            else if (e.keyCode === 13 && !e.ctrlKey && document.activeElement.tagName !== "BUTTON") {
                 this.Enter();
             }
         },
@@ -336,6 +336,9 @@ const quizzer = Vue.component("quizzer", {
                 <span id="quizzerPrompt" :lang="getLang(prompt[0])" @click="Read(prompt[1], prompt[0]);">
                     {{ settings.promptType === "Audio" ? "Click to hear again" : prompt[1] }}
                 </span>
+                <button class="icon" title="Read prompt" @click="$event.target.parentElement.blur(); Read(prompt[1], prompt[0]);">
+                    <img alt="" src="images/sound.svg">
+                </button>
             </div>
 
             <label class="quizzerInputLabel" for="quizzerInput">{{ prompt[2] }}</label>
@@ -364,6 +367,9 @@ const quizzer = Vue.component("quizzer", {
                             <ins v-if="part.changed">{{ part.value }}</ins><span v-if="!part.changed">{{ part.value }}</span>
                         </span>
                     </span>
+                    <button class="icon" title="Read answer" @click="$event.target.parentElement.blur(); Read(prompt[3], prompt[2]);">
+                        <img alt="" src="images/sound.svg">
+                    </button>
                 </span>
                 <span v-if="settings.onMissedPrompt === 'Tell me'">
                     Incorrect.
diff --git a/service-worker.js b/service-worker.js
@@ -1,5 +1,5 @@
 // Initialize constants
-const version = "spanish-quizzer-4";
+const version = "spanish-quizzer-5";
 const resources = [
     "./css/app.css",
     "./css/filtersPage.css",
@@ -17,6 +17,8 @@ const resources = [
     "./images/favicon-512-maskable.png",
     "./images/favicon-512.png",
     "./images/plus.svg",
+    "./images/settings.svg",
+    "./images/sound.svg",
     "./images/trash.svg",
     "./images/x.svg",
     "./js/app.js",