quiz EN-KO

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

@@ -14,19 +14,21 @@
       </div>
 
       <div>
-        <span v-if="v.audio">
+        <span :class="isKoFirst ? '' : 'spoiler'">
-          {{ v.ko }}
+          <span v-if="v.audio">
-          <AudioButton :src="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,6 +38,10 @@
           </TTS>
         </summary>
         <span>{{ example.en }}</span>
+
+        <blockquote v-if="v.notes">
+          {{ v.notes }}
+        </blockquote>
       </details>
     </nav>
     <details :class="$style.options">
@@ -47,11 +53,25 @@
         </label>
       </nav>
       <nav>
+        <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="vSentAutoplayAudio"
+            v-model="isSentAutoplayAudio"
           />
           autoplay sentence audio
         </label>
@@ -62,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");
@@ -101,6 +123,10 @@ vCats.value = Object.keys(vocabulary);
 vChosenCats.value = [...vCats.value];
 makeVList();
 
+watch(isKoFirst, () => {
+  makeVList();
+});
+
 function makeVList() {
   nextTick(() => {
     if (sentenceDetails.value) {
@@ -127,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) {
@@ -179,8 +205,62 @@ function updateCats(cat: string) {
 }
 
 .options {
-  label + label {
+  * + 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>