Optimize the Test component to make it more versatile in various scenarios

[liby]

Motivation

The current Test component has a very strange usage method to meet certain use cases. This refactoring is mainly aimed at no longer using compromise methods to achieve the goal.

Changes

1. Support toggling the display or hiding of answers through the foldable icon (black triangle).
2. Render the content of the question through v-html.

   // Before
   <Test n qs>1. Medieval suits of armor, <u>which were developed for protection during battle</u>, are now placed in castles for decoration.</Test>
   
   <Test>Medieval suits of armor, <u>developed for protection during battle</u>, are now placed in castles for decoration.</Test>
   
   // After
   <Test q="1. Medieval suits of armor, <u>which were developed for protection during battle</u>, are now placed in castles for decoration.">Medieval suits of armor, <u>developed for protection during battle</u>, are now placed in castles for decoration.</Test>
   

3. Split Test component and abstract out Option component.

   // Before
   <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>
   
   // After
   <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>
   

Demo Preview