From 045f62d951df6450e879b2d1bf91c7c33580b5f6 Mon Sep 17 00:00:00 2001
From: polv <polv@polv.cc>
Date: Sat, 18 Jul 2026 23:29:19 +0700
Subject: [PATCH] lesson 13 grammar sentence quiz + adapt component

---
 .../.vitepress/theme/components/VocabQuiz.vue |  56 ++++++---
 docs/howtostudykorean/unit-1/13-and-with.md   | 108 ++++++++++++++++++
 2 files changed, 146 insertions(+), 18 deletions(-)

diff --git a/docs/.vitepress/theme/components/VocabQuiz.vue b/docs/.vitepress/theme/components/VocabQuiz.vue
index a49dfba..66f5c49 100644
--- a/docs/.vitepress/theme/components/VocabQuiz.vue
+++ b/docs/.vitepress/theme/components/VocabQuiz.vue
@@ -9,7 +9,11 @@
             <button type="button" @click="onVContentSave()">Save</button>
             <button type="button" @click="isEdit = false">×</button>
           </nav>
-          <textarea v-model="vEditContent" spellcheck="false"></textarea>
+          <textarea
+            v-model="vEditContent"
+            spellcheck="false"
+            ref="textarea"
+          ></textarea>
         </div>
       </Teleport>
 
@@ -31,7 +35,9 @@
           <SentenceAudio :v="v" lang="ko" ref="vaud" />
         </span>
         <span>{{ " = " }}</span>
-        <span :class="isKoFirst ? 'spoiler' : ''"> {{ v.en }} </span>
+        <span :class="isKoFirst ? 'spoiler' : ''">
+          <SentenceAudio :v="v" lang="en" />
+        </span>
       </div>
 
       <details v-if="example || v.notes" ref="sdetails">
@@ -53,8 +59,8 @@
       </details>
     </nav>
     <details :class="$style.options">
-      <summary>Quiz options</summary>
-      <nav>
+      <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)" />
           {{ c.replace(/_/g, " ") }}
@@ -104,8 +110,9 @@ import SentenceAudio from "./SentenceAudio.vue";
 import { supabase } from "../supabase.ts";
 import { IVoc, Voc } from "../types.ts";
 
-const { fmKey = "vocabulary" } = defineProps<{
+const { fmKey = "vocabulary", category } = defineProps<{
   fmKey?: string;
+  category?: string;
 }>();
 
 const vCats = ref<string[]>([]);
@@ -122,6 +129,8 @@ const isAutoplayAudio = ref(true);
 const isKoFirst = ref(true);
 
 const modalRef = useTemplateRef("modal");
+const textareaRef = useTemplateRef("textarea");
+
 const sentenceDetails = useTemplateRef("sdetails");
 const saud = useTemplateRef<InstanceType<typeof SentenceAudio>>("saud");
 const vaud = useTemplateRef<InstanceType<typeof SentenceAudio>>("vaud");
@@ -139,15 +148,21 @@ const { frontmatter, page } = useData();
 
 const vocabulary: Record<string, IVoc[]> = {};
 
-for (const fk of fmKey.split(/[, ]+/g)) {
-  for (const [k, vs] of Object.entries(
-    frontmatter.value[fk] as Record<string, IVoc[]>,
-  )) {
-    vocabulary[k] = [...(vocabulary[k] || []), ...vs];
+for (const [k, vs] of Object.entries(
+  frontmatter.value[fmKey] as Record<string, IVoc[]>,
+)) {
+  vocabulary[k] = [...(vocabulary[k] || []), ...vs];
 
-    if (!vCats.value.includes(k)) {
-      vCats.value = [...vCats.value, k];
-    }
+  if (!vCats.value.includes(k)) {
+    vCats.value = [...vCats.value, k];
+  }
+}
+
+if (category) {
+  const vCatsSet = new Set(category.split(/[, ]+/g));
+  const newVCats = vCats.value.filter((c) => vCatsSet.has(c));
+  if (newVCats.length) {
+    vCats.value = newVCats;
   }
 }
 
@@ -161,6 +176,12 @@ watch(isEdit, () => {
   if (isEdit.value) {
     const { ko, ...vContent } = v.value;
     vEditContent.value = yaml.stringify(vContent);
+
+    nextTick(() => {
+      if (textareaRef.value) {
+        textareaRef.value.style.height = textareaRef.value.scrollHeight + "px";
+      }
+    });
   } else {
     vEditContent.value = "";
   }
@@ -265,7 +286,6 @@ async function onVContentSave() {
       vCount.set(v.ko, i + 1);
 
       if (oldV.ko === v.ko && oldV.en === v.en) {
-        // TODO: handling multiple fmKey comma-separated
         key = JSON.stringify([fmKey, k]);
         vKey = vK;
 
@@ -439,10 +459,10 @@ onBeforeUnmount(() => {
 .modal {
   --margin-top: calc(120px + env(safe-area-inset-top));
 
-  position: absolute;
-  top: var(--margin-top);
+  position: fixed;
+  top: 50%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
   width: calc(100vw - 4em);
   max-width: 1000px;
 
@@ -460,7 +480,7 @@ onBeforeUnmount(() => {
 
   textarea {
     width: 100%;
-    height: calc(90vh - var(--margin-top) - env(safe-area-inset-bottom));
+    max-height: calc(90vh - var(--margin-top) - env(safe-area-inset-bottom));
     padding: 1em;
     border-radius: 0 0 0.5em 0.5em;
     font-family: sans-serif;
diff --git a/docs/howtostudykorean/unit-1/13-and-with.md b/docs/howtostudykorean/unit-1/13-and-with.md
index 7f2cad1..357bd08 100644
--- a/docs/howtostudykorean/unit-1/13-and-with.md
+++ b/docs/howtostudykorean/unit-1/13-and-with.md
@@ -440,6 +440,106 @@ vocabulary:
           en: If we want to do this job **together**, we have to cooperate
         - ko: 우리 학교에서 학생들은 역사와 지리를 **같이** 배워요
           en: At our school, students learn history and geography **together**
+
+sentence:
+  and:
+    - ko: 우리는 밥**과** 빵을 팔아요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-1.mp3
+      en: We sell rice **and** bread
+    - ko: 나는 사과**와** 바나나를 샀어
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2017/03/2.mp3
+      en: I bought apples **and** bananas
+
+    - ko: 나는 인천**이랑** 서울에 갈 거야
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-2.mp3
+      en: I will go to Seoul **and** Incheon
+    - ko: 형**하고** 아버지는 영화를 봤어
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2017/03/4.mp3
+      en: My brother **and** dad saw a movie
+    - ko: 저는 약**과** 녹차만 샀어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-3.mp3
+      en: I only bought medicine **and** green tea
+
+  with:
+    - ko: 나는 친구**와** 갔어
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2017/03/7.mp3
+      en: I went **with** my friend
+
+    - ko: 저는 친구**와** 집에 갔어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-4.mp3
+      en: I went home **with** my friend
+    - ko: 나는 아버지**랑** 공원에 갈 거야
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2017/03/9.mp3
+      en: I will go to the park **with** my dad
+    - ko: 선생님은 학생들**과** 박물관에 갔다
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2017/03/10.mp3
+      en: The teacher went to the museum **with** the students
+    - ko: 요즘에 사람들이 친구들**이랑** 매운 음식을 먹지 않아요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-5.mp3
+      en: These days, people don’t eat spicy food **with** their friends
+
+    - ko: 저는 밥을 친구**랑** 저의 어머니**랑** 먹었어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2017/03/12.mp3
+      en: I ate (rice*) **with** my mom **and** my friend
+
+  together:
+    - ko: 우리는 빵을 **같이** 먹었어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-6.mp3
+      en: We ate bread **together**
+    - ko: 우리는 빵을 **함께** 먹었어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-7.mp3
+      en: We ate bread **together**
+
+    - ko: 우리는 집에 **같이** 들어갔어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-8.mp3
+      en: We went into the house **together**
+    - ko: 우리는 집에 **함께** 들어갔어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-9.mp3
+      en: We went into the house **together**
+
+    - ko: 우리는 음악을 **같이** 들었어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-10.mp3
+      en: We listened to music **together**
+    - ko: 우리는 음악을 **함께** 들었어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-11.mp3
+      en: We listened to music **together**
+
+    - ko: 저는 빵을 친구**랑** **같이** 먹었어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-12.mp3
+      en: I ate bread **with** a friend (**together**)
+    - ko: 저는 빵을 친구**와*** **함께** 먹었어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-13.mp3
+      en: I ate bread **with** a friend (**together**)
+
+    - ko: 저는 빵을 친구**랑** 먹었어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-14.mp3
+      en: I ate bread **with** a friend
+
+    - ko: 저는 빵을 친구**와*** 먹었어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-15.mp3
+      en: I ate bread **with** a friend
+
+  with_more:
+    - ko: 저는 녹차를 엄마랑 같이 마셨어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-16.mp3
+      en: I drank green tea with my mom
+    - ko: 저는 엄마랑 유명한 영화를 같이 봤어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-17.mp3
+      en: I saw/watched a famous movie with my mom
+
+    - ko: 저는 선생님과 함께 공부했어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2017/03/25.mp3
+      en: I studied with my teacher
+    - ko: 저는 여자 친구와 함께 영화를 봤어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-18.mp3
+      en: I watched a movie with my girlfriend
+
+    - ko: 나는 친구랑 같이 있어
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-19.mp3
+      en: I’m with my friend
+    - ko: 저는 친구와 집에 함께 있어요
+      audio: https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-20.mp3
+      en: I’m with a friend at home
 ---
 
 # Lesson 13: Korean Particles: and, with, to, from, for, about
@@ -1157,6 +1257,8 @@ In the last lesson, you learned some important Korean particles that you can use
 
 ## Particles (and): ~과/와, ~랑/이랑 and ~하고
 
+<VocabQuiz fm-key="sentence" category="and" />
+
 ~과/와, ~랑/이랑 and ~하고 can all be used interchangeably to mean “and” in Korean.
 
 ~과 and ~와 are the same. ~과 is attached to words ending in <span class="md spoiler">a consonant</span>, ~와 is attached to words ending in <span class="md spoiler">a vowel</span>. Similarly, ~랑 and ~이랑 are the same. ~이랑 is attached to words ending in <span class="md spoiler">a consonant</span>, ~랑 is attached to words ending in <span class="md spoiler">a vowel</span>. ~하고 can be attached to words ending in <span class="md spoiler">a vowel or consonant</span>. These can be added fairly simply to nouns. For example:
@@ -1174,6 +1276,8 @@ Other particles can attach to the construction made by using ~와/과/랑/이랑
 
 ## Particles (with): ~과/와, ~랑/이랑 and ~하고
 
+<VocabQuiz fm-key="sentence" category="with" />
+
 Just when you thought this was going to be an easy lesson! Ha! This sounds crazy to an English speaker, but the same particles are used to mean “and” and “with” in Korean. You can distinguish them purely by the context of the conversation, which sounds like it would be difficult. However, even though you probably think it is difficult, it is always clear (even to a beginner) if the speaker is trying to express the meaning of “and” or “with” because of the sentence structure.
 
 For example, when used to have the meaning of “and,” a noun will always follow 과/와/(이)랑/하고: For example:
@@ -1203,6 +1307,8 @@ Also notice that you can actually use these particles to mean both “and” and
 
 \*\*Korean people often use “_밥_” (rice) to simply mean “food.” It stems from the fact that Korean people eat rice with (almost) every meal – so if you ate, it means that you ate rice. You can say “<TTS class="md">_밥을 먹었어_</TTS>” which can simply mean “I ate.”\*
 
+<VocabQuiz fm-key="sentence" category="together" />
+
 Two adverbs that are commonly used in sentences with “with” are 같이 and 함께. Both of them mean “<span class="md spoiler">together</span>,” and can be used in sentences even if the sentence doesn’t have one of the particles meaning “with” (과/와/랑/이랑/하고). For example:
 
 - 우리는 빵을 같이 먹었어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-6.mp3" /> = <span class="md spoiler">We ate bread together</span>
@@ -1241,6 +1347,8 @@ _Notice that I used_ ~와 _with_ 함께 _instead of_ ~랑*. Just like with the m
 
 _To add an additional level of complexity to this explanation –_ 같이 _is more commonly used than_ 함께 (같이 _is probably one of the most common words in Korean, while_ 함께 _would fall much further down the list). However, when_ 함께 *is used, it is more likely to be used with ~*과/와*. These are just generalizations based on observations of years of speaking with Korean people.*
 
+<VocabQuiz fm-key="sentence" category="with_more" />
+
 More examples:
 
 - 저는 녹차를 엄마랑 같이 마셨어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/03/Lesson-13-sentence-16.mp3" /> = <span class="md spoiler">I drank green tea with my mom</span>