From db197adc2c4bdb0335f3d5b0a364d5b3dac1ea02 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期四, 18 七月 2024 11:32:23 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/books/English/view/components/chapter003.vue | 3784 ++++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 3,352 insertions(+), 432 deletions(-)

diff --git a/src/books/English/view/components/chapter003.vue b/src/books/English/view/components/chapter003.vue
index 7cab30a..e5be148 100644
--- a/src/books/English/view/components/chapter003.vue
+++ b/src/books/English/view/components/chapter003.vue
@@ -225,7 +225,7 @@
                         <p>
                             <b>鈪�.Talk to your partner about the types of volunteer work you
                                 know.</b>
-                            <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
+                            <span class="btn-box" @click="viewNoSubmitData(0,0)">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                     viewBox="0 0 20.501 20.501">
                                     <path class="a"
@@ -234,11 +234,11 @@
                                 </svg>
                             </span>
                         </p>
-                        <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                        <textarea v-model="noSubmitData[0].value[0].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
                             style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
-                            @change="setBookQuestion"></textarea>
+                            @change="saveNoSubmitData"></textarea>
                         <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
-                            v-if="showAnswerOne">
+                            v-if="noSubmitData[0].value[0].isShowAnswer">
                             <span>绛旀锛�</span>
                             <p>Going to the countryside to teach kids;</p>
                             <p>Participating in community service;</p>
@@ -261,30 +261,38 @@
                         </p>
                         <div style="display: flex">
                             <div class="left" style="width: 55%; margin-top: 11%">
-                                <p>1.Why do you want to be a volunteer?</p>
+                                <p>1.{{listenOne[0].stem}}</p>
                             </div>
                             <div class="right" style="width: 45%">
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />
-                                    You can change lives.
+                                <p v-for="(item,index) in listenOne[0].option" :key="index">
+                                    銆�<input type="radio"  :value="item" name="volunteer"
+                                        v-model="listenOne[0].value" />
+                                    {{item}}
+                                    <span class="icon-box" v-if="listenOne[0].value == item">
+                                        <svg v-if="listenOne[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="listenOne[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>
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />
-                                    You can stay with friends.
-                                </p>
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />
-                                    You can teach new skills.
-                                </p>
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />
-                                    You can make more money.
-                                </p>
+                                
                             </div>
+                        </div>
+                        <div class="event-header-text-bc pd-5"
+                            v-if="listenOne[0].isShowAnswer">
+                            绛旀:{{listenOne[0].answer}}
                         </div>
                     </div>
                 </div>
@@ -310,69 +318,87 @@
                     <div class="bodystyle">
                         <div style="display: flex">
                             <div class="left" style="width: 55%; margin-top: 11%">
-                                <p>2.Who are more likely to be volunteers?</p>
+                                <p>2.{{listenOne[1].stem}}</p>
                             </div>
                             <div class="right" style="width: 45%">
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />
-                                    College students.
-                                </p>
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />
-                                    Nonprofessionals.
-                                </p>
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />
-                                    People without jobs.
-                                </p>
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />
-                                    Children.
+                                <p v-for="(item,index) in listenOne[1].option" :key="index">
+                                    銆�<input type="radio"  :value="item" name="likely" 
+                                        v-model="listenOne[1].value" />
+                                    {{item}}
+                                    <span class="icon-box" v-if="listenOne[1].value == item">
+                                        <svg v-if="listenOne[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="listenOne[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>
                             </div>
+                        </div>
+                        <div class="event-header-text-bc pd-5"
+                            v-if="listenOne[1].isShowAnswer">
+                            绛旀:{{listenOne[1].answer}}
                         </div>
                         <div style="display: flex">
                             <div class="left" style="width: 50%; margin-top: 11%">
-                                <p>3.Which activity is NOT mentioned in the video?</p>
+                                <p>3.{{listenOne[2].stem}}</p>
                             </div>
                             <div class="right" style="width: 50%">
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />Volunteering in sport.
-                                </p>
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />Emergency services.
-                                </p>
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />Helping people with disabilities.
-                                </p>
-                                <p>
-                                    銆�<input type="checkbox" name="ball" value="Language" id="1"
-                                        v-model="testData.check" />Teaching.
+                                <p v-for="(item,index) in listenOne[2].option" :key="index">
+                                    銆�<input type="radio"  :value="item" name="mentioned" 
+                                        v-model="listenOne[2].value" />
+                                    {{item}}
+                                    <span class="icon-box" v-if="listenOne[2].value == item">
+                                        <svg v-if="listenOne[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="listenOne[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>
                             </div>
                         </div>
+                        <div class="event-header-text-bc pd-5"
+                            v-if="listenOne[2].isShowAnswer">
+                            绛旀:{{listenOne[2].answer}}
+                        </div>
                         <!-- 鎻愪氦鎸夐挳 -->
-                        <div class="w100 fl">
-                            <ul class="fl ju-ar w100">
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ev w80">
                                 <li>
-                                    <button class="btn-border btn-w" @click="saveData">
+                                    <button class="btn-border btn-w" @click="handelListenOneData">
                                         鎻愪氦
                                     </button>
                                 </li>
                                 <li>
-                                    <button @click="changeTestData" class="btn-border btn-w">
+                                    <button @click="recastListenOneData" class="btn-border btn-w">
                                         閲嶅仛
                                     </button>
                                 </li>
                                 <li>
-                                    <button @click="showQuestionAnswer = !showQuestionAnswer" class="parimary-btn">
+                                    <button @click="viewListenOneData" class="parimary-btn">
                                         鏌ョ湅绛旀
                                     </button>
                                 </li>
@@ -382,7 +408,7 @@
                         <p>
                             1.As the saying goes,鈥淭he rose is in her hand,the flavor in mine.鈥�
                             What鈥檚 your understanding of this saying?
-                            <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
+                            <span class="btn-box" @click="viewNoSubmitData(0,1)">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                     viewBox="0 0 20.501 20.501">
                                     <path class="a"
@@ -391,11 +417,11 @@
                                 </svg>
                             </span>
                         </p>
-                        <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                        <textarea v-model="noSubmitData[0].value[1].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
                             style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
-                            @change="setBookQuestion"></textarea>
+                            @change="saveNoSubmitData"></textarea>
                         <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
-                            v-if="showAnswerTwo">
+                            v-if="noSubmitData[0].value[1].isShowAnswer">
                             <span>绛旀锛�</span>
                             <p>
                                 1銆両t means helping others is a virtue like the fragrance of
@@ -409,7 +435,7 @@
                         </div>
                         <p>
                             2.In what way do you help others in daily life?
-                            <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
+                            <span class="btn-box" @click="viewNoSubmitData(0,2)">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                     viewBox="0 0 20.501 20.501">
                                     <path class="a"
@@ -418,11 +444,11 @@
                                 </svg>
                             </span>
                         </p>
-                        <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                        <textarea v-model="noSubmitData[0].value[2].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
                             style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
-                            @change="setBookQuestion"></textarea>
+                            @change="saveNoSubmitData"></textarea>
                         <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
-                            v-if="showAnswerThree">
+                            v-if="noSubmitData[0].value[2].isShowAnswer">
                             绛旀锛� share your experience of helping others briefly, such as:
                             helping the classmates with their homework, working as a volunteer
                             in an activity, giving a hand to someone with their heavy luggage,
@@ -431,7 +457,7 @@
                             <b>Volunteering and Its Surprising Benefits</b>
                         </p>
                         <p class="center">
-                            <audio :src="resource.readingOne" controls class="audio" @play="audioPlay"></audio>
+                            <audio :src="resource.readingOne" controls class="audio" ></audio>
                         </p>
                         <p>
                             With busy life,it can be hard to find time to
@@ -532,7 +558,7 @@
                             <span class="line-border-box"></span>
                         </p>
                         <audio :src="resource.readingTwo" controls style="margin-left: 10px" class="audio"
-                            @play="audioPlay"></audio>
+                            ></audio>
                         <p>enormous /瑟藞n蓴藧m蓹s/ <i>adj.</i> 宸ㄥぇ鐨勶紱搴炲ぇ鐨�</p>
                         <div class="bkbj">
                             <p><i>extremely large</i></p>
@@ -650,22 +676,125 @@
                             B.Choose the best answer to each question according to the
                             information from the passage.
                         </p>
-                        <p>1.What might be the reason that people don鈥檛 volunteer?</p>
-                        <p>a.People are too busy to volunteer.</p>
-                        <p>b.People can鈥檛 find ways to volunteer.</p>
-                        <p>c.There is no benefit in volunteering.</p>
-                        <p>d.The volunteer work is too hard to do.</p>
-                        <p>2.Which of the following is NOT true?</p>
-                        <p>a.Volunteering is a win-win behavior for both parties.</p>
-                        <p>b.Small acts of helping others also matter.</p>
-                        <p>c.Those who volunteer enjoy a lower mortality rate.</p>
-                        <p>d.Volunteering has nothing to do with one鈥檚 mental health.</p>
+                        <p>
+                            1.What might be the reason that people don鈥檛 volunteer?
+                            <span>
+                                <svg v-if="wordsOne[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="
+                                    wordsOne[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>
+                        銆�
+                        <p>
+                            <input type="radio"  value="a" name="toobusy" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[0].userAnswer" />
+                            a.People are too busy to volunteer.
+                        </p>
+                        <p>
+                            <input type="radio"  value="b" name="toobusy" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[0].userAnswer" />
+                            b.People can鈥檛 find ways to volunteer.
+                        </p>
+                        <p>
+                            <input type="radio"  value="c" name="toobusy" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[0].userAnswer" />
+                            c.There is no benefit in volunteering.
+                        </p>
+                        <p>
+                            <input type="radio"  value="d" name="toobusy" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[0].userAnswer" />
+                            d.The volunteer work is too hard to do.
+                        </p>
+                        <p>
+                            2.Which of the following is NOT true?
+                            <span>
+                                <svg v-if="wordsOne[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="
+                                    wordsOne[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>
+                        <p>
+                            <input type="radio"  value="a" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[1].userAnswer" />
+                            a.Volunteering is a win-win behavior for both parties.
+                        </p>
+                        <p>
+                            <input type="radio"  value="b" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[1].userAnswer" />
+                            b.Small acts of helping others also matter.
+                        </p>
+                        <p>
+                            <input type="radio"  value="c" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[1].userAnswer" />
+                            c.Those who volunteer enjoy a lower mortality rate.
+                        </p>
+                        <p>
+                            <input type="radio"  value="d" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[1].userAnswer" />
+                            d.Volunteering has nothing to do with one鈥檚 mental health.
+                        </p>
                         <p>
                             3.In what way can volunteering help with one鈥檚 career development?
+                            <span>
+                                <svg v-if="wordsOne[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="
+                                    wordsOne[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>
-                        <p>a.Providing one with a new career.</p>
-                        <p>b.Helping to arouse one鈥檚 interests.</p>
-                        <p>c.Offering an opportunity to practice working skills.</p>
+                        <p>
+                            <input type="radio"  value="a" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[2].userAnswer" />
+                            a.Providing one with a new career.
+                        </p>
+                        <p>
+                            <input type="radio"  value="b" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[2].userAnswer" />
+                            b.Helping to arouse one鈥檚 interests.
+                        </p>
+                        <p>
+                            <input type="radio"  value="c" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[2].userAnswer" />
+                            c.Offering an opportunity to practice working skills.
+                        </p>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -688,30 +817,15 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <p>d.Bringing more comfort to those who are at work.</p>
+                        <p>
+                            <input type="radio"  value="d" name="bothparties" 
+                                v-model="wordsOne[0].value[2].userAnswer" />
+                            d.Bringing more comfort to those who are at work.
+                        </p>
                         <p>
                             4.What suggestion does the writer offer in the last paragraph?
-                        </p>
-                        <p>a.Making a plan before volunteering.</p>
-                        <p>b.Preparing a r茅sum茅 in advance.</p>
-                        <p>c.Taking a physical and mental health check.</p>
-                        <p>d.Spending some time volunteering.</p>
-                        <p>5.What is the author鈥檚 attitude towards volunteering?</p>
-                        <p>a.Indifferent. b.Supportive. c.Opposed.d.Unknown.</p>
-                        <p><b>鈪�.Language focus.</b></p>
-                        <p>
-                            A.Fill in the blanks with the proper words in the passage.The
-                            initial letters of the words have been given.
-                        </p>
-                        <p>
-                            There are e
-                            <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                                style="width: 60px" v-model="testData.in.one" @change="setTestData" />
                             <span>
-                                <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.one)
-                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                <svg v-if="wordsOne[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
@@ -719,8 +833,99 @@
                                         fill="#1AFA29" p-id="18768"></path>
                                 </svg>
                                 <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.one) == false
+                                    wordsOne[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>
+                        <p>
+                            <input type="radio"  value="a" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[3].userAnswer" />
+                            a.Making a plan before volunteering.
+                        </p>
+                        <p>
+                            <input type="radio"  value="b" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[3].userAnswer" />
+                            b.Preparing a r茅sum茅 in advance.
+                        </p>
+                        <p>
+                            <input type="radio"  value="c" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[3].userAnswer" />
+                            c.Taking a physical and mental health check.
+                        </p>
+                        <p>
+                            <input type="radio"  value="d" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[3].userAnswer" />
+                            d.Spending some time volunteering.
+                        </p>
+                        <p>
+                            5.What is the author鈥檚 attitude towards volunteering?
+                            <span>
+                                <svg v-if="wordsOne[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="
+                                    wordsOne[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>
+                        <p>
+                            <input type="radio"  value="a" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[4].userAnswer" />
+                            a.Indifferent.  
+                        </p>
+                        <p>
+                            <input type="radio"  value="b" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[4].userAnswer" />
+                            b.Supportive.
+                        </p>
+                        <P>
+                            <input type="radio"  value="b" name="bothparties" :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[4].userAnswer" />
+                            c.Opposed.
+                        </P>
+                        <P>
+                            <input type="radio"  value="b" name="bothparties"  :disabled="wordsOne[0].isComplete"
+                                v-model="wordsOne[0].value[4].userAnswer" />
+                            d.Unknown.
+                        </P>
+                        <p class="event-header-text-bc pd-5" style="width: 90%" v-if="wordsOne[0].isShowAnswer">
+                            绛旀锛�1.a 2.d 3.c 4.d 5.b
+                        </p>
+                        <p><b>鈪�.Language focus.</b></p>
+                        <p>
+                            A.Fill in the blanks with the proper words in the passage.The
+                            initial letters of the words have been given.
+                        </p>
+                        <p>
+                            There are e
+                            <input :disabled="wordsOne[1].isComplete" type="text" class="input-bottom-border"
+                                style="width: 60px" v-model="wordsOne[1].value[0].userAnswer" @change="setTestData" />
+                            <span>
+                                <svg v-if="wordsOne[1].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="
+                                    wordsOne[1].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">
@@ -731,13 +936,10 @@
                             </span>
                             benefits when it comes to volunteering.First,it helps to make the
                             community a better place,and it also helps you to connect to
-                            people and b<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                                style="width: 60px" v-model="testData.in.two" @change="setTestData" />
+                            people and b<input :disabled="wordsOne[1].isComplete" type="text" class="input-bottom-border"
+                                style="width: 60px" v-model="wordsOne[1].value[1].userAnswer" @change="setTestData" />
                             <span>
-                                <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.two)
-                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                <svg v-if="wordsOne[1].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
@@ -745,8 +947,7 @@
                                         fill="#1AFA29" p-id="18768"></path>
                                 </svg>
                                 <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.two) == false
+                                    wordsOne[1].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">
@@ -754,14 +955,11 @@
                                         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>your social skills.Second,volunteering helps to deal with
-                            stress,anger and a<input :disabled="testData.isComplete" type="text"
-                                class="input-bottom-border" style="width: 60px" v-model="testData.in.three"
+                            stress,anger and a<input :disabled="wordsOne[1].isComplete" type="text"
+                                class="input-bottom-border" style="width: 60px" v-model="wordsOne[1].value[2].userAnswer"
                                 @change="setTestData" />
                             <span>
-                                <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.three)
-                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                <svg v-if="wordsOne[1].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
@@ -769,8 +967,7 @@
                                         fill="#1AFA29" p-id="18768"></path>
                                 </svg>
                                 <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.three) == false
+                                    wordsOne[1].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">
@@ -778,23 +975,17 @@
                                         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>.Studies show that people who volunteer have a lower m<input
-                                :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                                style="width: 60px" v-model="testData.in.four" @change="setTestData" />
+                                :disabled="wordsOne[1].isComplete" type="text" class="input-bottom-border"
+                                style="width: 60px" v-model="wordsOne[1].value[3].userAnswer" @change="setTestData" />
                             <span>
-                                <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.four)
-                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                <svg v-if="wordsOne[1].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="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.four) == false
-                                " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                <svg v-if="wordsOne[1].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
@@ -803,14 +994,11 @@
                                 </svg> </span>rate.Third,volunteering helps with one鈥檚 career.When you get the
                             chance to practice working skills,you will feel more comfortable
                             at work.Fourth,when you are tied up with the daily
-                            routine,volunteering can be an e<input :disabled="testData.isComplete" type="text"
-                                class="input-bottom-border" style="width: 60px" v-model="testData.in.five"
+                            routine,volunteering can be an e<input :disabled="wordsOne[1].isComplete" type="text"
+                                class="input-bottom-border" style="width: 60px" v-model="wordsOne[1].value[4].userAnswer"
                                 @change="setTestData" />
                             <span>
-                                <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.five)
-                                " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
+                                <svg v-if="wordsOne[1].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
@@ -818,8 +1006,7 @@
                                         fill="#1AFA29" p-id="18768"></path>
                                 </svg>
                                 <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.five) == false
+                                    wordsOne[1].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">
@@ -827,12 +1014,11 @@
                                         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>escape,where you can find your interests and p<input
-                                :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                                style="width: 60px" v-model="testData.in.six" @change="setTestData" />
+                                :disabled="wordsOne[1].isComplete" type="text" class="input-bottom-border"
+                                style="width: 60px" v-model="wordsOne[1].value[5].userAnswer" @change="setTestData" />
                             <span>
                                 <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.six)
+                                    wordsOne[1].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">
@@ -841,8 +1027,7 @@
                                         fill="#1AFA29" p-id="18768"></path>
                                 </svg>
                                 <svg v-if="
-                                    testData.isComplete &&
-                                    isTextRight(testData.in.answer, testData.in.six) == false
+                                    wordsOne[1].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">
@@ -853,7 +1038,7 @@
                             spend some time volunteering.
                         </p>
                         <!-- 绛旀 -->
-                        <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showLessonOneQuestionAnswer">
+                        <p class="event-header-text-bc pd-5" style="width: 90%" v-if="wordsOne[1].isComplete">
                             绛旀锛�(1)enormous &nbsp; (2) boost &nbsp; (3) anxiety &nbsp; (4)
                             mortality &nbsp; (5) energizing &nbsp; (6) passion
                         </p>
@@ -861,39 +1046,15 @@
                             B.Underline the following expressions in the passage and make
                             sentences with them.
                         </p>
-                        <p class="tl-lf">
-                            1.help out
-                            <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
-                                style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
-                                @change="setBookQuestion"></textarea>
-                        </p>
-                        <p class="tl-lf">
-                            2.make a difference
-                            <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
-                                style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
-                                @change="setBookQuestion"></textarea>
-                        </p>
-                        <p class="tl-lf">
-                            3.stretch one鈥檚 wings
-                            <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
-                                style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
-                                @change="setBookQuestion"></textarea>
-                        </p>
-                        <p class="tl-lf">
-                            4.what鈥檚 more
-                            <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
-                                style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
-                                @change="setBookQuestion"></textarea>
-                        </p>
-                        <p class="tl-lf">
-                            5.carry over
-                            <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                        <p class="tl-lf" v-for="(item,index) in wordsOne[2].value " :key="index" >
+                            {{index + 1}}.{{item.stem}}
+                            <textarea v-model="item.userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" :disabled="wordsOne[2].isComplete"
                                 style="margin-left: 40px; width: 92%" class="fz-16 fm-son"
                                 @change="setBookQuestion"></textarea>
                         </p>
                         <!-- 渚嬪彞 -->
                         <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
-                            v-if="showLessonOneQuestionAnswer">
+                            v-if="wordsOne[2].isShowAnswer">
                             <span>渚嬪彞锛�</span>
                             <p>
                                 1銆両 helped out with the check-in of athletes at the sports
@@ -922,16 +1083,16 @@
                             friendship circle.
                         </p>
                         <p>
-                            <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                                style="width: 470px" v-model="testData.in.one" @change="setTestData" />
+                            <input :disabled="wordsOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 470px" v-model="wordsOne[3].value[0].userAnswer" @change="setTestData" />
                         </p>
                         <p>
                             2.Serving in the Beijing 2022 Winter Olympics was a meaningful and
                             unforgettable experience.
                         </p>
                         <p>
-                            <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                                style="width: 470px" v-model="testData.in.one" @change="setTestData" />
+                            <input :disabled="wordsOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 470px" v-model="wordsOne[3].value[1].userAnswer" @change="setTestData" />
                         </p>
                     </div>
                 </div>
@@ -960,20 +1121,20 @@
                             village school for a life time.
                         </p>
                         <p>
-                            <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                                style="width: 470px" v-model="testData.in.one" @change="setTestData" />
+                            <input :disabled="wordsOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 470px" v-model="wordsOne[3].value[2].userAnswer" @change="setTestData" />
                         </p>
                         <p>
                             4.Volunteering in different programs helps him grow up to be a man
                             of vision.
                         </p>
                         <p>
-                            <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                                style="width: 470px" v-model="testData.in.one" @change="setTestData" />
+                            <input :disabled="wordsOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 470px" v-model="wordsOne[3].value[3].userAnswer" @change="setTestData" />
                         </p>
                         <!-- 绛旀 -->
                         <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
-                            v-if="showLessonOneQuestionAnswer">
+                            v-if="wordsOne[3].isShowAnswer">
                             <span>绛旀锛�</span>
                             <p>1銆佸姞鍏ュ鏍¢噷鐨勯潚骞村織鎰胯�呭崗浼氭墿澶т簡濂圭殑鏈嬪弸鍦堛��</p>
                             <p>2銆佹湇鍔�2022鐨勫寳浜啲濂ヤ細鏄竴娆¢潪甯告湁鎰忎箟涓旇浜洪毦蹇樼殑缁忓巻銆�</p>
@@ -999,36 +1160,127 @@
                             verbs given in the brackets.
                         </p>
                         <p>
-                            1.Encouraged by other volunteers,he<input :disabled="testData.isComplete" type="text"
-                                class="input-bottom-border" style="width: 70px" v-model="testData.in.one"
-                                @change="setTestData" />
+                            1.Encouraged by other volunteers,he<input :disabled="wordsOne[4].isComplete" type="text"
+                                class="input-bottom-border" style="width: 70px" v-model="wordsOne[4].value[0].userAnswer"
+                                @change="setTestData" />                            
+                                <span>
+                                        <svg v-if="wordsOne[4].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="
+                                            wordsOne[4].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>
                             (consider) becoming a regular helper in community service.
                         </p>
                         <p>
-                            2.At the moment,I<input :disabled="testData.isComplete" type="text"
-                                class="input-bottom-border" style="width: 70px" v-model="testData.in.one"
+                            2.At the moment,I<input :disabled="wordsOne[4].isComplete" type="text"
+                                class="input-bottom-border" style="width: 70px" v-model="wordsOne[4].value[1].userAnswer"
                                 @change="setTestData" />
+                                <span>
+                                        <svg v-if="wordsOne[4].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="
+                                            wordsOne[4].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>
                             (plan) to work as a volunteer teacher after graduation.
                         </p>
                         <p>
-                            3.What you<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                                style="width: 70px" v-model="testData.in.one" @change="setTestData" />
+                            3.What you<input :disabled="wordsOne[4].isComplete" type="text"
+                                class="input-bottom-border" style="width: 70px" v-model="wordsOne[4].value[2].userAnswer"
+                                @change="setTestData" />
+                                <span>
+                                    <svg v-if="wordsOne[4].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="
+                                        wordsOne[4].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>
                             (do) at present will make a difference to people around you.
                         </p>
                         <p>
-                            4.Currently,they<input :disabled="testData.isComplete" type="text"
-                                class="input-bottom-border" style="width: 70px" v-model="testData.in.one"
+                            4.Currently,they<input :disabled="wordsOne[4].isComplete" type="text"
+                                class="input-bottom-border" style="width: 70px" v-model="wordsOne[4].value[3].userAnswer"
                                 @change="setTestData" />
+                                <span>
+                                    <svg v-if="wordsOne[4].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="
+                                        wordsOne[4].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>
                             (put) a lot of efforts into volunteer work.
                         </p>
                         <p>
-                            5.The smile on her face says that she<input :disabled="testData.isComplete" type="text"
-                                class="input-bottom-border" style="width: 70px" v-model="testData.in.one"
+                            5.The smile on her face says that she<input :disabled="wordsOne[4].isComplete" type="text"
+                                class="input-bottom-border" style="width: 70px" v-model="wordsOne[4].value[4].userAnswer"
                                 @change="setTestData" />
+                                <span>
+                                    <svg v-if="wordsOne[4].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="
+                                        wordsOne[4].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>
                             (have) a great time with the old in the nursing home.
                         </p>
                         <!-- 绛旀 -->
-                        <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showLessonOneQuestionAnswer">
+                        <p class="event-header-text-bc pd-5" style="width: 90%" v-if="wordsOne[4].isShowAnswer">
                             绛旀锛�(1)is considering &nbsp; (2) am planning &nbsp; (3) are
                             doing &nbsp; (4) are putting &nbsp; (5) is having
                         </p>
@@ -1041,18 +1293,18 @@
                                 <img class="img-e" alt="" src="../../assets/images/0054-1.jpg" />
                             </p>
                             <p>蹇楁効鑰呮鍦ㄨ緟瀵煎瀛愪滑鍋氬姛璇俱��</p>
-                            <p>_______________________________________________</p>
-                            <p>_______________________________________________</p>
-                            <p>_______________________________________________</p>
+                            <textarea v-model="wordsOne[5].value[0].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" :disabled="wordsOne[5].isComplete"
+                                style="margin-left: 20px; width: 92%" class="fz-16 fm-son"
+                                @change="setBookQuestion"></textarea>
                         </div>
                         <div class="fieldset-2">
                             <p class="center">
                                 <img class="img-e" alt="" src="../../assets/images/0054-2.jpg" />
                             </p>
                             <p>瀛︾敓浠鍦ㄥ府蹇欏仛鍐滄椿銆�</p>
-                            <p>_______________________________________________</p>
-                            <p>_______________________________________________</p>
-                            <p>_______________________________________________</p>
+                            <textarea v-model="wordsOne[5].value[1].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" :disabled="wordsOne[5].isComplete"
+                                style="margin-left: 20px; width: 92%" class="fz-16 fm-son"
+                                @change="setBookQuestion"></textarea>
                         </div>
                     </div>
                 </div>
@@ -1081,36 +1333,45 @@
                                 <img class="img-e" alt="" src="../../assets/images/0055-1.jpg" />
                             </p>
                             <p>蹇楁効鑰呮鍦ㄦ矙婊╀笂娓呯悊鍨冨溇銆�</p>
-                            <p>_______________________________________________</p>
-                            <p>_______________________________________________</p>
-                            <p>_______________________________________________</p>
+                            <textarea v-model="wordsOne[5].value[2].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" :disabled="wordsOne[5].isComplete"
+                                style="margin-left: 20px; width: 92%" class="fz-16 fm-son"
+                                @change="setBookQuestion"></textarea>
                         </div>
                         <div class="fieldset-2">
                             <p class="center">
                                 <img class="img-e" alt="" src="../../assets/images/0055-2.jpg" />
                             </p>
                             <p>蹇楁効鑰呮鍦ㄨ繘琛岃。鐗╂崘璧犳椿鍔ㄣ��</p>
-                            <p>_______________________________________________</p>
-                            <p>_______________________________________________</p>
-                            <p>_______________________________________________</p>
+                            <textarea v-model="wordsOne[5].value[3].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" :disabled="wordsOne[5].isComplete"
+                                style="margin-left: 20px; width: 92%" class="fz-16 fm-son"
+                                @change="setBookQuestion"></textarea>
+                        </div>
+                        <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
+                            v-if="wordsOne[3].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <p>1銆乀he volunteer is tutoring the children.</p>
+                            <p>2銆丼tudents are helping with farming.
+                            </p>
+                            <p>3銆丄 group of volunteers are cleaning up trashes on the beach.
+                            </p>
+                            <p>4銆乀he little girl is holding a donation box full of clothes.
+                            </p>
                         </div>
                         <!-- 鎻愪氦鎸夐挳 -->
                         <div class="w100 fl">
                             <ul class="fl ju-ar w100">
                                 <li>
-                                    <button class="btn-border btn-w" @click="saveData">
+                                    <button class="btn-border btn-w" @click="handelwordsOne">
                                         鎻愪氦
                                     </button>
                                 </li>
                                 <li>
-                                    <button @click="changeTestData" class="btn-border btn-w">
+                                    <button @click="recastwordsOne" class="btn-border btn-w">
                                         閲嶅仛
                                     </button>
                                 </li>
                                 <li>
-                                    <button @click="
-                                        showLessonOneQuestionAnswer = !showLessonOneQuestionAnswer
-                                        " class="parimary-btn">
+                                    <button @click="viewwordsOne" class="parimary-btn">
                                         鏌ョ湅绛旀
                                     </button>
                                 </li>
@@ -1156,18 +1417,18 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td>
-                                    <textarea v-model="questionData.table.two"
+                                    <textarea v-model="miniTable[0].value[0].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @change="saveminiTable"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.three"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[0].value[1].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.four"
+                                    <textarea v-model="miniTable[0].value[2].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @change="saveminiTable"></textarea>
                                 </td>
                             </tr>
                         </table>
@@ -1201,58 +1462,58 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td>
-                                    <textarea v-model="questionData.table.two"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[0].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                                 <td style="width: 40%">
-                                    <textarea v-model="questionData.table.three"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[1].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                                 <td style="width: 40%">
-                                    <textarea v-model="questionData.table.four"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[2].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td>
-                                    <textarea v-model="questionData.table.six"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[3].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.seven"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[4].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.enight"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[5].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td>
-                                    <textarea v-model="questionData.table.two"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[6].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.three"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[7].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.four"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[8].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td>
-                                    <textarea v-model="questionData.table.six"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[9].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.seven"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[10].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.enight"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="miniTable[1].value[11].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="saveminiTable"></textarea>
                                 </td>
                             </tr>
                         </table>
@@ -1260,10 +1521,182 @@
                             <img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" />
                         </p>
                         <div class="bk-wh">
-                            <p>
-                                blood donation銆�volunteer teacher銆�community service銆�nursing
-                                home銆�rewarding銆�challenging銆�demanding銆�interesting銆�overwhelming銆�moving銆�merciful銆�kind-hearted銆�appreciate銆�cherish銆�respect
+                            <p class="dl-box">
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'blood donation')"> blood
+                                    donation</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'volunteer teacher')">volunteer teacher</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'community service')">community service</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'nursing home')">nursing
+                                    home</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'rewarding')">rewarding</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'challenging')">challenging</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'demanding')">demanding</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'interesting')">interesting</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'overwhelming')">overwhelming</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'moving')">moving</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'merciful')">merciful</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'kind-hearted')">kind-hearted</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'appreciate')">appreciate</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'cherish')">cherish</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'respect')">respect</span>
                             </p>
+                        </div>
+                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%;">
+                            <div class="banshi openImgBox">
+                                <div class="swiper-container swiper_ppt">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_01.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_02.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_03.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_04.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_05.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_06.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_07.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_08.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_09.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_10.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_11.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_12.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_13.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_14.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_15.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_16.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_17.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_18.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_19.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_20.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_21.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_22.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_23.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_24.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_25.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_26.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_27.png" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="swiper-button-next"></div>
+                                    <div class="swiper-button-prev"></div>
+                                    <div class="pageBox"></div>
+                                </div>
+                                <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->
+                            </div>
                         </div>
                         <h2 id="b010">
                             <img class="img-0" alt="" src="../../assets/images/dy3-le2.jpg" />
@@ -1311,7 +1744,7 @@
                         <p>2.What changes do they bring to China?</p>
                         <p class="center"><b>How to Light Up the World</b></p>
                         <p class="center"><audio :src="resource.listenOne" controls class="audio"
-                                @play="audioPlay"></audio></p>
+                                ></audio></p>
                         <p>
                             锛圗xcerpted from the speech 鈥淟earning from a Barefoot Movement鈥濓級
                         </p>
@@ -1415,7 +1848,7 @@
                             <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
                             <span class="line-border-box"></span>
                         </p>
-                        <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+                        <audio :src="resource.listenOne" controls class="audio" ></audio>
                         <p>remote /r瑟藞m蓹蕣t/ <i>adj.</i> 鍋忚繙鐨�</p>
                         <div class="bkbj">
                             <p><i>far away from places where other people live</i></p>
@@ -1536,36 +1969,158 @@
                             <tr class="table-tr-bc">
                                 <td class="tl-lf table-th-bc">1. So far, what has BarefootCollege achieved?</td>
                                 <td style="width: 65%;">
-                                    <p class="table-p"> It has trained l.<input :disabled="testData.isComplete"
+                                    <p class="table-p"> It has trained l.
+                                        <input :disabled="listenTwo[0].isComplete"
                                             type="text" class="input-bottom-border input-bc-t" style="width: 70px"
-                                            v-model="testData.in.one" @change="setTestData" />women solar engineers.</p>
+                                            v-model="listenTwo[0].value[0].userAnswer" @input="saveListenTwo" />
+                                            <span class="icon-box" v-if="listenTwo[0].isComplete">
+                                                <svg v-if="listenTwo[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="listenTwo[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>
+                                            women solar engineers.</p>
                                     <p class="table-p">The women solar engineers are from 2.<input
-                                            :disabled="testData.isComplete" type="text"
+                                            :disabled="listenTwo[0].isComplete" type="text"
                                             class="input-bottom-border input-bc-t" style="width: 70px"
-                                            v-model="testData.in.one" @change="setTestData" />villages in 3.<input
-                                            :disabled="testData.isComplete" type="text"
+                                            v-model="listenTwo[0].value[1].userAnswer" @input="saveListenTwo" />
+                                            <span class="icon-box" v-if="listenTwo[0].isComplete">
+                                                <svg v-if="listenTwo[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="listenTwo[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>
+                                            villages in 3.<input
+                                            :disabled="listenTwo[0].isComplete" type="text"
                                             class="input-bottom-border input-bc-t" style="width: 70px"
-                                            v-model="testData.in.one" @change="setTestData" />countries.</p>
+                                            v-model="listenTwo[0].value[2].userAnswer" @input="saveListenTwo" />
+                                            <span class="icon-box" v-if="listenTwo[0].isComplete">
+                                                <svg v-if="listenTwo[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="listenTwo[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>
+                                            countries.</p>
                                     <p class="table-p">The engineers have solar-electrifed 4.<input
-                                            :disabled="testData.isComplete" type="text"
+                                            :disabled="listenTwo[0].isComplete" type="text"
                                             class="input-bottom-border input-bc-t" style="width: 70px"
-                                            v-model="testData.in.one" @change="setTestData" />homes.</p>
+                                            v-model="listenTwo[0].value[3].userAnswer" @input="saveListenTwo" />
+                                            <span class="icon-box" v-if="listenTwo[0].isComplete">
+                                                <svg v-if="listenTwo[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="listenTwo[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>
+                                            homes.</p>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn table-th-bc">2.What's the author'sfuture goal?</td>
                                 <td style="width: 65%;">
                                     <p class="table-p">He would like to provide the world's 5.<input
-                                            :disabled="testData.isComplete" type="text"
+                                            :disabled="listenTwo[0].isComplete" type="text"
                                             class="input-bottom-border input-bc-t" style="width: 70px"
-                                            v-model="testData.in.one" @change="setTestData" />least developed countries
+                                            v-model="listenTwo[0].value[4].userAnswer" @input="saveListenTwo" />
+                                            <span class="icon-box" v-if="listenTwo[0].isComplete">
+                                                <svg v-if="listenTwo[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="listenTwo[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>
+                                            least developed countries
                                         with engineers.</p>
-                                    <p class="table-p">He wants to reach 6.<input :disabled="testData.isComplete"
+                                    <p class="table-p">He wants to reach 6.<input :disabled="listenTwo[0].isComplete"
                                             type="text" class="input-bottom-border input-bc-t" style="width: 70px"
-                                            v-model="testData.in.one" @change="setTestData" />people.</p>
+                                            v-model="listenTwo[0].value[5].userAnswer" @input="saveListenTwo" />
+                                            <span class="icon-box" v-if="listenTwo[0].isComplete">
+                                                <svg v-if="listenTwo[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="listenTwo[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>
+                                            people.</p>
                                 </td>
                             </tr>
                         </table>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="listenTwo[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in listenTwo[0].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1592,54 +2147,80 @@
                             B.Decide whether the following statements are true (T) or false
                             (F).
                         </p>
-                        <p>
-                            (銆�) 1.Showing compassion and being patient are qualities needed
-                            for training.
+                        <p v-for="(item,index) in listenTwo[1].value" :key="index" class="fl al-cn">
+                            <span>
+                                (
+                                <select class="select-border" v-model="listenTwo[1].value[index].userAnswer" @change="saveListenTwo"
+                                    :disabled="listenTwo[1].isComplete" >
+                                    <option v-for="(citem, cindex) in listenTwo[1].option" :key="cindex" :value="citem">
+                                    {{ citem }}
+                                    </option>
+                                </select>)
+                            </span>
+                            <span class="t0">{{index + 1}}.{{item.stem}}</span>
+                            <span class="icon-box" v-if="listenTwo[1].isComplete">
+                                <svg v-if="item.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="item.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.Women have to overcome a lot of difficulties to attend
-                            Barefoot College.
-                        </p>
-                        <p>
-                            (銆�) 3.Half of the courses in the training are done in sign
-                            language.
-                        </p>
-                        <p>
-                            (銆�) 4.Husbands are always supportive for wives to go for
-                            training.
-                        </p>
-                        <p>
-                            (銆�) 5.The training helps women gain respect for the changes they
-                            brought in.
-                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="listenTwo[1].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in listenTwo[1].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
                         <p><b>鈪�.Language focus.</b></p>
                         <p>
                             A.Replace the words in italics with the exact words in the passage
                             and change the form if necessary.
                         </p>
-                        <p>
-                            1.In <i>far-away </i>areas,only the old and the kids are
-                            left._____
+                        <p v-for="(item,index) in listenTwo[2].value" :key="index + 'listenTwo'" class="fl fw-wr">
+                            <span>{{index + 1}}.{{item.stem}}</span>
+                            <input type="text" :disabled="listenTwo[2].isComplete" v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px">
+                            <span class="icon-box" v-if="listenTwo[2].isComplete">
+                                <svg v-if="item.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="item.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.The government works on <i>ways</i> to fight against
-                            poverty._____
-                        </p>
-                        <p>
-                            3.People having no access to electricity <i>mainly</i> live in
-                            Africa._____
-                        </p>
-                        <p>
-                            4.Some college students choose to <i>join</i> volunteering
-                            programs after graduation._____
-                        </p>
-                        <p>
-                            5.Family reunion is a <i>usual </i>way to celebrate the Spring
-                            Festival._____
-                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="listenTwo[2].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in listenTwo[2].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
                         <p>
                             B.Fill in the blanks with the proper form of the expressions given
-                            below._____
+                            below.
                         </p>
                         <div class="fieldset">
                             <p>
@@ -1648,18 +2229,146 @@
                             </p>
                         </div>
                         <p>
-                            1.After watching the news,he ________ the idea to support the
+                            1.After watching the news,he 
+                            <input type="text" :disabled="listenTwo[3].isComplete" v-model="listenTwo[3].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px"> 
+                            the idea to support the
                             little girl鈥檚 education.
+                            <span class="icon-box" v-if="listenTwo[3].isComplete">
+                                <svg v-if="listenTwo[3].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="listenTwo[3].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>
                         <p>
-                            2.Many Irish people ________ America during the famine
+                            2.Many Irish people 
+                            <input type="text" :disabled="listenTwo[3].isComplete" v-model="listenTwo[3].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px"> 
+                            America during the famine
                             锛堥ゥ鑽掓椂鏈燂級.
+                            <span class="icon-box" v-if="listenTwo[3].isComplete">
+                                <svg v-if="listenTwo[3].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="listenTwo[3].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>
-                        <p>3.They ________ the play ________ a song.</p>
-                        <p>4.The teacher鈥檚 smiles ________ the boy鈥檚 life.</p>
+                        <p>3.They <input type="text" :disabled="listenTwo[3].isComplete" v-model="listenTwo[3].value[2].userAnswer[0]" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px"> 
+                            the play <input type="text" :disabled="listenTwo[3].isComplete" v-model="listenTwo[3].value[2].userAnswer[1]" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px"> a song.
+                            <span class="icon-box" v-if="listenTwo[3].isComplete">
+                                <svg v-if="listenTwo[3].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="listenTwo[3].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>
+                        <p>4.The teacher鈥檚 smiles
+                            <input type="text" :disabled="listenTwo[3].isComplete" v-model="listenTwo[3].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px"> 
+                             the boy鈥檚 life.
+                             <span class="icon-box" v-if="listenTwo[3].isComplete">
+                                <svg v-if="listenTwo[3].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="listenTwo[3].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>
                         <p>
-                            5.Girls in some parts of the world ________ gender discrimination.
+                            5.Girls in some parts of the world 
+                            <input type="text" :disabled="listenTwo[3].isComplete" v-model="listenTwo[3].value[4].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px">
+                             gender discrimination.
+                             <span class="icon-box" v-if="listenTwo[3].isComplete">
+                                <svg v-if="listenTwo[3].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="listenTwo[3].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>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="listenTwo[3].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in listenTwo[3].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{ arrayToString(item.answer) }}
+                            </span>
+                        </div>
+                        <!-- 鎻愪氦鎸夐挳 -->
+                        <div class="w100 fl">
+                            <ul class="fl ju-ar w100">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handelListenTwo">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastListenTwo" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewListenTwo" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                         <p><b>鈪�.Grammar focus:The simple future tense.</b>
                             <span class="btn-box" @click="showAnswer('showImgOne')">
                                 <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
@@ -1705,38 +2414,65 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <h3 id="c025"><span class="bjh3">Mini-project</span></h3>
-                        <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+                        <h3 id="c025" class="fl al-cn">
+                            <span class="bjh3">Mini-project</span>
+                            <audio :src="resource.listenTwo" controls class="audio" ></audio>
+                        </h3>
                         <p>
                             Watch the video and mark what the man has done.Then discuss with
                             your partner about what we can do in reality to make a change in
                             people鈥檚 lives.
                         </p>
                         <p>Things the man has done:</p>
-                        <p>
-                            <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
-                            Hold the elevator for the lady
+                        <p v-for="(item,index) in miniProjectTwo[0].option" :key="index">
+                            <input type="checkbox" name="Hold"  :value="item" :disabled="miniProjectTwo[0].isComplete"  v-model="miniProjectTwo[0].value[0].userAnswer" @change="saveMiniProjectTwo" />
+                            {{item}}
+                            <span class="icon-box" v-if="miniProjectTwo[0].isComplete">
+                                <svg v-if="isShowRight(miniProjectTwo[0].value[0].answer,miniProjectTwo[0].value[0].userAnswer,item)" 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="isShowRight(miniProjectTwo[0].value[0].answer,miniProjectTwo[0].value[0].userAnswer,item) == 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="Language" id="1" v-model="testData.check" />
-                            Catch the balloon for the kid
-                        </p>
-                        <p>
-                            <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
-                            Stop the shopping cart
-                        </p>
-                        <p>
-                            <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
-                            Teach kids to swim
-                        </p>
-                        <p>
-                            <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
-                            Help the old cross the street
-                        </p>
-                        <p>
-                            <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
-                            Plant trees in the park
-                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="miniProjectTwo[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in miniProjectTwo[0].value[0].answer" :key="index" class="mr-20">
+                                {{index + 1}}.{{ arrayToString(item) }}
+                            </span>
+                        </div>
+                         <!-- 鎻愪氦鎸夐挳 -->
+                         <div class="w100 fl">
+                            <ul class="fl ju-ar w100">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handelMiniProjectTwo">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastMiniProjectTwo" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewMiniProjectTwo" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                         <p class="left">
                             <img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" />
                         </p>
@@ -1757,48 +2493,195 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td>
-                                    <textarea v-model="questionData.table.two"
+                                    <textarea v-model="noSubmitData[1].value[0].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @change="saveNoSubmitData" ></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.three"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitData[1].value[1].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitData"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td>
-                                    <textarea v-model="questionData.table.two"
+                                    <textarea v-model="noSubmitData[1].value[2].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitData"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.three"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitData[1].value[3].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitData"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td>
-                                    <textarea v-model="questionData.table.two"
+                                    <textarea v-model="noSubmitData[1].value[4].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitData"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.three"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitData[1].value[5].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitData"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td>
-                                    <textarea v-model="questionData.table.two"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitData[1].value[6].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitData"></textarea>
                                 </td>
                                 <td>
-                                    <textarea v-model="questionData.table.three"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitData[1].value[7].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitData"></textarea>
                                 </td>
                             </tr>
                         </table>
+                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
+                            <div class="banshi openImgBox">
+                                <div class="swiper-container swiper_ppt">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_01.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_02.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_03.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_04.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_05.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_06.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_07.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_08.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_09.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_10.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_11.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_12.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_13.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_14.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_15.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_16.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_17.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_18.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_19.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_20.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_21.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_22.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_23.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_24.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_25.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_26.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_27.png" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="swiper-button-next"></div>
+                                    <div class="swiper-button-prev"></div>
+                                    <div class="pageBox"></div>
+                                </div>
+                                <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1825,35 +2708,337 @@
                             <img class="img-0" alt="" src="../../assets/images/dy3-le3.jpg" />
                         </h2>
                         <h3 id="c026"><span class="bjh3">Listening</span></h3>
-                        <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+                        <audio :src="resource.listenThree" controls class="audio" ></audio>
                         <p>
                             <b>鈪�.Listen to the recording and fill in the blanks with what you
                                 hear.</b>
                         </p>
                         <p>
-                            Just now,I was giving people_________in Chinese.I am
-                            a_________here in Lotus Lane in Houhai.I鈥檝e lived in Beijing for
-                            24 years and I鈥檓_________from the United States.My name is
-                            Terry.I鈥檓 64 years old and I鈥檓_________.And I_________some of my
-                            time volunteering,helping_________find their way around this
+                            Just now,I was giving people
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px"> 
+                            <span class="icon-box" v-if="listenThree[0].isComplete">
+                                <svg v-if="listenThree[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="listenThree[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>
+                            in Chinese.I am a
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px"> 
+                            <span class="icon-box" v-if="listenThree[0].isComplete">
+                                <svg v-if="listenThree[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="listenThree[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>
+                            here in Lotus Lane in Houhai.I鈥檝e lived in Beijing for
+                            24 years and I鈥檓
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px"> 
+                            <span class="icon-box" v-if="listenThree[0].isComplete">
+                                <svg v-if="listenThree[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="listenThree[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>
+                            from the United States.My name is
+                            Terry.I鈥檓 64 years old and I鈥檓
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px"> 
+                            <span class="icon-box" v-if="listenThree[0].isComplete">
+                                <svg v-if="listenThree[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="listenThree[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>
+                            .And I
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[4].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px"> 
+                            <span class="icon-box" v-if="listenThree[0].isComplete">
+                                <svg v-if="listenThree[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="listenThree[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>
+                            some of my
+                            time volunteering,helping
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[5].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px"> 
+                            <span class="icon-box" v-if="listenThree[0].isComplete">
+                                <svg v-if="listenThree[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="listenThree[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>
+                            find their way around this
                             beautiful area of Xicheng District in Beijing.I love volunteering
                             because I love doing things for people.I like to make people
                             happy.I think by making people happy they make other people
-                            happy.It鈥檚 like_________a stone into the river.It makes little
-                            waves and your_________can be given to other people.
+                            happy.It鈥檚 like
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[6].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px"> 
+                            <span class="icon-box" v-if="listenThree[0].isComplete">
+                                <svg v-if="listenThree[0].value[6].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="listenThree[0].value[6].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>
+                            a stone into the river.It makes little
+                            waves and your
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[7].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px"> 
+                            <span class="icon-box" v-if="listenThree[0].isComplete">
+                                <svg v-if="listenThree[0].value[7].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="listenThree[0].value[7].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>
+                            can be given to other people.
                         </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="listenThree[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in listenThree[0].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{ arrayToString(item.answer) }}
+                            </span>
+                        </div>
                         <p>
                             <b>鈪�.Listen to the interview and answer the following
                                 questions.</b>
                         </p>
-                        <p>1.When did Mr.Crossman start volunteering?</p>
-                        <p>_________________________________________________________</p>
-                        <p>2.Why was volunteering not easy in the beginning?</p>
-                        <p>_________________________________________________________</p>
-                        <p>3.What makes him popular?</p>
-                        <p>_________________________________________________________</p>
-                        <p>4.What鈥檚 his understanding of the volunteering spirit?</p>
-                        <p>_________________________________________________________</p>
+                        <p>
+                            1.When did Mr.Crossman start volunteering?
+                            <span class="icon-box" v-if="listenThree[1].isComplete">
+                                <svg v-if="listenThree[1].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="listenThree[1].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>
+                        <p>
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[1].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="listenThree[1].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span  class="mr-20">
+                                {{listenThree[1].value[0].answer}}
+                            </span>
+                        </div>
+                        <p>
+                            2.Why was volunteering not easy in the beginning?
+                            <span class="icon-box" v-if="listenThree[1].isComplete">
+                                <svg v-if="listenThree[1].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="listenThree[1].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>
+                        <p>
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[1].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="listenThree[1].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span  class="mr-20">
+                                {{listenThree[1].value[1].answer}}
+                            </span>
+                        </div>
+                        <p>
+                            3.What makes him popular?
+                            <span class="icon-box" v-if="listenThree[1].isComplete">
+                                <svg v-if="listenThree[1].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="listenThree[1].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>
+                        <p>
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[1].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="listenThree[1].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span  class="mr-20">
+                                {{listenThree[1].value[2].answer}}
+                            </span>
+                        </div>
+                        <p>
+                            4.What鈥檚 his understanding of the volunteering spirit?
+                            <span class="icon-box" v-if="listenThree[1].isComplete">
+                                <svg v-if="listenThree[1].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="listenThree[1].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>
+                        <p>
+                            <input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[1].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="listenThree[1].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span  class="mr-20">
+                                {{listenThree[1].value[3].answer}}
+                            </span>
+                        </div>
+                        <!-- 鎻愪氦鎸夐挳 -->
+                        <div class="w100 fl">
+                            <ul class="fl ju-ar w100">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handelListenThree">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastListenThree" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewListenThree" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1888,8 +3073,141 @@
                                 what are usually included in a volunteer profile.Mark the items
                                 listed in the box.</b>
                         </p>
-                        <p class="center">
+                        <p class="center" style="position: relative;">
                             <img class="img-a" alt="" src="../../assets/images/0063-1.jpg" />
+                            <input type="checkbox" style="position: absolute;top:32%;right:28%" v-model="practicalWriting[2].value[0].userAnswer" value="Personal information" @change="savePracticalWriting" />
+                            <span class="icon-box" v-if="practicalWriting[2].isComplete" style="position: absolute;top:32%;right:4%">
+                                <svg v-if="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Personal information')" 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="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Personal information') == 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>
+                            <input type="checkbox" style="position: absolute;top:36%;right:28%" v-model="practicalWriting[2].value[0].userAnswer" value="Education background" @change="savePracticalWriting" />
+                            <span class="icon-box" v-if="practicalWriting[2].isComplete" style="position: absolute;top:36%;right:4%">
+                                <svg v-if="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Education background')" 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="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Education background') == 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>
+                            <input type="checkbox" style="position: absolute;top:39.5%;right:28%" v-model="practicalWriting[2].value[0].userAnswer" value="Volunteering experience" @change="savePracticalWriting" />
+                            <span class="icon-box" v-if="practicalWriting[2].isComplete" style="position: absolute;top:39.5%;right:4%">
+                                <svg v-if="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Volunteering experience')" 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="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Volunteering experience') == 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>
+                            <input type="checkbox" style="position: absolute;top:43%;right:28%" v-model="practicalWriting[2].value[0].userAnswer" value="Professional experience" @change="savePracticalWriting" />
+                            <span class="icon-box" v-if="practicalWriting[2].isComplete" style="position: absolute;top:43%;right:2%">
+                                <svg v-if="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Professional experience')" 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="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Professional experience') == 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>
+                            <input type="checkbox" style="position: absolute; top:47%;right:28%" v-model="practicalWriting[2].value[0].userAnswer" value="Skills and qualifications" @change="savePracticalWriting" />
+                            <span class="icon-box" v-if="practicalWriting[2].isComplete" style="position: absolute;top:47%;right:4%">
+                                <svg v-if="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Skills and qualifications')" 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="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Skills and qualifications') == 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>
+                            <input type="checkbox" style="position: absolute; top:50.5%;right:28%" v-model="practicalWriting[2].value[0].userAnswer" value="Interests" @change="savePracticalWriting" />
+                            <span class="icon-box" v-if="practicalWriting[2].isComplete" style="position: absolute;top:50.5%;right:4%">
+                                <svg v-if="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Interests')" 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="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'Interests') == 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>
+                            <input type="checkbox" style="position: absolute; top:54.5%;right:28%" v-model="practicalWriting[2].value[0].userAnswer" value="References" @change="savePracticalWriting" />
+                            <span class="icon-box" v-if="practicalWriting[2].isComplete" style="position: absolute;top:54.5%;right:4%">
+                                <svg v-if="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'References')" 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="isShowRight(practicalWriting[2].value[0].answer,practicalWriting[2].value[0].userAnswer,'References') == 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>
@@ -1918,44 +3236,46 @@
                                 Chinese.</b>
                         </p>
                         <p><b>1.gender</b></p>
-                        <p>1) male銆�a.濂虫��</p>
-                        <p>2) female銆�b.鐢锋��</p>
+                        <matching :rawData="rawDataOne" :question="matchingQuestionOne"  />
                         <p><b>2.degree level</b></p>
-                        <p>1) bachelor鈥檚 degree or equivalent銆�a.鎶�鏈�/鑱屼笟鏂囧嚟</p>
-                        <p>2) doctoral degree銆�b.涓鏁欒偛</p>
-                        <p>3) master鈥檚 degree or equivalent銆�c.瀛﹀+瀛︿綅鎴栧悓绛夊鍔�</p>
-                        <p>4) secondary education銆�d.鍗氬+瀛︿綅</p>
-                        <p>5) technical/vocational diploma銆�e.纭曞+瀛︿綅鎴栧悓绛夊鍔�</p>
+                        <matching :rawData="rawDataTwo" :question="matchingQuestionTwo"  />
                         <p><b>3.language level</b></p>
-                        <p>1) basic銆�a.娴佸埄</p>
-                        <p>2) fair銆�b.姣嶈</p>
-                        <p>3) fluent銆�c.宸ヤ綔鐢ㄨ</p>
-                        <p>4) native銆�d.涓�鑸�</p>
-                        <p>5) working knowledge銆�e.鍩虹姘村钩</p>
+                        <matching :rawData="rawDataThree" :question="matchingQuestionThree"  />
                         <p><b>鈪�.Mark the appropriate statement for a profile.</b></p>
-                        <p><b>1.鍥界睄锛氫腑鍥�</b></p>
-                        <p>(銆�) a.Nationality:China</p>
-                        <p>(銆�) b.Nationality:Chinese</p>
-                        <p><b>2.鍖椾含甯傞珮鏂板尯鐩涢偊璺�30鍙�</b></p>
-                        <p>(銆�) a.No.30 Shengbang Road,Hi-tech Zone,Beijing</p>
-                        <p>(銆�) b.Beijing,Hi-tech Zone,Shengbang Road,No.30</p>
-                        <p><b>3.鑻辨枃娴佸埄锛屾櫘閫氳瘽姣嶈姘村钩</b></p>
-                        <p>(銆�) a.Fluent in English; native in Mandarin</p>
-                        <p>
-                            (銆�) b.I speak fluent English,and I鈥檓 a native speaker of
-                            Mandarin.
-                        </p>
-                        <p><b>4.鐔熺粌浣跨敤Word銆丒xcel鍜孭PT</b></p>
-                        <p>(銆�) a.I can use Word,Excel and PPT frequently.</p>
-                        <p>(銆�) b.Proficient user of Word,Excel and PPT</p>
-                        <p><b>5.鎷呬换涓栧崥浼氱炕璇戝拰鎺ュ緟宸ヤ綔</b></p>
-                        <p>
-                            (銆�) a.Served as an interpreter and receptionist at the World Expo
-                        </p>
-                        <p>
-                            (銆�) b.Working as an interpreter and receptionist at the World
-                            Expo
-                        </p>
+                        <div v-for="(item,index) in practicalWriting[0].value" :key="index">
+                            <p>
+                                <b>{{index + 1}}. {{item.stem}} </b>
+                                <span class="icon-box" v-if="practicalWriting[0].isComplete">
+                                <svg v-if="item.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="item.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 v-for="(citem,cindex) in item.option" :key="cindex">
+                                <input type="radio" :disabled="practicalWriting[0].isComplete" v-model="item.userAnswer" :value="citem.value" :name="citem.stem" />
+                                {{citem.value}}.{{citem.txt}}
+                            </p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="practicalWriting[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span  class="mr-20" v-for="(item,index) in practicalWriting[0].value" :key="index">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1988,9 +3308,96 @@
                             鏉庢捣锛岀敺锛屼腑鍥戒汉锛�2000骞�8鏈�21鏃ュ嚭鐢燂紝鐢佃瘽鍙风爜涓�153脳脳脳脳8901锛岄偖绠辨槸simonli@
                             email.com锛岀幇灞呬綇鍦ㄥ洓宸濈渷鎴愰兘甯傚ぉ搴滃尯澶╁簻5琛�1600鍙枫�傛瘯涓氫簬鎴愰兘鑱屼笟鎶�鏈闄紝鍟嗗姟鑻辫涓撲笟锛岃幏涓撶鏂囧嚟銆傚ぇ瀛︽湡闂达紝鑰冨彇浜嗘暀甯堣祫鏍艰瘉銆侀┚鐓э紝鎺ュ彈杩囦负鏈熶袱鍛ㄧ殑鈥滄湁鏁堟矡閫氣�濆煿璁�傝嫳璇彛璇祦鍒╋紝鏅�氳瘽鏍囧噯銆�2023骞�7鏈堣嚦8鏈堬紝浣滀负蹇楁効鑰呭弬鍔犱簡涓栫晫澶у鐢熻繍鍔ㄤ細锛屼粠浜嬭繃璇█鏈嶅姟鐩稿叧宸ヤ綔銆�
                         </p>
-                        <p class="center">
+                        <!-- <p class="center">
                             <img class="img-0" alt="" src="../../assets/images/0065-1.jpg" />
-                        </p>
+                        </p> -->
+                        <div class="wating-email-box">
+                            <p class="center">  <b>Volunteer Profle</b> </p>
+                            <div>Personal information</div>
+                            <ul>
+                                <li>
+                                    Name:
+                                    <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                                </li>
+                                <li>
+                                    Nationality:
+                                    <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                                </li>
+                                <li>
+                                    Gender:
+                                    <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                                </li>
+                                <li>
+                                    Date of birth:
+                                    <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                                </li>
+                                <li>
+                                    Email address:
+                                    <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[4].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                                </li>
+                                <li>
+                                    Phone number:
+                                    <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[5].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                                </li>
+                            </ul>
+                            <div>
+                                <div>Address:</div>
+                                <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[6].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                            </div>
+                            <div>Qualifications and skills</div>
+                            <div>Education background</div>
+                            <div class="fl wh-no w50" >
+                                <span>Degree level:</span>
+                                <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[7].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                            </div>
+                            <div class="fl wh-no w80" >
+                                <span>Major:</span>
+                                <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[8].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                            </div>
+                            <div class="fl wh-no w100" >
+                                <span>University/College:</span>
+                                <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[8].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                            </div>
+                            <div>
+                                <div>Other qualifcations, short courses and training</div>
+                                <textarea name="" id="" cols="30" rows="10" v-model="practicalWriting[1].value[9].userAnswer" class="w100"></textarea>
+                            </div>
+                            <div class="fl wh-no w100" >
+                                <span>Language level:</span>
+                                <input type="text" :disabled="practicalWriting[1].isComplete" v-model="practicalWriting[1].value[8].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" > 
+                            </div>
+                            <div>
+                                <div>Volunteering experience</div>
+                                <textarea name="" id="" cols="30" rows="10" v-model="practicalWriting[1].value[9].userAnswer" class="w100"></textarea>
+                            </div>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="practicalWriting[1].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span  class="mr-20" v-for="(item,index) in practicalWriting[1].value" :key="index">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
+                         <!-- 鎻愪氦鎸夐挳 -->
+                         <div class="w100 fl">
+                            <ul class="fl ju-ar w100">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handlePracticalWriting">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastPracticalWriting" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewPracticalWriting" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -2041,20 +3448,21 @@
                             <img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" />
                         </p>
                         <p class="center"><b>Worksheet for the Applicant</b></p>
-                        <p class="center">
-                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff; width: 80%;" class="fz-14 center">
+                        <p class="center fl ju-cn">
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff; width: 80%;"
+                            class="fz-14 center">
                             <tr class="table-tr-bc">
                                 <td style="text-align: left">
                                     Self-introduction:
-                                    <textarea v-model="questionData.table.nineteen"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitData[2].value[0].userAnswer" rows="6"
+                                        class="w100 table-tr-bc  table-textarea w95" @change="saveNoSubmitData"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td style="text-align: left">
                                     Questions that could be asked and your answers:
-                                    <textarea v-model="questionData.table.nineteen"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitData[2].value[1].userAnswer" rows="6"
+                                        class="w100 table-tr-bc  table-textarea w95" @change="saveNoSubmitData"></textarea>
                                 </td>
                             </tr>
                         </table>
@@ -2082,20 +3490,21 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p class="center"><b>Worksheet for the Interviewer</b></p>
-                        <p class="center">
-                            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff; width: 80%;" class="fz-14 center">
+                        <p class="center fl ju-cn">
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff; width: 80%;"
+                            class="fz-14 center">
                             <tr class="table-tr-bc">
                                 <td style="text-align: left">
                                     The volunteer evaluation rubric:
-                                    <textarea v-model="questionData.table.nineteen"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitData[2].value[2].userAnswer" rows="6"
+                                        class="w100 table-tr-bc  table-textarea w95" @change="saveNoSubmitData"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td style="text-align: left">
                                     Question list:
-                                    <textarea v-model="questionData.table.nineteen"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitData[2].value[3].userAnswer" rows="6"
+                                    class="w100 table-tr-bc  table-textarea w95" @change="saveNoSubmitData"></textarea>
                                 </td>
                             </tr>
                         </table>
@@ -2118,6 +3527,153 @@
                             <p>I鈥檝e volunteered as ...in ...for ...</p>
                             <p>I鈥檓 skillful at ...</p>
                             <p>I鈥檓 fluent in English/...</p>
+                        </div>
+                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
+                            <div class="banshi openImgBox">
+                                <div class="swiper-container swiper_ppt">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_01.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_02.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_03.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_04.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_05.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_06.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_07.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_08.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_09.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_10.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_11.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_12.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_13.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_14.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_15.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_16.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_17.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_18.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_19.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_20.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_21.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_22.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_23.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_24.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_25.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_26.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_27.png" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="swiper-button-next"></div>
+                                    <div class="swiper-button-prev"></div>
+                                    <div class="pageBox"></div>
+                                </div>
+                                <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -2268,6 +3824,78 @@
                 value: [],
                 answerImg: require("../../assets/images/matching-two.png"),
             },
+            rawDataOne:{
+                left: [
+                    {
+                        oldId: "FB34",
+                        txt: "1) male",
+                    },
+                    {
+                        oldId: "64D6",
+                        txt: "2) female",
+                    },
+                ],
+                right: [
+                    {
+                        oldId: "64D6",
+                        txt: "a.濂虫��",
+                    },
+                    {
+                        oldId: "FB34",
+                        txt: "b.鐢锋��",
+                    },
+                ],
+            },
+            matchingQuestionOne:{
+                KnowledgePoint: "123",
+                analysis: "123",
+                answer: [
+                    {
+                        id: "FB34",
+                        linkValue: "b.鐢锋��",
+                        value: "1) male",
+                    },
+                    {
+                        id: "64D6",
+                        linkValue: "a.濂虫��",
+                        value: "2) female",
+                    },
+                ],
+                optionStyle: undefined,
+                id: 489306,
+                // 娉ㄦ剰锛岃繖閲岀殑椤哄簭搴旇鑷笂鑰屼笅锛屽繀椤诲拰棰樹竴鑷�
+                options: {
+                    linkValues: [
+                        {
+                            oldId: "64D6",
+                            txt: "a.濂虫��",
+                        },
+                        {
+                            oldId: "FB34",
+                            txt: "b.鐢锋��",
+                        },
+                    ],
+                    values: [
+                        {
+                            oldId: "FB34",
+                            txt: "1) male",
+                        },
+                        {
+                            oldId: "64D6",
+                            txt: "2) female",
+                        },
+                    ],
+                },
+                questionType: "matching",
+                stem: {
+                    stemTxt: "鎸夐『搴忚繛绾�",
+                },
+                stemStyle: undefined,
+                titleDescription: "1",
+                userChoise: [],
+                value: [],
+                answerImg: require("../../assets/images/matching-7.png"),
+            },
             questionData: {
                 warnUp: {
                     one: {
@@ -2314,9 +3942,283 @@
                     five: "",
                     six: "",
                     seven: "",
-                    enight: "",
+                    eight: "",
                     nine: "",
                 },
+            },
+            rawDataTwo:{
+                left: [
+                    {
+                        oldId: "FB34",
+                        txt: "1) bachelor鈥檚 degree or equivalent",
+                    },
+                    {
+                        oldId: "64D6",
+                        txt: "2) doctoral degree",
+                    },
+                    {
+                        oldId: "2ED4",
+                        txt: "3) master鈥檚 degree or equivalent",
+                    },
+                    {
+                        oldId: "44DE",
+                        txt: "4) secondary education",
+                    },
+                    {
+                        oldId: "43DB",
+                        txt: "5) technical/vocational diploma",
+                    }
+                ],
+                right: [
+                    {
+                        oldId: "43DB",
+                        txt: "a.鎶�鏈�/鑱屼笟鏂囧嚟",
+                    },
+                    
+                    {
+                        oldId: "44DE",
+                        txt: "b.涓鏁欒偛",
+                    },
+                    {
+                        oldId: "FB34",
+                        txt: "c.瀛﹀+瀛︿綅鎴栧悓绛夊鍔�",
+                    },
+                    {
+                        oldId: "64D6",
+                        txt: "d.鍗氬+瀛︿綅",
+                    },
+                    {
+                        oldId: "2ED4",
+                        txt: "纭曞+瀛︿綅鎴栧悓绛夊鍔�",
+                    },
+                ],
+            },
+            matchingQuestionTwo:{
+                KnowledgePoint: "123",
+                analysis: "123",
+                answer: [
+                    {
+                        id: "FB34",
+                        linkValue: "c.瀛﹀+瀛︿綅鎴栧悓绛夊鍔�",
+                        value: "1) bachelor鈥檚 degree or equivalent",
+                    },
+                    {
+                        id: "64D6",
+                        linkValue: "d.鍗氬+瀛︿綅",
+                        value: "2) doctoral degree",
+                    },
+                    {
+                        id: "2ED4",
+                        linkValue: "纭曞+瀛︿綅鎴栧悓绛夊鍔�",
+                        value: "3) master鈥檚 degree or equivalent",
+                    },
+                    {
+                        id: "44DE",
+                        linkValue: "b.涓鏁欒偛",
+                        value: "4) secondary education",
+                    },
+                    {
+                        id: "43DB",
+                        linkValue: "a.鎶�鏈�/鑱屼笟鏂囧嚟",
+                        value: "5) technical/vocational diploma",
+                    }
+                ],
+                optionStyle: undefined,
+                id: 489306,
+                // 娉ㄦ剰锛岃繖閲岀殑椤哄簭搴旇鑷笂鑰屼笅锛屽繀椤诲拰棰樹竴鑷�
+                options: {
+                    linkValues: [
+                        {
+                            oldId: "43DB",
+                            txt: "a.鎶�鏈�/鑱屼笟鏂囧嚟",
+                        },
+                        
+                        {
+                            oldId: "44DE",
+                            txt: "b.涓鏁欒偛",
+                        },
+                        {
+                            oldId: "FB34",
+                            txt: "c.瀛﹀+瀛︿綅鎴栧悓绛夊鍔�",
+                        },
+                        {
+                            oldId: "64D6",
+                            txt: "d.鍗氬+瀛︿綅",
+                        },
+                        {
+                            oldId: "2ED4",
+                            txt: "纭曞+瀛︿綅鎴栧悓绛夊鍔�",
+                        },
+                    ],
+                    values: [
+                        {
+                            oldId: "FB34",
+                            txt: "1) bachelor鈥檚 degree or equivalent",
+                        },
+                        {
+                            oldId: "64D6",
+                            txt: "2) doctoral degree",
+                        },
+                        {
+                            oldId: "2ED4",
+                            txt: "3) master鈥檚 degree or equivalent",
+                        },
+                        {
+                            oldId: "44DE",
+                            txt: "4) secondary education",
+                        },
+                        {
+                            oldId: "43DB",
+                            txt: "5) technical/vocational diploma",
+                        }
+                    ],
+                },
+                questionType: "matching",
+                stem: {
+                    stemTxt: "鎸夐『搴忚繛绾�",
+                },
+                stemStyle: undefined,
+                titleDescription: "1",
+                userChoise: [],
+                value: [],
+                answerImg: require("../../assets/images/matching-8.png"),
+            },
+            rawDataThree:{
+                left: [
+                    {
+                        oldId: "FB34",
+                        txt: "1) basic",
+                    },
+                    {
+                        oldId: "64D6",
+                        txt: "2) fair",
+                    },
+                    {
+                        oldId: "2ED4",
+                        txt: "3) fluent",
+                    },
+                    {
+                        oldId: "44DE",
+                        txt: "4) native",
+                    },
+                    {
+                        oldId: "43DB",
+                        txt: "5) working knowledge",
+                    }
+                ],
+                right: [
+                    {
+                        oldId: "2ED4",
+                        txt: "a.娴佸埄",
+                    },
+                    {
+                        oldId: "44DE",
+                        txt: "b.姣嶈",
+                    },
+                    {
+                        oldId: "43DB",
+                        txt: "c.宸ヤ綔鐢ㄨ",
+                    },
+                    {
+                        oldId: "64D6",
+                        txt: "d.涓�鑸�",
+                    },
+                    {
+                        oldId: "FB34",
+                        txt: "e.鍩虹姘村钩",
+                    },
+
+                ],
+            },
+            matchingQuestionThree:{
+                KnowledgePoint: "123",
+                analysis: "123",
+                answer: [
+                    {
+                        id: "FB34",
+                        linkValue: "e.鍩虹姘村钩",
+                        value: "1) basic",
+                    },
+                    {
+                        id: "64D6",
+                        linkValue: "d.涓�鑸�",
+                        value: "2) fair",
+                    },
+                    {
+                        id: "2ED4",
+                        linkValue: "a.娴佸埄",
+                        value: "3) fluent",
+                    },
+                    {
+                        id: "44DE",
+                        linkValue: "b.姣嶈",
+                        value: "4) native",
+                    },
+                    {
+                        id: "43DB",
+                        linkValue: "c.宸ヤ綔鐢ㄨ",
+                        value: "5) working knowledge",
+                    }
+                ],
+                optionStyle: undefined,
+                id: 489306,
+                // 娉ㄦ剰锛岃繖閲岀殑椤哄簭搴旇鑷笂鑰屼笅锛屽繀椤诲拰棰樹竴鑷�
+                options: {
+                    linkValues: [
+                        {
+                            oldId: "2ED4",
+                            txt: "a.娴佸埄",
+                        },
+                        {
+                            oldId: "44DE",
+                            txt: "b.姣嶈",
+                        },
+
+                        {
+                            oldId: "64D6",
+                            txt: "d.涓�鑸�",
+                        },
+                        {
+                            oldId: "FB34",
+                            txt: "e.鍩虹姘村钩",
+                        },
+                        {
+                            oldId: "43DB",
+                            txt: "c.宸ヤ綔鐢ㄨ",
+                        },
+                    ],
+                    values: [
+                        {
+                            oldId: "FB34",
+                            txt: "1) basic",
+                        },
+                        {
+                            oldId: "64D6",
+                            txt: "2) fair",
+                        },
+                        {
+                            oldId: "2ED4",
+                            txt: "3) fluent銆�c.宸ヤ綔鐢ㄨ",
+                        },
+                        {
+                            oldId: "44DE",
+                            txt: "4) native",
+                        },
+                        {
+                            oldId: "43DB",
+                            txt: "5) working knowledge",
+                        }
+                    ],
+                },
+                questionType: "matching",
+                stem: {
+                    stemTxt: "鎸夐『搴忚繛绾�",
+                },
+                stemStyle: undefined,
+                titleDescription: "1",
+                userChoise: [],
+                value: [],
+                answerImg: require("../../assets/images/matching-9.png"),
             },
             testData: {
                 isComplete: false,
@@ -2377,6 +4279,8 @@
                 listenOne: "",
                 readingOne: "",
                 readingTwo: "",
+                listenTwo:"",
+                listenThree:""
             },
             dropDownList: [
                 "animal rescue and care",
@@ -2406,24 +4310,783 @@
                     answer: "animal rescue and care",
                 },
             },
+            // 鏂板
+            // 鍙渶濉┖鐨勯
+            noSubmitData:[
+                {
+                    type:"shortAnswer",
+                    value:[
+                        {
+                            userAnswer:"",
+                            isShowAnswer:false
+                        },
+                        {
+                            userAnswer:"",
+                            isShowAnswer:false,
+                        },
+                        {
+                            userAnswer:"",
+                            isShowAnswer:false,
+                        }
+                    ]
+                },
+                {
+                    type:'table',
+                    value:[
+                        {
+                            userAnswer:"",
+                        },
+                        {
+                            userAnswer:"",
+                        },
+                        {
+                            userAnswer:"",
+                        },
+                        {
+                            userAnswer:""
+                        },
+                        {
+                            userAnswer:""
+                        },
+                        {
+                            userAnswer:""
+                        },
+                        {
+                            userAnswer:""
+                        },
+                        {
+                            userAnswer:""
+                        },
+                    ]
+                },
+                {
+                    type:'worksheet',
+                    value:[
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                    ]
+                }
+            ],
+            listenOne:[
+                {
+                    id:0,
+                    value:'',
+                    stem:"Why do you want to be a volunteer?",
+                    option:['You can change lives.','You can stay with friends.','You can teach new skills.','You can make more money.'],
+                    answer:'You can change lives.',
+                    isRight:null,
+                    isComplete:false,
+                    isShowAnswer:false,
+                },
+                {
+                    id:1,
+                    value:'',
+                    stem:'Who are more likely to be volunteers?',
+                    option:[' College students.','Nonprofessionals.','People without jobs.','Children.'],
+                    answer:'College students',
+                    isRight:null,
+                    isComplete:false,
+                    isShowAnswer:false,
+                },
+                {
+                    id:3,
+                    value:'',
+                    stem:'.Which activity is NOT mentioned in the video?',
+                    option:['Volunteering in sport.','Emergency services.','Helping people with disabilities.','Teaching.'],
+                    answer:'Helping people with disabilities.',
+                    isRight:null,
+                    isComplete:false,
+                    isShowAnswer:false,
+                },
+            ],
+            wordsOne:[
+                {
+                    type:"judge",
+                    isShowAnswer:false,
+                    isComplete:false,
+                    value:[
+                        {
+                            answer:"a",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"d",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"c",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"d",
+                            userAnswer:""
+                        },
+                        {
+                            answer:"b",
+                            userAnswer:""
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isShowAnswer:false,
+                    isComplete:false,
+                    value:[
+                        {
+                            userAnswer:"",
+                            answer:"enormous",
+                            isRight:null
+                        },
+                        {
+                            userAnswer:"",
+                            answer:"boost",
+                            isRight:null
+                        },
+                        {
+                            userAnswer:"",
+                            answer:"anxiety",
+                            isRight:null
+                        },
+                        {
+                            userAnswer:"",
+                            answer:"mortality",
+                            isRight:null
+                        },
+                        {
+                            userAnswer:"",
+                            answer:"energizing",
+                            isRight:null
+                        },
+                        {
+                            userAnswer:"",
+                            answer:"passion",
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'shortAnswer',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            stem:'help out',
+                            userAnswer:'',
+                            answer:'I helped out with the check-in of athletes at the sports game.',
+                            isRight:null
+                        },
+                        {
+                            stem:'make a difference',
+                            userAnswer:'',
+                            answer:'No matter how small the deed is, it will make a difference to people who are in need.',
+                            isRight:null
+                        },
+                        {
+                            stem:'stretch one鈥檚 wings',
+                            userAnswer:'',
+                            answer:'Your experience of volunteering will help you to stretch your wings in your future career.',
+                            isRight:null
+                        },
+                        {
+                            stem:'what鈥檚 more',
+                            userAnswer:'',
+                            answer:'Volunteering does good to one鈥檚 body; what鈥檚 more, it鈥檚 also good for one鈥檚 mental health.',
+                            isRight:null
+                        },
+                        {
+                            stem:'carry over',
+                            userAnswer:'',
+                            answer:'The spirit of volunteering will be carried over from generation to generation.',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'translate',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            userAnswer:'',
+                            answer:'鍔犲叆瀛︽牎閲岀殑闈掑勾蹇楁効鑰呭崗浼氭墿澶т簡濂圭殑鏈嬪弸鍦�',
+                            isRight:null
+                        },
+                        {
+                            userAnswer:'',
+                            answer:'鏈嶅姟2022鐨勫寳浜啲濂ヤ細鏄竴娆¢潪甯告湁鎰忎箟涓旇浜洪毦蹇樼殑缁忓巻',
+                            isRight:null
+                        },
+                        {
+                            userAnswer:'',
+                            answer:'瀵瑰瀛愪滑鐨勬壙璇鸿濂瑰湪杩欐墍涔℃潙灏忓鍋氫簡涓�杈堝瓙鐨勮�佸笀',
+                            isRight:null
+                        },
+                        {
+                            userAnswer:'',
+                            answer:'鍙備笌涓嶅悓鐨勫織鎰胯�呴」鐩府鍔╀粬鎴愰暱涓轰簡涓�涓湁杩滆鐨勪汉',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'grammar',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            userAnswer:'',
+                            answer:'is considering',
+                            isRight:null
+                        },
+                        {
+                            userAnswer:'',
+                            answer:'am planning',
+                            isRight:null
+                        },
+                        {
+                            userAnswer:'',
+                            answer:'are doing',
+                            isRight:null
+                        },
+                        {
+                            userAnswer:'',
+                            answer:'are putting',
+                            isRight:null
+                        },
+                        {
+                            userAnswer:'',
+                            answer:'is having',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'describe',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            userAnswer:'',
+                            answer:'The volunteer is tutoring the children.',
+                            isRight:null
+                        },
+                        {
+                            userAnswer:'',
+                            answer:'Students are helping with farming.',
+                            isRight:null
+                        },
+                        {
+                            userAnswer:'',
+                            answer:'A group of volunteers are cleaning up trashes on the beach.',
+                            isRight:null
+                        },
+                        {
+                            userAnswer:'',
+                            answer:'The little girl is holding a donation box full of clothes.',
+                            isRight:null
+                        },
+                    ]
+                }
+            ],
+            miniTable:[
+                {
+                    value:[
+                    {
+                        userAnswer:""
+                    },
+                    {
+                        userAnswer:''
+                    },
+                    {
+                        userAnswer:''
+                    },
+                    ]
+                },
+                {
+                    value:[
+                        {
+                            userAnswer:''
+                        },                    
+                        {
+                            userAnswer:''
+                        },                    
+                        {
+                            userAnswer:''
+                        },                    
+                        {
+                            userAnswer:''
+                        },                    
+                        {
+                            userAnswer:''
+                        },                    
+                        {
+                            userAnswer:''
+                        },                    
+                        {
+                            userAnswer:''
+                        },                    
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                    ]
+                }
+            ],
+            listenTwo:[
+                {
+                    type:"fill ",
+                    isShowAnswer:false,
+                    isComplete:false,
+                    value:[
+                        {
+                            answer:604,
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            answer:1083,
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            answer:63,
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            answer:4500,
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            answer:47,
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            answer:100000,
+                            userAnswer:"",
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:"dropdown",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    option:['T','F'],
+                    value:[
+                        {
+                            stem:"Showing compassion and being patient are qualities needed for training.",
+                            answer:'T',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            stem:"Women have to overcome a lot of difficulties to attend Barefoot College.",
+                            answer:'T',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            stem:"Half of the courses in the training are done in sign language.",
+                            answer:'F',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            stem:"Husbands are always supportive for wives to go for training.",
+                            answer:'F',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            stem:"The training helps women gain respect for the changes they brought in.",
+                            answer:'T',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            stem:"In far-away areas,only the old and the kids are left.",
+                            answer:"remote",
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            stem:"The government works on ways to fight against poverty.",
+                            answer:"solutions",
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            stem:"People having no access to electricity mainly live in Africa.",
+                            answer:"primarily",
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            stem:"Some college students choose to join volunteering programs after graduation.",
+                            answer:"attend",
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            stem:"Family reunion is a usual way to celebrate the Spring Festival.",
+                            answer:"Traditional",
+                            userAnswer:"",
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:"fill",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:"came up with",
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            answer:"went over to",
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            answer:["ended","with"],
+                            userAnswer:["",""],
+                            isRight:null
+                        },
+                        {
+                            answer:"lit up",
+                            userAnswer:"",
+                            isRight:null
+                        },
+                        {
+                            answer:"are faced with",
+                            userAnswer:"",
+                            isRight:null
+                        },
+                    ]
+                }
+            ],
+            miniProjectTwo:[
+                {
+                    type:'choice',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    option:[
+                        'Hold the elevator for the lady',
+                        'Catch the balloon for the kid',
+                        'Stop the shopping cart',
+                        'Teach kids to swim',
+                        'Help the old cross the street',
+                        'Plant trees in the park'
+                    ],
+                    value:[
+                        {
+                            answer:['Hold the elevator for the lady'],
+                            userAnswer:[]
+                        }
+                    ]
+                }
+            ],
+            listenThree:[
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'directions',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'volunteer',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'actually',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'retired',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'spend',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'tourists',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'throwing',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'happiness',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            stem:'When did Mr.Crossman start volunteering?',
+                            answer:'He started volunteering in March 2017 after his retirement.',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'Why was volunteering not easy in the beginning?',
+                            answer:'He was unfamiliar with the surroundings.',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'What makes him popular?',
+                            answer:'He speaks fluent Chinese.',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'What鈥檚 his understanding of the volunteering spirit?',
+                            answer:'You get more than what you give in a way.',
+                            userAnswer:''
+                        },
+                    ]
+                }
+            ],
+            practicalWriting:[
+                {
+                    type:'radio',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            stem:'鍥界睄锛氫腑鍥�',
+                            option:[
+                                {
+                                    value:'a',
+                                    txt:'Nationality:China'
+                                },
+                                {
+                                    value:'b',
+                                    txt:'Nationality:Chinese'
+                                }
+                            ],
+                            answer:'b',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'鍖椾含甯傞珮鏂板尯鐩涢偊璺�30鍙�',
+                            option:[
+                                {
+                                    value:'a',
+                                    txt:'No.30 Shengbang Road,Hi-tech Zone,Beijing'
+                                },
+                                {
+                                    value:'b',
+                                    txt:'Beijing,Hi-tech Zone,Shengbang Road,No.30'
+                                }
+                            ],
+                            answer:'a',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'鑻辨枃娴佸埄锛屾櫘閫氳瘽姣嶈姘村钩',
+                            option:[
+                                {
+                                    value:'a',
+                                    txt:'Fluent in English; native in Mandarin'
+                                },
+                                {
+                                    value:'b',
+                                    txt:'I speak fluent English,and I鈥檓 a native speaker of Mandarin.'
+                                }
+                            ],
+                            answer:'a',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'鐔熺粌浣跨敤Word銆丒xcel鍜孭PT',
+                            option:[
+                                {
+                                    value:'a',
+                                    txt:'I can use Word,Excel and PPT frequently.'
+                                },
+                                {
+                                    value:'b',
+                                    txt:'Proficient user of Word,Excel and PPT'
+                                }
+                            ],
+                            answer:'b',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'鎷呬换涓栧崥浼氱炕璇戝拰鎺ュ緟宸ヤ綔',
+                            option:[
+                                {
+                                    value:'a',
+                                    txt:'Served as an interpreter and receptionist at the World Expo'
+                                },
+                                {
+                                    value:'b',
+                                    txt:'Working as an interpreter and receptionist at the World Expo'
+                                }
+                            ],
+                            answer:'a',
+                            userAnswer:''
+                        },
+                    ]
+                },
+                {
+                    type:'email',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'Li Hai',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'Chinese',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'Male',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'21/08/2000',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'simonli@email.com',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'1532788901',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'No. 1600, 5th Tianfu Street, Tianfu District, Chengdu',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'Vocational diploma',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'Business English',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'Chengdu Polytechnic',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'Teacher鈥檚 certificate; Driving license;Two-week training on effective communication.',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'Fluent in English; native in Mandarin',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'Served as a member of organizing committee of FISU World University Games 07/2022- 08/2022; Provided language service.',
+                            userAnswer:''
+                        },
+                    ]
+                },
+                {
+                    type:'checkbox',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:['Personal information','Skills and qualifications','Education background','Interests','Volunteering experience'],
+                            userAnswer:[]
+                        }
+                    ]
+                },
+            ],
         };
     },
     mounted() {
         const testData = localStorage.getItem("english-testOne");
-        if (testData) {
-            this.testData = JSON.parse(testData);
-        }
+        if (testData) this.testData = JSON.parse(testData);
         const bookQuestion = localStorage.getItem("english-book-question-one");
-        if (bookQuestion) {
-            this.questionData = JSON.parse(bookQuestion);
-        }
-        const dropdownData = localStorage.getItem("english-dropdown-one");
-        if (dropdownData) {
-            this.dropdownData = JSON.parse(dropdownData);
-        }
+        if (bookQuestion) this.questionData = JSON.parse(bookQuestion);
+        const dropdownData = localStorage.getItem("english-dropdown-three");
+        if (dropdownData) this.dropdownData = JSON.parse(dropdownData);
+        // 鏂板
+        const listenOne = localStorage.getItem("english-chapter03-listenOne");
+        if(listenOne) this.listenOne = JSON.parse(listenOne)
+        const noSubmitData = localStorage.getItem('english-chapter03-noSubmitData')
+        if(noSubmitData) this.noSubmitData = JSON.parse(noSubmitData);
+        const wordsOne =  localStorage.getItem('english-chapter03-wordsOne')
+        if(wordsOne) this.wordsOne = JSON.parse(wordsOne)
+        const miniTable =  localStorage.getItem('english-chapter03-miniTable')
+        if(miniTable) this.miniTable = JSON.parse(miniTable)
+        const listenTwo =  localStorage.getItem('english-chapter03-listenTwo')
+        if(listenTwo) this.listenTwo = JSON.parse(listenTwo)
+        const miniProjectTwo = localStorage.getItem('english-chapter03-miniProjectTwo')
+        if(miniProjectTwo) this.miniProjectTwo = JSON.parse(miniProjectTwo)
+        const listenThree = localStorage.getItem('english-chapter03-listenThree')
+        if(listenThree) this.listenThree = JSON.parse(listenThree)
+        const practicalWriting = localStorage.getItem('english-chapter03-practicalWriting')
+        if(practicalWriting) this.practicalWriting = JSON.parse(practicalWriting)
         this.getPath();
+        
+        
     },
     methods: {
+        arrayToString(data) {
+            if(Array.isArray(data)) {
+            return data.toString()
+            } else {
+                return data
+            }
+        },
         saveWord(event, word) {
             this.$emit("saveCharacters", event, word);
         },
@@ -2488,7 +5151,6 @@
             };
         },
         setBookQuestion() {
-            console.log("淇濆瓨");
             localStorage.setItem(
                 "english-book-question-one",
                 JSON.stringify(this.questionData)
@@ -2503,6 +5165,13 @@
             );
             this.resource.readingTwo = await getResourcePath(
                 "E8719EC88026BCFB11D292AA999F6D3D"
+            );
+            this.resource.listenTwo = await getResourcePath(
+                "EE3DC2A770CB6280D5F57930017F8473"
+            );
+            
+            this.resource.listenThree = await getResourcePath(
+                "E143D4F451EA8172C368005710C4692B"
             );
         },
         showAnswer(type) {
@@ -2560,7 +5229,7 @@
             this.dropdownData = dropdownDatas;
         },
         changeDropdown() {
-            localStorage.removeItem("english-dropdown-one");
+            localStorage.removeItem("english-dropdown-three");
             for (let key in this.dropdownData) {
                 const item = this.dropdownData[key];
                 item.value = "";
@@ -2569,16 +5238,250 @@
         },
         setDropdownData() {
             localStorage.setItem(
-                "english-dropdown-one",
+                "english-dropdown-three",
                 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
+            }
+            return flag;
         },
+        isShowRight(answer, userAnswer, data) {
+            let flag = null;
+            if (userAnswer.indexOf(data) > -1) {
+                flag = answer.indexOf(data) > -1 ? true : false;
+            }
+            return flag;
+        },
+        // 璋冩暣棰樼洰鏁版嵁鍚�
+        // lietenOne
+        // 鎻愪氦
+        handelListenOneData() {
+           for(let index = 0;index < this.listenOne.length;index ++) {
+            const item = this.listenOne[index]
+            item.isRight = item.value == item.answer
+            item.isComplete = true
+            item.isShowAnswer = true
+           }
+           console.log('鎻愪环',this.listenOne)
+           this.saveListenOneData()
+        },
+        // 淇濆瓨
+        saveListenOneData() {
+            localStorage.setItem('english-chapter03-listenOne',JSON.stringify(this.listenOne))
+        },
+        // 鏌ョ湅绛旀
+        viewListenOneData() {
+            for(let index = 0;index < this.listenOne.length;index ++) {
+                const item = this.listenOne[index]
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        // 閲嶅仛
+        recastListenOneData() {
+            localStorage.removeItem('english-chapter03-listenOne')
+            for(let index = 0;index < this.listenOne.length;index ++) {
+                const item = this.listenOne[index]
+                item.value = ''
+                item.isRight = null
+                item.isComplete = false
+            }
+        },
+        // 鍙渶瑕佷繚瀛樼殑棰樼洰鏁版嵁
+        // 淇濆瓨
+        saveNoSubmitData() {
+            localStorage.setItem('english-chapter03-noSubmitData',JSON.stringify(this.noSubmitData))
+        },
+        // 鏌ョ湅绛旀
+        viewNoSubmitData(num,number) {
+            this.noSubmitData[num].value[number].isShowAnswer = !this.noSubmitData[num].value[number].isShowAnswer
+        },
+        // wordsOne
+        // 淇濆瓨
+        savewordsOne() {
+            localStorage.setItem('english-chapter03-wordsOne',JSON.stringify(this.wordsOne))
+        },
+        // 閲嶅仛
+        recastwordsOne() {
+            localStorage.removeItem('english-chapter03-wordsOne')
+            for (let index = 0; index < this.wordsOne.length; index++) {
+                const item = this.wordsOne[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.userAnswer = '',
+                    citem.isRight = null
+                }
+            }
+        },
+        // 鏌ョ湅绛旀
+        viewwordsOne() {
+            for (let index = 0; index < this.wordsOne.length; index++) {
+                const item = this.wordsOne[index];
+                item.isShowAnswer = true
+            }
+        },
+        handelwordsOne() {
+            for (let index = 0; index < this.wordsOne.length; index++) {
+                const item = this.wordsOne[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
+                }
+            }
+        },
+        saveminiTable() {
+            console.log(1);
+            localStorage.setItem('english-chapter03-miniTable',JSON.stringify(this.miniTable))
+        },
+        saveListenTwo() {
+            localStorage.setItem('english-chapter03-listenTwo',JSON.stringify(this.listenTwo))
+        },
+        handelListenTwo() {
+            for (let index = 0; index < this.listenTwo.length; index++) {
+                const item = this.listenTwo[index];
+                item.isComplete = true
+                item.isShowAnswer = true
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.isRight = citem.answer == citem.userAnswer
+                }
+            }
+            this.saveListenTwo()
+        },
+        recastListenTwo() {
+            localStorage.removeItem('english-chapter03-listenTwo')
+            for (let index = 0; index < this.listenTwo.length; index++) {
+                const item = this.listenTwo[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.isRight = null
+                    if(Array.isArray(citem.userAnswer)) {
+                        citem.userAnswer = ["",""]
+                    } else {
+                        citem.userAnswer= ""
+                    }
+                }
+            }
+            
+        },
+        viewListenTwo() {
+            for (let index = 0; index < this.listenTwo.length; index++) {
+                const item = this.listenTwo[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        saveMiniProjectTwo() {
+            localStorage.setItem('english-chapter03-miniProjectTwo',JSON.stringify(this.miniProjectTwo))
+        },
+        handelMiniProjectTwo() {
+            for (let index = 0; index < this.miniProjectTwo.length; index++) {
+                const item = this.miniProjectTwo[index];
+                item.isComplete = true
+                item.isShowAnswer = true
+            }
+            this.saveMiniProjectTwo()
+        },
+        recastMiniProjectTwo() {
+            for (let index = 0; index < this.miniProjectTwo.length; index++) {
+                const item = this.miniProjectTwo[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.userAnswer = []
+                }
+            }
+            localStorage.removeItem('english-chapter03-miniProjectTwo')
+        },
+        viewMiniProjectTwo() {
+            for (let index = 0; index < this.miniProjectTwo.length; index++) {
+                const item = this.miniProjectTwo[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        saveListenThree() {
+            localStorage.setItem('english-chapter03-listenThree',JSON.stringify(this.listenThree))
+        },
+        handelListenThree() {
+            for (let index = 0; index < this.listenThree.length; index++) {
+                const item = this.listenThree[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.saveListenThree()
+        },
+        recastListenThree() {
+            for (let index = 0; index < this.listenThree.length; index++) {
+                const item = this.listenThree[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.userAnswer = ''
+                }
+            }
+            localStorage.removeItem('english-chapter03-listenThree')
+        },
+        viewListenThree() {
+            for (let index = 0; index < this.listenThree.length; index++) {
+                const item = this.listenThree[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        savePracticalWriting() {
+            localStorage.setItem('english-chapter03-practicalWriting',JSON.stringify(this.practicalWriting))
+        },
+        handlePracticalWriting() {
+            for (let index = 0; index < this.practicalWriting.length; index++) {
+                const item = this.practicalWriting[index];
+                item.isComplete = true
+                item.isShowAnswer = true
+                if(item.type == 'radio') {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = citem.userAnswer == citem.answer
+                    }
+                }
+            }
+            this.savePracticalWriting()
+        },
+        recastPracticalWriting() {
+            for (let index = 0; index < this.practicalWriting.length; index++) {
+                const item = this.practicalWriting[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                if(item.type == 'radio') {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = null,
+                        citem.userAnswer = ''
+                    }
+                }
+            }
+            localStorage.removeItem('english-chapter03-practicalWriting')
+        },
+        viewPracticalWriting() {
+            for (let index = 0; index < this.practicalWriting.length; index++) {
+                const item = this.practicalWriting[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        }
     },
 };
 </script>
@@ -2657,4 +5560,21 @@
     right: 0;
     background-color: red;
 }
+.wating-email-box {
+    background-color: #e0eaf7;
+    border: 2px solid #95b8d3;
+    padding: 0 10px ;
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        
+        li {
+            white-space: nowrap;
+            margin-right: 20px;
+            width: 42%;
+            display: flex;
+            align-items: center;
+        }
+    }
+}
 </style>

--
Gitblit v1.9.1