Split Test component to optimize the use of choices question

docs/.vuepress/components/Option.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="test_choice">
+    <div>{{ numero }}</div>
+    <div class="test_choices" v-if="c && c.length > 0">
+      <div class="test_choice_item" v-for="(d, i) in c" :key="i">
+        <div>({{ options[i] }})&nbsp;</div>
+        <div>{{ d }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    numero: String, // 选项编号
+    c: Array // 选项列表
+  },
+  data: function () {
+    return {
+      options: ['A', 'B', 'C', 'D']
+    };
+  }
+};
+</script>
+
+<style scoped>
+.test_choice {
+  margin-left: 1em;
+  line-height: 1.7;
+}
+
+.test_choices {
+  margin-left: 1em;
+  padding-left: .1em;
+}
+
+.test_choice_item {
+  display: flex;
+}
+</style>

docs/.vuepress/components/Test.vue

@@ -2,47 +2,64 @@
   <div>
     <div v-if="q && q.length > 0">
       <div class="test_summary">
-        <div v-if="!nt">
-          <div class="test_triangle_box">
-            <div class="test_triangle" @click="open = !open" :style="{ transform: open ? 'rotate(90deg)' : '' }"></div>
+        <div class="test_triangle_box">
+          <div class="test_triangle" @click="toggleOpen" :style="{ cursor: cursorStyle, transform: transformStyle }">
           </div>
         </div>
-        <div :style="{ marginLeft: nt ? '1em' : '' }">{{ q }}</div>
+        <div v-html="q"></div>
       </div>
 
-      <div class="test_choices" v-if="c && c.length > 0">
-        <div class="test_choice" v-for="(d, i) in c">
-          <div>({{ options[i] }})&nbsp;</div>
-          <div>{{ d }}</div>
-        </div>
-      </div>
+      <!-- Use Option component to display choices -->
+      <Option :c="c"></Option>
     </div>
 
+    <!-- Slot for additional options always visible -->
+    <slot name="options"></slot>
+
+    <!-- Answer and explanation only visible when open -->
     <div v-if="!n">
       <div class="test_answer" v-if="open">
         <b>{{ a }}</b>
         <slot />
       </div>
 
-      <div class="test_answer_btn" @click="open = !open">{{ open ? 'Hide' : 'Show' }} Answer</div>
+      <div class="test_answer_btn" @click="toggleOpen">{{ open ? 'Hide' : 'Show' }} Answer</div>
     </div>
   </div>
 </template>
 
 <script>
+import Option from './Option.vue';
+
 export default {
+  components: {
+    Option
+  },
   props: {
     q: String, // 问题
     c: Array, // 选项
     a: String, // 答案
-    n: Boolean, // 无答案 -> 3 & 14 章
-    nt: Boolean, // 无三角 -> 14 章
+    n: Boolean, // 无答案 -> 第 3 章
   },
-  data: function() {
+  data: function () {
     return {
-      options: ['A', 'B', 'C', 'D'],
       open: false
     };
+  },
+  computed: {
+    cursorStyle() {
+      return this.n ? 'default' : 'pointer';
+    },
+    transformStyle() {
+      return this.open ? 'rotate(90deg)' : '';
+    }
+  },
+  methods: {
+    toggleOpen() {
+      if (!this.n) {
+        this.open = !this.open;
+      }
+    }
   }
 };
 </script>
@@ -57,20 +74,13 @@ export default {
   min-width: 1em;
   float: left;
   .test_triangle
-    cursor: pointer;
     margin-top: 0.5em;
     width: 0;
     height: 0;
     border-top: 0.36em solid transparent;
     border-left: 0.36 * 1.734em solid;
     border-bottom: 0.36em solid transparent;
 
-.test_choices
-  margin-left: 1em;
-  .test_choice
-    display: flex;
-    line-height: 1.7;
-
 .test_answer
   margin-top: 1em;
   margin-left: 1em;

docs/content/Chapter14.md

@@ -550,11 +550,13 @@ wh-ever 解释为 no matter wh-，是表示让步、条件的语气，它的功
 
 <Test q="7. This custom, __, is slowly disappearing." :c="['of many centuries ago origin', 'which originated many centuries ago', 'with many centuries origin']" a="(B)">A 和 C 都在名词 origin 前面加上了短语（many centuries ago 和 many centuries）来修饰，可是名词前面只能用单词的形容词来修饰，所以错误。B 是正确的形容词从句。</Test>
 
-<Test q="8. I find it very unfair when __ I do is considered mediocre or a failure. I can be depressed for days because of __ happens." n></Test>
-
-<Test q="I." :c="['that', 'those', 'which', 'what']" n nt></Test>
-
-<Test q="II." :c="['who', 'what', 'that', 'where']" a="Ⅰ (D) II (B)" nt>两个位置都省掉了先行词，所以只能选择 what。 </Test>
+<Test q="8. I find it very unfair when __ I do is considered mediocre or a failure. I can be depressed for days because of __ happens." a="Ⅰ (D) II (B)">
+  <template v-slot:options>
+    <Option numero="I." :c="['that', 'those', 'which', 'what']"></Option>
+    <Option numero="II." :c="['who', 'what', 'that', 'where']"></Option>
+  </template>
+  <span>两个位置都省掉了先行词，所以只能选择 what。</span>
+</Test>
 
 <Test q="9. __ is elected President, corruption won't cease." :c="['Whatever', 'Who', 'How', 'Whoever']" a="(D)">空格前无先行词，只能选 A 或 D。而“当选总统”者应为“人”，故选 D。</Test>