vocab no sentence audio; lesson 9-10 quizzes

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

@@ -15,22 +15,23 @@
 
       <div>
         <span :class="isKoFirst ? '' : 'spoiler'">
-          <SentenceAudio :v="v" lang="ko" />
+          <SentenceAudio :v="v" lang="ko" ref="vaud" />
         </span>
         <span>{{ " = " }}</span>
         <span :class="isKoFirst ? 'spoiler' : ''"> {{ v.en }} </span>
       </div>
 
-      <details v-if="example" ref="sdetails">
+      <details v-if="example || v.notes" ref="sdetails">
         <summary>
           <SentenceAudio
+            v-if="example"
             :v="example"
             lang="ko"
             :spoiler="!isKoFirst"
             ref="saud"
           />
         </summary>
-        <SentenceAudio :v="example" lang="en" />
+        <SentenceAudio v-if="example" :v="example" lang="en" />
         <blockquote
           v-if="v.notes"
           v-html="v.notes"
@@ -79,6 +80,10 @@ import { useData } from "vitepress";
 import { computed, nextTick, ref, useTemplateRef, watch } from "vue";
 import SentenceAudio, { IVoc } from "./SentenceAudio.vue";
 
+const { fmKey = "vocabulary" } = defineProps<{
+  fmKey?: string;
+}>();
+
 const vCats = ref<string[]>([]);
 const vChosenCats = ref<string[]>([]);
 const vList = ref<IVoc[]>([]);
@@ -89,6 +94,7 @@ const isKoFirst = ref(true);
 
 const sentenceDetails = useTemplateRef("sdetails");
 const saud = useTemplateRef<InstanceType<typeof SentenceAudio>>("saud");
+const vaud = useTemplateRef<InstanceType<typeof SentenceAudio>>("vaud");
 
 const v = computed(() => vList.value[vIndex.value]);
 const example = computed(() => {
@@ -100,9 +106,7 @@ const example = computed(() => {
 const MAX_VOC = 5;
 
 const { frontmatter } = useData();
-const { vocabulary } = frontmatter.value as {
-  vocabulary: Record<string, IVoc[]>;
-};
+const vocabulary = frontmatter.value[fmKey] as Record<string, IVoc[]>;
 
 vCats.value = Object.keys(vocabulary);
 vChosenCats.value = [...vCats.value];
@@ -142,6 +146,8 @@ function mark(isRight: boolean) {
       nextTick(() => {
         if (saud.value) {
           saud.value.playAudio();
+        } else if (vaud.value && isKoFirst.value) {
+          vaud.value.playAudio();
         }
       });
     }