From 024aa06f07dec20594cd273ef5355922548ee785 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期五, 19 七月 2024 10:56:58 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/books/English/view/components/chapter007.vue           |  579 +++++---
 src/books/English/assets/images/M5Select01.png             |    0 
 src/books/English/assets/images/M5Select04.png             |    0 
 src/books/English/assets/images/M5RefuseClassification.png |    0 
 src/books/English/assets/images/M5Select03.png             |    0 
 src/books/English/assets/images/M5Select02.png             |    0 
 src/books/English/view/components/chapter005.vue           | 3270 +++++++++++++++++++++++++++++++++++++++++++++----
 src/books/English/assets/images/M5ChoiceData.png           |    0 
 src/books/English/view/components/index.vue                |    2 
 src/books/English/assets/images/M5LessonOneWarmUp.png      |    0 
 src/books/English/assets/main.less                         |   13 
 11 files changed, 3,371 insertions(+), 493 deletions(-)

diff --git a/src/books/English/assets/images/M5ChoiceData.png b/src/books/English/assets/images/M5ChoiceData.png
new file mode 100644
index 0000000..ef670cc
--- /dev/null
+++ b/src/books/English/assets/images/M5ChoiceData.png
Binary files differ
diff --git a/src/books/English/assets/images/M5LessonOneWarmUp.png b/src/books/English/assets/images/M5LessonOneWarmUp.png
new file mode 100644
index 0000000..fffab78
--- /dev/null
+++ b/src/books/English/assets/images/M5LessonOneWarmUp.png
Binary files differ
diff --git a/src/books/English/assets/images/M5RefuseClassification.png b/src/books/English/assets/images/M5RefuseClassification.png
new file mode 100644
index 0000000..048910f
--- /dev/null
+++ b/src/books/English/assets/images/M5RefuseClassification.png
Binary files differ
diff --git a/src/books/English/assets/images/M5Select01.png b/src/books/English/assets/images/M5Select01.png
new file mode 100644
index 0000000..8f21422
--- /dev/null
+++ b/src/books/English/assets/images/M5Select01.png
Binary files differ
diff --git a/src/books/English/assets/images/M5Select02.png b/src/books/English/assets/images/M5Select02.png
new file mode 100644
index 0000000..79b47b3
--- /dev/null
+++ b/src/books/English/assets/images/M5Select02.png
Binary files differ
diff --git a/src/books/English/assets/images/M5Select03.png b/src/books/English/assets/images/M5Select03.png
new file mode 100644
index 0000000..310c818
--- /dev/null
+++ b/src/books/English/assets/images/M5Select03.png
Binary files differ
diff --git a/src/books/English/assets/images/M5Select04.png b/src/books/English/assets/images/M5Select04.png
new file mode 100644
index 0000000..6a1b85a
--- /dev/null
+++ b/src/books/English/assets/images/M5Select04.png
Binary files differ
diff --git a/src/books/English/assets/main.less b/src/books/English/assets/main.less
index f4020d7..e87101b 100644
--- a/src/books/English/assets/main.less
+++ b/src/books/English/assets/main.less
@@ -235,7 +235,7 @@
     width: 96%;
     text-align: center;
   }
-
+  
   .img-a {
     width: 95%;
   }
@@ -704,6 +704,9 @@
   .al-end {
     align-items: flex-end;
   }
+  .fz-13{
+    font-size: 13px;
+  }
   .fz-14 {
     font-size: 14px;
   }
@@ -768,8 +771,8 @@
   .w45{
     width: 45%;
   }
-  .w50{
-    width: 50%;
+  .w35{
+    width: 35%;
   }
   .w20{
     width: 20%;
@@ -915,7 +918,6 @@
   .input-bottom-border {
     border: 0;
     border-bottom: 1px solid #000000;
-    width: 86%;
     &:focus {
       outline: none;
     }
@@ -939,6 +941,9 @@
   .check-bc-t{
     background-color: transparent;
   }
+  .select-bc-t{
+    background-color: transparent;
+  }
  .input-no-border{
   border: 0;
   width: 86%;
diff --git a/src/books/English/view/components/chapter005.vue b/src/books/English/view/components/chapter005.vue
index 1b61e73..de43a18 100644
--- a/src/books/English/view/components/chapter005.vue
+++ b/src/books/English/view/components/chapter005.vue
@@ -43,27 +43,242 @@
                             <p>plastic waste problem銆�water pollution銆�global warming銆�oil spill銆�air
                                 pollution銆�deforestation</p>
                         </div>
-
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0088-1.jpg" /></p>
-                        <p class="center">1._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0088-2.jpg" /></p>
-                        <p class="center">2._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0088-3.jpg" /></p>
-                        <p class="center">3._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0088-4.jpg" /></p>
-                        <p class="center">4._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0088-5.jpg" /></p>
-                        <p class="center">5._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0088-6.jpg" /></p>
-                        <p class="center">6._____________________</p>
-                        <p><b>鈪�.What other environmental issues do you know?</b></p>
-                        <p>_____________________________________________</p>
-                        <h3 id="c038"><span class="bjh3">Listening</span></h3>
-                        <p class="center"> <audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+                        <ul class="fl fw-wr dropdown-box-one">
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0088-1.jpg" /></p>
+                                <p class="center">1.
+                                    <select class="select-border" v-model="warmUp[0].value[0].userAnswer"
+                                        @change="savewarmUp" :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <svg v-if="warmUp[0].value[0].isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="warmUp[0].value[0].isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                            </li>
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0088-2.jpg" /></p>
+                                <p class="center">2.
+                                    <select class="select-border" v-model="warmUp[0].value[1].userAnswer"
+                                        @change="savewarmUp" :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <svg v-if="warmUp[0].value[1].isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="warmUp[0].value[1].isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                            </li>
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0088-3.jpg" /></p>
+                                <p class="center">3.
+                                    <select class="select-border" v-model="warmUp[0].value[2].userAnswer"
+                                        @change="savewarmUp" :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <svg v-if="warmUp[0].value[2].isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="warmUp[0].value[2].isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                            </li>
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0088-4.jpg" /></p>
+                                <p class="center">4.
+                                    <select class="select-border" v-model="warmUp[0].value[3].userAnswer"
+                                        @change="savewarmUp" :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <svg v-if="warmUp[0].value[3].isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="warmUp[0].value[3].isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                            </li>
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0088-5.jpg" /></p>
+                                <p class="center">5.
+                                    <select class="select-border" v-model="warmUp[0].value[4].userAnswer"
+                                        @change="savewarmUp" :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <svg v-if="warmUp[0].value[4].isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="warmUp[0].value[4].isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                            </li>
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0088-6.jpg" /></p>
+                                <p class="center">6.
+                                    <select class="select-border" v-model="warmUp[0].value[5].userAnswer"
+                                        @change="savewarmUp" :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <svg v-if="warmUp[0].value[5].isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="warmUp[0].value[5].isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                            </li>
+                        </ul>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ar w80">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handlewarmUp">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastwarmUp" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewwarmUp" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="warmUp[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item, index) in warmUp[0].value" :key="index" class="mr-20">
+                                {{ index + 1 }}.{{ item.answer }}
+                            </span>
+                        </div>
+                        <p><b>鈪�.What other environmental issues do you know?</b>
+                            <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setBookQuestion"></textarea>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerOne">
+                            绛旀锛歰verfishing, overpopulation, desertification, consumerism, acid rain, light pollution,
+                            coral reef loss, extinction of wildlife, natural resources depletion, soil contamination and
+                            degradation
+                        </p>
+                        <h3 id="c038" class="fl al-cn">
+                            <span class="bjh3">Listening</span>
+                            <!--controlslist="noplaybackrate nodownload"鍚庨潰鐨勯煶棰戞鍔犲叆杩欎釜-->
+                            <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio>
+                        </h3>
                         <p><b>Nature is sending warnings to human beings.Watch the video and answer the following
-                                questions.</b></p>
+                                questions.</b>
+                            <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
                         <p class="center">
                         <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                             <tr class="table-th-bc">
@@ -92,6 +307,12 @@
                             </tr>
                         </table>
                         </p>
+                        <div class="show-answer-box" v-if="showAnswerTwo">
+                            <div>绛旀:</div>
+                            <div>
+                                <img src="../../assets/images/M5LessonOneWarmUp.png" alt="" class="w100" />
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -115,38 +336,83 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <h3 id="c039"><span class="bjh3">Reading</span></h3>
-                        <p class="center"> <audio :src="resource.readingOne" controls
-                                controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
                         <p>1.Plastic never biodegrades,so every piece ever made lasts forever! It has posed a serious
-                            threat to our health and future generations.What do you use plastic for in daily life?</p>
+                            threat to our health and future generations.What do you use plastic for in daily life?
+                            <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setBookQuestion"></textarea>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerThree">
+                            绛旀锛�(1) packaging material
+                            (2) safety gear like helmets, goggles etc.
+                            (3) plastic bottles
+                            (4) pipes
+                            (5) lunch boxes
+                            (6) plastic grocery bags
+                            (7) raincoats
+                        </p>
                         <p>2.Can you think of some ways to reduce the use of plastic? Share your ideas with the class.
+                            <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea v-model="questionData.reading.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setBookQuestion"></textarea>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerFour">
+                            绛旀锛�(1) avoid single-use plastics
+                            (2) take a cloth bag when you go shopping
+                            (3) buy necessary plastic items used instead of new
+                            (4) replace plastic Tupperware for glass or steel containers
+
                         </p>
                         <p class="center"><b>A Better Path for Plastic</b></p>
+                        <p class="center"> <audio :src="resource.readingOne" controls
+                                controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
                         <p>Plastic plays an important role in modern life,serving as building blocks for everything from
                             packaging to medical equipment.This useful material has undeniable upsides鈥攂ut far too much
                             of it ends up in landfills or in our environment.What can each of us do to be part of the
                             solution?</p>
                         <p>Here鈥檚 some inspiration for how you can make a positive impact in your community and the
                             world.</p>
-                        <p>1锛塤________________</p>
+                        <p>1锛�<input type="text" class="input-bottom-border w45" v-model="questionData.reading.three"
+                                @change="setBookQuestion" /></p>
                         <p>Initiatives that encourage repair,reuse,and recycling to reduce plastic waste come from every
                             part of the society and from every corner of the world.In India,some shops have begun
                             treating recyclable things as a form of exchangeable currency for groceries.In the
                             U.S.,Phoenix鈥攐nce branded the world鈥檚 least sustainable city鈥攏ow has set an ambitious goal
                             to be zero-waste by 2050,and other cities are setting their own zero-waste targets.</p>
-                        <p>2锛塤________________</p>
+                        <p>2锛�<input type="text" class="input-bottom-border w45" v-model="questionData.reading.four"
+                                @change="setBookQuestion" /></p>
                         <p>Solving big challenges requires leadership from our elected officials,from businesses,and
                             from each one of us.As parents or mentors,we can teach and encourage positive behaviors.In
                             our work,we can drive changes within our own companies.And as everyday citizens,we can share
                             what matters to us in conversations and on social media.</p>
-                        <p>3锛塤________________</p>
+                        <p>3锛�<input type="text" class="input-bottom-border w45" v-model="questionData.reading.five"
+                                @change="setBookQuestion" /></p>
                         <p>Waste is a problem that is growing right before our eyes.Making decisions about what types of
                             products to buy鈥攐r whether to purchase them at all鈥攃an feel intense.Start by asking
                             questions about the products that you鈥檙e using.What is it made of? How long will it last? Is
                             it recyclable or compostable in your area? Is there an alternative? Then look for products
                             that contain recycled materials and are designed from the start with circularity in mind.
                         </p>
-                        <p>4锛塤________________</p>
+                        <p>4锛�<input type="text" class="input-bottom-border w45" v-model="questionData.reading.six"
+                                @change="setBookQuestion" /></p>
                         <p>Placing recyclable and compostable items in their appropriate bins whenever you can is very
                         </p>
                     </div>
@@ -284,18 +550,148 @@
                         <p><b>鈪�.Reading comprehension.</b></p>
                         <p>A.Choose one proper subtitle from the following for paragraph 2-5.There is one subtitle which
                             you don鈥檛 need.</p>
+                        <div class="fl ju-ar">
+                            <div class="fl">
+                                1.
+                                <span class="mr-10">
+                                    <select class="input-bottom-border" :disabled="questionDataOne.isComplete"
+                                        v-model="questionDataOne.cp.one.value" style="width:200%">
+                                        <option v-for="(item, index) in questionDataOne.cp.cpList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                </span>
+                                <span class="icon-box-big">
+                                    <svg v-if="questionDataOne.cp.one.isRight" t="1716986419862" class="icon"
+                                        viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                        <path
+                                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                            fill="#1AFA29" p-id="18768"></path>
+                                    </svg>
+                                    <svg v-if="questionDataOne.cp.one.isRight == false" t="1716987085767" class="icon"
+                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                        <path
+                                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                            fill="#d81e06" p-id="25746"></path>
+                                    </svg>
+                                </span>
+                            </div>
+                            <div class="fl">2.
+                                <span class="mr-10">
+                                    <select class="input-bottom-border" :disabled="questionDataOne.isComplete"
+                                        v-model="questionDataOne.cp.two.value" style="width:200%">
+                                        <option v-for="(item, index) in questionDataOne.cp.cpList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                </span>
+                                <span class="icon-box-big">
+                                    <svg v-if="questionDataOne.cp.two.isRight" t="1716986419862" class="icon"
+                                        viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                        <path
+                                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                            fill="#1AFA29" p-id="18768"></path>
+                                    </svg>
+                                    <svg v-if="questionDataOne.cp.two.isRight == false" t="1716987085767" class="icon"
+                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                        <path
+                                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                            fill="#d81e06" p-id="25746"></path>
+                                    </svg>
+                                </span>
+                            </div>
+                            <div class="fl">3.
+                                <span class="mr-10">
+                                    <select class="input-bottom-border" :disabled="questionDataOne.isComplete"
+                                        v-model="questionDataOne.cp.three.value" style="width:200%">
+                                        <option v-for="(item, index) in questionDataOne.cp.cpList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                </span>
+                                <span class="icon-box-big">
+                                    <svg v-if="questionDataOne.cp.three.isRight" t="1716986419862" class="icon"
+                                        viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                        <path
+                                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                            fill="#1AFA29" p-id="18768"></path>
+                                    </svg>
+                                    <svg v-if="questionDataOne.cp.three.isRight == false" t="1716987085767" class="icon"
+                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                        <path
+                                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                            fill="#d81e06" p-id="25746"></path>
+                                    </svg>
+                                </span>
+                            </div>
+                            <div class="fl">4.
+                                <span class="mr-10">
+                                    <select class="input-bottom-border" :disabled="questionDataOne.isComplete"
+                                        v-model="questionDataOne.cp.four.value" style="width:200%">
+                                        <option v-for="(item, index) in questionDataOne.cp.cpList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                </span>
+                                <span class="icon-box-big">
+                                    <svg v-if="questionDataOne.cp.four.isRight" t="1716986419862" class="icon"
+                                        viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                        <path
+                                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                            fill="#1AFA29" p-id="18768"></path>
+                                    </svg>
+                                    <svg v-if="questionDataOne.cp.four.isRight == false" t="1716987085767" class="icon"
+                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                        <path
+                                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                            fill="#d81e06" p-id="25746"></path>
+                                    </svg>
+                                </span>
+                            </div>
+                        </div>
                         <p>a.Stay Curious</p>
                         <p>b.Change Your Lifestyle</p>
                         <p>c.Solutions in Action</p>
                         <p>d.Be Responsible</p>
                         <p>e.Be a Community Leader</p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
+                            v-if="showAnswerReading">
+                            绛旀锛� 1.c. Solutions in Action; &nbsp; 2.e. Be a Community Leader &nbsp; 3.a. Stay Curious
+                            &nbsp;
+                            4.b. Change Your Lifestyle
+                        </p>
                         <p>B.Read the passage and answer the following questions.</p>
                         <p>1.What is the use of plastic in modern life?</p>
-                        <p>____________________________________________________</p>
+                        <p><input :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataOne.rp.one" @change="setQuestionDataOne" /></p>
                         <p>2.Which city in the U.S.has set a goal to be zero-waste by 2050?</p>
-                        <p>____________________________________________________</p>
+                        <p><input :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataOne.rp.one" @change="setQuestionDataOne" /></p>
                         <p>3.Who should lead the campaign against plastic pollution?</p>
-                        <p>____________________________________________________</p>
+                        <p><input :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataOne.rp.one" @change="setQuestionDataOne" /></p>
+                        <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
+                            v-if="showAnswerReading">
+                            <p class="table-p tl-lf">绛旀</p>
+                            <p class="table-p">(1)It serves as a building block for everything from packaging to medical
+                                equipment.
+                            </p>
+                            <p class="table-p">(2)Phoenix.</p>
+                            <p class="table-p">(3)Elected officials, businesses, and each one of us.
+                            </p>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -322,31 +718,298 @@
                         <p>A.Fill in the blanks with the proper words from the passage.The initial letters of the words
                             have been given.</p>
                         <p>1.They hope to raise consumers鈥� awareness and avoid recyclable packaging ending up in
-                            l________sites.</p>
-                        <p>2.The Belt and Road I________has won a warm welcome from the international community.</p>
-                        <p>3.The children were taught to flatten the empty milk cartons and r________them.</p>
-                        <p>4.Many coffee shops started to offer paper straws or ones made of c________plastic.</p>
-                        <p>5.Do your bit for the planet by switching to r________sports bottles.They鈥檙e kind to your
-                            body too!</p>
+                            l<input :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataOne.fb.one"
+                                @change="setQuestionDataOne" />sites.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fb.answer, questionDataOne.fb.one, 0)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fb.answer, questionDataOne.fb.one, 0) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>2.The Belt and Road I<input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.fb.two"
+                                @change="setQuestionDataOne" />has won a warm welcome from the international community.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fb.answer, questionDataOne.fb.two, 1)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fb.answer, questionDataOne.fb.two, 1) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>3.The children were taught to flatten the empty milk cartons and r<input
+                                :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataOne.fb.three"
+                                @change="setQuestionDataOne" />them.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fb.answer, questionDataOne.fb.three, 2)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fb.answer, questionDataOne.fb.three, 2) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>4.Many coffee shops started to offer paper straws or ones made of c<input
+                                :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataOne.fb.four"
+                                @change="setQuestionDataOne" />plastic.銆�
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fb.answer, questionDataOne.fb.four, 3)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fb.answer, questionDataOne.fb.four, 3) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>5.Do your bit for the planet by switching to r<input :disabled="questionDataOne.isComplete"
+                                type="text" class="input-bottom-border" style="width: 100px"
+                                v-model="questionDataOne.fb.five" @change="setQuestionDataOne" />sports bottles.They鈥檙e
+                            kind to your
+                            body too!
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fb.answer, questionDataOne.fb.five, 4)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fb.answer, questionDataOne.fb.five, 4) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
+                            v-if="showAnswerReading">
+                            绛旀锛� 1.landfill; &nbsp; 2.Initiative &nbsp; 3.recycle &nbsp;
+                            4.compostable &nbsp; 5.refillable
+                        </p>
                         <p>B.Fill in the blanks with the proper form of the expressions given below.</p>
                         <div class="bk-wh">
                             <p>building blocks銆�end up銆�thrift store銆�pass on銆�pick up</p>
                         </div>
-                        <p>1.If our planet is seriously polluted,what鈥檚 left there to _______ to future generations?</p>
-                        <p>2.Single words are the _______ of language.</p>
-                        <p>3.I buy clothes in the _______ instead of noting the brand names.</p>
-                        <p>4.Every student is responsible for _______ their own litter in the classroom.</p>
-                        <p>5.Large amounts of plastic waste _______ littered on the streets,or worse,in our oceans.</p>
+                        <p>1.If our planet is seriously polluted,what鈥檚 left there to <input
+                                :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataOne.choice.one"
+                                @change="setQuestionDataOne" /> to future generations?
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.choice.answer, questionDataOne.choice.one, 0)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.choice.answer, questionDataOne.choice.one, 0) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>2.Single words are the <input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.choice.two"
+                                @change="setQuestionDataOne" /> of language.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.choice.answer, questionDataOne.choice.two, 1)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.choice.answer, questionDataOne.choice.two, 1) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>3.I buy clothes in the <input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.choice.three"
+                                @change="setQuestionDataOne" /> instead of noting the brand names.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.choice.answer, questionDataOne.choice.three, 2)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.choice.answer, questionDataOne.choice.three, 2) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>4.Every student is responsible for <input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.choice.four"
+                                @change="setQuestionDataOne" /> their own litter in the classroom.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.choice.answer, questionDataOne.choice.four, 3)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.choice.answer, questionDataOne.choice.four, 3) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>5.Large amounts of plastic waste <input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.choice.five"
+                                @change="setQuestionDataOne" /> littered on the streets,or worse,in our oceans.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.choice.answer, questionDataOne.choice.five, 4)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.choice.answer, questionDataOne.choice.five, 4) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
+                            v-if="showAnswerReading">
+                            绛旀锛� 1.pass on; &nbsp; 2.building blocks &nbsp; 3.thrift store &nbsp;
+                            4.picking up &nbsp; 5.end up
+                        </p>
                         <p>C.Translate the following sentences into Chinese.</p>
                         <p>1.China has set ambitious targets to reach a carbon peak by 2030 and achieve carbon
                             neutrality by 2060.</p>
-                        <p>____________________________________________________</p>
+                        <p><input :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataOne.tf.one" @change="setQuestionDataOne" /></p>
                         <p>2.Consumers are encouraged to use reusable grocery bags instead of plastic bags,which helps
                             to achieve the zero-waste target.</p>
-                        <p>____________________________________________________</p>
+                        <p><input :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataOne.tf.two" @change="setQuestionDataOne" /></p>
                         <p>3.Electric cars help to reduce greenhouse gas emissions锛堟帓鏀撅級,making it a great alternative to
                             gas-only cars.</p>
-                        <p>____________________________________________________</p>
+                        <p><input :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataOne.tf.three" @change="setQuestionDataOne" /></p>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -371,7 +1034,19 @@
                     <div class="bodystyle">
                         <p>4.The Beijing 2022 Winter Olympics is in line with its concept of delivering a green and
                             sustainable Games.</p>
-                        <p>____________________________________________________</p>
+                        <p><input :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataOne.tf.four" @change="setQuestionDataOne" /></p>
+                        <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
+                            v-if="showAnswerReading">
+                            <p class="table-p tl-lf">绛旀</p>
+                            <p class="table-p">(1)涓浗璁惧畾浜嗗畯浼熺洰鏍囷紝鍦�2030骞村墠瀹炵幇纰宠揪宄帮紝2060骞村墠瀹炵幇纰充腑鍜屻��
+                            </p>
+                            <p class="table-p">(2)榧撳姳娑堣垂鑰呬娇鐢ㄥ彲閲嶅浣跨敤鐨勮喘鐗╄鏉ヤ唬鏇垮鏂欒锛岃繖鏈夊姪浜庡疄鐜伴浂搴熷純鐩爣銆�</p>
+                            <p class="table-p">(3)鐢靛姩姹借溅鏈夊姪浜庡噺灏戞俯瀹ゆ皵浣撴帓鏀撅紝杩欎娇鍏舵垚涓虹函娌硅溅鐨勭粷浣虫浛浠e搧銆�
+                            </p>
+                            <p class="table-p">(4)2022鍖椾含鍐ゥ浼氳返琛屼簡缁胯壊鍙寔缁殑鍔炲ゥ鐞嗗康銆�
+                            </p>
+                        </div>
                         <p><b>鈪�.Grammar focus:The present perfect tense.</b>
                             <span class="btn-box" @click="showAnswer('showImg')">
                                 <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
@@ -387,22 +1062,329 @@
                             <img class="w100" :src="imgThirteen" />
                         </div>
                         <p>A.Mark the correct form of the words in the brackets.</p>
-                        <p>1.Some shops in India have (begin,began,begun) to exchange recyclable things for groceries.
+                        <p>1.Some shops in India have<input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.mc.one"
+                                @change="setQuestionDataOne" /> (begin,began,begun) to exchange recyclable things for
+                            groceries.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.one, 0)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.one, 0) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
                         </p>
-                        <p>2.In the U.S.,Phoenix now has (set,sets,setting) an ambitious goal to be zero-waste by 2050.
+                        <p>2.In the U.S.,Phoenix now has <input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.mc.two"
+                                @change="setQuestionDataOne" /> (set,sets,setting) an ambitious goal to be zero-waste by
+                            2050.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.two, 1)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.two, 1) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
                         </p>
-                        <p>3.The temperature increase has (cause,causes,caused) melting glaciers and drought.</p>
-                        <p>4.Destruction of forests has (lead,leads,led) to the extinction of some animal species.</p>
-                        <p>5.A nationwide waste sorting policy has been (adopt,adopted,adopting) to protect the
-                            environment.</p>
-                        <p>6.We need to be aware that some natural resources have (run,ran,running) out.</p>
+                        <p>3.The temperature increase has <input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.mc.three"
+                                @change="setQuestionDataOne" /> (cause,causes,caused) melting glaciers and drought.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.three, 2)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.three, 2) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>4.Destruction of forests has <input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.mc.four"
+                                @change="setQuestionDataOne" /> (lead,leads,led) to the extinction of some animal
+                            species.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.four, 3)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.four, 3) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>5.A nationwide waste sorting policy has been <input :disabled="questionDataOne.isComplete"
+                                type="text" class="input-bottom-border" style="width: 100px"
+                                v-model="questionDataOne.mc.five" @change="setQuestionDataOne" />
+                            (adopt,adopted,adopting) to protect the
+                            environment.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.five, 4)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.five, 4) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>6.We need to be aware that some natural resources have <input
+                                :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataOne.mc.six" @change="setQuestionDataOne" />
+                            (run,ran,running) out.
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.six, 5)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.mc.answer, questionDataOne.mc.six, 5) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
+                            v-if="showAnswerReading">
+                            绛旀锛� 1.begun; &nbsp; 2.set &nbsp; 3.caused &nbsp;
+                            4.led &nbsp; 5.adopted &nbsp; 6.run
+                        </p>
                         <p>B.Fill in each blank with the present perfect form of the verb in the brackets.</p>
-                        <p>1.I__________up my mind to live a zero-waste lifestyle to help our planet.(make)</p>
-                        <p>2.Solar power__________more and more popular for domestic use.(become)</p>
-                        <p>3.New energy vehicle industry__________rapid development in the past few years.(experience)
+                        <p>1.I<input :disabled="questionDataOne.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataOne.fe.one" @change="setQuestionDataOne" />up
+                            my mind to live a zero-waste lifestyle to help our planet.(make)
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fe.answer, questionDataOne.fe.one, 0)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fe.answer, questionDataOne.fe.one, 0) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
                         </p>
-                        <p>4.While waste sorting may sound simple,it__________harder to do in practice.(prove)</p>
-                        <p>5.Light pollution__________human health and animal behavior.(affect)</p>
+                        <p>2.Solar power<input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.fe.two"
+                                @change="setQuestionDataOne" />more and more popular for domestic use.(become)
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fe.answer, questionDataOne.fe.two, 1)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fe.answer, questionDataOne.fe.two, 1) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>3.New energy vehicle industry<input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.fe.three"
+                                @change="setQuestionDataOne" />rapid development in the past few years.(experience)
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fe.answer, questionDataOne.fe.three, 2)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fe.answer, questionDataOne.fe.three, 2) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>4.While waste sorting may sound simple,it<input :disabled="questionDataOne.isComplete"
+                                type="text" class="input-bottom-border" style="width: 100px"
+                                v-model="questionDataOne.fe.four" @change="setQuestionDataOne" />harder to do in
+                            practice.(prove)
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fe.answer, questionDataOne.fe.four, 3)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fe.answer, questionDataOne.fe.four, 3) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>5.Light pollution<input :disabled="questionDataOne.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataOne.fe.five"
+                                @change="setQuestionDataOne" />human health and animal behavior.(affect)
+                            <span>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fe.answer, questionDataOne.fe.five, 4)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataOne.isComplete &&
+                                    isTextRight(questionDataOne.fe.answer, questionDataOne.fe.five, 4) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
+                            v-if="showAnswerReading">
+                            绛旀锛� 1.have made; &nbsp; 2.has become &nbsp; 3.has experienced &nbsp;
+                            4.has proved &nbsp; 5.has affected
+                        </p>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ar w80">
+                                <li>
+                                    <button class="btn-border btn-w" @click="saveDataOne">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="changeQuestionDataOne" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="showAnswerReading = !showAnswerReading" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                         <h3 id="c040"><span class="bjh3">Mini-project</span></h3>
                         <p>Nature is speaking with a furious tone telling us that she鈥檚 been through a very difficult
                             time while humans do nothing but make it worse.Search online for the causes and effects of
@@ -502,13 +1484,20 @@
                         <div class="bk-wh">
                             <p class="dl-box">
                                 <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'smog')">smog</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'greenhouse gases')">greenhouse gases</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'unusual temperature')">unusual temperature</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'rising sea levels')">rising sea levels</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'melting glaciers')">melting glaciers</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'frequent drought')">frequent drought</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'heavier rainstorms')">heavier rainstorms</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'soil degradation')">soil degradation</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'greenhouse gases')">greenhouse gases</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'unusual temperature')">unusual temperature</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'rising sea levels')">rising sea levels</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'melting glaciers')">melting glaciers</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'frequent drought')">frequent drought</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'heavier rainstorms')">heavier rainstorms</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'soil degradation')">soil
+                                    degradation</span>
                             </p>
                         </div>
                         <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
@@ -680,31 +1669,58 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <h2 id="b018"><img class="img-0" alt="" src="image/dy5-le1.jpg" /></h2>
+                        <h2 id="b018"><img class="img-0" alt="" src="../../assets/images/dy5-le1.jpg" /></h2>
                         <h3 id="c041"><span class="bjh3">Warm-up</span></h3>
                         <p><b>Nature is calling for help! Everyone has a part to play in this everlasting planet-saving
                                 mission.Are you environmentally conscious? Complete the following questionnaire and
                                 check the results.</b></p>
                         <p class="center"><b>How Green Are You?</b></p>
                         <div class="fieldset-6">
-                            <p>1.Do you sort your household waste into corresponding categories?</p>
-                            <p>a.Yes,always.銆�b.Sometimes.銆�c.Never.</p>
-                            <p>2.Do you use your own shopping bags?</p>
-                            <p>a.Yes,always.銆�b.Sometimes.銆�c.Never.</p>
-                            <p>3.Do you recycle light bulbs and used batteries?</p>
-                            <p>a.Yes,always.銆�b.Sometimes.銆�c.Never.</p>
-                            <p>4.Do you switch off the lights when you leave a room?</p>
-                            <p>a.Yes,always.銆�b.Sometimes.銆�c.Never.</p>
-                            <p>5.Do you switch off the TV and computer before you go to sleep?</p>
-                            <p>a.Yes,always.銆�b.Sometimes.銆�c.Never.</p>
-                            <p>6.Do you put on warmer clothes on a cold day instead of turning on the heating?</p>
-                            <p>a.Yes,always.銆�b.Sometimes.銆�c.Never.</p>
-                            <p>7.Do you keep the tap closed while you are brushing your teeth?</p>
-                            <p>a.Yes,always.銆�b.Sometimes.銆�c.Never.</p>
-                            <p>8.Do you use public transport or a bike when possible?</p>
-                            <p>a.Yes,always.銆�b.Sometimes.銆�c.Never.</p>
+                            <ul>
+                                <li v-for="(item, index) in choiceData[0].value" :key="index">
+                                    <p>
+                                        {{ index + 1 }}.{{ item.stem }}
+                                    </p>
+                                    <p>
+                                        <span v-for="(citem, cindex) in choiceData[0].option " :key="cindex">
+                                            <input type="radio" :name="item.stem" :value="citem.value"
+                                                v-model="item.userAnswer" />
+                                            {{ citem.value }}.{{ citem.label }}
+                                        </span>
+                                    </p>
+                                </li>
+                            </ul>
                             <p>Check the number of the points you have got and see if you are GREEN!</p>
-                            <p>a.2 points銆�b.1 point銆�c.0 point</p>
+                            <p class="center"
+                                :class="{ 'green-text': choiceData[0].isComplete, 'red-text': !choiceData[0].isComplete }">
+                                鎮ㄧ殑寰楀垎:<span v-if="choiceData[0].isComplete">{{ choiceData[0].userScore }}</span></p>
+                            <div class="w100 fl ju-cn">
+                                <ul class="fl ju-ar w80">
+                                    <li>
+                                        <button :disabled="choiceData[0].isComplete" class="btn-border btn-w"
+                                            @click="handleChoiceData">
+                                            鎻愪氦
+                                        </button>
+                                    </li>
+                                    <li>
+                                        <button @click="changeChoiceData" class="btn-border btn-w">
+                                            閲嶅仛
+                                        </button>
+                                    </li>
+                                    <li>
+                                        <button @click="choiceData[0].isShowAnswer = !choiceData[0].isShowAnswer"
+                                            class="parimary-btn">
+                                            鏌ョ湅绛旀
+                                        </button>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="show-answer-box" v-if="choiceData[0].isShowAnswer">
+                                <div>绛旀:</div>
+                                <div>
+                                    <img src="../../assets/images/M5ChoiceData.png" alt="" class="w100" />
+                                </div>
+                            </div>
                             <div class="fieldset-61">
                                 <p>From 12 to 16</p>
                                 <p>Congratulations! You are definitely environmentally conscious.Thank you for helping
@@ -744,8 +1760,47 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <h3 id="c042"><span class="bjh3">Reading</span></h3>
-                        <p>1.鈥淵ou are what you eat.鈥� How do you understand this saying?</p>
-                        <p>2.What is a climate-friendly diet?</p>
+                        <p>1.鈥淵ou are what you eat.鈥� How do you understand this saying?
+                            <span class="btn-box" @click="showAnswerFive = !showAnswerFive">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea v-model="questionData.reading.four" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setBookQuestion"></textarea>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerFive">
+                            绛旀锛歍he saying means the food one eats has a huge influence on one's state of mind and
+                            health. Keeping good eating habits can help you reduce diseases. It鈥檚 important to choose
+                            the right food to eat and prepare food in a healthy way.
+                        </p>
+                        <p>2.What is a climate-friendly diet?
+                            <span class="btn-box" @click="showAnswerSix = !showAnswerSix">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea v-model="questionData.reading.five" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setBookQuestion"></textarea>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerSix">
+                            绛旀锛欰 climate-friendly diet is a type of diet that aims to reduce its environmental impact by
+                            consuming food that is sustainable and low in carbon footprint.
+                            In practice, a climate-friendly diet may involve various principles, including:
+                            (1) Eating a variety of plant-based foods such as fruits, vegetables, and whole grains.
+                            (2) Reducing meat consumption.
+                            (3) Buying local and organic foods.
+                            (4) Reducing food waste by properly storing and using food.
+                        </p>
                         <p class="center"><b>Your Dinner Has a Carbon Footprint</b></p>
                         <p class="center"> <audio :src="resource.listenOne" controls
                                 controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
@@ -916,38 +1971,582 @@
                     <div class="bodystyle">
                         <p><b>鈪�.Reading comprehension.</b></p>
                         <p>A.Mark the suggestions given by the author on how to reduce carbon footprints.</p>
-                        <p>Ways to reduce carbon footprints</p>
-                        <p>銆�銆�銆�鈻� Driving to work in cars</p>
-                        <p>銆�銆�銆�鈻� Carpooling to work</p>
-                        <p>銆�銆�銆�鈻� Eating much meat</p>
-                        <p>銆�銆�銆�鈻� Having a meatless meal</p>
-                        <p>銆�銆�銆�鈻� Eating vegetables</p>
-                        <p>銆�銆�銆�鈻� Eating imported fruits</p>
+                        <div class="horizontal" style="display: flex">
+                            <div class="left fl al-cn" style="width: 48%;">
+                                <p>Ways to reduce carbon footprints</p>
+                            </div>
+                            <div class="right" style="width: 48%">
+                                <p>
+                                    <input type="checkbox" name="ball" value="Driving to work in cars" id="1"
+                                        v-model="questionDataTwo.check.value" />
+                                    Driving to work in cars
+                                    <span>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Driving to work in cars'
+                                            )
+                                        " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Driving to work in cars'
+                                            ) == false
+                                        " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                                <p>
+                                    <input type="checkbox" name="ball" value="Carpooling to work" id="2"
+                                        v-model="questionDataTwo.check.value" />
+                                    Carpooling to work
+                                    <span>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Carpooling to work'
+                                            )
+                                        " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Carpooling to work'
+                                            ) == false
+                                        " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                                <p>
+                                    <input type="checkbox" name="ball" value="Eating much meat" id="3"
+                                        v-model="questionDataTwo.check.value" />
+                                    Eating much meat
+                                    <span>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Eating much meat'
+                                            )
+                                        " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Eating much meat'
+                                            ) == false
+                                        " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                                <p>
+                                    <input type="checkbox" name="ball" value="Having a meatless meal" id="4"
+                                        v-model="questionDataTwo.check.value" />
+                                    Driving to work in cars
+                                    <span>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Having a meatless meal'
+                                            )
+                                        " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Having a meatless meal'
+                                            ) == false
+                                        " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                                <p>
+                                    <input type="checkbox" name="ball" value="Eating vegetables" id="5"
+                                        v-model="questionDataTwo.check.value" />
+                                    Eating vegetables
+                                    <span>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Eating vegetables'
+                                            )
+                                        " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Eating vegetables'
+                                            ) == false
+                                        " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                                <p>
+                                    <input type="checkbox" name="ball" value="Eating imported fruits" id="6"
+                                        v-model="questionDataTwo.check.value" />
+                                    Eating imported fruits
+                                    <span>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Eating imported fruits'
+                                            )
+                                        " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="
+                                            questionDataTwo.isComplete &&
+                                            isShowRight(
+                                                questionDataTwo.check.answer, questionDataTwo.check.value, 'Eating imported fruits'
+                                            ) == false
+                                        " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </p>
+                            </div>
+                        </div>
                         <p>B.Decide whether the following statements are true (T) or false (F).</p>
-                        <p>(銆�) 1.It鈥檚 convenient to cut our carbon footprints in half.</p>
-                        <p>(銆�) 2.People eat for different purposes and have different eating habits.</p>
-                        <p>(銆�) 3.Carbon footprints have nothing to do with people鈥檚 diets.</p>
-                        <p>(銆�) 4.The more meat people eat,the fewer carbon emissions are produced.</p>
-                        <p>(銆�) 5.People鈥檚 personal diets have a huge influence on the planet.</p>
+                        <p>(<select class="select-border" :disabled="questionDataTwo.isComplete"
+                                v-model="questionDataTwo.dt.one.value" style="width: 8%">
+                                <option v-for="(item, index) in questionDataTwo.dt.dtList" :key="index" :value="item">
+                                    {{ item }}
+                                </option>
+                            </select>) 1.It鈥檚 convenient to cut our carbon footprints in half.
+                            <span class="icon-box-big">
+                                <svg v-if="questionDataTwo.dt.one.isRight" t="1716986419862" class="icon"
+                                    viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                    p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="questionDataTwo.dt.one.isRight == false" t="1716987085767" class="icon"
+                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                    p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>(<select class="select-border" :disabled="questionDataTwo.isComplete"
+                                v-model="questionDataTwo.dt.two.value" style="width: 8%">
+                                <option v-for="(item, index) in questionDataTwo.dt.dtList" :key="index" :value="item">
+                                    {{ item }}
+                                </option>
+                            </select>) 2.People eat for different purposes and have different eating habits.
+                            <span class="icon-box-big">
+                                <svg v-if="questionDataTwo.dt.two.isRight" t="1716986419862" class="icon"
+                                    viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                    p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="questionDataTwo.dt.two.isRight == false" t="1716987085767" class="icon"
+                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                    p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>(<select class="select-border" :disabled="questionDataTwo.isComplete"
+                                v-model="questionDataTwo.dt.three.value" style="width: 8%">
+                                <option v-for="(item, index) in questionDataTwo.dt.dtList" :key="index" :value="item">
+                                    {{ item }}
+                                </option>
+                            </select>) 3.Carbon footprints have nothing to do with people鈥檚 diets.
+                            <span class="icon-box-big">
+                                <svg v-if="questionDataTwo.dt.three.isRight" t="1716986419862" class="icon"
+                                    viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                    p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="questionDataTwo.dt.three.isRight == false" t="1716987085767" class="icon"
+                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                    p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>(<select class="select-border" :disabled="questionDataTwo.isComplete"
+                                v-model="questionDataTwo.dt.four.value" style="width: 8%">
+                                <option v-for="(item, index) in questionDataTwo.dt.dtList" :key="index" :value="item">
+                                    {{ item }}
+                                </option>
+                            </select>) 4.The more meat people eat,the fewer carbon emissions are produced.
+                            <span class="icon-box-big">
+                                <svg v-if="questionDataTwo.dt.four.isRight" t="1716986419862" class="icon"
+                                    viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                    p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="questionDataTwo.dt.four.isRight == false" t="1716987085767" class="icon"
+                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                    p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>(<select class="select-border" :disabled="questionDataTwo.isComplete"
+                                v-model="questionDataTwo.dt.five.value" style="width: 8%">
+                                <option v-for="(item, index) in questionDataTwo.dt.dtList" :key="index" :value="item">
+                                    {{ item }}
+                                </option>
+                            </select>) 5.People鈥檚 personal diets have a huge influence on the planet.
+                            <span class="icon-box-big">
+                                <svg v-if="questionDataTwo.dt.five.isRight" t="1716986419862" class="icon"
+                                    viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                    p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="questionDataTwo.dt.five.isRight == false" t="1716987085767" class="icon"
+                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                    p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
                         <p><b>鈪�.Language focus.</b></p>
                         <p>A.Replace the words or expression,in italics with the exact words in the passage and change
                             the form if necessary.</p>
-                        <p>1.The air was thin and <i>fresh</i>,filled with hazy sunshine and frost._________</p>
-                        <p>2.Few can <i>live</i> more than a week without water._________</p>
+                        <p>1.The air was thin and <i>fresh</i>,filled with hazy sunshine and frost.<input
+                                :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataTwo.rw.one" @change="setQuestionDataTwo" />
+                            <span>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.rw.answer, questionDataTwo.rw.one, 0)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.rw.answer, questionDataTwo.rw.one, 0) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>2.Few can <i>live</i> more than a week without water.<input
+                                :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataTwo.rw.two" @change="setQuestionDataTwo" />
+                            <span>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.rw.answer, questionDataTwo.rw.two, 1)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.rw.answer, questionDataTwo.rw.two, 1) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
                         <p>3.People should be prohibited from using plastic bags to <i>get rid of</i> white
-                            pollution._________</p>
-                        <p>4.<i>Discharge</i> of greenhouse gases contributes to global warming._________</p>
-                        <p>5.She <i>thought</i> that both she and Ned had learned a lot from the experience._________
+                            pollution.<input :disabled="questionDataTwo.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataTwo.rw.three"
+                                @change="setQuestionDataTwo" />
+                            <span>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.rw.answer, questionDataTwo.rw.three, 2)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.rw.answer, questionDataTwo.rw.three, 2) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>4.<i>Discharge</i> of greenhouse gases contributes to global warming.<input
+                                :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataTwo.rw.four" @change="setQuestionDataTwo" />
+                            <span>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.rw.answer, questionDataTwo.rw.four, 3)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.rw.answer, questionDataTwo.rw.four, 3) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>5.She <i>thought</i> that both she and Ned had learned a lot from the experience.<input
+                                :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataTwo.rw.five" @change="setQuestionDataTwo" />
+                            <span>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.rw.answer, questionDataTwo.rw.five, 4)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.rw.answer, questionDataTwo.rw.five, 4) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
                         </p>
                         <p>B.Fill in the blanks with the proper form of the expressions given below.</p>
                         <div class="bk-wh">
                             <p>carbon footprint銆�big time銆�turn out銆�reflect on銆�reach for</p>
                         </div>
-                        <p>1.We need to take some time to ________ what we have done to nature.</p>
-                        <p>2.Human activities affect the environment ________ .</p>
-                        <p>3.She ________ the luggage when she was required to show the ticket.</p>
-                        <p>4.We all need to look for ways to reduce our ________ .</p>
-                        <p>5.It ________ that bamboo can replace plastic in items like tableware,toothbrushes and so on.
+                        <p>1.We need to take some time to <input :disabled="questionDataTwo.isComplete" type="text"
+                                class="input-bottom-border" style="width: 100px" v-model="questionDataTwo.fb.one"
+                                @change="setQuestionDataTwo" /> what we have done to nature.
+                            <span>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.fb.answer, questionDataTwo.fb.one, 0)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.fb.answer, questionDataTwo.fb.one, 0) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>2.Human activities affect the environment <input :disabled="questionDataTwo.isComplete"
+                                type="text" class="input-bottom-border" style="width: 100px"
+                                v-model="questionDataTwo.fb.two" @change="setQuestionDataTwo" /> .
+                            <span>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.fb.answer, questionDataTwo.fb.two, 1)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.fb.answer, questionDataTwo.fb.two, 1) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>3.She <input :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataTwo.fb.three" @change="setQuestionDataTwo" />
+                            the luggage when she was required to show the ticket.
+                            <span>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.fb.answer, questionDataTwo.fb.three, 2)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.fb.answer, questionDataTwo.fb.three, 2) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>4.We all need to look for ways to reduce our <input :disabled="questionDataTwo.isComplete"
+                                type="text" class="input-bottom-border" style="width: 100px"
+                                v-model="questionDataTwo.fb.four" @change="setQuestionDataTwo" /> .
+                            <span>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.fb.answer, questionDataTwo.fb.four, 3)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.fb.answer, questionDataTwo.fb.four, 3) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <p>5.It <input :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border"
+                                style="width: 100px" v-model="questionDataTwo.fb.five" @change="setQuestionDataTwo" />
+                            that bamboo can replace plastic in items like tableware,toothbrushes and so on.
+                            <span>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.fb.answer, questionDataTwo.fb.five, 4)
+                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                    <path
+                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                        fill="#1AFA29" p-id="18768"></path>
+                                </svg>
+                                <svg v-if="
+                                    questionDataTwo.isComplete &&
+                                    isTextRight(questionDataTwo.fb.answer, questionDataTwo.fb.five, 4) == false
+                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                        fill="#d81e06" p-id="25746"></path>
+                                </svg>
+                            </span>
                         </p>
                     </div>
                 </div>
@@ -988,26 +2587,49 @@
                         <p>Rewrite the following sentences using the infinitive symbol 鈥渢o鈥�.</p>
                         <p>1.We work hard.</p>
                         <p>We want to make a better life.</p>
-                        <p>___________________________________________________</p>
+                        <p><input :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataTwo.rf.one" @change="setQuestionDataTwo" /></p>
                         <p>2.I鈥檓 sorry.</p>
                         <p>I sent the urgent email to a wrong person.</p>
-                        <p>___________________________________________________</p>
+                        <p><input :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataTwo.rf.two" @change="setQuestionDataTwo" /></p>
                         <p>3.I was shocked.</p>
                         <p>I heard the news that temperatures at North Pole were more than 50掳F warmer than average.</p>
-                        <p>___________________________________________________</p>
+                        <p><input :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataTwo.rf.three" @change="setQuestionDataTwo" /></p>
                         <p>4.The 70-year-old grandma was warm-hearted.</p>
                         <p>She cleaned 52 beaches in one year.</p>
-                        <p>___________________________________________________</p>
+                        <p><input :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataTwo.rf.four" @change="setQuestionDataTwo" /></p>
                         <p>5.Miss Li was environmentally conscious.</p>
                         <p>She switched off all the lights after each class.</p>
-                        <p>___________________________________________________</p>
+                        <p><input :disabled="questionDataTwo.isComplete" type="text" class="input-bottom-border w80"
+                                v-model="questionDataTwo.rf.five" @change="setQuestionDataTwo" /></p>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ar w80">
+                                <li>
+                                    <button class="btn-border btn-w" @click="saveDataTwo">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="changeQuestionDataTwo" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                         <h3 id="c043"><span class="bjh3">Mini-project</span></h3>
                         <p>Nature needs to be heard,understood and assisted.Let鈥檚 start with waste sorting.</p>
                         <p>鈥淲hat kind of trash are you? I mean,what kind of the trash are you taking?鈥� There have been
                             such funny chats among neighbours ever since each household was strictly required to sort
                             its waste into four categories (recyclable waste,hazardous waste,kitchen waste and residual
                             waste),and put them into proper bins.</p>
-                        <p><b>鈪�.Classify the following waste and put the number of the waste into proper bins.</b></p>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1030,10 +2652,36 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
+                        <p><b>鈪�.Classify the following waste and put the number of the waste into proper bins.</b>
+                            <span class="btn-box" @click="showAnswerSeven = !showAnswerSeven">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
                         <p>1.books銆�2.paints銆�3.dust銆�4.eggshells銆�5.plastic bottles銆�6.fruit peels</p>
                         <p>7.batteries銆�8.hair銆�9.leftovers銆�10.newspapers銆�11.tin cans銆�12.expired medicine</p>
                         <p>13.broken ceramics銆�14.used tissue銆�15.fish bones銆�16.nail polish remover</p>
-                        <p class="center"><img class="img-b" alt="" src="../../assets/images/0100-1.jpg" /></p>
+                        <div class="center poster-img">
+                            <img class="img-a" alt="" src="../../assets/images/0100-1.jpg" />
+                            <textarea class="poster-input-box-one fz-13 fm-son" v-model="questionData.reading.six"
+                                placeholder="璇疯緭鍏ュ唴瀹�" rows="6" @change="setBookQuestion"></textarea>
+                            <textarea class="poster-input-box-two fz-13 fm-son" v-model="questionData.reading.seven"
+                                placeholder="璇疯緭鍏ュ唴瀹�" rows="6" @change="setBookQuestion"></textarea>
+                            <textarea class="poster-input-box-three fz-13 fm-son" v-model="questionData.reading.eight"
+                                placeholder="璇疯緭鍏ュ唴瀹�" rows="6" @change="setBookQuestion"></textarea>
+                            <textarea class="poster-input-box-four fz-13 fm-son" v-model="questionData.reading.nine"
+                                placeholder="璇疯緭鍏ュ唴瀹�" rows="6" @change="setBookQuestion"></textarea>
+                        </div>
+                        <div class="show-answer-box" v-if="showAnswerSeven">
+                            <div>绛旀:</div>
+                            <div>
+                                <img src="../../assets/images/M5RefuseClassification.png" alt="" class="w100" />
+                            </div>
+                        </div>
                         <p><b>鈪�.Work in groups.Ask your group members how they deal with the household waste every
                                 day.Finish the worksheet and prepare a report to the class.</b></p>
                         <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
@@ -1289,11 +2937,15 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <h2 id="b019"><img class="img-0" alt="" src="../../assets/images/dy5-le3.jpg" /></h2>
-                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
-                            style="margin-left: 10px" class="audio" @play="audioPlay"></audio>
-                        <h3 id="c044"><span class="bjh3">Listening</span></h3>
+                        <h3 id="c044" class="fl al-cn">
+                            <span class="bjh3">Listening</span>
+                            <!--controlslist="noplaybackrate nodownload"鍚庨潰鐨勯煶棰戞鍔犲叆杩欎釜-->
+                            <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio>
+                        </h3>
                         <p><b>鈪�.Every one of us should have a clear sense of how important Nature means to mankind.Watch
-                                the video and fill in the blanks with what you hear.</b></p>
+                                the video and fill in the blanks with what you hear.</b>
+                        </p>
                         <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                             <tr class="table-th-bc">
                                 <td class="wh-no tl-cn">Redwood Sapling</td>
@@ -1311,13 +2963,13 @@
                                     What have you seen?
                                 </td>
                                 <td>
-                                    I've seen all kinds of l.<input :disabled="testData.isComplete" type="text"
+                                    I've seen all kinds of l.<input :disabled="questionDataThree.isComplete" type="text"
                                         class="input-bottom-border input-bc-t" style="width: 60px"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                        v-model="questionDataThree.eo.one" @change="setQuestionDataTwo" />
                                     <span>
                                         <svg v-if="
-                                            testData.isComplete &&
-                                            isTextRight(testData.in.answer, testData.in.one, 0)
+                                            questionDataThree.isComplete &&
+                                            isTextRight(questionDataThree.eo.answer, questionDataThree.eo.one, 0)
                                         " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
@@ -1326,8 +2978,8 @@
                                                 fill="#1AFA29" p-id="18768"></path>
                                         </svg>
                                         <svg v-if="
-                                            testData.isComplete &&
-                                            isTextRight(testData.in.answer, testData.in.one, 0) == false
+                                            questionDataThree.isComplete &&
+                                            isTextRight(questionDataThree.eo.answer, questionDataThree.eo.one, 0) == false
                                         " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
@@ -1335,13 +2987,13 @@
                                                 d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                                 fill="#d81e06" p-id="25746"></path>
                                         </svg>
-                                    </span>锛宐ugs and 2.<input :disabled="testData.isComplete" type="text"
+                                    </span>锛宐ugs and 2.<input :disabled="questionDataThree.isComplete" type="text"
                                         class="input-bottom-border input-bc-t" style="width: 60px"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                        v-model="questionDataThree.eo.two" @change="setQuestionDataTwo" />
                                     <span>
                                         <svg v-if="
-                                            testData.isComplete &&
-                                            isTextRight(testData.in.answer, testData.in.one, 0)
+                                            questionDataThree.isComplete &&
+                                            isTextRight(questionDataThree.eo.answer, questionDataThree.eo.two, 1)
                                         " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
@@ -1350,8 +3002,8 @@
                                                 fill="#1AFA29" p-id="18768"></path>
                                         </svg>
                                         <svg v-if="
-                                            testData.isComplete &&
-                                            isTextRight(testData.in.answer, testData.in.one, 0) == false
+                                            questionDataThree.isComplete &&
+                                            isTextRight(questionDataThree.eo.answer, questionDataThree.eo.two, 1) == false
                                         " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
@@ -1359,7 +3011,8 @@
                                                 d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                                 fill="#d81e06" p-id="25746"></path>
                                         </svg>
-                                    </span>锛宮ice andrats, rabbits and bears, and skuhks. But things have been changed
+                                    </span>
+                                    锛宮ice andrats, rabbits and bears, and skuhks. But things have been changed
                                     ever since humans came.
                                 </td>
                             </tr>
@@ -1369,13 +3022,13 @@
                                 </td>
                                 <td>
                                     They changed wolves into dogs, rivers into lakes, and us into 3.<input
-                                        :disabled="testData.isComplete" type="text"
+                                        :disabled="questionDataThree.isComplete" type="text"
                                         class="input-bottom-border input-bc-t" style="width: 60px"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                        v-model="questionDataThree.eo.three" @change="setQuestionDataTwo" />
                                     <span>
                                         <svg v-if="
-                                            testData.isComplete &&
-                                            isTextRight(testData.in.answer, testData.in.one, 0)
+                                            questionDataThree.isComplete &&
+                                            isTextRight(questionDataThree.eo.answer, questionDataThree.eo.three, 2)
                                         " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
@@ -1384,8 +3037,8 @@
                                                 fill="#1AFA29" p-id="18768"></path>
                                         </svg>
                                         <svg v-if="
-                                            testData.isComplete &&
-                                            isTextRight(testData.in.answer, testData.in.one, 0) == false
+                                            questionDataThree.isComplete &&
+                                            isTextRight(questionDataThree.eo.answer, questionDataThree.eo.three, 2) == false
                                         " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
@@ -1393,13 +3046,14 @@
                                                 d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                                 fill="#d81e06" p-id="25746"></path>
                                         </svg>
-                                    </span>They started using the 4.<input :disabled="testData.isComplete" type="text"
+                                    </span>
+                                    They started using the 4.<input :disabled="questionDataThree.isComplete" type="text"
                                         class="input-bottom-border input-bc-t" style="width: 60px"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                        v-model="questionDataThree.eo.four" @change="setQuestionDataTwo" />
                                     <span>
                                         <svg v-if="
-                                            testData.isComplete &&
-                                            isTextRight(testData.in.answer, testData.in.one, 0)
+                                            questionDataThree.isComplete &&
+                                            isTextRight(questionDataThree.eo.answer, questionDataThree.eo.four, 3)
                                         " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
@@ -1408,8 +3062,8 @@
                                                 fill="#1AFA29" p-id="18768"></path>
                                         </svg>
                                         <svg v-if="
-                                            testData.isComplete &&
-                                            isTextRight(testData.in.answer, testData.in.one, 0) == false
+                                            questionDataThree.isComplete &&
+                                            isTextRight(questionDataThree.eo.answer, questionDataThree.eo.four, 3) == false
                                         " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
@@ -1417,7 +3071,8 @@
                                                 d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                                 fill="#d81e06" p-id="25746"></path>
                                         </svg>
-                                    </span>like it was put there just for them, Actlike they've got an extra one.
+                                    </span>
+                                    like it was put there just for them, Actlike they've got an extra one.
                                 </td>
 
                             </tr>
@@ -1427,13 +3082,13 @@
                                 </td>
                                 <td>
                                     I don't know, If they don't figure put that they're part of 5.<input
-                                        :disabled="testData.isComplete" type="text"
+                                        :disabled="questionDataThree.isComplete" type="text"
                                         class="input-bottom-border input-bc-t" style="width: 60px"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                        v-model="questionDataThree.eo.five" @change="setQuestionDataTwo" />
                                     <span>
                                         <svg v-if="
-                                            testData.isComplete &&
-                                            isTextRight(testData.in.answer, testData.in.one, 0)
+                                            questionDataThree.isComplete &&
+                                            isTextRight(questionDataThree.eo.answer, questionDataThree.eo.five, 4)
                                         " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
@@ -1442,8 +3097,8 @@
                                                 fill="#1AFA29" p-id="18768"></path>
                                         </svg>
                                         <svg v-if="
-                                            testData.isComplete &&
-                                            isTextRight(testData.in.answer, testData.in.one, 0) == false
+                                            questionDataThree.isComplete &&
+                                            isTextRight(questionDataThree.eo.answer, questionDataThree.eo.five, 4) == false
                                         " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                             xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
@@ -1456,10 +3111,143 @@
                                 </td>
                             </tr>
                         </table>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerTen">
+                            绛旀锛�(1)weather &nbsp; (2)spiders &nbsp; (3)wood &nbsp; (4)planet &nbsp; (5)Nature
+                        </p>
                         <p><b>鈪�.The four people below are all concerned with the increasingly serious environmental
                                 issues.Listen to the recording and decide which website they use to search for the
                                 information they need.</b></p>
-                        <p class="center"><img class="img-b" alt="" src="../../assets/images/0101-3.jpg" /></p>
+                        <div class="fl">
+                            <div>
+                                <img class="w100" alt="" src="../../assets/images/M5Select01.png" />
+                                <p class="table-p center">James</p>
+                                <div class="fl">
+                                    <select class="select-border w80" :disabled="questionDataThree.isComplete"
+                                        v-model="questionDataThree.tp.one.value">
+                                        <option v-for="(item, index) in questionDataThree.tp.tpList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="questionDataThree.tp.one.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="questionDataThree.tp.one.isRight == false" t="1716987085767"
+                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </div>
+                            </div>
+                            <div>
+                                <img class="w100" alt="" src="../../assets/images/M5Select02.png" />
+                                <p class="table-p center">Amy</p>
+                                <div class="fl">
+                                    <select class="select-border w80" :disabled="questionDataThree.isComplete"
+                                        v-model="questionDataThree.tp.two.value">
+                                        <option v-for="(item, index) in questionDataThree.tp.tpList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="questionDataThree.tp.two.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="questionDataThree.tp.two.isRight == false" t="1716987085767"
+                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </div>
+                            </div>
+                            <div>
+                                <img class="w100" alt="" src="../../assets/images/M5Select03.png" />
+                                <p class="table-p center">Tim</p>
+                                <div class="fl">
+                                    <select class="select-border w80" :disabled="questionDataThree.isComplete"
+                                        v-model="questionDataThree.tp.three.value">
+                                        <option v-for="(item, index) in questionDataThree.tp.tpList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="questionDataThree.tp.three.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="questionDataThree.tp.three.isRight == false" t="1716987085767"
+                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </div>
+                            </div>
+                            <div>
+                                <img class="w100" alt="" src="../../assets/images/M5Select04.png" />
+                                <p class="table-p center">James</p>
+                                <div class="fl">
+                                    <select class="select-border w80" :disabled="questionDataThree.isComplete"
+                                        v-model="questionDataThree.tp.four.value">
+                                        <option v-for="(item, index) in questionDataThree.tp.tpList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="questionDataThree.tp.four.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="questionDataThree.tp.four.isRight == false" t="1716987085767"
+                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </div>
+                            </div>
+
+
+                        </div>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerTen">
+                            绛旀锛�(1)d (2)c (3)b (4)a
+                        </p>
                         <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                             <tr class="table-tr-bc">
                                 <td class="tl-lf ">
@@ -1506,6 +3294,25 @@
                                 </td>
                             </tr>
                         </table>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ar w80">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handleQuestionDataThree">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastQuestionDataThree" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="showAnswerTen = !showAnswerTen" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1530,10 +3337,53 @@
                     <div class="bodystyle">
                         <h3 id="c045"><span class="bjh3">Practical Writing</span></h3>
                         <p>Work with your partner to discuss the following questions.</p>
-                        <p>1.Who is the memo written to?</p>
-                        <p>2.What is the purpose of memo writing?</p>
+                        <p>1.Who is the memo written to?
+                            <span class="btn-box" @click="showAnswerEight = !showAnswerEight">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea v-model="questionData.reading.ten" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setBookQuestion"></textarea>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerEight">
+                            绛旀锛歋taff in the company.
+
+                        </p>
+                        <p>2.What is the purpose of memo writing?
+                            <span class="btn-box" @click="showAnswerNine = !showAnswerNine">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea v-model="questionData.reading.eleven" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setBookQuestion"></textarea>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerNine">
+                            绛旀锛欼t is written to inform the staff about new information like some internal changes,
+                            upcoming events, meeting schedules, etc.
+                        </p>
                         <p><b>鈪�.Read the following tips for writing a memo and find out how you can improve your
-                                memo.</b></p>
+                                memo.</b>
+                            <span class="btn-box" @click="showAnswerEleven = !showAnswerEleven">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
                         <p>A memo,also known as memorandum,is a short message used for internal communication in a
                             business.It is written to inform the staff about new information like some internal
                             changes,upcoming events,meeting schedules,etc.</p>
@@ -1546,6 +3396,13 @@
                             <p>鈼� Get the tone right.</p>
                             <p>鈼� Maintain a professional style.</p>
                         </div>
+                        <textarea v-model="questionData.reading.twelve" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setBookQuestion"></textarea>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerEleven">
+                            绛旀锛歋taff in the company.
+                        </p>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1570,15 +3427,33 @@
                     <div class="bodystyle">
                         <p><b>鈪�.Translate the following sentences into Chinese.</b></p>
                         <p>1.Please note that the company will start the office recycling program on May 15.</p>
-                        <p>___________________________________________________</p>
+                        <p><input :disabled="questionDataFour.isComplete" type="text"
+                                class="input-bottom-border input-bc-t w80" v-model="questionDataFour.tf.one"
+                                @change="setQuestionDataFour" /></p>
                         <p>2.I鈥檇 like to have your report by 10 a.m.tomorrow.</p>
-                        <p>___________________________________________________</p>
+                        <p><input :disabled="questionDataFour.isComplete" type="text"
+                                class="input-bottom-border input-bc-t w80" v-model="questionDataFour.tf.two"
+                                @change="setQuestionDataFour" /></p>
                         <p>3.This memo will present the decisions made at the meeting.</p>
-                        <p>___________________________________________________</p>
+                        <p><input :disabled="questionDataFour.isComplete" type="text"
+                                class="input-bottom-border input-bc-t w80" v-model="questionDataFour.tf.three"
+                                @change="setQuestionDataFour" /></p>
                         <p>4.Please contact the HR department for more detailed information.</p>
-                        <p>___________________________________________________</p>
+                        <p><input :disabled="questionDataFour.isComplete" type="text"
+                                class="input-bottom-border input-bc-t w80" v-model="questionDataFour.tf.four"
+                                @change="setQuestionDataFour" /></p>
                         <p>5.Thank you for your support.</p>
-                        <p>___________________________________________________</p>
+                        <p><input :disabled="questionDataFour.isComplete" type="text"
+                                class="input-bottom-border input-bc-t w80" v-model="questionDataFour.tf.five"
+                                @change="setQuestionDataFour" /></p>
+                        <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerTwelve">
+                            <p class="table-p tl-lf">绛旀锛�</p>
+                            <p class="table-p">(1).璇锋敞鎰忥紝鍏徃灏嗕簬5鏈�15鏃ユ帹琛屽姙鍏搴熺墿鍥炴敹鍒躲��</p>
+                            <p class="table-p">(2).璇峰湪鏄庢棭10鐐逛互鍓嶅皢鎶ュ憡浜ょ粰鎴戙��</p>
+                            <p class="table-p">(3).杩欎唤澶囧繕褰曞皢璁拌浇浼氳鍐冲畾銆�</p>
+                            <p class="table-p">(4).璇疯仈绯讳汉鍔涜祫婧愰儴浜嗚В鏇村璇︾粏淇℃伅銆�</p>
+                            <p class="table-p">(5).鎰熻阿鎮ㄧ殑鏀寔銆�</p>
+                        </div>
                         <p><b>鈪�.Complete the memo with the sentences given below.</b></p>
                         <div class="fieldset-5">
                             <p>a.In addition,we would like to encourage everyone to participate by turning off the
@@ -1594,12 +3469,134 @@
                             <p>To:All employees</p>
                             <p>From:Ryan Black,CEO</p>
                             <p>Date:March 23,2023</p>
-                            <p>Subject:1.___________________</p>
-                            <p>2.___________________,the world鈥檚 largest grassroots movement for the environment.</p>
-                            <p>3.___________________,by switching off all non-essential office lights and unplugging
+                            <p>Subject:1. <select class="select-border w20" :disabled="questionDataFour.isComplete"
+                                    v-model="questionDataFour.cm.one.value">
+                                    <option v-for="(item, index) in questionDataFour.cm.cmList" :key="index"
+                                        :value="item">
+                                        {{ item }}
+                                    </option>
+                                </select>
+                                <span class="icon-box-big">
+                                    <svg v-if="questionDataFour.cm.one.isRight" t="1716986419862" class="icon"
+                                        viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                        <path
+                                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                            fill="#1AFA29" p-id="18768"></path>
+                                    </svg>
+                                    <svg v-if="questionDataFour.cm.one.isRight == false" t="1716987085767" class="icon"
+                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                        <path
+                                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                            fill="#d81e06" p-id="25746"></path>
+                                    </svg>
+                                </span>
+                            </p>
+                            <p>2.<select class="select-border w20" :disabled="questionDataFour.isComplete"
+                                    v-model="questionDataFour.cm.two.value">
+                                    <option v-for="(item, index) in questionDataFour.cm.cmList" :key="index"
+                                        :value="item">
+                                        {{ item }}
+                                    </option>
+                                </select>
+                                <span class="icon-box-big">
+                                    <svg v-if="questionDataFour.cm.two.isRight" t="1716986419862" class="icon"
+                                        viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                        <path
+                                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                            fill="#1AFA29" p-id="18768"></path>
+                                    </svg>
+                                    <svg v-if="questionDataFour.cm.two.isRight == false" t="1716987085767" class="icon"
+                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                        <path
+                                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                            fill="#d81e06" p-id="25746"></path>
+                                    </svg>
+                                </span>
+                                ,the world鈥檚 largest grassroots movement for the environment.
+                            </p>
+                            <p>3.<select class="select-border w20" :disabled="questionDataFour.isComplete"
+                                    v-model="questionDataFour.cm.three.value">
+                                    <option v-for="(item, index) in questionDataFour.cm.cmList" :key="index"
+                                        :value="item">
+                                        {{ item }}
+                                    </option>
+                                </select>
+                                <span class="icon-box-big">
+                                    <svg v-if="questionDataFour.cm.three.isRight" t="1716986419862" class="icon"
+                                        viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                        <path
+                                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                            fill="#1AFA29" p-id="18768"></path>
+                                    </svg>
+                                    <svg v-if="questionDataFour.cm.three.isRight == false" t="1716987085767"
+                                        class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                        xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                        xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                        <path
+                                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                            fill="#d81e06" p-id="25746"></path>
+                                    </svg>
+                                </span>
+                                ,by switching off all non-essential office lights and unplugging
                                 non-essential equipment before leaving the building if you happen to be there on
-                                Friday,March 25,the day before Earth Hour.4._________________ .</p>
-                            <p>5.______________.Small actions can make a big difference to the planet,our home.</p>
+                                Friday,March 25,the day before Earth Hour.4.<select class="select-border w20"
+                                    :disabled="questionDataFour.isComplete" v-model="questionDataFour.cm.four.value">
+                                    <option v-for="(item, index) in questionDataFour.cm.cmList" :key="index"
+                                        :value="item">
+                                        {{ item }}
+                                    </option>
+                                </select>
+                                <span class="icon-box-big">
+                                    <svg v-if="questionDataFour.cm.four.isRight" t="1716986419862" class="icon"
+                                        viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                        <path
+                                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                            fill="#1AFA29" p-id="18768"></path>
+                                    </svg>
+                                    <svg v-if="questionDataFour.cm.four.isRight == false" t="1716987085767" class="icon"
+                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                        <path
+                                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                            fill="#d81e06" p-id="25746"></path>
+                                    </svg>
+                                </span>
+                                .
+                            </p>
+                            <p>5.<select class="select-border w20" :disabled="questionDataFour.isComplete"
+                                    v-model="questionDataFour.cm.five.value">
+                                    <option v-for="(item, index) in questionDataFour.cm.cmList" :key="index"
+                                        :value="item">
+                                        {{ item }}
+                                    </option>
+                                </select>
+                                <span class="icon-box-big">
+                                    <svg v-if="questionDataFour.cm.five.isRight" t="1716986419862" class="icon"
+                                        viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                        <path
+                                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                            fill="#1AFA29" p-id="18768"></path>
+                                    </svg>
+                                    <svg v-if="questionDataFour.cm.five.isRight == false" t="1716987085767" class="icon"
+                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                        p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                        <path
+                                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                            fill="#d81e06" p-id="25746"></path>
+                                    </svg>
+                                </span>
+                                .Small actions can make a big difference to the planet,our home.
+                            </p>
+                            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerTwelve">
+                                绛旀锛�(1).d &nbsp; (2).b &nbsp; (3).e &nbsp; (4).a &nbsp; (5).c 
+                            </p>
                         </div>
                     </div>
                 </div>
@@ -1641,15 +3638,41 @@
                         </div>
                         <div class="fieldset-4">
                             <p class="center"><b>MEMO</b></p>
-                            <p class="left">To:______________</p>
-                            <p class="left">From:___________</p>
-                            <p class="left">Date:____________</p>
-                            <p class="left">Subject:__________</p>
-                            <p class="left">_____________________________________</p>
-                            <p class="left">_____________________________________</p>
-                            <p class="left">_____________________________________</p>
-                            <p class="left">_____________________________________</p>
-                            <p class="left">_____________________________________</p>
+                            <p class="left">To:<input :disabled="questionDataFour.isComplete" type="text"
+                                    class="input-bottom-border input-bc-t w45" v-model="questionDataFour.yr.one"
+                                    @change="setQuestionDataFour" /></p>
+                            <p class="left">From:<input :disabled="questionDataFour.isComplete" type="text"
+                                    class="input-bottom-border input-bc-t w45" v-model="questionDataFour.yr.two"
+                                    @change="setQuestionDataFour" /></p>
+                            <p class="left">Date:<input :disabled="questionDataFour.isComplete" type="text"
+                                    class="input-bottom-border input-bc-t w45" v-model="questionDataFour.yr.three"
+                                    @change="setQuestionDataFour" /></p>
+                            <p class="left">Subject:<input :disabled="questionDataFour.isComplete" type="text"
+                                    class="input-bottom-border input-bc-t w45" v-model="questionDataFour.yr.four"
+                                    @change="setQuestionDataFour" /></p>
+                            <p class="left tl-lf"><textarea v-model="questionDataFour.yr.five" placeholder="璇疯緭鍏ュ唴瀹�"
+                                    rows="8" style="width: 92%" class="fz-16 fm-son"
+                                    @change="setQuestionDataFour"></textarea></p>
+
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ar w80">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handleQuestionDataFour">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastQuestionDataFour" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="showAnswerTwelve = !showAnswerTwelve" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
                         </div>
                     </div>
                 </div>
@@ -1698,18 +3721,18 @@
                             <tr class="table-tr-bc">
                                 <td class="wh-no tl-cn">Form(s) of Documenting</td>
                                 <td class="tl-cn" colspan="1"><input type="checkbox" name="ball1"
-                                        :disabled="testData.isComplete" value="Language" id="1"
+                                         value="vlogs" id="1"
                                         v-model="testData.check.value" @change="setTestData" />vlogs</td>
                                 <td class="tl-cn" colspan="2"><input type="checkbox" name="ball1"
-                                        :disabled="testData.isComplete" value="Language" id="1"
+                                         value="photos" id="2"
                                         v-model="testData.check.value" @change="setTestData" />photos</td>
                                 <td class="tl-cn" colspan="2"><input type="checkbox" name="ball1"
-                                        :disabled="testData.isComplete" value="Language" id="1"
+                                         value="journals" id="3"
                                         v-model="testData.check.value" @change="setTestData" />journals</td>
                                 <td class="tl-cn" colspan="2"><input type="checkbox" name="ball1"
-                                        :disabled="testData.isComplete" value="Language" id="1"
+                                         value="other" id="4"
                                         v-model="testData.check.value" @change="setTestData" />other<input
-                                        :disabled="testData.isComplete" type="text"
+                                         type="text"
                                         class="input-bottom-border input-bc-t" style="width: 60px"
                                         v-model="testData.in.one" @change="setTestData" />
                                 </td>
@@ -2004,6 +4027,14 @@
             showAnswerThree: false,
             showAnswerFour: false,
             showAnswerFive: false,
+            showAnswerSix: false,
+            showAnswerSeven: false,
+            showAnswerEight: false,
+            showAnswerNine: false,
+            showAnswerTen: false,
+            showAnswerEleven: false,
+            showAnswerTwelve: false,
+            showAnswerReading: false,
             showImg: false,
             showImgOne: false,
             showQuestionAnswer: false,
@@ -2162,6 +4193,16 @@
                 reading: {
                     one: "",
                     two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    six: "",
+                    seven: "",
+                    eight: "",
+                    nine: "",
+                    ten: "",
+                    eleven: "",
+                    twelve: "",
                 },
                 table: {
                     one: "",
@@ -2210,7 +4251,9 @@
                 },
             },
             testData: {
-                check: [],
+                check: {
+                    value:[]
+                },
                 tx: {
                     one: "",
                     two: "",
@@ -2286,6 +4329,338 @@
                     answer: "animal rescue and care",
                 },
             },
+            // new
+            warmUp: [
+                {
+                    type: 'drapDown',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    options: ['plastic waste problem', 'water pollution', 'global warming', 'oil spill', 'air pollution', 'deforestation'],
+                    value: [
+                        {
+                            answer: 'global warming',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'air pollution',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'plastic waste problem',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'water pollution',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'deforestation',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'oil spill',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                    ]
+                },
+            ],
+            questionDataOne: {
+                isComplete: false,
+                // IA
+                cp: {
+                    cpList: [
+                        "a",
+                        "b",
+                        "c",
+                        "d",
+                        "e"
+                    ],
+                    one: {
+                        value: "",
+                        isRight: null,
+                        answer: "c",
+                    },
+                    two: {
+                        value: "",
+                        isRight: null,
+                        answer: "e",
+                    },
+                    three: {
+                        value: "",
+                        isRight: null,
+                        answer: "a",
+                    },
+                    four: {
+                        value: "",
+                        isRight: null,
+                        answer: "b",
+                    },
+                },
+                //IB
+                rp: {
+                    one: "",
+                    two: "",
+                    three: ""
+                },
+                //IIA
+                fb: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    answer: ["andfill", "nitiative", "ecycle", "ompostable", "efillable"]
+                },
+                //IIB
+                choice: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    answer: ["pass on", "building blocks", "thrift store", "picking up", "end up"]
+                },
+                //IIC
+                tf: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    five: "",
+                },
+                //IIIA
+                mc: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    six: "",
+                    answer: ["begun", "set", "caused", "led", "adopted", "run"]
+                },
+                //IIIB
+                fe: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    answer: ["have made", "has become", "has experienced", "has proved", "has affected"]
+                }
+            },
+            questionDataTwo: {
+                isComplete: false,
+                //IA
+                check: {
+                    isRight: null,
+                    answer: ["Driving to work in cars", "Eating much meat", "Eating imported fruits"],
+                    value: [],
+                },
+                //IB
+                dt: {
+                    dtList: ["T", "F"],
+                    one: {
+                        value: "",
+                        isRight: null,
+                        answer: "F",
+                    },
+                    two: {
+                        value: "",
+                        isRight: null,
+                        answer: "T",
+                    },
+                    three: {
+                        value: "",
+                        isRight: null,
+                        answer: "F",
+                    },
+                    four: {
+                        value: "",
+                        isRight: null,
+                        answer: "F",
+                    },
+                    five: {
+                        value: "",
+                        isRight: null,
+                        answer: "T",
+                    },
+                },
+                // IIA
+                rw: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    answer: ["crisp", "survive", "eliminate", "Emission", "figured"]
+                },
+                // IIB
+                fb: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    answer: ["reflect on", "big time", "reached for", "carbon footprint", "turns out"]
+                },
+                // III
+                rf: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                }
+            },
+            choiceData: [
+                {
+                    type: "radio",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    userScore: 0,
+                    answer: [
+                        { value: "a", score: 2 },
+                        { value: "b", score: 1 },
+                        { value: "c", score: 0 }
+                    ],
+                    option: [
+                        { label: "Yes,always.", value: "a" },
+                        { label: "Sometimes.", value: "b" },
+                        { label: "Never.", value: "c" }
+                    ],
+                    value: [
+                        {
+                            stem: "Do you sort your household waste into corresponding categories?",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Do you use your own shopping bags?",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Do you recycle light bulbs and used batteries?",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Do you switch off the lights when you leave a room?",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Do you switch off the TV and computer before you go to sleep?",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Do you put on warmer clothes on a cold day instead of turning on the heating?",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Do you keep the tap closed while you are brushing your teeth?",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Do you use public transport or a bike when possible?",
+                            userAnswer: "",
+                        },
+                    ]
+                }
+            ],
+            questionDataThree: {
+                isComplete: false,
+                eo: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    answer: ["weather", "spiders", "wood", "planet", "Nature"]
+                },
+                tp: {
+                    tpList: [
+                        "a",
+                        "b",
+                        "c",
+                        "d",
+                    ],
+                    one: {
+                        value: "",
+                        isRight: null,
+                        answer: "d",
+                    },
+                    two: {
+                        value: "",
+                        isRight: null,
+                        answer: "c",
+                    },
+                    three: {
+                        value: "",
+                        isRight: null,
+                        answer: "b",
+                    },
+                    four: {
+                        value: "",
+                        isRight: null,
+                        answer: "a",
+                    },
+                },
+            },
+            questionDataFour: {
+                isComplete: false,
+                tf: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+                cm: {
+                    cmList: [
+                        "a",
+                        "b",
+                        "c",
+                        "d",
+                        "e",
+                    ],
+                    one: {
+                        value: "",
+                        isRight: null,
+                        answer: "d",
+                    },
+                    two: {
+                        value: "",
+                        isRight: null,
+                        answer: "b",
+                    },
+                    three: {
+                        value: "",
+                        isRight: null,
+                        answer: "e",
+                    },
+                    four: {
+                        value: "",
+                        isRight: null,
+                        answer: "a",
+                    },
+                    five: {
+                        value: "",
+                        isRight: null,
+                        answer: "c",
+                    }
+
+                },
+                yr: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+
+            },
         };
     },
     mounted() {
@@ -2301,6 +4676,29 @@
         if (dropdownData) {
             this.dropdownData = JSON.parse(dropdownData);
         }
+        const warmUp = localStorage.getItem('english-chapter05-warmup')
+        if (warmUp) this.warmUp = JSON.parse(warmUp);
+
+        const questionDataOne = localStorage.getItem('english-chapter05-questionDataOne')
+        if (questionDataOne) {
+            this.questionDataOne = JSON.parse(questionDataOne);
+        }
+
+        const questionDataTwo = localStorage.getItem('english-chapter05-questionDataTwo')
+        if (questionDataTwo) {
+            this.questionDataTwo = JSON.parse(questionDataTwo);
+        }
+
+        const questionDataThree = localStorage.getItem('english-chapter05-questionDataThree')
+        if (questionDataThree) {
+            this.questionDataThree = JSON.parse(questionDataThree);
+        }
+
+        const questionDataFour = localStorage.getItem('english-chapter05-questionDataFour')
+        if (questionDataFour) {
+            this.questionDataFour = JSON.parse(questionDataFour);
+        }
+
         this.getPath();
     },
     methods: {
@@ -2309,53 +4707,6 @@
         },
         setTestData() {
             localStorage.setItem("english-testOne", JSON.stringify(this.testData));
-        },
-        changeTestData() {
-            localStorage.removeItem("english-testOne");
-            this.testData = {
-                check: [],
-                tx: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                in: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                line: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                ts: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                },
-                gr: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                cm: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-            };
         },
         setBookQuestion() {
             console.log("淇濆瓨");
@@ -2366,10 +4717,10 @@
         },
         async getPath() {
             this.resource.listenOne = await getResourcePath(
-                "422139A2EF66EA888C5ED1D550AE23E0"
+                "66F0637DD5232C224AF3A791D043A0A7"
             );
             this.resource.readingOne = await getResourcePath(
-                "3F442B682D84C8AB06C800B29D734920"
+                "157842B38CA587C8134070E66D174DDE"
             );
             this.resource.readingTwo = await getResourcePath(
                 "E8719EC88026BCFB11D292AA999F6D3D"
@@ -2383,73 +4734,279 @@
             }
             setTimeout(() => { this.$emit("initViewer", "") }, 500)
         },
-        handleQuestion(type) {
-            if (type == "one") {
-                this.questionData.warnUp.one.value
-                    ? (this.questionData.warnUp.one.isRight =
-                        this.questionData.warnUp.one.value == "Chinese knot")
-                    : (this.questionData.warnUp.one.isRight = null);
-            } else if (type == "two") {
-                this.questionData.warnUp.two.value
-                    ? (this.questionData.warnUp.two.isRight =
-                        this.questionData.warnUp.two.value == "Chinese medicine")
-                    : (this.questionData.warnUp.two.isRight = null);
-            } else if (type == "three") {
-                this.questionData.warnUp.three.value
-                    ? (this.questionData.warnUp.three.isRight =
-                        this.questionData.warnUp.three.value == "Chinese calligraphy")
-                    : (this.questionData.warnUp.three.isRight = null);
-            } else if (type == "four") {
-                this.questionData.warnUp.four.value
-                    ? (this.questionData.warnUp.four.isRight =
-                        this.questionData.warnUp.four.value == "Taichi")
-                    : (this.questionData.warnUp.four.isRight = null);
-            } else if (type == "five") {
-                this.questionData.warnUp.five.value
-                    ? (this.questionData.warnUp.five.isRight =
-                        this.questionData.warnUp.five.value == "sweet dumpling")
-                    : (this.questionData.warnUp.five.isRight = null);
-            } else if (type == "six") {
-                this.questionData.warnUp.six.value
-                    ? (this.questionData.warnUp.six.isRight =
-                        this.questionData.warnUp.six.value == "Chinese chess")
-                    : (this.questionData.warnUp.six.isRight = null);
-            }
-        },
-        handleDropdown(type) {
-            const dropdownDatas = this.dropdownData;
-            for (let key in dropdownDatas) {
-                const item = dropdownDatas[key];
-                if (type == "judge") {
-                    item.value == item.answer
-                        ? (item.isRight = true)
-                        : (item.isRight = false);
-                    console.log(item.value, item.answer);
-                }
-            }
-            this.dropdownData = dropdownDatas;
-        },
-        changeDropdown() {
-            localStorage.removeItem("english-dropdown-one");
-            for (let key in this.dropdownData) {
-                const item = this.dropdownData[key];
-                item.value = "";
-                item.isRight = null;
-            }
-        },
-        setDropdownData() {
-            localStorage.setItem(
-                "english-dropdown-one",
-                JSON.stringify(this.dropdownData)
-            );
-        },
-        saveData() {
-            console.log(this.testData);
-        },
         audioPlay() {
             this.$emit("closeMiniAudio");
         },
-    },
+        isTextRight(answer, data, num) {
+            let flag = null;
+            if (data) {
+                flag = answer[num] == data
+            } else {
+                flag = false
+            }
+            return flag;
+        },
+        isShowRight(answer, userAnswer, data) {
+            let flag = null;
+            if (userAnswer.indexOf(data) > -1) {
+                flag = answer.indexOf(data) > -1 ? true : false;
+            } else {
+                flag = false
+            }
+            return flag;
+        },
+        // 鏂板
+        savewarmUp() {
+            localStorage.setItem('english-chapter05-warmup', JSON.stringify(this.warmUp))
+        },
+        handlewarmUp() {
+            for (let index = 0; index < this.warmUp.length; index++) {
+                const item = this.warmUp[index];
+                item.isComplete = true
+                item.isShowAnswer = true
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.isRight = citem.userAnswer == citem.answer
+                }
+            }
+            this.savewarmUp()
+        },
+        recastwarmUp() {
+            for (let index = 0; index < this.warmUp.length; index++) {
+                const item = this.warmUp[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.isRight = null
+                    citem.userAnswer = ''
+                }
+            }
+            localStorage.removeItem('english-chapter05-warmup')
+        },
+        viewwarmUp() {
+            for (let index = 0; index < this.warmUp.length; index++) {
+                const item = this.warmUp[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        setQuestionDataOne() {
+            localStorage.setItem('english-chapter05-questionDataOne', JSON.stringify(this.questionDataOne))
+        },
+        saveDataOne() {
+            const savaDataOnes = this.questionDataOne;
+            for (let key in savaDataOnes) {
+                let item = savaDataOnes[key]
+                if (key != "isComplete" && key != "rp" && key != "fb" && key != "choice" && key != "tf" && key != "mc" && key != "fe") {
+                    for (let keys in item) {
+                        const citem = item[keys]
+                        if (keys != "cpList") {
+                            citem.value == citem.answer ? citem.isRight = true : citem.isRight = false;
+                        }
+                    }
+                }
+            }
+            this.questionDataOne = savaDataOnes;
+            this.$set(this.questionDataOne, "isComplete", true);
+            this.setQuestionDataOne();
+            this.isTextRight;
+            this.showAnswerReading = true;
+        },
+        changeQuestionDataOne() {
+            localStorage.removeItem("english-chapter05-questionDataOne");
+            const savaDataOnes = this.questionDataOne;
+            for (let key in savaDataOnes) {
+                let item = savaDataOnes[key]
+                if (key != "isComplete" && key != "rp" && key != "fb" && key != "choice" && key != "tf" && key != "mc" && key != "fe") {
+                    for (let keys in item) {
+                        const citem = item[keys]
+                        if (keys != "cpList") {
+                            citem.value = "";
+                            citem.isRight = null;
+                        }
+                    }
+                } else if (key != "isComplete") {
+                    for (let blanks in item) {
+                        if (blanks != "answer") {
+                            item[blanks] = "";
+                        }
+                    }
+
+                }
+            }
+            this.questionDataOne = savaDataOnes;
+            this.$set(this.questionDataOne, "isComplete", false);
+            this.showAnswerReading = false;
+        },
+        setQuestionDataTwo() {
+            localStorage.setItem('english-chapter05-questionDataTwo', JSON.stringify(this.questionDataTwo))
+        },
+        saveDataTwo() {
+            const savaDataTwos = this.questionDataTwo;
+            console.log(savaDataTwos, 123);
+            for (let key in savaDataTwos) {
+                let item = savaDataTwos[key]
+                if (key != "isComplete" && key != "check" && key != "rw" && key != "fb" && key != "rf") {
+                    for (let keys in item) {
+                        const citem = item[keys]
+                        if (keys != "dtList") {
+                            citem.value == citem.answer ? citem.isRight = true : citem.isRight = false;
+                        }
+                    }
+                }
+            }
+            this.questionDataTwo = savaDataTwos;
+            this.$set(this.questionDataTwo, "isComplete", true);
+            this.setQuestionDataTwo();
+            console.log(this.isTextRight(this.questionDataTwo.fb.answer, this.questionDataTwo.fb.five, 4), 666)
+        },
+        changeQuestionDataTwo() {
+            localStorage.removeItem("english-chapter05-questionDataTwo");
+            const savaDataTwos = this.questionDataTwo;
+            for (let key in savaDataTwos) {
+                let item = savaDataTwos[key]
+                if (key != "isComplete" && key != "check" && key != "rw" && key != "fb" && key != "rf") {
+                    for (let keys in item) {
+                        const citem = item[keys]
+                        if (keys != "dtList") {
+                            citem.value = "";
+                            citem.isRight = null;
+                        }
+                    }
+                } else if (key != "isComplete" && key != "check") {
+                    for (let blanks in item) {
+                        if (blanks != "answer") {
+                            item[blanks] = "";
+                        }
+                    }
+                } else if (key != "isComplete" && key != "rw" && key != "fb" && key != "rf" && key != "dt") {
+                    item.value = [];
+                }
+            }
+            console.log(savaDataTwos, 1433233)
+            this.questionDataTwo = savaDataTwos;
+            this.$set(this.questionDataTwo, "isComplete", false);
+        },
+        handleChoiceData() {
+            for (let index = 0; index < this.choiceData.length; index++) {
+                const item = this.choiceData[index];
+                item.isComplete = true;
+                item.isShowAnswer = true;
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    const data = item.answer.find(ditem => ditem.value == citem.userAnswer);
+                    if (data)
+                        item.userScore += data.score
+                }
+            }
+            console.log(this.choiceData, 777);
+        },
+        changeChoiceData() {
+            for (let index = 0; index < this.choiceData.length; index++) {
+                const item = this.choiceData[index];
+                item.isComplete = false;
+                item.isShowAnswer = false;
+                item.userScore = 0
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.userAnswer = "";
+                }
+            }
+        },
+        handleQuestionDataThree() {
+            const questionDataThrees = this.questionDataThree;
+            for (let key in questionDataThrees) {
+                let item = questionDataThrees[key]
+                if (key != "isComplete" && key != "eo") {
+                    for (let keys in item) {
+                        const citem = item[keys]
+                        if (keys != "tpList") {
+                            citem.value == citem.answer ? citem.isRight = true : citem.isRight = false;
+                        }
+                    }
+                }
+            }
+            this.questionDataThree = questionDataThrees;
+            this.$set(this.questionDataThree, "isComplete", true);
+            this.setQuestionDataThree();
+            this.isTextRight;
+            this.showAnswerTen = true;
+        },
+        setQuestionDataThree() {
+            localStorage.setItem('english-chapter05-questionDataThree', JSON.stringify(this.questionDataThree))
+        },
+        recastQuestionDataThree() {
+            const questionDataThrees = this.questionDataThree;
+            for (let key in questionDataThrees) {
+                let item = questionDataThrees[key]
+                if (key != "isComplete" && key != "eo") {
+                    for (let keys in item) {
+                        const citem = item[keys]
+                        if (keys != "tpList") {
+                            citem.value = "";
+                            citem.isRight = null;
+                        }
+                    }
+                } else if (key != "isComplete" && key != "tp") {
+                    for (let keys in item) {
+                        if (keys != "answer") {
+                            item[keys] = ""
+                        }
+                    }
+                }
+            }
+            this.questionDataThree = questionDataThrees;
+            this.$set(this.questionDataThree, "isComplete", false);
+            this.setQuestionDataThree();
+            this.showAnswerTen = false;
+        },
+        handleQuestionDataFour() {
+            const questionDataFours = this.questionDataFour;
+            for (let key in questionDataFours) {
+                let item = questionDataFours[key]
+                if (key != "isComplete" && key != "tf" && key != "yr") {
+                    for (let keys in item) {
+                        const citem = item[keys]
+                        if (keys != "cmList") {
+                            citem.value == citem.answer ? citem.isRight = true : citem.isRight = false;
+                        }
+                    }
+                }
+            }
+            this.questionDataFour = questionDataFours;
+            this.$set(this.questionDataFour, "isComplete", true);
+            this.setQuestionDataFour();
+            this.isTextRight;
+            this.showAnswerTwelve = true;
+        },
+        setQuestionDataFour() {
+            localStorage.setItem('english-chapter05-questionDataFour', JSON.stringify(this.questionDataFour))
+        },
+        recastQuestionDataFour() {
+            const questionDataFours = this.questionDataFour;
+            for (let key in questionDataFours) {
+                let item = questionDataFours[key]
+                if (key != "isComplete" && key != "tf" && key != "yr") {
+                    for (let keys in item) {
+                        const citem = item[keys]
+                        if (keys != "cmList") {
+                            citem.value = "";
+                            citem.isRight = null;
+                        }
+                    }
+                } else if (key != "isComplete" && key != "cm") {
+                    for (let keys in item) {
+                        item[keys] = ""
+                    }
+                }
+            }
+            this.questionDataFour = questionDataFours;
+            this.$set(this.questionDataFour, "isComplete", false);
+            this.setQuestionDataFour();
+            this.showAnswerTwelve = false;
+        },
+    }
+
 };
 </script>
 
@@ -2536,4 +5093,135 @@
         outline: none;
     }
 }
+
+.dropdown-box-one {
+    li {
+        width: 33%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+    }
+}
+
+.green-text {
+    color: green;
+}
+
+.red-text {
+    color: red;
+}
+
+.poster-img {
+    width: 100%;
+    position: relative;
+}
+
+.poster-input-box-one {
+    width: 15%;
+    height: 16%;
+    position: absolute;
+    top: 2%;
+    left: 4.8%;
+    border: 0;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-two {
+    width: 15%;
+    height: 16%;
+    position: absolute;
+    top: 2%;
+    left: 29.8%;
+    border: 0;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-three {
+    width: 15%;
+    height: 16%;
+    position: absolute;
+    top: 2%;
+    right: 29.8%;
+    border: 0;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-four {
+    width: 15%;
+    height: 16%;
+    position: absolute;
+    top: 2%;
+    right: 4.8%;
+    border: 0;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-img-one {
+    width: 100%;
+    position: relative;
+}
+
+.poster-select-box-one {
+    width: 17%;
+    height: 13%;
+    position: absolute;
+    bottom: 12%;
+    left: 3.8%;
+    border: 0;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-select-box-two {
+    width: 17%;
+    height: 10%;
+    position: absolute;
+    bottom: 12%;
+    left: 29.8%;
+    border: 0;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-select-box-three {
+    width: 15%;
+    height: 16%;
+    position: absolute;
+    top: 2%;
+    right: 29.8%;
+    border: 0;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-select-box-four {
+    width: 15%;
+    height: 16%;
+    position: absolute;
+    top: 2%;
+    right: 4.8%;
+    border: 0;
+
+    &:focus {
+        outline: none;
+    }
+}
 </style>
diff --git a/src/books/English/view/components/chapter007.vue b/src/books/English/view/components/chapter007.vue
index cbca798..579e622 100644
--- a/src/books/English/view/components/chapter007.vue
+++ b/src/books/English/view/components/chapter007.vue
@@ -33,8 +33,23 @@
                         <h2 id="b025"><img class="img-0" alt="" src="../../assets/images/dy7-le1.jpg" /></h2>
                         <h3 id="c055"><span class="bjh3">Warm-up</span></h3>
                         <p><b>鈪�.Suppose it is your first day at work,how can you favorably impress your workmates?</b>
+                            <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
                         </p>
-                        <p>______________________________________________</p>
+                        <p> <textarea v-model="questionData.tx.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" style=" width: 92%"
+                                class="fz-16 fm-son" @change="setBookQuestion"></textarea>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerOne">
+                            绛旀锛�(1).Don鈥檛 be late &nbsp; (2).wear clean clothes &nbsp; (3).show respect to your coworkers
+                            (4).be polite &nbsp; (5).be confident &nbsp; (6).polish your shoes &nbsp;
+                            (7).brush your hair
+                        </p>
                         <p><b>鈪�.Put the following names of the departments in the proper blanks according to their
                                 functions.</b></p>
                         <p class="center"><img class="img-a" alt="" src="../../assets/images/0129-2.jpg" /></p>
@@ -44,14 +59,32 @@
                                 <td class="tl-cn">Functions</td>
                             </tr>
                             <tr class="table-tr-bc">
-                                <td class="tl-cn">
-                                    <select class="select-border select-bc-t" style="background-color: transparent"
-                                        v-model="dropdownData.one.value" @change="setDropdownData"
-                                        :disabled="dropdownData.isComplete">
-                                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.one.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
                                             {{ item }}
                                         </option>
                                     </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.one.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.one.isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
                                 </td>
                                 <td>
                                     It has overall responsibilities for creating, planning, implementing, and
@@ -59,14 +92,32 @@
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
-                                <td class="tl-cn">
-                                    <select class="select-border select-bc-t" style="background-color: transparent"
-                                        v-model="dropdownData.two.value" @change="setDropdownData"
-                                        :disabled="dropdownData.isComplete">
-                                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.two.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
                                             {{ item }}
                                         </option>
                                     </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.two.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.two.isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
                                 </td>
                                 <td>
                                     It deals with such matters as involving employees, hiring, training, labor
@@ -74,14 +125,32 @@
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
-                                <td>
-                                    <select class="select-border select-bc-t" style="background-color: transparent"
-                                        v-model="dropdownData.three.value" @change="setDropdownData"
-                                        :disabled="dropdownData.isComplete">
-                                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.three.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
                                             {{ item }}
                                         </option>
                                     </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.three.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.three.isRight == false" t="1716987085767"
+                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
                                 </td>
                                 <td>
                                     It is responsible for presenting, advertising and selling a company's products
@@ -89,14 +158,32 @@
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
-                                <td>
-                                    <select class="select-border select-bc-t" style="background-color: transparent"
-                                        v-model="dropdownData.four.value" @change="setDropdownData"
-                                        :disabled="dropdownData.isComplete">
-                                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.four.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
                                             {{ item }}
                                         </option>
                                     </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.four.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.four.isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
                                 </td>
                                 <td>
                                     It is responsible for finding new products and processes or improving existing ones.
@@ -104,52 +191,109 @@
 
                             </tr>
                             <tr class="table-tr-bc">
-                                <td>
-                                    <select class="select-border select-bc-t" style="background-color: transparent"
-                                        v-model="dropdownData.five.value" @change="setDropdownData"
-                                        :disabled="dropdownData.isComplete">
-                                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.five.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
                                             {{ item }}
                                         </option>
                                     </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.five.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.five.isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
                                 </td>
                                 <td>
                                     It manages money in running a business, an activity or a project.
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
-                                <td>
-                                    <select class="select-border select-bc-t" style="background-color: transparent"
-                                        v-model="dropdownData.six.value" @change="setDropdownData"
-                                        :disabled="dropdownData.isComplete">
-                                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.six.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
                                             {{ item }}
                                         </option>
                                     </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.six.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.six.isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
                                 </td>
                                 <td>
                                     It's a department where people assist the CEO to plan, organize and run a business.
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
-                                <td>
-                                    <select class="select-border select-bc-t" style="background-color: transparent"
-                                        v-model="dropdownData.seven.value" @change="setDropdownData"
-                                        :disabled="dropdownData.isComplete">
-                                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.seven.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
                                             {{ item }}
                                         </option>
                                     </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.seven.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.seven.isRight == false" t="1716987085767"
+                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
                                 </td>
                                 <td>
                                     It makes food, goods or materials, especially in large quantities.
                                 </td>
                             </tr>
                         </table>
-                        <h3 id="c056"><span class="bjh3">Listening</span></h3>
-                        <p class="center"><audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+
+                        <h3 id="c056" class="fl al-cn">
+                            <span class="bjh3">Listening</span>
+                            <!--controlslist="noplaybackrate nodownload"鍚庨潰鐨勯煶棰戞鍔犲叆杩欎釜-->
+                            <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio>
+                        </h3>
                         <p><b>Listen to the monologue about workplace success and fill in the blanks with what you
                                 hear.</b></p>
                         <p>Do you want to succeed in the workplace? Try your best for_____in everything you
@@ -183,8 +327,43 @@
                         <h3 id="c057"><span class="bjh3">Reading</span></h3>
                         <p>1.If a man is called to be a street sweeper,he should sweep streets even as Michelangelo
                             painted,or Beethoven composed music or Shakespeare wrote poetry.What does this saying try to
-                            tell us?</p>
-                        <p>2.How can other people鈥檚 jobs influence our life?</p>
+                            tell us?
+                            <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p> <textarea v-model="questionData.tx.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" style=" width: 92%"
+                                class="fz-16 fm-son" @change="setBookQuestion"></textarea>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerTwo">
+                            绛旀锛�(1).Love whatever job one takes up &nbsp; (2).Work hard &nbsp; (3). To be creative &nbsp;
+                            (4).Practice as much as you can &nbsp; (5). Insist on doing something
+                        </p>
+                        <p>2.How can other people鈥檚 jobs influence our life?
+                            <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p> <textarea v-model="questionData.tx.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" style=" width: 92%"
+                                class="fz-16 fm-son" @change="setBookQuestion"></textarea>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerThree">
+                            绛旀锛�(1). Engineers make it easier for us to go somewhere by high-speed train. &nbsp;
+                            (2).Gardeners make our city more beautiful. &nbsp;
+                            (3).Deliverymen help to get our goods to us.&nbsp;
+                            (4).Farmers plant so many fruits and vegetables to satisfy our appetite.
+                        </p>
                         <p class="center"><b>Lineman Wang Jin</b></p>
                         <p class="center"><audio :src="resource.readingTwo" controls
                                 controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
@@ -375,10 +554,16 @@
                         <div class="bkbj">
                             <p><i>the ability to hold or contain sth.; the ability to do sth.</i></p>
                         </div>
-                        <p>live-transmission line鐩存祦杈撶數绾胯矾</p>
-                        <p>under construction 淇缓涓�</p>
-                        <p>set up 寤虹珛锛涜绔�</p>
-                        <p>power outage鍋滅數</p>
+                        <div class="fl">
+                            <div class="left" style="width: 48%">
+                                <p>live-transmission line鐩存祦杈撶數绾胯矾</p>
+                                <p>under construction 淇缓涓�</p>
+                            </div>
+                            <div class="right" style="width: 48%">
+                                <p>set up 寤虹珛锛涜绔�</p>
+                                <p>power outage鍋滅數</p>
+                            </div>
+                        </div>
                         <p><b>鈪�.Reading comprehension.</b></p>
                         <p>A.Fill in the blanks with the exact words in the passage.</p>
                         <p>1.Wang takes a high-risk job on high-voltage power lines as_______________.</p>
@@ -546,16 +731,22 @@
                         <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" /></p>
                         <div class="bk-wh">
                             <p class="dl-box">
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'strong-willed')">strong-willed</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'motivated')">motivated</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'strong-willed')">strong-willed</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'motivated')">motivated</span>
                                 <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'active')">active</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'cooperative')">cooperative</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'stressful')">stressful</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'disciplined')">disciplined</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'cooperative')">cooperative</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'stressful')">stressful</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'disciplined')">disciplined</span>
                                 <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'risky')">risky</span>
                                 <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'helpful')">helpful</span>
                                 <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'dutiful')">dutiful</span>
-                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'enthusiastic')">enthusiastic</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'enthusiastic')">enthusiastic</span>
                             </p>
                         </div>
                         <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
@@ -1069,7 +1260,7 @@
                                 <td class="tl-cn">The Way to Develop lt</td>
                             </tr>
                             <tr class="table-tr-bc">
-                                <td class="tl-cn" > 
+                                <td class="tl-cn">
                                     <textarea v-model="questionData.table.seventeen"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
                                         @change="setBookQuestion"></textarea>
@@ -1481,7 +1672,9 @@
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
-                                <td class="tl-lf">Barney is the employee that always follows through on his commitments. If he agrees to take over another co-worker's shift.he always shows up. If he commits to a deadline, you can count on him to meet that deadline.</td>
+                                <td class="tl-lf">Barney is the employee that always follows through on his commitments.
+                                    If he agrees to take over another co-worker's shift.he always shows up. If he
+                                    commits to a deadline, you can count on him to meet that deadline.</td>
                                 <td class="tl-cn">
                                     Strong
                                 </td>
@@ -1491,7 +1684,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-lf">
-                                    Sarah consistently completes all of her assignments with careful attention. Whether it鈥檚 staying up late to finish a research paper or sacrifcing her weekends to prepare for projects.
+                                    Sarah consistently completes all of her assignments with careful attention. Whether
+                                    it鈥檚 staying up late to finish a research paper or sacrifcing her weekends to
+                                    prepare for projects.
                                 </td>
                                 <td>
                                     <textarea v-model="questionData.table.twentyFive"
@@ -1506,7 +1701,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-lf">
-                                    Mary is always ready to lend a helping hand and offer help whenever needed, She willingly shares her knowledge and expertise, contributing to the success of the entire team.
+                                    Mary is always ready to lend a helping hand and offer help whenever needed, She
+                                    willingly shares her knowledge and expertise, contributing to the success of the
+                                    entire team.
                                 </td>
                                 <td>
                                     <textarea v-model="questionData.table.twentySeven"
@@ -1521,7 +1718,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-lf">
-                                    Amanda is the teacher who always inspires her students. She creates engaging lessons that ignite their curiosity and encouragesthem to explore and learn. Amanda motivates them to develop alifelong love for learning. </td>
+                                    Amanda is the teacher who always inspires her students. She creates engaging lessons
+                                    that ignite their curiosity and encouragesthem to explore and learn. Amanda
+                                    motivates them to develop alifelong love for learning. </td>
                                 <td>
                                     <textarea v-model="questionData.table.twentyNine"
                                         class="w100 table-tr-bc b0 table-textarea "
@@ -1535,7 +1734,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-lf">
-                                    Lisa is the customer service representative who consistently delivers outstanding service. She patiently listens to customers鈥檆oncerns,empathizes with their situation, and goes above and beyond to find solutions. </td>
+                                    Lisa is the customer service representative who consistently delivers outstanding
+                                    service. She patiently listens to customers鈥檆oncerns,empathizes with their
+                                    situation, and goes above and beyond to find solutions. </td>
                                 <td>
                                     <textarea v-model="questionData.table.thirtyOne"
                                         class="w100 table-tr-bc b0 table-textarea "
@@ -1549,7 +1750,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-lf">
-                                    James frequently forgets to submit his weekly report on time.causing delays in the team's progress. This lack of consistency and attention to details affects the project timelines and hampers effective communication within the team. </td>
+                                    James frequently forgets to submit his weekly report on time.causing delays in the
+                                    team's progress. This lack of consistency and attention to details affects the
+                                    project timelines and hampers effective communication within the team. </td>
                                 <td>
                                     <textarea v-model="questionData.table.thirtyThree"
                                         class="w100 table-tr-bc b0 table-textarea "
@@ -1563,7 +1766,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-lf">
-                                    Andrew mistakenly sent an email to a client with incorrect information, During the projeet review, he confessed to his supervisor that he was the one responsible for the mistake, despite no one else was aware of it.</td>
+                                    Andrew mistakenly sent an email to a client with incorrect information, During the
+                                    projeet review, he confessed to his supervisor that he was the one responsible for
+                                    the mistake, despite no one else was aware of it.</td>
                                 <td>
                                     <textarea v-model="questionData.table.thirtyFive"
                                         class="w100 table-tr-bc b0 table-textarea "
@@ -1577,7 +1782,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-lf">
-                                    John improved work productivity by introducing a new project management tool that allowed for better task coordination. This led to more efficient project completion and inereased output. </td>
+                                    John improved work productivity by introducing a new project management tool that
+                                    allowed for better task coordination. This led to more efficient project completion
+                                    and inereased output. </td>
                                 <td>
                                     <textarea v-model="questionData.table.thirtySeven"
                                         class="w100 table-tr-bc b0 table-textarea "
@@ -1591,7 +1798,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-lf">
-                                    Mike failed to double-check important client documents before submitting them, which not only caused frustration for the client but also required the team to invest additional time and resources to rectify the mistake. </td>
+                                    Mike failed to double-check important client documents before submitting them, which
+                                    not only caused frustration for the client but also required the team to invest
+                                    additional time and resources to rectify the mistake. </td>
                                 <td>
                                     <textarea v-model="questionData.table.thirtyNine"
                                         class="w100 table-tr-bc b0 table-textarea "
@@ -1605,14 +1814,16 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-lf">
-                                    Thomas frequently underestimated the time required for tasks.leading to rushed and subpar work. His disorganized approach resulted in missed deadlines, delayed deliverables, and frustrated clients. </td>
+                                    Thomas frequently underestimated the time required for tasks.leading to rushed and
+                                    subpar work. His disorganized approach resulted in missed deadlines, delayed
+                                    deliverables, and frustrated clients. </td>
                                 <td>
-                                    <textarea v-model="questionData.table. fortyOne"
+                                    <textarea v-model="questionData.table.fortyOne"
                                         class="w100 table-tr-bc b0 table-textarea "
                                         @change="setBookQuestion"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table. fortyTwo"
+                                    <textarea v-model="questionData.table.fortyTwo"
                                         class="w100 table-tr-bc b0 table-textarea "
                                         @change="setBookQuestion"></textarea>
                                 </td>
@@ -1827,6 +2038,7 @@
 <script>
 import matching from "@/components/matching/matching.vue";
 import { getResourcePath } from "@/assets/methods/resources";
+import { keys } from "lodash";
 export default {
     name: "chapterSeven",
     components: { matching },
@@ -1966,42 +2178,29 @@
                 answerImg: require("../../assets/images/matching-one.png"),
             },
             questionData: {
-                warnUp: {
-                    one: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese knot",
-                    },
-                    two: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese medicine",
-                    },
-                    three: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese calligraphy",
-                    },
-                    four: {
-                        value: "",
-                        isRight: null,
-                        answer: "Taichi",
-                    },
-                    five: {
-                        value: "",
-                        isRight: null,
-                        answer: "sweet dumpling",
-                    },
-                    six: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese chess",
-                    },
-                    seven: "",
-                },
-                reading: {
+                tx: {
                     one: "",
                     two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    six: "",
+                    seven: "",
+                    eight: "",
+                    nine: "",
+                    ten: "",
+                },
+                ip: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    six: "",
+                    seven: "",
+                    eight: "",
+                    nine: "",
+                    ten: "",
                 },
                 table: {
                     one: "",
@@ -2103,52 +2302,65 @@
                 readingOne: "",
                 readingTwo: "",
             },
-            dropDownList: [
-                "HR Department",
-                "R&D Department",
-                "CEO office",
-                "Finance Department",
-                "Produetion Department",
-                "Marketing Department",
-                "Administration office",
-            ],
+            //new
             dropdownData: {
-                one: {
-                    value: "",
-                    isRight: null,
-                    answer: "Administration office",
-                },
-                two: {
-                    value: "",
-                    isRight: null,
-                    answer: "HR department",
-                },
-                three: {
-                    value: "",
-                    isRight: null,
-                    answer: "Marketing department",
-                },
-                four: {
-                    value: "",
-                    isRight: null,
-                    answer: "R & D department",
-                },
-                five: {
-                    value: "",
-                    isRight: null,
-                    answer: "Finance department",
-                },
-                six: {
-                    value: "",
-                    isRight: null,
-                    answer: "CEO office",
-                },
-                seven: {
-                    value: "",
-                    isRight: null,
-                    answer: "Production department",
-                },
+                isComplete: false,
+                dp: {
+                    dropDownList: [
+                        "HR department",
+                        "R & D department",
+                        "CEO office",
+                        "Finance department",
+                        "Production department",
+                        "Marketing department",
+                        "Administration office",
+                    ],
+                    one: {
+                        value: "",
+                        isRight: null,
+                        answer: "Administration office",
+                    },
+                    two: {
+                        value: "",
+                        isRight: null,
+                        answer: "HR department",
+                    },
+                    three: {
+                        value: "",
+                        isRight: null,
+                        answer: "Marketing department",
+                    },
+                    four: {
+                        value: "",
+                        isRight: null,
+                        answer: "R & D department",
+                    },
+                    five: {
+                        value: "",
+                        isRight: null,
+                        answer: "Finance department",
+                    },
+                    six: {
+                        value: "",
+                        isRight: null,
+                        answer: "CEO office",
+                    },
+                    seven: {
+                        value: "",
+                        isRight: null,
+                        answer: "Production department",
+                    },
+                }
+
+
             },
+            questionDataOne:[
+                {
+                    type:"",
+                    isComplete:false,
+                    isShowAnswer:false,
+                }
+            ]
         };
     },
     mounted() {
@@ -2160,7 +2372,7 @@
         if (bookQuestion) {
             this.questionData = JSON.parse(bookQuestion);
         }
-        const dropdownData = localStorage.getItem("english-dropdown-one");
+        const dropdownData = localStorage.getItem("english-chapter-7-warmup-dropdown");
         if (dropdownData) {
             this.dropdownData = JSON.parse(dropdownData);
         }
@@ -2285,62 +2497,35 @@
                     : (this.questionData.warnUp.six.isRight = null);
             }
         },
-        handleDropdown(type) {
-            const dropdownDatas = this.dropdownData;
-            for (let key in dropdownDatas) {
-                const item = dropdownDatas[key];
-                if (type == "judge") {
-                    item.value == item.answer
-                        ? (item.isRight = true)
-                        : (item.isRight = false);
-                    console.log(item.value, item.answer);
-                }
-            }
-            this.dropdownData = dropdownDatas;
-        },
-        changeDropdown() {
-            localStorage.removeItem("english-dropdown-one");
-            for (let key in this.dropdownData) {
-                const item = this.dropdownData[key];
-                item.value = "";
-                item.isRight = null;
-            }
-        },
-        setDropdownData() {
-            localStorage.setItem(
-                "english-dropdown-one",
-                JSON.stringify(this.dropdownData)
-            );
-        },
-        saveData() {
-            const item = this.testData['check']
-            const sortedArr1 = item.answer.slice().sort();
-            const sortedArr2 = item.value.slice().sort();
-            const isRight = sortedArr1.every(
-                (value, index) => value === sortedArr2[index]
-            );
-            const inData = this.testData['in']
-            let inString = []
-            for (let key in inData) {
-                const citem = inData[key];
-                if (key != 'answer' && key !== 'isRight') {
-                    console.log(key);
-                    inString.push(citem)
-                }
-
-
-            }
-            const inRight = inData.answer == inString
-            console.log('in', inData.answer, inString);
-            this.$set(this.testData['in'], 'isRight', inRight)
-            this.$set(this.testData['check'], 'isRight', isRight)
-            this.setTestData()
-            console.log(this.testData);
-
-        },
         audioPlay() {
             this.$emit("closeMiniAudio");
         },
+        //new
+        setDropdownData() {
+            localStorage.setItem(
+                "english-chapter-7-warmup-dropdown",
+                JSON.stringify(this.dropdownData)
+            );
+        },
+        handleDropdownData() {
+            const dropdownDatas = this.dropdownData;
+            for (let key in dropdownDatas) {
+                const item = dropdownDatas[key]
+                if (key != "isComplete") {
+                    for (let keys in item) {
+                        const citem = item[keys]
+                        if (keys != "dropDownList") {
+                            if (citem.value) {
+                                citem.value == citem.answer ? citem.isRight = true : citem.isRight = false;
+                            }
+                        }
+                    }
+                }
+            }
+            this.dropdownData = dropdownDatas;
+            this.$set(this.dropdownData, "isComplete", true);
+            this.setDropdownData();
+        }
     },
 };
 </script>
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 5da8283..1886b25 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -213,7 +213,7 @@
 
     // 娴嬭瘯椤甸潰璺宠浆
       setTimeout(() => {
-        this.gotoPage(6,119);
+        this.gotoPage(8,124);
     //   setTimeout(() => {
     //     this.renderSign("Highlight", {
     //       id: "2ACA9359",

--
Gitblit v1.9.1