Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f5a3b84
Support to click collapse button to switch show and hide answer
liby Jul 19, 2024
5f1b110
Use `v-html` to render formatted question content
liby Jul 19, 2024
c339557
Split `Test` component to optimize the use of choices question
liby Jul 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions docs/.vuepress/components/Option.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
61 changes: 31 additions & 30 deletions docs/.vuepress/components/Test.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +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" :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>

<div v-if="qs">
<div class="test_summary">
<div class="test_triangle_box">
<div class="test_triangle" :style="{ transform: open ? 'rotate(90deg)' : '' }"></div>
</div>
<div><slot /></div>
</div>
</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 章
qs: Boolean // 有三角 -> 17 章
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>
Expand All @@ -74,12 +81,6 @@ export default {
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;
Expand Down
12 changes: 7 additions & 5 deletions docs/content/Chapter14.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
40 changes: 10 additions & 30 deletions docs/content/Chapter17.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,45 +210,25 @@

#### 将下列各句中的关系从句（即画底线部分）改写为简化从句：

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

<Test>Medieval suits of armor, <u>developed for protection during battle</u>, are now placed in castles for decoration.</Test>
<Test q="2. The change of style in these paintings should be obvious to anyone <u>that is familiar with the artist's works</u>.">The change of style in these paintings should be obvious to anyone <u>familiar with the artist's works</u>.</Test>

<Test n qs>2. The change of style in these paintings should be obvious to anyone <u>that is familiar with the artist's works</u>.</Test>
<Test q="3. Islands are actually tips of underwater mountain peaks <u>that rise above water</u>.">Islands are actually tips of underwater mountain peaks <u>rising above waler</u>.</Test>

<Test>The change of style in these paintings should be obvious to anyone <u>familiar with the artist's works</u>.</Test>
<Test q="4. John Milton, <u>who was author of <i>Paradise Lost</i></u>, was a key member of Oliver Cromwell's cabinet.">John Milton, <u>author of <i>Paradise Lost</i></u>, was a key member of Oliver Cromwell's cabinet.</Test>

<Test n qs>3. Islands are actually tips of underwater mountain peaks <u>that rise above water</u>.</Test>
<Test q="5. The secretary thought that it might not be the best time <u>that she should ask her boss for a raise</u>.">The secretary thought that it might not be the best time <u>to ask her boss for a raise</u>.</Test>

<Test>Islands are actually tips of underwater mountain peaks <u>rising above waler</u>.</Test>
<Test q="6. Gold is one of the heaviest metals <u>that are known to man</u>.">Gold is one of the heaviest metals <u>known to man</u>.</Test>

<Test n qs>4. John Milton, <u>who was author of <i>Paradise Lost</i></u>, was a key member of Oliver Cromwell's cabinet.</Test>
<Test q="7. Here are some books <u>that your brother can use</u>.">Here are some books <u>for your brother to use</u>.</Test>

<Test>John Milton, <u>author of <i>Paradise Lost</i></u>, was a key member of Oliver Cromwell's cabinet.</Test>
<Test q="8. Sexual harassment, <u>which is a hotly debated issue in the work place</u>, will be the topic of the intercollegiate debate next week.">Sexual harassment, <u>a hotly debated issue in the work place</u>, will be the topic of the intercollegiate debate next week.</Test>

<Test n qs>5. The secretary thought that it might not be the best time <u>that she should ask her boss for a raise</u>.</Test>
<Test q="9. There's nothing left <u>that I can say now</u>.">There's nothing left <u>(for me) to say now</u>.</Test>

<Test>The secretary thought that it might not be the best time <u>to ask her boss for a raise</u>.</Test>

<Test n qs>6. Gold is one of the heaviest metals <u>that are known to man</u>.</Test>

<Test>Gold is one of the heaviest metals <u>known to man</u>.</Test>

<Test n qs>7. Here are some books <u>that your brother can use</u>.</Test>

<Test>Here are some books <u>for your brother to use</u>.</Test>

<Test n qs>8. Sexual harassment, <u>which is a hotly debated issue in the work place</u>, will be the topic of the intercollegiate debate next week.</Test>

<Test>Sexual harassment, <u>a hotly debated issue in the work place</u>, will be the topic of the intercollegiate debate next week.</Test>

<Test n qs>9. There's nothing left <u>that I can say now</u>.</Test>

<Test>There's nothing left <u>(for me) to say now</u>.</Test>

<Test n qs>10. People <u>that live along the waterfront</u> must be evacuated before the storm hits.</Test>

<Test>People <u>living along the waterfront</u> must be evacuated before the storm hits.</Test>
<Test q="10. People <u>that live along the waterfront</u> must be evacuated before the storm hits.">People <u>living along the waterfront</u> must be evacuated before the storm hits.</Test>

#### 练习二

Expand Down
40 changes: 10 additions & 30 deletions docs/content/Chapter18.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,45 +294,25 @@ whether 是由连接词 either…or 变造而成。在这个名词从句中，

#### 将下列各句中的名词从句（即画底线部分）改写为简化从句：

<Test n qs>1. <u>That he sends flowers to his girlfriend every day</u> is the only way he can think of to gain her favor.</Test>
<Test q="1. <u>That he sends flowers to his girlfriend every day</u> is the only way he can think of to gain her favor."><u>Sending flowers to his girlfriend every day</u> is the only way he can think of to gain her favor.</Test>

<Test><u>Sending flowers to his girlfriend every day</u> is the only way he can think of to gain her favor.</Test>
<Test q="2. <u>That the legislator was involved in the fraud</u> is rather obvious."><u>The legislator's being involved in the fraud</u> is rather obvious. <br /> 或 <br /> <u>The legislator's involvement in the fraud</u> is rather obvious.</Test>

<Test n qs>2. <u>That the legislator was involved in the fraud</u> is rather obvious.</Test>
<Test q="3. The student denied <u>that he had cheated in the exam</u>.">The student denied <u>having cheated in the exam</u>.</Test>

<Test><u>The legislator's being involved in the fraud</u> is rather obvious. <br /> 或 <br /> <u>The legislator's involvement in the fraud</u> is rather obvious.</Test>
<Test q="4. The researcher is certain <u>that he has found a solution</u>.">The researcher is certain <u>about having found a solution</u>.</Test>

<Test n qs>3. The student denied <u>that he had cheated in the exam</u>.</Test>
<Test q="5. The residents were not aware <u>that they were being exposed to radiation</u>.">The residents were not aware <u>of being exposed to radiation</u>. <br /> 或 <br /> The residents were not aware <u>of their exposure to radiation</u>.</Test>

<Test>The student denied <u>having cheated in the exam</u>.</Test>
<Test q="6. I consider <u>that this is a most unfortunate incident</u>.">I consider <u>this a most unfortunate incident</u>.</Test>

<Test n qs>4. The researcher is certain <u>that he has found a solution</u>.</Test>
<Test q="7. <u>That John comes to school late every day</u> cannot go on much longer."><u>John's coming to school late every day</u> cannot go on much longer.</Test>

<Test>The researcher is certain <u>about having found a solution</u>.</Test>
<Test q="8. <u>That he was named the new CEO</u> came as a surprise to everybody."><u>His being named the new CEO</u> came as a surprise to everybody.</Test>

<Test n qs>5. The residents were not aware <u>that they were being exposed to radiation</u>.</Test>
<Test q="9. I would like <u>that you can look after the kids for me this evening</u>.">I would like <u>you to look after the kids for me this evening</u>.</Test>

<Test>The residents were not aware <u>of being exposed to radiation</u>. <br /> 或 <br /> The residents were not aware <u>of their exposure to radiation</u>.</Test>

<Test n qs>6. I consider <u>that this is a most unfortunate incident</u>.</Test>

<Test>I consider <u>this a most unfortunate incident</u>.</Test>

<Test n qs>7. <u>That John comes to school late every day</u> cannot go on much longer.</Test>

<Test><u>John's coming to school late every day</u> cannot go on much longer.</Test>

<Test n qs>8. <u>That he was named the new CEO</u> came as a surprise to everybody.</Test>

<Test><u>His being named the new CEO</u> came as a surprise to everybody.</Test>

<Test n qs>9. I would like <u>that you can look after the kids for me this evening</u>.</Test>

<Test>I would like <u>you to look after the kids for me this evening</u>.</Test>

<Test n qs>10. It is a privilege <u>that one can live in these monumental times</u>.</Test>

<Test>It is a privilege <u>to live in these monumental times</u>.</Test>
<Test q="10. It is a privilege <u>that one can live in these monumental times</u>.">It is a privilege <u>to live in these monumental times</u>.</Test>

#### 练习二

Expand Down
40 changes: 10 additions & 30 deletions docs/content/Chapter19.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,45 +181,25 @@ being a student 因为有 being，所以 a student 很明显是补语，意思

#### 将下列各句中的副词从句（即画底线部分）改写为简化从句：

<Test n qs>1. <u>While he was watching TV</u>, the boy heard a strange noise coming from the kitchen.</Test>
<Test q="1. <u>While he was watching TV</u>, the boy heard a strange noise coming from the kitchen."><u>(While) waiching TV</u>, the boy heard a strange noise coming from the kitchen.</Test>

<Test><u>(While) waiching TV</u>, the boy heard a strange noise coming from the kitchen.</Test>
<Test q="2. <u>Because she lives with her parents</u>, the girl can't stay out very late."><u>Living with her parents</u>, the girl can't stay out very late.</Test>

<Test n qs>2. <u>Because she lives with her parents</u>, the girl can't stay out very late.</Test>
<Test q="3. <u>If you have finished your work</u>, you can help me with mine."><u>If having finished your work</u>，you can help me with mine.</Test>

<Test><u>Living with her parents</u>, the girl can't stay out very late.</Test>
<Test q="4. <u>As he is a law-enforcement officer</u>, he cannot drink on duty."><u>Being a law-enforcement officer</u>, he cannot drink on duty.</Test>

<Test n qs>3. <u>If you have finished your work</u>, you can help me with mine.</Test>
<Test q="5. The actor has been in a state of excitement <u>ever since he was nominated for the Oscar</u>.">The actor has been in a state of excitement <u>ever since being nominated for the Oscar</u>.</Test>

<Test><u>If having finished your work</u>，you can help me with mine.</Test>
<Test q="6. <u>After he addressed the congregation</u>, the minister left in a hurry."><u>After addressing the congregation</u>, the minister left in a hurry. <br /> 或 <br /> <u>Having addressed the congregation</u>, the minister left in a hurry.</Test>

<Test n qs>4. <u>As he is a law-enforcement officer</u>, he cannot drink on duty.</Test>
<Test q="7. <u>As it was rather warm</u>, we decided to go for a swim."><u>It being rather warm</u>, we decided to go for a swim.</Test>

<Test><u>Being a law-enforcement officer</u>, he cannot drink on duty.</Test>
<Test q="8. <u>When the students have all left</u>, the teacher started looking over their examination sheets."><u>The students having all left</u>, the teacher started looking over their examination sheets.</Test>

<Test n qs>5. The actor has been in a state of excitement <u>ever since he was nominated for the Oscar</u>.</Test>
<Test q="9. I know all about corn farming <u>because I grew up in a Southern farm</u>.">I know all about corn farming, <u>having grown up in a Southern farm</u>.</Test>

<Test>The actor has been in a state of excitement <u>ever since being nominated for the Oscar</u>.</Test>

<Test n qs>6. <u>After he addressed the congregation</u>, the minister left in a hurry.</Test>

<Test><u>After addressing the congregation</u>, the minister left in a hurry. <br /> 或 <br /> <u>Having addressed the congregation</u>, the minister left in a hurry.</Test>

<Test n qs>7. <u>As it was rather warm</u>, we decided to go for a swim.</Test>

<Test><u>It being rather warm</u>, we decided to go for a swim.</Test>

<Test n qs>8. <u>When the students have all left</u>, the teacher started looking over their examination sheets.</Test>

<Test><u>The students having all left</u>, the teacher started looking over their examination sheets.</Test>

<Test n qs>9. I know all about corn farming <u>because I grew up in a Southern farm</u>.</Test>

<Test>I know all about corn farming, <u>having grown up in a Southern farm</u>.</Test>

<Test n qs>10. <u>As the door remained shut</u>, the servant could not hear what was going on inside.</Test>

<Test><u>The door remaining shut</u>, the servant could not hear what was going on inside.</Test>
<Test q="10. <u>As the door remained shut</u>, the servant could not hear what was going on inside."><u>The door remaining shut</u>, the servant could not hear what was going on inside.</Test>

#### 练习二

Expand Down
Loading