save quiz state for chosen categories

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

@@ -72,7 +72,12 @@
       <summary>🧐 Quiz options</summary>
       <nav v-if="vCats.length > 1">
         <label v-for="c in vCats" :key="c">
-          <input type="checkbox" :name="c" checked @change="updateCats(c)" />
+          <input
+            type="checkbox"
+            :name="c"
+            :checked="quizState.vChosenCats.includes(c)"
+            @change="updateCats(c)"
+          />
           {{ c.replace(/_/g, " ") }}
         </label>
       </nav>
@@ -127,7 +132,6 @@ const { fmKey = "vocabulary", category } = defineProps<{
 }>();
 
 const vCats = ref<string[]>([]);
-const vChosenCats = ref<string[]>([]);
 const vList = ref<IVoc[]>([]);
 const vListOriginalIndex = ref<{ s: IVoc; k: number }[]>([]);
 const vIndex = ref(-1);
@@ -137,6 +141,7 @@ const isEdit = ref(false);
 const vEditContent = ref("");
 
 const quizState = reactive({
+  vChosenCats: [] as string[],
   isAutoplayAudio: true,
   isKoFirst: true,
 });
@@ -202,7 +207,9 @@ if (category) {
   }
 }
 
-vChosenCats.value = [...vCats.value];
+if (!quizState.vChosenCats.some((c) => vCats.value.includes(c))) {
+  quizState.vChosenCats = [...vCats.value];
+}
 
 watch(
   () => quizState.isKoFirst,
@@ -234,7 +241,7 @@ function makeVList() {
   });
 
   const newVList = Object.entries(vocabulary)
-    .filter(([k]) => vChosenCats.value.includes(k))
+    .filter(([k]) => quizState.vChosenCats.includes(k))
     .flatMap(([, vs]) => vs);
 
   vListOriginalIndex.value = newVList.map((s) => ({
@@ -309,14 +316,18 @@ function mark(isRight: boolean) {
 }
 
 function updateCats(cat: string) {
-  const i = vChosenCats.value.indexOf(cat);
+  const i = quizState.vChosenCats.indexOf(cat);
   if (i === -1) {
-    vChosenCats.value = [...vChosenCats.value, cat];
+    quizState.vChosenCats = [...quizState.vChosenCats, cat];
   } else {
-    vChosenCats.value = [...vChosenCats.value.filter((_, j) => j !== i)];
+    quizState.vChosenCats = [
+      ...quizState.vChosenCats.filter((_, j) => j !== i),
+    ];
   }
 
   makeVList();
+
+  saveQuizState();
 }
 
 async function onVContentSave() {