lesson 2 quiz

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

@@ -111,6 +111,7 @@ const { fmKey = "vocabulary" } = defineProps<{
 const vCats = ref<string[]>([]);
 const vChosenCats = ref<string[]>([]);
 const vList = ref<IVoc[]>([]);
+const vListOriginalIndex = ref<{ s: IVoc; k: number }[]>([]);
 const vIndex = ref(-1);
 const exIndex = ref(0);
 
@@ -172,11 +173,16 @@ function makeVList() {
     }
   });
 
-  vList.value = Object.entries(vocabulary)
+  const newVList = Object.entries(vocabulary)
     .filter(([k]) => vChosenCats.value.includes(k))
-    .flatMap(([, v]) => v);
-  vList.value = vList.value
-    .map((s) => ({ s, k: Math.random() }))
+    .flatMap(([, vs]) => vs);
+
+  vListOriginalIndex.value = newVList.map((s) => ({
+    s,
+    k: Math.random(),
+  }));
+
+  vList.value = vListOriginalIndex.value
     .sort((a, b) => a.k - b.k)
     .map((a) => a.s);
 
@@ -302,6 +308,7 @@ function onModalClickOutside(ev: MouseEvent) {
 
 onMounted(async () => {
   document.addEventListener("click", onModalClickOutside);
+  makeVList();
 
   if (supabase) {
     await supabase
@@ -333,7 +340,17 @@ onMounted(async () => {
       });
   }
 
-  makeVList();
+  const newVList = Object.entries(vocabulary)
+    .filter(([k]) => vChosenCats.value.includes(k))
+    .flatMap(([, vs]) => vs);
+
+  vList.value = vListOriginalIndex.value
+    .map((o, i) => {
+      o.s = newVList[i] || o.s;
+      return o;
+    })
+    .sort((a, b) => a.k - b.k)
+    .map((o) => o.s);
 });
 
 onBeforeUnmount(() => {