quiz component

.gitignore

@@ -34,3 +34,4 @@ Temporary Items
 
 node_modules
 .vitepress/cache
+/dev-dist/

.vitepress/config.mts

@@ -1,4 +1,5 @@
 import { defineConfig } from "vitepress";
+import { VitePWA } from "vite-plugin-pwa";
 
 export default defineConfig({
   lang: "zh-CN",
@@ -10,6 +11,9 @@ export default defineConfig({
     },
   },
   vite: {
+    plugins: [
+      VitePWA({ registerType: "autoUpdate", devOptions: { enabled: true } }),
+    ],
     server: {
       port: 50156,
     },

.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>

.vitepress/theme/index.ts

@@ -0,0 +1,11 @@
+import type { Theme } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import SentenceQuiz from "./components/SentenceQuiz.vue";
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    // register your custom global components
+    app.component("SentenceQuiz", SentenceQuiz);
+  },
+} satisfies Theme;

_post/grammar/allsetlearning/C1/倒.md

@@ -1,24 +1,43 @@
 # Advanced usages of the contrary "倒"
 
+<SentenceQuiz>
+
+- 说 得 _倒_ 容易，那 你 来 ！
+  - It's easy for you to just say it. You should give it a try!
+- 你 想 得 _倒_ 美 ！不 工作 还 想 拿 工资 ？
+  - You must be talking when you sleep. You want to get paid without doing your job?
+- 你 想 得 _倒_ 简单 ！怎么 可能 ？
+  - What you thought is too simple! How could that be possible?
+- 这 个 小 女孩 _倒_ 挺 勇敢 的 。
+  - This little girl is quite brave.
+- 你 _倒_ 蛮 会 说话 的 。
+  - You're pretty good at talking.
+- 你们 都 说 这个 菜 太辣了 ，我 _倒_ 不 觉得 。
+  - You all said this dish is spicy, but I disagree.
+- 别人 都 说 他 跟 她 结婚 是 为了 钱 ，我 _倒_ 不 这么 看 。
+  - A lot of people think that he married her because of her money, but I don't think so.
+- 很 多 人 认为 钱 是 最 重要 的 ，我 _倒_ 不 这么 想 。
+  - A lot of people think that money is the most important, but I don't think so.
+- 你 _倒是_ 说话 呀 ！
+  - Please say something!
+- 你 _倒是_ 说 呀 ！
+  - Please tell me!
+- 你 _倒是_ 走 啊 ！
+  - Walk with me, please!
+- 你们 _倒是_ 签 啊 ！
+  - Please sign it! (Why are you hesitating?)
+
+</SentenceQuiz>
+
+<details>
+<summary>TOC</summary>
+
 (Redirected from [ASGXXP6M](https://resources.allsetlearning.com/gramwiki/?title=ASGXXP6M&redirect=no))
 
-[![](https://resources.allsetlearning.com/gramwiki/images/silk/link.png)](https://resources.allsetlearning.com/chinese/grammar/ASGXXP6M)
-
-- Level
-
-[C1](https://resources.allsetlearning.com/chinese/grammar/C1_grammar_points) / [HSK6](https://resources.allsetlearning.com/chinese/grammar/HSK6_grammar_points)
-
-- Similar to
-
-- Used for
-
-[Contrasting](https://resources.allsetlearning.com/chinese/grammar/Contrasting), [Expressing attitude](https://resources.allsetlearning.com/chinese/grammar/Expressing_attitude)
-
-- Keywords
-
-[倒](https://resources.allsetlearning.com/chinese/grammar/%E5%80%92)
-
-[![Chinese-grammar-wiki-dao-2.jpg|300x300](https://resources.allsetlearning.com/gramwiki/images/thumb/e/ec/Chinese-grammar-wiki-dao-2.jpg/300px-Chinese-grammar-wiki-dao-2.jpg)](https://resources.allsetlearning.com/chinese/grammar/File:Chinese-grammar-wiki-dao-2.jpg)
+- Level: [C1](https://resources.allsetlearning.com/chinese/grammar/C1_grammar_points) / [HSK6](https://resources.allsetlearning.com/chinese/grammar/HSK6_grammar_points)
+- Similar to:
+- Used for: [Contrasting](https://resources.allsetlearning.com/chinese/grammar/Contrasting), [Expressing attitude](https://resources.allsetlearning.com/chinese/grammar/Expressing_attitude)
+- Keywords: [倒](https://resources.allsetlearning.com/chinese/grammar/%E5%80%92)
 
 ## Contents
 
@@ -34,6 +53,8 @@
 - [4 Sources and further reading](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Sources_and_further_reading)
   - [4.1 Books](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Books)
 
+</details>
+
 ## Indicating A Rebuking Tone with 倒
 
 When using 倒 this way, link it together with a 得.When using this, usually the speaker has a rebuking tone. It's like saying "what you're saying is the opposite." In other words, something is not as said.

package.json

@@ -11,6 +11,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "vitepress": "^1.6.4"
+    "vitepress": "^1.6.4",
+    "vue": "^3.5.30"
+  },
+  "devDependencies": {
+    "vite-plugin-pwa": "^1.2.0"
   }
 }