quiz component

.vitepress/theme/components/SentenceQuiz.vue

@@ -0,0 +1,59 @@
+<template>
+  <div id="sentence-quiz" ref="main" @click="nextSentence()">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref, useTemplateRef } from "vue";
+
+const mainEl = useTemplateRef("main");
+const sentences = ref<string[]>([]);
+const i_sentences = ref(NaN);
+
+function nextSentence() {
+  if (!mainEl.value) return;
+
+  const getShuffle = () => {
+    if (sentences.value.length <= 1) {
+      return sentences.value[0] || "";
+    }
+
+    if (++i_sentences.value < sentences.value.length) {
+      return sentences.value[i_sentences.value];
+    }
+
+    sentences.value = sentences.value
+      .map((s) => ({ s, k: Math.random() }))
+      .sort((a, b) => a.k - b.k)
+      .map((a) => a.s);
+
+    i_sentences.value = 0;
+    return sentences.value[i_sentences.value];
+  };
+
+  mainEl.value.innerHTML = getShuffle();
+}
+
+onMounted(() => {
+  nextTick(() => {
+    if (!mainEl.value) return;
+
+    sentences.value = Array.from(
+      mainEl.value.querySelectorAll("#sentence-quiz > ul > li"),
+    ).map((el) => el.innerHTML);
+
+    nextSentence();
+  });
+});
+</script>
+
+<style>
+#sentence-quiz {
+  margin-top: 1em;
+
+  &:hover li {
+    display: none;
+  }
+}
+</style>