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() {

docs/howtostudykorean/unit-1/14-passive.md

@@ -332,7 +332,7 @@ vocabulary:
       notes: |
         <p>To indicate that you went from the sitting/lying down position to standing, the word "일어나다" (to get up) should be used.</p>
       examples:
-        - ko: 우리는 한 시간 동안 줄에 **서** **있었어요**
+        - ko: 우리는 한 시간 동안 줄에 **서 있었어요**
           en: We were **standing** in the line for an hour
         - ko: 저는 줄에 **서**서 순서를 기다렸어요
           en: I **stood** in line and waited for my turn
@@ -351,7 +351,7 @@ vocabulary:
       en: to be turned on
       notes: The active form of this word is "켜다" (to turn on)
       examples:
-        - ko: 컴퓨터가 **켜져** **있어요**
+        - ko: 컴퓨터가 **켜져 있어요**
           en: The computer is **(in the state of being) on**
 
     - ko: 꺼지다
@@ -359,8 +359,8 @@ vocabulary:
       en: to be turned off
       notes: The active form of this word is "끄다" (to turn off)
       examples:
-        - ko: TV가 **꺼져** **있어요**
-          en: The TV is **(in the state of being)** **off**
+        - ko: TV가 **꺼져 있어요**
+          en: The TV is **(in the state of being) off**
 
     - ko: 나다
       audio: https://www.howtostudykorean.com/wp-content/uploads/2015/11/Lesson14v30.mp3
@@ -388,7 +388,7 @@ vocabulary:
       examples:
         - ko: 저의 여자 친구는 저한테 **화(가) 났어요**
           en: My girlfriend was **mad** at me
-        - ko: 선생님을 존경하지 않으면 나는 **화가** **날** **거야**
+        - ko: 선생님을 존경하지 않으면 나는 **화가 날 거야**
           en: If you don't respect your teacher, I will be **mad**
 
     - ko: 짜증나다
@@ -407,9 +407,9 @@ vocabulary:
         <p>The pronunciation of this word is closer to "노이다"</p>
         <p>The active form of this word is "놓다" (to put down)</p>
       examples:
-        - ko: 펜이 탁자에 **놓여** **있어요**
-          en: The pen is **on** the table (**lying** **on** the table)
-        - ko: 책상에 책 몇 권이 **놓여** **있어요**
+        - ko: 펜이 탁자에 **놓여 있어요**
+          en: The pen is **on** the table (**lying on** the table)
+        - ko: 책상에 책 몇 권이 **놓여 있어요**
           en: There are some books **on** the desk
 
     - ko: 열리다
@@ -417,7 +417,7 @@ vocabulary:
       en: to be open
       notes: The active form of this word is "열다" (to open)
       examples:
-        - ko: 문이 **열려** **있어요**
+        - ko: 문이 **열려 있어요**
           en: The door is **open(ed)**
         - ko: 문이 **열려** 있을 것 같아요
           en: The door will probably be **open**
@@ -1166,7 +1166,7 @@ To indicate that you went from <span class="md spoiler">the sitting/lying down p
 
 Examples:
 
-- 우리는 한 시간 동안 줄에 **서** **있었어요** = <span class="md spoiler">We were **standing** in the line for an hour</span>
+- 우리는 한 시간 동안 줄에 **서 있었어요** = <span class="md spoiler">We were **standing** in the line for an hour</span>
 - 저는 줄에 **서**서 순서를 기다렸어요 = <span class="md spoiler">I **stood** in line and waited for my turn</span>
 
 </Details>
@@ -1193,7 +1193,7 @@ The active form of this word is “<TTS>켜다</TTS>” (<span class="md spoiler
 
 Example:
 
-- 컴퓨터가 **켜져** **있어요** = <span class="md spoiler">The computer is **(in the state of being) on**</span>
+- 컴퓨터가 **켜져 있어요** = <span class="md spoiler">The computer is **(in the state of being) on**</span>
 
 </Details>
 
@@ -1205,7 +1205,7 @@ The active form of this word is “<TTS>끄다</TTS>” (<span class="md spoiler
 
 Example:
 
-- TV가 **꺼져** **있어요** = <span class="md spoiler">The TV is **(in the state of being)** **off**</span>
+- TV가 **꺼져 있어요** = <span class="md spoiler">The TV is **(in the state of being) off**</span>
 
 </Details>
 
@@ -1252,7 +1252,7 @@ Example:
 Example:
 
 - 저의 여자 친구는 저한테 **화(가) 났어요** = <span class="md spoiler">My girlfriend was **mad** at me</span>
-- 선생님을 존경하지 않으면 나는 **화가** **날** **거야** = <span class="md spoiler">If you don’t respect your teacher, I will be **mad**</span>
+- 선생님을 존경하지 않으면 나는 **화가 날 거야** = <span class="md spoiler">If you don’t respect your teacher, I will be **mad**</span>
 
 </Details>
 
@@ -1263,8 +1263,7 @@ Example:
 Example:
 
 - 저는 그가 너무 **짜증나요** = <span class="md spoiler">I am **annoyed** at him</span>
-- 수압이 너무 낮아서 우리 집에서 샤워를 하면 **짜증이 나요**
-  - <span class="md spoiler">It is **annoying** showering at my house because the water pressure is too low</span>
+- 수압이 너무 낮아서 우리 집에서 샤워를 하면 **짜증이 나요** = <span class="md spoiler">It is **annoying** showering at my house because the water pressure is too low</span>
 
 </Details>
 
@@ -1282,8 +1281,8 @@ Common Usages:
 
 Examples:
 
-- 펜이 탁자에 **놓여** **있어요** = <span class="md spoiler">The pen is **on** the table (**lying** **on** the table)</span>
-- 책상에 책 몇 권이 **놓여** **있어요** = <span class="md spoiler">There are some books **on** the desk</span>
+- 펜이 탁자에 **놓여 있어요** = <span class="md spoiler">The pen is **on** the table (**lying on** the table)</span>
+- 책상에 책 몇 권이 **놓여 있어요** = <span class="md spoiler">There are some books **on** the desk</span>
 
 </Details>
 
@@ -1299,7 +1298,7 @@ Common Usages:
 
 Examples:
 
-- 문이 **열려** **있어요** = <span class="md spoiler">The door is **open(ed)**</span>
+- 문이 **열려 있어요** = <span class="md spoiler">The door is **open(ed)**</span>
 - 문이 **열려** 있을 것 같아요 = <span class="md spoiler">The door will probably be **open**</span>
 
 </Details>