quiz EN-KO

docs/.vitepress/theme/components/VocabQuiz.vue

@@ -14,19 +14,21 @@
       </div>
 
       <div>
-        <span v-if="v.audio">
-          {{ v.ko }}
-          <AudioButton :src="v.audio" />
+        <span :class="isKoFirst ? '' : 'spoiler'">
+          <span v-if="v.audio">
+            {{ v.ko }}
+            <AudioButton :src="v.audio" />
+          </span>
+          <TTS v-else>
+            {{ v.ko }}
+          </TTS>
         </span>
-        <TTS v-else>
-          {{ v.ko }}
-        </TTS>
         <span>{{ " = " }}</span>
-        <span class="spoiler"> {{ v.en }} </span>
+        <span :class="isKoFirst ? 'spoiler' : ''"> {{ v.en }} </span>
       </div>
 
       <details v-if="example" ref="sdetails">
-        <summary>
+        <summary :class="isKoFirst ? '' : 'spoiler'">
           <span v-if="example.audio">
             {{ example.ko }}
             <AudioButton :src="example.audio" />
@@ -36,23 +38,43 @@
           </TTS>
         </summary>
         <span>{{ example.en }}</span>
+
+        <blockquote v-if="v.notes">
+          {{ v.notes }}
+        </blockquote>
       </details>
     </nav>
-    <details>
+    <details :class="$style.options">
       <summary>Quiz options</summary>
       <nav>
-        <span v-for="c in vCats" :key="c">
+        <label v-for="c in vCats" :key="c">
           <input type="checkbox" :name="c" checked @change="updateCats(c)" />
-          <label :for="c"> {{ c }} </label>
-        </span>
+          {{ c }}
+        </label>
       </nav>
       <nav>
-        <input
-          type="checkbox"
-          name="autoplay-audio"
-          v-model="vSentAutoplayAudio"
-        />
-        <label for="autoplay-audio">autoplay sentence audio</label>
+        <span>
+          <label role="switch">
+            <span>KR</span>
+            <input
+              type="checkbox"
+              name="front"
+              role="switch"
+              v-model="isKoFirst"
+            />
+            <span role="slider"></span>
+            <span>EN</span>
+          </label>
+        </span>
+
+        <label>
+          <input
+            type="checkbox"
+            name="autoplay-audio"
+            v-model="isSentAutoplayAudio"
+          />
+          autoplay sentence audio
+        </label>
       </nav>
     </details>
   </div>
@@ -60,14 +82,16 @@
 
 <script setup lang="ts">
 import { useData } from "vitepress";
-import { computed, nextTick, ref, useTemplateRef } from "vue";
+import { computed, nextTick, ref, useTemplateRef, watch } from "vue";
 import TTS from "./TTS.vue";
 
 const vCats = ref<string[]>([]);
 const vChosenCats = ref<string[]>([]);
 const vList = ref<IVoc[]>([]);
 const vIndex = ref(-1);
-const vSentAutoplayAudio = ref(true);
+
+const isSentAutoplayAudio = ref(true);
+const isKoFirst = ref(true);
 
 const sentenceDetails = useTemplateRef("sdetails");
 const stts = useTemplateRef<InstanceType<typeof TTS>>("stts");
@@ -99,6 +123,10 @@ vCats.value = Object.keys(vocabulary);
 vChosenCats.value = [...vCats.value];
 makeVList();
 
+watch(isKoFirst, () => {
+  makeVList();
+});
+
 function makeVList() {
   nextTick(() => {
     if (sentenceDetails.value) {
@@ -125,7 +153,7 @@ function mark(isRight: boolean) {
       sentenceDetails.value.open = false;
     }
 
-    if (vSentAutoplayAudio.value) {
+    if (isSentAutoplayAudio.value) {
       if (stts.value) {
         stts.value.playAudio();
       } else if (example.value?.audio) {
@@ -138,7 +166,7 @@ function mark(isRight: boolean) {
     vList.value = [...vList.value.filter((_, i) => i !== vIndex.value)];
     vIndex.value = -1;
 
-    if (vList.value.length === 0) {
+    if (vList.value.length <= 1) {
       makeVList();
       return;
     }
@@ -175,4 +203,64 @@ function updateCats(cat: string) {
     margin-inline-start: 1em;
   }
 }
+
+.options {
+  * + label {
+    margin-inline-start: 0.5em;
+  }
+
+  label[role="switch"] {
+    --slider-width: 50px;
+
+    position: relative;
+    display: inline-block;
+    width: calc(var(--slider-width) + 4em);
+    height: 24px;
+
+    input[role="switch"] {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    /* The track */
+    [role="slider"] {
+      position: absolute;
+      cursor: pointer;
+      background-color: #ccc;
+      border-radius: 24px;
+      width: var(--slider-width);
+      height: 100%;
+      transition: background-color 0.3s;
+
+      + span {
+        margin-left: calc(var(--slider-width) + 0.5em);
+      }
+    }
+
+    /* The circular slider */
+    [role="slider"]::before {
+      content: "";
+      position: absolute;
+      height: 20px;
+      width: 20px;
+      left: 4px;
+      bottom: 2px;
+      background-color: rgb(87, 87, 87);
+      border-radius: 50%;
+      transition: transform 0.3s;
+    }
+
+    /* Toggled state */
+    input:not(:checked) {
+      + [role="slider"] {
+        /* background-color: #4caf50; */
+        background-color: gainsboro;
+      }
+      + [role="slider"]::before {
+        transform: translateX(23px);
+      }
+    }
+  }
+}
 </style>