move old contents in

docs/.vitepress/theme/components/SentenceQuiz.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    id="sentence-quiz"
+    :class="$style.root"
+    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<number[]>([]);
+const i_sentences = ref(NaN);
+
+function nextSentence() {
+  if (!mainEl.value) return;
+
+  const getShuffle = () => {
+    if (sentences.value.length <= 1) {
+      return 0;
+    }
+
+    if (++i_sentences.value < sentences.value.length) {
+      return i_sentences.value;
+    }
+
+    sentences.value = sentences.value
+      .map((s) => ({ s, k: Math.random() }))
+      .sort((a, b) => a.k - b.k)
+      .map((a) => a.s);
+
+    return 0;
+  };
+
+  i_sentences.value = getShuffle();
+
+  mainEl.value.querySelectorAll("#sentence-quiz > ul > li").forEach((el, i) => {
+    if (!(el instanceof HTMLElement)) return;
+    el.style.display = i === i_sentences.value ? "" : "none";
+  });
+}
+
+onMounted(() => {
+  nextTick(() => {
+    if (!mainEl.value) return;
+
+    sentences.value = Array.from(
+      mainEl.value.querySelectorAll("#sentence-quiz > ul > li"),
+    ).map((el, i) => i);
+
+    nextSentence();
+  });
+});
+</script>
+
+<style module>
+.root {
+  margin-top: 1em;
+
+  &:hover li li {
+    display: none;
+  }
+}
+</style>