From 2b62c9b9e0535182236d3b1d4fc1d7ceabc03dc7 Mon Sep 17 00:00:00 2001
From: polv <polv@polv.cc>
Date: Mon, 6 Jul 2026 08:30:41 +0700
Subject: [PATCH] quiz clickable label

---
 .../.vitepress/theme/components/VocabQuiz.vue | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/docs/.vitepress/theme/components/VocabQuiz.vue b/docs/.vitepress/theme/components/VocabQuiz.vue
index 8447c9a..da6fffb 100644
--- a/docs/.vitepress/theme/components/VocabQuiz.vue
+++ b/docs/.vitepress/theme/components/VocabQuiz.vue
@@ -38,21 +38,23 @@
         <span>{{ example.en }}</span>
       </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>
+        <label>
+          <input
+            type="checkbox"
+            name="autoplay-audio"
+            v-model="vSentAutoplayAudio"
+          />
+          autoplay sentence audio
+        </label>
       </nav>
     </details>
   </div>
@@ -138,7 +140,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 +177,10 @@ function updateCats(cat: string) {
     margin-inline-start: 1em;
   }
 }
+
+.options {
+  label + label {
+    margin-inline-start: 0.5em;
+  }
+}
 </style>