From 041b94102f67461e361a28e3af493715cf776b21 Mon Sep 17 00:00:00 2001
From: yiming <m13691596795@163.com>
Date: 星期二, 23 七月 2024 14:07:46 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/books/English/view/components/chapter008.vue | 1725 ++++++++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 1,163 insertions(+), 562 deletions(-)

diff --git a/src/books/English/view/components/chapter008.vue b/src/books/English/view/components/chapter008.vue
index 8e3706a..dfea12a 100644
--- a/src/books/English/view/components/chapter008.vue
+++ b/src/books/English/view/components/chapter008.vue
@@ -41,36 +41,13 @@
                                         </p>
                                         <p class="center">
                                             1.
-                                            <select class="select-border" v-model="dropdownData.one.value"
-                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
-                                                <option v-for="(item, index) in dropDownList" :key="index"
-                                                    :value="item">
-                                                    {{ item }}
-                                                </option>
-                                            </select>
-                                            <span class="icon-box">
-                                                <svg v-if="dropdownData.one.isRight" t="1716986419862" class="icon"
-                                                    viewBox="0 0 1820 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
-                                                    <path
-                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                                                        fill="#1AFA29" p-id="18768"></path>
-                                                </svg>
-                                                <svg v-if="dropdownData.one.isRight == false" t="1716987085767"
-                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
-                                                    <path
-                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                                                        fill="#d81e06" p-id="25746"></path>
-                                                </svg>
-                                            </span>
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[0].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(0)" />
+                                            <img :src="warmUp[0].value[0].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[0].isRight == true || warmUp[0].value[0].isRight == false">
                                         </p>
                                     </div>
-                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
-                                        绛旀锛歩ntercity train
-                                    </p>
                                 </div>
                                 <div class="right" style="width: 48%">
                                     <div>
@@ -79,36 +56,13 @@
                                         </p>
                                         <p class="center">
                                             2.
-                                            <select class="select-border" v-model="dropdownData.two.value"
-                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
-                                                <option v-for="(item, index) in dropDownList" :key="index"
-                                                    :value="item">
-                                                    {{ item }}
-                                                </option>
-                                            </select>
-                                            <span class="icon-box">
-                                                <svg v-if="dropdownData.two.isRight" t="1716986419862" class="icon"
-                                                    viewBox="0 0 1820 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
-                                                    <path
-                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                                                        fill="#1AFA29" p-id="18768"></path>
-                                                </svg>
-                                                <svg v-if="dropdownData.two.isRight == false" t="1716987085767"
-                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
-                                                    <path
-                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                                                        fill="#d81e06" p-id="25746"></path>
-                                                </svg>
-                                            </span>
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[1].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(1)" />
+                                            <img :src="warmUp[0].value[1].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[1].isRight == true || warmUp[0].value[1].isRight == false">
                                         </p>
                                     </div>
-                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
-                                        绛旀锛歰nline shopping
-                                    </p>
                                 </div>
                             </div>
 
@@ -120,36 +74,14 @@
                                         </p>
                                         <p class="center">
                                             3.
-                                            <select class="select-border" v-model="dropdownData.three.value"
-                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
-                                                <option v-for="(item, index) in dropDownList" :key="index"
-                                                    :value="item">
-                                                    {{ item }}
-                                                </option>
-                                            </select>
-                                            <span class="icon-box">
-                                                <svg v-if="dropdownData.three.isRight" t="1716986419862" class="icon"
-                                                    viewBox="0 0 1820 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
-                                                    <path
-                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                                                        fill="#1AFA29" p-id="18768"></path>
-                                                </svg>
-                                                <svg v-if="dropdownData.three.isRight == false" t="1716987085767"
-                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
-                                                    <path
-                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                                                        fill="#d81e06" p-id="25746"></path>
-                                                </svg>
-                                            </span>
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[2].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(2)" />
+                                            <img :src="warmUp[0].value[2].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[2].isRight == true || warmUp[0].value[2].isRight == false">
                                         </p>
                                     </div>
-                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
-                                        绛旀锛歟lectronic payment
-                                    </p>
+
                                 </div>
                                 <div class="right" style="width: 48%">
                                     <div>
@@ -158,36 +90,14 @@
                                         </p>
                                         <p class="center">
                                             4.
-                                            <select class="select-border" v-model="dropdownData.four.value"
-                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
-                                                <option v-for="(item, index) in dropDownList" :key="index"
-                                                    :value="item">
-                                                    {{ item }}
-                                                </option>
-                                            </select>
-                                            <span class="icon-box">
-                                                <svg v-if="dropdownData.four.isRight" t="1716986419862" class="icon"
-                                                    viewBox="0 0 1820 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
-                                                    <path
-                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                                                        fill="#1AFA29" p-id="18768"></path>
-                                                </svg>
-                                                <svg v-if="dropdownData.four.isRight == false" t="1716987085767"
-                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
-                                                    <path
-                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                                                        fill="#d81e06" p-id="25746"></path>
-                                                </svg>
-                                            </span>
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[3].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(3)" />
+                                            <img :src="warmUp[0].value[3].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[3].isRight == true || warmUp[0].value[3].isRight == false">
                                         </p>
                                     </div>
-                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
-                                        绛旀锛歴hared bike
-                                    </p>
+
                                 </div>
                             </div>
 
@@ -199,36 +109,14 @@
                                         </p>
                                         <p class="center">
                                             5.
-                                            <select class="select-border" v-model="dropdownData.five.value"
-                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
-                                                <option v-for="(item, index) in dropDownList" :key="index"
-                                                    :value="item">
-                                                    {{ item }}
-                                                </option>
-                                            </select>
-                                            <span class="icon-box">
-                                                <svg v-if="dropdownData.five.isRight" t="1716986419862" class="icon"
-                                                    viewBox="0 0 1820 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
-                                                    <path
-                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                                                        fill="#1AFA29" p-id="18768"></path>
-                                                </svg>
-                                                <svg v-if="dropdownData.five.isRight == false" t="1716987085767"
-                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
-                                                    <path
-                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                                                        fill="#d81e06" p-id="25746"></path>
-                                                </svg>
-                                            </span>
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[4].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(4)" />
+                                            <img :src="warmUp[0].value[4].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[4].isRight == true || warmUp[0].value[4].isRight == false">
                                         </p>
                                     </div>
-                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
-                                        绛旀锛歵ake-away service
-                                    </p>
+
                                 </div>
                                 <div class="right" style="width: 48%">
                                     <div>
@@ -237,42 +125,40 @@
                                         </p>
                                         <p class="center">
                                             6.
-                                            <select class="select-border" v-model="dropdownData.six.value"
-                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
-                                                <option v-for="(item, index) in dropDownList" :key="index"
-                                                    :value="item">
-                                                    {{ item }}
-                                                </option>
-                                            </select>
-                                            <span class="icon-box">
-                                                <svg v-if="dropdownData.six.isRight" t="1716986419862" class="icon"
-                                                    viewBox="0 0 1820 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
-                                                    <path
-                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                                                        fill="#1AFA29" p-id="18768"></path>
-                                                </svg>
-                                                <svg v-if="dropdownData.six.isRight == false" t="1716987085767"
-                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
-                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
-                                                    <path
-                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                                                        fill="#d81e06" p-id="25746"></path>
-                                                </svg>
-                                            </span>
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[5].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(5)" />
+                                            <img :src="warmUp[0].value[5].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[5].isRight == true || warmUp[0].value[5].isRight == false">
                                         </p>
                                     </div>
-                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
-                                        绛旀锛歠acial recognition
-                                    </p>
+
                                 </div>
                             </div>
                         </div>
-                        <p><b>鈪�.What other jobs can you list?</b></p>
-                        <p>____________________________________________</p>
+                        <p><b>鈪�.What other jobs can you list?</b>
+                            <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p>
+                            <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
+                            </textarea>
+                        </p>
+                        <div class="show-answer-box" v-if="showAnswerOne">
+                            <div>绛旀:</div>
+                            <div>
+                                <img src="../../assets/images/M8WarmUp.png" alt="" class="w100" />
+                            </div>
+                        </div>
                     </div>
+
                 </div>
                 <div class="preface-bottom">
                     <span class="contet-num-box">136</span>
@@ -294,10 +180,22 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <h3 id="c065"><span class="bjh3">Listening</span></h3>
-                        <p class="center"> <audio :src="resource.listenOne" controls
-                                controlslist="noplaybackrate nodownload" class="audio" ></audio></p>
-                        <p><b>Watch the video and find out how the speakers describe their jobs.</b></p>
+                        <h3 id="c065" class="fl al-cn">
+                            <span class="bjh3">Listening</span>
+                            <!--controlslist="noplaybackrate nodownload"鍚庨潰鐨勯煶棰戞鍔犲叆杩欎釜-->
+                            <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio>
+                        </h3>
+                        <p><b>Watch the video and find out how the speakers describe their jobs.</b>
+                            <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
                         <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                             <tr class="table-th-bc">
                                 <td class="tl-cn">Who is he/she?</td>
@@ -355,13 +253,66 @@
                                 </td>
                             </tr>
                         </table>
+                        <div class="show-answer-box" v-if="showAnswerTwo">
+                            <div>绛旀:</div>
+                            <div>
+                                <img src="../../assets/images/M8ListeningOne.png" alt="" class="w100" />
+                            </div>
+                        </div>
                         <h3 id="c066"><span class="bjh3">Reading</span></h3>
                         <p>1.There is a saying that a part-time job can be a way to gain the experience necessary for
-                            full-time employment.Do you agree? Why or why not?</p>
-                        <p>2.If you鈥檙e considering a part-time job,what鈥檚 your expectation of it?</p>
-                        <p class="center">__________________</p>
-                        <p class="center"> <audio :src="resource.listenOne" controls
-                                controlslist="noplaybackrate nodownload" class="audio" ></audio></p>
+                            full-time employment.Do you agree? Why or why not?
+                            <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p>
+                            <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
+                            </textarea>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerThree">
+                            绛旀锛�(1).Gain confidence and responsibility &nbsp; (2).Explore alternate career options &nbsp;
+                            (3).Strengthen resume &nbsp;
+                            (4).Develop work ethic skills &nbsp; (5).Create opportunities for socializing &nbsp;
+                            (6).Enhance communication skills &nbsp;
+                            (7).Build networking opportunities &nbsp; (8).Gain independence &nbsp; (9).Get a stable cash
+                            flow &nbsp; (10).Learn money management skills &nbsp;
+                        </p>
+                        <p>2.If you鈥檙e considering a part-time job,what鈥檚 your expectation of it?
+                            <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p>
+                            <textarea v-model="questionData.reading.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
+                            </textarea>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerFour">
+                            绛旀锛�(1).a good salary &nbsp; (2).a regular working time &nbsp; (3).a friendly working team
+                            &nbsp;
+                            (4).comfortable working environment
+
+                        </p>
+                        <p class="center">
+                            <input type="text" class="input-bottom-border input-bc-t " style="width: 30%;"
+                                v-model="questionData.reading.four" @change="setBookQuestion" />
+                        </p>
+                        <p class="center"> <audio :src="resource.readingOne" controls
+                                controlslist="noplaybackrate nodownload" class="audio"></audio></p>
                         <p>Everyone鈥檚 first job is special.There are a couple of reasons for this:the experience is
                             burned into one鈥檚 memory; it gives you the practice needed to
                             <span class="word-bc" @click="saveWord($event, 'fulfill')">fulfill</span>
@@ -437,9 +388,8 @@
                             <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
                             <span class="line-border-box"></span>
                         </p>
-                        <p class="center"><audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                               ></audio></p>
+                        <p><audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
+                                style="margin-left: 10px" class="audio"></audio></p>
                         <p>fulfill /f蕣l藞f瑟l/ <i>v.</i> 绗﹀悎锛涘饱琛�</p>
                         <div class="bkbj">
                             <p><i>to do or have what is required or necessary</i></p>
@@ -530,12 +480,21 @@
                         </div>
                         <p><b>鈪�.Reading comprehension.</b></p>
                         <p>A.Read the passage and answer the following questions.</p>
-                        <p>1.What job did the author take?</p>
-                        <p>____________________________________________________</p>
-                        <p>2.How did he describe his job?</p>
-                        <p>____________________________________________________</p>
-                        <p>3.What can be a proper title for this passage?</p>
-                        <p>____________________________________________________</p>
+                        <div v-for="(item, index) in questionDataOne[0].value" :key="'one' + index">
+                            <p class="tl-lf">{{ index + 1 }}.{{ item.stem }}</p>
+                            <p>
+                                <input :disabled="questionDataOne[0].isComplete" type="text" class="input-bottom-border"
+                                    style="width: 90%" v-model="item.userAnswer" @input="setQuestionDataOne" />
+                            </p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[0].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                                <span v-for="(item, index) in questionDataOne[0].value" :key="'oneanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </span>
+                            </p>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -560,33 +519,110 @@
                     <div class="bodystyle">
                         <p>B.Put the questions in the right blanks according to the main idea of each paragraph,and then
                             find the answer to each question.</p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0150-1.jpg" /></p>
+                        <div class="center poster-img">
+                            <img class="img-a" alt="" src="../../assets/images/0150-1.jpg" />
+                            <input type="text" class="poster-input-box-one"
+                                v-model="questionDataOne[1].value[0].userAnswer" @change="setQuestionDataOne" />
+                            <input type="text" class="poster-input-box-two"
+                                v-model="questionDataOne[1].value[1].userAnswer" @change="setQuestionDataOne" />
+                            <input type="text" class="poster-input-box-six"
+                                v-model="questionDataOne[1].value[2].userAnswer" @change="setQuestionDataOne" />
+                            <input type="text" class="poster-input-box-three"
+                                v-model="questionDataOne[1].value[3].userAnswer" @change="setQuestionDataOne" />
+                            <input type="text" class="poster-input-box-four"
+                                v-model="questionDataOne[1].value[4].userAnswer" @change="setQuestionDataOne" />
+                            <input type="text" class="poster-input-box-five"
+                                v-model="questionDataOne[1].value[5].userAnswer" @change="setQuestionDataOne" />
+                        </div>
                         <p>The answer to each question:</p>
-                        <p>1.________________________________________________</p>
-                        <p>2.________________________________________________</p>
-                        <p>3.________________________________________________</p>
-                        <p>4.________________________________________________</p>
-                        <p>5.________________________________________________</p>
+                        <div v-for="(item, index) in questionDataOne[2].value" :key="'two' + index">
+                            <p>{{ index + 1 }}.<input :disabled="questionDataOne[2].isComplete" type="text"
+                                    class="input-bottom-border" style="width: 90%" v-model="item.userAnswer"
+                                    @input="setQuestionDataOne" /></p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[2].isShowAnswer">
+                            <div>
+                                绛旀锛�
+                                <p v-for="(item, index) in questionDataOne[2].value" :key="'twoanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </p>
+                            </div>
+                        </div>
                         <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>The first job experience is burned into our memories for a c_______of reasons,and Nicholas
+                        <p>The first job experience is burned into our memories for a c
+                            <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[0].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[0].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">
+                            of reasons,and Nicholas
                             remembered his well.When he was about 16,he wanted to buy a speed cube.Unfortunately,he had
                             no money,so he decided to take a job and earn enough money for it.He planned to help
-                            e________people with their gardens,so he went to Mrs.Hudson who just lived in his n_______.
-                            Although his job of pulling out weeds there was t_________, he managed to get the money he
+                            e <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[1].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[1].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">
+
+                            people with their gardens,so he went to Mrs.Hudson who just lived in his n
+                            <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[2].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">.
+                            Although his job of pulling out weeds there was t
+                            <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[3].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[3].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">
+                            , he managed to get the money he
                             needed for his speed cube.And most importantly,that working experience made him realize the
-                            v_______of money through his s_________.</p>
+                            v
+                            <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[4].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[4].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">
+                            of money through his s
+                            <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[5].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[5].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">
+                            .
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[3].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                                <span v-for="(item, index) in questionDataOne[3].value" :key="'threeanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </span>
+                            </p>
+                        </div>
                         <p>B.Underline the following expressions in the passage and make sentences with them.</p>
-                        <p>1.out of nowhere______________________________</p>
-                        <p>2.as to______________________________________</p>
-                        <p>3.build up___________________________________</p>
-                        <p>4.at least___________________________________</p>
-                        <p>5.take away__________________________________</p>
+                        <div v-for="(item, index) in questionDataOne[4].value" :key="'three' + index">
+                            <p>{{ index + 1 }}.{{ item.stem }}</p>
+                            <p>
+                                <textarea v-model="item.userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" style=" width: 92%"
+                                    class="fz-16 fm-son" @change="setQuestionDataOne">
+                            </textarea>
+                            </p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[4].isShowAnswer">
+                            <div>
+                                绛旀锛�
+                                <p v-for="(item, index) in questionDataOne[4].value" :key="'fouranswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </p>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
-                    <span class="contet-num-box">146</span>
+                    <span class="contet-num-box">140</span>
                 </div>
             </div>
         </div>
@@ -606,17 +642,21 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p>C.Translate the following sentences into Chinese.</p>
-                        <p>1.Wang Jinxi,the 鈥淚ron Man鈥�,successfully fulfilled his job under incredible difficulties.</p>
-                        <p>____________________________________________________</p>
-                        <p>2.Zhang Guimei,a teacher,spent all her money purchasing things needed for the girls in her
-                            school.</p>
-                        <p>____________________________________________________</p>
-                        <p>3.Wu Dajing impressed the whole nation when fighting to supply his teammates with a better
-                            position in the lane.</p>
-                        <p>____________________________________________________</p>
-                        <p>4.Wang Yaping with resolve won her family鈥檚 support to be the first woman in China鈥檚 new
-                            space station.</p>
-                        <p>____________________________________________________</p>
+                        <div v-for="(item, index) in questionDataOne[5].value" :key="'four' + index">
+                            <p>{{ index + 1 }}.{{ item.stem }}</p>
+                            <p>
+                                <input :disabled="questionDataOne[5].isComplete" type="text" class="input-bottom-border"
+                                    style="width: 90%" v-model="item.userAnswer" @input="setQuestionDataOne" />
+                            </p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[5].isShowAnswer">
+                            <div>
+                                绛旀锛�
+                                <p v-for="(item, index) in questionDataOne[5].value" :key="'fiveanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </p>
+                            </div>
+                        </div>
                         <p><b>鈪�.Grammar focus:The simple present &amp; past tense.</b>
                             <span class="btn-box" @click="showAnswer('showImg')">
                                 <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
@@ -634,58 +674,153 @@
                         <p>A.Based on the form of the underlined verbs tell us whether the following sentences are about
                             the past or the present.</p>
                         <p>锛坧resent锛�1.Everyone鈥檚 first job <span class="u">is</span> special.</p>
-                        <p>锛堛��銆�锛�2.I <span class="u">wanted</span> to buy a new speed cube.</p>
-                        <p>锛堛��銆�锛�3.I <span class="u">went</span> to the oldest person I knew in my neighborhood.</p>
-                        <p>锛堛��銆�锛�4.It <span class="u">seems</span> these experiences harden our spirits and resolve.</p>
-                        <p>锛堛��銆�锛�5.When I <span class="u">was</span> about sixteen years old, I <span class="u">wanted
-                            </span>to buy a new speed cube.</p>
-                        <p>锛堛��銆�锛�6.I <span class="u">think</span> everyone should get down on one鈥檚 knees and pull weeds.
+                        <p>锛�<input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border"
+                                style="width: 15%" v-model="questionDataOne[6].value[0].userAnswer"
+                                @input="setQuestionDataOne" />锛�
+                            2.I <span class="u">wanted</span> to buy a new speed cube.
+                            <img :src="questionDataOne[6].value[0].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[6].isComplete">
                         </p>
+                        <p>锛�<input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border"
+                                style="width: 15%" v-model="questionDataOne[6].value[1].userAnswer"
+                                @input="setQuestionDataOne" />锛�3.I <span class="u">went</span> to the oldest person I
+                            knew in my neighborhood.
+                            <img :src="questionDataOne[6].value[1].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[6].isComplete">
+                        </p>
+                        <p>锛�<input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border"
+                                style="width: 15%" v-model="questionDataOne[6].value[2].userAnswer"
+                                @input="setQuestionDataOne" />锛�4.It <span class="u">seems</span> these experiences
+                            harden our spirits and resolve.
+                            <img :src="questionDataOne[6].value[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[6].isComplete">
+                        </p>
+                        <p>锛�<input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border"
+                                style="width: 15%" v-model="questionDataOne[6].value[3].userAnswer"
+                                @input="setQuestionDataOne" />锛�5.When I <span class="u">was</span> about sixteen years
+                            old, I <span class="u">wanted
+                            </span>to buy a new speed cube.
+                            <img :src="questionDataOne[6].value[3].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[6].isComplete">
+                        </p>
+                        <p>锛�<input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border"
+                                style="width: 15%" v-model="questionDataOne[6].value[4].userAnswer"
+                                @input="setQuestionDataOne" />锛�6.I <span class="u">think</span> everyone should get down
+                            on one鈥檚 knees and pull weeds.
+                            <img :src="questionDataOne[6].value[4].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[6].isComplete">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[6].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                                <span v-for="(item, index) in questionDataOne[6].value" :key="'sixanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </span>
+                            </p>
+                        </div>
                         <p>B.Write the present or the past form of the following verbs.</p>
-                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14 w100">
                             <tr class="table-tr-bc">
-                                <td class="tl-cn">give<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" /></td>
-                                <td class="tl-cn">spend<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" /></td>
-                                <td class="tl-cn"><input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />had
+                                <td class="tl-cn">give
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 40%"
+                                        v-model="questionDataOne[7].value[0].userAnswer" @input="setQuestionDataOne" />
+                                    <img :src="questionDataOne[7].value[0].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
+                                </td>
+                                <td class="tl-cn">spend
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[1].userAnswer" @input="setQuestionDataOne" />
+                                    <img :src="questionDataOne[7].value[1].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
+                                </td>
+                                <td class="tl-cn">
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[2].userAnswer" @input="setQuestionDataOne" />
+                                    had
+                                    <img :src="questionDataOne[7].value[2].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
                             </tr>
                             <tr class="table-tr-bc ">
-                                <td class="tl-cn"><input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                <td class="tl-cn">
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[3].userAnswer" @input="setQuestionDataOne" />
                                     went
+                                    <img :src="questionDataOne[7].value[3].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
-                                <td class="tl-cn"><input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                <td class="tl-cn">
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[4].userAnswer" @input="setQuestionDataOne" />
                                     began
+                                    <img :src="questionDataOne[7].value[4].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
-                                <td class="tl-cn">say<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                <td class="tl-cn">say
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[5].userAnswer" @input="setQuestionDataOne" />
+                                    <img :src="questionDataOne[7].value[5].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
-                                <td class="tl-cn">get<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                <td class="tl-cn">get
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[6].userAnswer" @input="setQuestionDataOne" />
+                                    <img :src="questionDataOne[7].value[6].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
-                                <td class="tl-cn">think<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                <td class="tl-cn">think
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[7].userAnswer" @input="setQuestionDataOne" />
+                                    <img :src="questionDataOne[7].value[7].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
-                                <td class="tl-cn">asy<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />chose
+                                <td class="tl-cn">asy
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[8].userAnswer" @input="setQuestionDataOne" />
+                                    chose
+                                    <img :src="questionDataOne[7].value[8].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
                             </tr>
                         </table>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[7].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                                <span v-for="(item, index) in questionDataOne[7].value" :key="'sixanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </span>
+                            </p>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ar w80">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handleQuestionDataOne">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastQuestionDataOne" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewQuestionDataOne" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                         <h3 id="c067"><span class="bjh3">Mini-project</span></h3>
                         <p>People do different jobs and hold different ideas about their jobs.You are required to:</p>
                         <p>1.Do a small survey among your family members or relatives and jot down their opinions;</p>
@@ -1177,9 +1312,9 @@
                             </li>
                         </ul>
                         <p class="center"><b>Choose a Career You Love</b></p>
-                        <p class="center"><audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                               ></audio></p>
+                        <p class="center"><audio :src="resource.readingThree" controls
+                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
+                                class="audio"></audio></p>
                         <p>We spend a large
                             <span class="word-bc" @click="saveWord($event, 'portion')">portion</span>
                             of our lives working,so how we spend those years matters.It is
@@ -1260,8 +1395,8 @@
                             <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
                             <span class="line-border-box"></span>
                         </p>
-                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
-                            style="margin-left: 10px" class="audio" ></audio>
+                        <audio :src="resource.readingFour" controls controlslist="noplaybackrate nodownload"
+                            style="margin-left: 10px" class="audio"></audio>
                         <p>portion /藞p蓴藧蕛n/ <i>n.</i>閮ㄥ垎</p>
                         <div class="bkbj">
                             <p><i>one part of sth.larger</i></p>
@@ -1712,29 +1847,43 @@
                         </div>
                         <h2 id="b031"><img class="img-0" alt="" src="../../assets/images/dy8-le3.jpg" /></h2>
                         <h3 id="c071"><span class="bjh3">Listening</span></h3>
-                        <p class="center"> <audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                ></audio></p>
                         <p><b>鈪�.Derek is talking about his job interview.Listen to the recording and fill in the blanks
                                 with what you hear.</b></p>
+                        <p> <audio :src="resource.listenTwo" controls controlslist="noplaybackrate nodownload"
+                                style="margin-left: 10px" class="audio"></audio></p>
                         <p>Hi,everyone.I鈥檓 Derek Cruise.I landed a job interview the other day.It is a bank
                             1.
-                            <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"> 
-                            <img :src="listenThree[0].value[0].isRight ? correctIcon : errorIcon"  v-if="listenThree[0].isComplete">
+                            <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">
+                            <img :src="listenThree[0].value[0].isRight ? correctIcon : errorIcon"
+                                v-if="listenThree[0].isComplete">
                             that I鈥檝e wanted for a long time.I鈥檓 excited you know.The job is quite
                             2.
-                            <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"> 
-                            <img :src="listenThree[0].value[1].isRight ? correctIcon : errorIcon"  v-if="listenThree[0].isComplete">
+                            <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">
+                            <img :src="listenThree[0].value[1].isRight ? correctIcon : errorIcon"
+                                v-if="listenThree[0].isComplete">
                             and I love to play with 3.
-                            <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"> 
-                            <img :src="listenThree[0].value[2].isRight ? correctIcon : errorIcon"  v-if="listenThree[0].isComplete">
+                            <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">
+                            <img :src="listenThree[0].value[2].isRight ? correctIcon : errorIcon"
+                                v-if="listenThree[0].isComplete">
                             .I prepared my 4.
-                            <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"> 
-                            <img :src="listenThree[0].value[3].isRight ? correctIcon : errorIcon"  v-if="listenThree[0].isComplete">
+                            <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">
+                            <img :src="listenThree[0].value[3].isRight ? correctIcon : errorIcon"
+                                v-if="listenThree[0].isComplete">
                             ,and bought a
                             suit.My friend reminded me that I should send a follow-up 5.
-                            <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"> 
-                            <img :src="listenThree[0].value[4].isRight ? correctIcon : errorIcon"  v-if="listenThree[0].isComplete">
+                            <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">
+                            <img :src="listenThree[0].value[4].isRight ? correctIcon : errorIcon"
+                                v-if="listenThree[0].isComplete">
                             after the interview.But
                             I feel worried about writing the letter,for I know little about it.Anyway,I am
                             well-prepared,I guess.Now all I鈥檝e got to do is to take that job.Wish me good luck!
@@ -1742,19 +1891,19 @@
                         <div class="w100 fl ju-cn">
                             <ul class="fl ju-ev" style="width:80%">
                                 <li>
-                                <button class="btn-border btn-w" @click="handleListenThree">
-                                    鎻愪氦
-                                </button>
+                                    <button class="btn-border btn-w" @click="handleListenThree">
+                                        鎻愪氦
+                                    </button>
                                 </li>
                                 <li>
-                                <button @click="recastListenThree" class="btn-border btn-w">
-                                    閲嶅仛
-                                </button>
+                                    <button @click="recastListenThree" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
                                 </li>
                                 <li>
-                                <button @click="viewListenThree" class="parimary-btn">
-                                    鏌ョ湅绛旀
-                                </button>
+                                    <button @click="viewListenThree" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
                                 </li>
                             </ul>
                         </div>
@@ -1785,14 +1934,18 @@
                                 鈪�.Susan is interviewing the candidate Derek.Listen to the conversation and write down
                                 Susan's questions.
                             </b>
-                            <span class="btn-box" @click="showNoSubmitThree(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"
-                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
-                                    transform="translate(-3327.144 15329)" />
+                            <span class="btn-box" @click="showNoSubmitThree(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"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
                                 </svg>
                             </span>
                         </p>
+                        <p > <audio :src="resource.listenThree" controls
+                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
+                                class="audio"></audio></p>
                         <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                             <tr class="table-th-bc">
                                 <td class="tl-cn wh-no">Susan's Questions</td>
@@ -1845,47 +1998,48 @@
                                 </td>
                             </tr>
                         </table>
-                        <div class="event-header-text-bc pd-5 w100 mt-20"
-                            v-if="noSubmitThree[0].value[0].isShowAnswer">
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitThree[0].value[0].isShowAnswer">
                             <span>绛旀锛�</span>
-                            <span v-for="(item,index) in noSubmitThree[0].value" :key="index" class="mr-20">
-                                {{index + 1}}.{{  item.answer }}
+                            <span v-for="(item, index) in noSubmitThree[0].value" :key="index" class="mr-20">
+                                {{ index + 1 }}.{{ item.answer }}
                             </span>
                         </div>
                         <h3 id="c072"><span class="bjh3">Practical Writing</span></h3>
                         <p>Work with your partner to discuss the following questions.</p>
                         <p>
                             1.How do you follow up after a job interview?
-                            <span class="btn-box" @click="showNoSubmitThree(1,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"
-                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
-                                    transform="translate(-3327.144 15329)" />
+                            <span class="btn-box" @click="showNoSubmitThree(1, 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"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
                                 </svg>
                             </span>
                         </p>
-                        <textarea name="" id="" cols="30" rows="10" v-model="noSubmitThree[1].value[0].userAnswer" class="w100" @input="saveNoSubmitThree"></textarea>
-                        <div class="event-header-text-bc pd-5 w100 mt-20"
-                            v-if="noSubmitThree[1].value[0].isShowAnswer">
+                        <textarea name="" id="" cols="30" rows="10" v-model="noSubmitThree[1].value[0].userAnswer"
+                            class="w100" @input="saveNoSubmitThree"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitThree[1].value[0].isShowAnswer">
                             <span>绛旀锛�</span>
-                            <p v-for="(item,index) in noSubmitThree[1].value[0].answer" :key="index">
-                                {{index + 1}}) {{item}}
+                            <p v-for="(item, index) in noSubmitThree[1].value[0].answer" :key="index">
+                                {{ index + 1 }}) {{ item }}
                             </p>
                         </div>
                         <p>
                             2.How do you write follow-up emails after an interview?
-                            <span class="btn-box" @click="showNoSubmitThree(1,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"
-                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
-                                    transform="translate(-3327.144 15329)" />
+                            <span class="btn-box" @click="showNoSubmitThree(1, 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"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
                                 </svg>
                             </span>
                         </p>
-                        <textarea name="" id="" cols="30" rows="10" v-model="noSubmitThree[1].value[1].userAnswer" class="w100" @input="saveNoSubmitThree"></textarea>
-                        <div class="event-header-text-bc pd-5 w100 mt-20"
-                            v-if="noSubmitThree[1].value[1].isShowAnswer">
-                            <span>绛旀锛歿{noSubmitThree[1].value[1].answer}}</span>
+                        <textarea name="" id="" cols="30" rows="10" v-model="noSubmitThree[1].value[1].userAnswer"
+                            class="w100" @input="saveNoSubmitThree"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitThree[1].value[1].isShowAnswer">
+                            <span>绛旀锛歿{ noSubmitThree[1].value[1].answer }}</span>
                         </div>
                         <p><b>鈪�.Read the following tips,and find out why a follow-up email is needed after an
                                 interview.</b></p>
@@ -1924,65 +2078,70 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p>
-                            <b>鈪�.Fill in the blanks with the right expressions from the labels to finish the following-up
+                            <b>鈪�.Fill in the blanks with the right expressions from the labels to finish the
+                                following-up
                                 email.
                             </b>
                             <span class="btn-box" @click="showPracticalThree(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"
-                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
-                                    transform="translate(-3327.144 15329)" />
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
                                 </svg>
                             </span>
-                            </p>
+                        </p>
                         <div class="finish-box">
                             <p>From: Jack Thompson</p>
                             <p>To: Mr. Jim</p>
-                            <p v-for="(item,index) in practicalThree[0].value" :key="index">
-                                {{item.stemOne}}
-                                <select class="select-border" v-model="item.userAnswer" @change="handlePracticalThree(0,index)">
-                                    <option v-for="(citem, cindex) in item.option" :key="'change' + cindex" :value="citem">
-                                    {{ citem}}
+                            <p v-for="(item, index) in practicalThree[0].value" :key="index">
+                                {{ item.stemOne }}
+                                <select class="select-border" v-model="item.userAnswer"
+                                    @change="handlePracticalThree(0, index)">
+                                    <option v-for="(citem, cindex) in item.option" :key="'change' + cindex"
+                                        :value="citem">
+                                        {{ citem }}
                                     </option>
                                 </select>
-                                <img :src="item.isRight ? correctIcon : errorIcon"  v-if="item.isRight == true || item.isRight == false">
-                                {{item.stemTwo}}
+                                <img :src="item.isRight ? correctIcon : errorIcon"
+                                    v-if="item.isRight == true || item.isRight == false">
+                                {{ item.stemTwo }}
                             </p>
                             <p>Sincerely,</p>
                             <p>Jack Thompson</p>
                             <p>Jackthompson@email.com</p>
                             <p>312-465-7981</p>
                         </div>
-                        <div class="event-header-text-bc pd-5 w100 mt-20"
-                            v-if="practicalThree[0].isShowAnswer">
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="practicalThree[0].isShowAnswer">
                             <span>绛旀锛�</span>
-                            <span v-for="(item,index) in practicalThree[0].value" :key="index" class="mr-20">
-                                {{  item.answer }}
+                            <span v-for="(item, index) in practicalThree[0].value" :key="index" class="mr-20">
+                                {{ item.answer }}
                             </span>
                         </div>
                         <p>
                             <b>鈪�.Put the following words in right order to make sentences.</b>
                             <span class="btn-box" @click="showPracticalThree(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"
-                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
-                                    transform="translate(-3327.144 15329)" />
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
                                 </svg>
                             </span>
                         </p>
                         <ul>
-                            <li v-for="(item,index) in practicalThree[1].value" :key="index">
-                                <p >
-                                    {{index + 1}}.{{item.stem}}
+                            <li v-for="(item, index) in practicalThree[1].value" :key="index">
+                                <p>
+                                    {{ index + 1 }}.{{ item.stem }}
                                 </p>
-                                <input type="text"  v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" > 
+                                <input type="text" v-model="item.userAnswer" class="input-bottom-border input-bc-t"
+                                    @input="savePracticalThree">
                             </li>
                         </ul>
-                        <div class="event-header-text-bc pd-5 w100 mt-20"
-                            v-if="practicalThree[1].isShowAnswer">
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="practicalThree[1].isShowAnswer">
                             <span>绛旀锛�</span>
-                            <p v-for="(item,index) in practicalThree[1].value" :key="index" class="mr-20">
-                                {{index + 1}}.{{  item.answer }}
+                            <p v-for="(item, index) in practicalThree[1].value" :key="index" class="mr-20">
+                                {{ index + 1 }}.{{ item.answer }}
                             </p>
                         </div>
                     </div>
@@ -2012,37 +2171,32 @@
                         <div class="fieldset-4">
                             <p class="left">
                                 From:
-                                <input type="text"  v-model="practicalThree[2].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" > 
+                                <input type="text" v-model="practicalThree[2].value[0].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
                             </p>
                             <p class="left">
                                 To:
-                                <input type="text"  v-model="practicalThree[2].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" > 
+                                <input type="text" v-model="practicalThree[2].value[1].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
                             </p>
                             <p class="left">
                                 Subject:
-                                <input type="text"  v-model="practicalThree[2].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" > 
+                                <input type="text" v-model="practicalThree[2].value[2].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
                             </p>
                             <p><br /></p>
-                            <textarea name="" id="" cols="30" rows="18" v-model="practicalThree[2].value[3].userAnswer" class="w100" @input="savePracticalThree"></textarea>
+                            <textarea name="" id="" cols="30" rows="18" v-model="practicalThree[2].value[3].userAnswer"
+                                class="w100" @input="savePracticalThree"></textarea>
                             <p class="left">derekcruise@email.com</p>
                             <p class="left">521-764-8809</p>
                         </div>
                         <div class="un-h2">
                             <h2 id="b032">Unit Project</h2>
                         </div>
-                        <video
-                            :src="resource.videoPathOne"
-                            webkit-playsinline="true"
-                            x-webkit-airplay="true"
-                            playsinline="true"
-                            x5-video-orientation="h5"
-                            x5-video-player-fullscreen="true"
-                            x5-playsinline=""
-                            controls
-                            controlslist="nodownload"
-                            class="w100 video"
-                            style="margin-top: 40px;"
-                        ></video>
+                        <video :src="resource.videoPathOne" webkit-playsinline="true" x-webkit-airplay="true"
+                            playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true"
+                            x5-playsinline="" controls controlslist="nodownload" class="w100 video"
+                            style="margin-top: 40px;"></video>
                         <p>In the following job ads,there are some job vacancies from different companies.Read carefully
                             and make a decision about the one you are going to apply for.First tell your partner the
                             reason why that job interests you.Then work in pairs,role-playing the interviewer and the
@@ -2052,8 +2206,6 @@
                         <p><b>Role 1:Interviewer</b></p>
                         <p>1.Work with your partner and decide what questions you will ask during the
                             interview.2.Complete the worksheet for the interviewer.</p>
-                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
-                        <p class="center"></p>
                         <p><b>Role 2:Interviewee</b></p>
                         <p>1.Make a list of the information which might be useful in the interview.2.Finish the
                             follow-up email after the interview.</p>
@@ -2084,16 +2236,19 @@
                             <tr class="table-tr-bc">
                                 <td class="tl-cn ">
                                     <p class="table-p">
-                                        Name: 
-                                        <input type="text"  v-model="practicalThree[3].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" > 
+                                        Name:
+                                        <input type="text" v-model="practicalThree[3].value[0].userAnswer"
+                                            class="input-bottom-border input-bc-t" @input="savePracticalThree">
                                     </p>
                                     <p class="table-p">
-                                        Phone: 
-                                        <input type="text"  v-model="practicalThree[3].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" > 
+                                        Phone:
+                                        <input type="text" v-model="practicalThree[3].value[1].userAnswer"
+                                            class="input-bottom-border input-bc-t" @input="savePracticalThree">
                                     </p>
                                     <p class="table-p">
-                                        Email: 
-                                        <input type="text"  v-model="practicalThree[3].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" > 
+                                        Email:
+                                        <input type="text" v-model="practicalThree[3].value[2].userAnswer"
+                                            class="input-bottom-border input-bc-t" @input="savePracticalThree">
                                     </p>
                                 </td>
                             </tr>
@@ -2138,18 +2293,22 @@
                         <div class="fieldset-4">
                             <p class="left">
                                 From:
-                                <input type="text"  v-model="practicalThree[4].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" > 
+                                <input type="text" v-model="practicalThree[4].value[0].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
                             </p>
                             <p class="left">
                                 To:
-                                <input type="text"  v-model="practicalThree[4].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" > 
+                                <input type="text" v-model="practicalThree[4].value[1].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
                             </p>
                             <p class="left">
                                 Subject:
-                                <input type="text"  v-model="practicalThree[4].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" > 
+                                <input type="text" v-model="practicalThree[4].value[2].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
                             </p>
                             <p><br /></p>
-                            <textarea name="" id="" cols="30" rows="18" v-model="practicalThree[4].value[3].userAnswer" class="w100" @input="savePracticalThree"></textarea>
+                            <textarea name="" id="" cols="30" rows="18" v-model="practicalThree[4].value[3].userAnswer"
+                                class="w100" @input="savePracticalThree"></textarea>
                         </div>
                     </div>
                 </div>
@@ -2351,18 +2510,312 @@
     },
     data() {
         return {
-            warmUp:[
+            warmUp: [
                 {
-                    isComplete:false,
-                    isShowAnswer:false,
-                    
-
-                }
+                    type: "fills",
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: 'fitness coach',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'courier',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'flight attendant',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'sales representative',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'cyberathlete',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'machinist',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                    ]
+                },
             ],
+            questionDataOne: [
+                {
+                    type: "fills",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stem: "What job did the author take?",
+                            answer: "Pulling out weeds",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "How did he describe his job?",
+                            answer: "Tedious",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "What can be a proper title for this passage?",
+                            answer: "My first job",
+                            userAnswer: "",
+                        },
+                    ]
+                },
+                {
+                    type: "fills",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            userAnswer: "",
+                        },
+                        {
+                            userAnswer: "",
+                        },
+                        {
+                            userAnswer: "",
+                        },
+                        {
+                            userAnswer: "",
+                        },
+                        {
+                            userAnswer: "",
+                        },
+                        {
+                            userAnswer: "",
+                        },
+                    ]
+                },
+                {
+                    type: "fills",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: "I wanted to buy a new speed cube, but I did not have any money, and my parents would not give me the money.",
+                            userAnswer: "",
+                        },
+                        {
+                            answer: "The experience is burned in one's memory, it gives you the practice needed to fulfill other positions, and it teaches you about the value of money.",
+                            userAnswer: "",
+                        },
+                        {
+                            answer: "The experience hardened my spirits and resolve and supplied me with the value of money.",
+                            userAnswer: "",
+                        },
+                        {
+                            answer: "I went to Mrs. Hudson, and asked her for the work to tend her garden.",
+                            userAnswer: "",
+                        },
+                        {
+                            answer: "My first job was to pull out weeds.",
+                            userAnswer: "",
+                        },
+                    ]
+                },
+                {
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: "couple",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "elderly",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "neighborhood",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "tedious",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "value",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "sweat",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                    ]
+                },
+                {
+                    type: "fills",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stem: "out of nowher",
+                            answer: "Success never comes out of nowhere.",
+                            userAnswer: "",
+
+                        },
+                        {
+                            stem: "as to",
+                            answer: "We might have questions as to where we could get a job.",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "build up",
+                            answer: "Salesperson should build up a good relationship with the customers.",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "at least",
+                            answer: "Full-time employees usually work at least 5 days a week.",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "take away",
+                            answer: "When a project wraps up, you are sure to take away some experience and new knowledge.",
+                            userAnswer: "",
+                        }
+                    ]
+                },
+                {
+                    type: "fills",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stem: "Wang Jinxi,the 鈥淚ron Man鈥�,successfully fulfilled his job under incredible difficulties.",
+                            answer: "鈥滈搧浜衡�濈帇杩涘枩鍦ㄦ瀬绔洶闅剧殑鏉′欢涓嬫垚鍔熷湴瀹屾垚浜嗕粬鐨勫伐浣溿��",
+                            userAnswer: "",
+
+                        },
+                        {
+                            stem: "Zhang Guimei,a teacher,spent all her money purchasing things needed for the girls in her school.",
+                            answer: "寮犳姊呰�佸笀鎶婂ス鎵�鏈夌殑閽遍兘鑺卞湪涓哄鏍$殑濂冲瀛愯喘涔版墍闇�鐨勭墿鍝佷笂浜嗐��",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Wu Dajing impressed the whole nation when fighting to supply his teammates with a better position in the lane.",
+                            answer: "姝﹀ぇ闈栧湪璧涘満涓婂鍔涗负闃熷弸浜夊緱鏈夊埄浣嶇疆鐨勪簨杩癸紝璁╁叏鍥戒汉姘戦兘涓轰箣鎰熷姩銆�",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Wang Yaping with resolve won her family鈥檚 support to be the first woman in China鈥檚 new space station.",
+                            answer: "鐜嬩簹钀嶇殑鍧氭寔涓哄ス璧㈠緱浜嗗浜虹殑鏀寔锛岃濂规垚涓轰腑鍥芥柊绌洪棿绔欑殑绗竴浣嶅コ鑸ぉ鍛樸��",
+                            userAnswer: "",
+                        },
+                    ]
+                },
+                {
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: "past",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "past",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "present",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: " past",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "present",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                    ]
+                },
+                {
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: "gave",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "spent",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "have",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "go",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+
+                            answer: "begin",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "said",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "got",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "thought",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+
+                            answer: "choose",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                    ]
+                },
+            ],
+            showAnswerOne: false,
+            showAnswerTwo: false,
+            showAnswerThree: false,
+            showAnswerFour: false,
             imgThirteen: require("../../assets/images/grammar8-1.png"),
             imgThirteenOne: require("../../assets/images/grammar8-2.png"),
-            correctIcon:require('@/assets/images/correct.svg'),
-            errorIcon:require('@/assets/images/error.svg'),
+            correctIcon: require('@/assets/images/correct.svg'),
+            errorIcon: require('@/assets/images/error.svg'),
             showImg: false,
             showImgOne: false,
             rawData: {
@@ -2484,42 +2937,17 @@
                 answerImg: require("../../assets/images/matching-one.png"),
             },
             questionData: {
-                warnUp: {
-                    one: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese knot",
-                    },
-                    two: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese medicine",
-                    },
-                    three: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese calligraphy",
-                    },
-                    four: {
-                        value: "",
-                        isRight: null,
-                        answer: "Taichi",
-                    },
-                    five: {
-                        value: "",
-                        isRight: null,
-                        answer: "sweet dumpling",
-                    },
-                    six: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese chess",
-                    },
-                    seven: "",
-                },
                 reading: {
                     one: "",
                     two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    six: "",
+                    seven: "",
+                    eight: "",
+                    nine: "",
+                    ten: "",
                 },
                 table: {
                     one: "",
@@ -2617,10 +3045,13 @@
             },
             resource: {
                 listenOne: "",
+                listenTwo: "",
+                listenThree: "",
                 readingOne: "",
                 readingTwo: "",
-                videoPathOne:'',
-                listenTwo:''
+                readingThree: "",
+                readingFour: "",
+                videoPathOne: ''
             },
             dropdownData: {
                 one: {
@@ -2654,69 +3085,69 @@
                     answer: "facial recognition",
                 },
             },
-            
-            listenThree:[
+
+            listenThree: [
                 {
-                    type:"fill",
-                    isComplete:false,
-                    isShowAnswer:false,
-                    value:[
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
                         {
-                            answer:'clerk',
-                            userAnswer:'',
-                            isRight:null
+                            answer: 'clerk',
+                            userAnswer: '',
+                            isRight: null
                         },
                         {
-                            answer:'challenging',
-                            userAnswer:'',
-                            isRight:null
+                            answer: 'challenging',
+                            userAnswer: '',
+                            isRight: null
                         },
                         {
-                            answer:'numbers',
-                            userAnswer:'',
-                            isRight:null
+                            answer: 'numbers',
+                            userAnswer: '',
+                            isRight: null
                         },
                         {
-                            answer:'resume',
-                            userAnswer:'',
-                            isRight:null
+                            answer: 'resume',
+                            userAnswer: '',
+                            isRight: null
                         },
                         {
-                            answer:'letter',
-                            userAnswer:'',
-                            isRight:null
+                            answer: 'letter',
+                            userAnswer: '',
+                            isRight: null
                         },
                     ]
                 }
             ],
-            noSubmitThree:[
+            noSubmitThree: [
                 {
-                    type:'table',
-                    value:[
+                    type: 'table',
+                    value: [
                         {
-                            answer:'Could you tell me a little bit about yourself?',
-                            userAnswer:'',
-                            isShowAnswer:false,
+                            answer: 'Could you tell me a little bit about yourself?',
+                            userAnswer: '',
+                            isShowAnswer: false,
                         },
                         {
-                            answer:'Can you tell me about that job in detail?',
-                            userAnswer:''
+                            answer: 'Can you tell me about that job in detail?',
+                            userAnswer: ''
                         },
                         {
-                            answer:'Why are you applying for this job then?',
-                            userAnswer:''
+                            answer: 'Why are you applying for this job then?',
+                            userAnswer: ''
                         },
                         {
                             answer: 'What are your strengths?',
-                            userAnswer:''
+                            userAnswer: ''
                         },
                     ]
                 },
                 {
-                    type:'shortAnswer',
-                    value:[
+                    type: 'shortAnswer',
+                    value: [
                         {
-                            answer:[
+                            answer: [
                                 'Ask for next steps and contact information',
                                 'Assess your interview performance',
                                 'Write down anything you want to remember',
@@ -2727,170 +3158,170 @@
                                 'Contact your references',
                                 'Get comfortable with waiting'
                             ],
-                            userAnswer:'',
-                            isShowAnswer:false
+                            userAnswer: '',
+                            isShowAnswer: false
                         },
                         {
-                            answer:'A follow-up email is a good way to show your interest in the position and, most important of all, your good manners. ',
-                            userAnswer:'',
-                            isShowAnswer:false
+                            answer: 'A follow-up email is a good way to show your interest in the position and, most important of all, your good manners. ',
+                            userAnswer: '',
+                            isShowAnswer: false
                         },
                     ]
                 }
             ],
-            practicalThree:[
+            practicalThree: [
                 {
-                    type:"dropdown",
-                    isShowAnswer:false,
-                    isComplete:false,
-                    value:[
+                    type: "dropdown",
+                    isShowAnswer: false,
+                    isComplete: false,
+                    value: [
                         {
-                            stemOne:'Subject: 1.',
-                            stemTwo:'',
-                            answer:'1. Thanks for meeting with me',
-                            userAnswer:'',
-                            option:[
+                            stemOne: 'Subject: 1.',
+                            stemTwo: '',
+                            answer: '1. Thanks for meeting with me',
+                            userAnswer: '',
+                            option: [
                                 '1. Thanks for meeting with me',
                                 '2. I wish I could get the job'
                             ]
                         },
                         {
-                            stemOne:'2.',
-                            stemTwo:'Mr. Jin,',
-                            answer:'2. Dear',
-                            userAnswer:'',
-                            option:[
+                            stemOne: '2.',
+                            stemTwo: 'Mr. Jin,',
+                            answer: '2. Dear',
+                            userAnswer: '',
+                            option: [
                                 '1. Hello',
                                 '2. Dear'
                             ]
                         },
                         {
-                            stemOne:'3.',
-                            stemTwo:'the talk earlier today. Our conversation about the Marketing Manager position was inspiring,and it was fantastic to learn more about the position.',
-                            answer:'2. We had great fun in',
-                            userAnswer:'',
-                            option:[
+                            stemOne: '3.',
+                            stemTwo: 'the talk earlier today. Our conversation about the Marketing Manager position was inspiring,and it was fantastic to learn more about the position.',
+                            answer: '2. We had great fun in',
+                            userAnswer: '',
+                            option: [
                                 '1. Thanks so much for',
                                 '2. We had great fun in'
                             ]
                         },
                         {
-                            stemOne:"The job sounds exciting, and I think I would be an ideal candidate thanks to 4.",
-                            stemTwo:'in the field.',
-                            answer:'1. my years of experience',
-                            userAnswer:'',
-                            option:[
+                            stemOne: "The job sounds exciting, and I think I would be an ideal candidate thanks to 4.",
+                            stemTwo: 'in the field.',
+                            answer: '1. my years of experience',
+                            userAnswer: '',
+                            option: [
                                 '1. my years of experience',
                                 "2. my friends' help"
                             ]
-                        }, 
+                        },
                         {
-                            stemOne:'5.',
-                            stemTwo:'.Thanks again for the opportunity.',
-                            answer:'1. Please contact me if you want to discuss further',
-                            userAnswer:'',
-                            option:[
+                            stemOne: '5.',
+                            stemTwo: '.Thanks again for the opportunity.',
+                            answer: '1. Please contact me if you want to discuss further',
+                            userAnswer: '',
+                            option: [
                                 '1. Please contact me if you want to discuss further',
                                 "2. I have great confidence that I will get the job"
                             ]
-                        }, 
-                    ]
-                },
-                {
-                    type:'fill',
-                    isComplete:false,
-                    isShowAnswer:false,
-                    value:[
-                        {
-                            stem:'thank銆�for銆�me銆�meet銆�taking銆�the銆�time銆�to銆�with銆�yesterday銆�you',
-                            answer:'Thank you for taking the time to meet with me yesterday.',
-                            userAnswer:'',
-                        },
-                        {
-                            stem:'I銆�appreciate銆�interview銆�me銆�the銆�time銆�to銆�took銆�you',
-                            answer:'I appreciate the time you took to interview me.',
-                            userAnswer:'',
-                        },
-                        {
-                            stem:'I銆�about銆�am銆�excited銆�joining銆�of銆�possibility銆�the銆�very銆�you',
-                            answer:'I am very excited about the possibility of joining you.',
-                            userAnswer:'',
-                        },
-                        {
-                            stem:'I銆�about銆�enjoyed銆�position銆�speaking銆�the銆�today銆�with銆�you',
-                            answer:'I enjoyed speaking with you today about the position.',
-                            userAnswer:'',
-                        },
-                        {
-                            stem:'I銆�am銆�and銆�for銆�forward銆�from銆�hearing銆�in銆�interested銆�look銆�to銆�very銆�working銆�you銆�you',
-                            answer:'I am very interested in working for you and look forward to hearing from you.',
-                            userAnswer:'',
                         },
                     ]
                 },
                 {
-                    type:'emial',
-                    isComplete:false,
-                    isShowAnswer:false,
-                    value:[
+                    type: 'fill',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
                         {
-                            userAnswer:''
+                            stem: 'thank銆�for銆�me銆�meet銆�taking銆�the銆�time銆�to銆�with銆�yesterday銆�you',
+                            answer: 'Thank you for taking the time to meet with me yesterday.',
+                            userAnswer: '',
                         },
                         {
-                            userAnswer:''
+                            stem: 'I銆�appreciate銆�interview銆�me銆�the銆�time銆�to銆�took銆�you',
+                            answer: 'I appreciate the time you took to interview me.',
+                            userAnswer: '',
                         },
                         {
-                            userAnswer:''
+                            stem: 'I銆�about銆�am銆�excited銆�joining銆�of銆�possibility銆�the銆�very銆�you',
+                            answer: 'I am very excited about the possibility of joining you.',
+                            userAnswer: '',
                         },
                         {
-                            userAnswer:''
+                            stem: 'I銆�about銆�enjoyed銆�position銆�speaking銆�the銆�today銆�with銆�you',
+                            answer: 'I enjoyed speaking with you today about the position.',
+                            userAnswer: '',
+                        },
+                        {
+                            stem: 'I銆�am銆�and銆�for銆�forward銆�from銆�hearing銆�in銆�interested銆�look銆�to銆�very銆�working銆�you銆�you',
+                            answer: 'I am very interested in working for you and look forward to hearing from you.',
+                            userAnswer: '',
                         },
                     ]
                 },
                 {
-                    type:'table',
-                    isComplete:false,
-                    isShowAnswer:false,
-                    value:[
+                    type: 'emial',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
                         {
-                            userAnswer:''
+                            userAnswer: ''
                         },
                         {
-                            userAnswer:''
+                            userAnswer: ''
                         },
                         {
-                            userAnswer:''
+                            userAnswer: ''
                         },
                         {
-                            userAnswer:''
-                        },
-                        {
-                            userAnswer:''
-                        },
-                        {
-                            userAnswer:''
-                        },
-                        {
-                            userAnswer:''
+                            userAnswer: ''
                         },
                     ]
                 },
                 {
-                    type:'emial',
-                    isComplete:false,
-                    isShowAnswer:false,
-                    value:[
+                    type: 'table',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
                         {
-                            userAnswer:''
+                            userAnswer: ''
                         },
                         {
-                            userAnswer:''
+                            userAnswer: ''
                         },
                         {
-                            userAnswer:''
+                            userAnswer: ''
                         },
                         {
-                            userAnswer:''
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                    ]
+                },
+                {
+                    type: 'emial',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
                         },
                     ]
                 },
@@ -3252,6 +3683,18 @@
         };
     },
      mounted() {
+        const warmUp = localStorage.getItem("english-chapter-8-warmUp");
+        if (warmUp) {
+            this.warmUp = JSON.parse(warmUp);
+        }
+        const bookQuestion = localStorage.getItem("english-book-chapter08-question-one");
+        if (bookQuestion) {
+            this.questionData = JSON.parse(bookQuestion);
+        }
+        const questionDataOne = localStorage.getItem("english-chapter-08-questionDataOne");
+        if (questionDataOne) {
+            this.questionDataOne = JSON.parse(questionDataOne);
+        }
          this.getPath();
          const listenThree = localStorage.getItem('english-chapter08-listenThree')
          if(listenThree) this.listenThree = JSON.parse(listenThree)
@@ -3267,9 +3710,71 @@
         if(listenTwo) this.listenTwo = JSON.parse(listenTwo)
     }, 
     methods: {
+        handleWarmUp(type) {
+            if (this.warmUp[0].value[type].userAnswer.trim()) {
+                this.warmUp[0].value[type].isRight = this.warmUp[0].value[type].userAnswer.trim() == this.warmUp[0].value[type].answer
+            } else {
+                this.warmUp[0].value[type].isRight = null
+            }
+            this.setWarmUp();
+        },
+        setWarmUp() {
+            localStorage.setItem("english-chapter-8-warmUp", JSON.stringify(this.warmUp));
+        },
+        setBookQuestion() {
+            localStorage.setItem(
+                "english-book-chapter08-question-one",
+                JSON.stringify(this.questionData)
+            );
+        },
+        handleQuestionDataOne() {
+            for (let index = 0; index < this.questionDataOne.length; index++) {
+                const item = this.questionDataOne[index];
+                item.isComplete = true;
+                item.isShowAnswer = true;
+                if (item.type == "fill") {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = citem.answer == citem.userAnswer;
+                    }
+                }
+            }
+        },
+        setQuestionDataOne() {
+            localStorage.setItem(
+                "english-chapter-08-questionDataOne",
+                JSON.stringify(this.questionDataOne)
+            );
+        },
+        recastQuestionDataOne() {
+            localStorage.removeItem("english-chapter-08-questionDataOne");
+            for (let index = 0; index < this.questionDataOne.length; index++) {
+                const item = this.questionDataOne[index];
+                item.isComplete = false;
+                item.isShowAnswer = false;
+                if (item.type == "fill") {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = null;
+                        citem.userAnswer = "";
+                    }
+                } else {
+                    for (let dindex = 0; dindex < item.value.length; dindex++) {
+                        const ditem = item.value[dindex];
+                        ditem.userAnswer = "";
+                    }
+                }
+            }
+        },
+        viewQuestionDataOne() {
+            for (let index = 0; index < this.questionDataOne.length; index++) {
+                const item = this.questionDataOne[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
         arrayToString(data) {
-            if(Array.isArray(data)) {
-            return data.toString()
+            if (Array.isArray(data)) {
+                return data.toString()
             } else {
                 return data
             }
@@ -3298,21 +3803,27 @@
         setTestData() {
             localStorage.setItem("english-testOne", JSON.stringify(this.testData));
         },
-        setBookQuestion() {
-            localStorage.setItem(
-                "english-book-question-one",
-                JSON.stringify(this.questionData)
-            );
-        },
         async getPath() {
             this.resource.listenOne = await getResourcePath(
-                "422139A2EF66EA888C5ED1D550AE23E0"
+                "0D60202A6F614D6B23AF7C48AFC39AB6"
             );
             this.resource.readingOne = await getResourcePath(
-                "3F442B682D84C8AB06C800B29D734920"
+                "8C19582CDE35B48FDA735B7E0C206F77"
             );
             this.resource.readingTwo = await getResourcePath(
-                "E8719EC88026BCFB11D292AA999F6D3D"
+                "946A5702CC80B0DB657CCFD66DEE1515"
+            );
+            this.resource.readingThree = await getResourcePath(
+                "ADAFFAB7BC7A868574889809AB1166A6"
+            );
+            this.resource.readingFour = await getResourcePath(
+                "966C8CEB3448A41D92BDF9B494F02B88"
+            );
+            this.resource.listenTwo = await getResourcePath(
+                "76546423FCFAB4B861BC8B94C97D24A2"
+            );
+            this.resource.listenThree = await getResourcePath(
+                "717A3B915B114D7DC5CA9D3AAA1FC3ED"
             );
             this.resource.listenTwo = await getResourcePath(
                 "ADAFFAB7BC7A868574889809AB1166A6"
@@ -3320,7 +3831,7 @@
             this.resource.videoPathOne = await getResourcePath(
                 "29A9C275EEF0BF71C52BE68D8842C0E4"
             );
-            
+
         },
         showAnswer(type) {
             if (type == "showImg") {
@@ -3331,7 +3842,7 @@
             setTimeout(() => { this.$emit("initViewer", "") }, 500)
         },
         saveListenThree() {
-            localStorage.setItem('english-chapter08-listenThree',JSON.stringify(this.listenThree))
+            localStorage.setItem('english-chapter08-listenThree', JSON.stringify(this.listenThree))
         },
         handleListenThree() {
             for (let index = 0; index < this.listenThree.length; index++) {
@@ -3365,16 +3876,16 @@
             }
         },
         saveNoSubmitThree() {
-            localStorage.setItem('english-chapter08-noSubmitThree',JSON.stringify(this.noSubmitThree))
+            localStorage.setItem('english-chapter08-noSubmitThree', JSON.stringify(this.noSubmitThree))
         },
-        showNoSubmitThree(index,num) {
-            this.$set(this.noSubmitThree[index].value[num],'isShowAnswer',!this.noSubmitThree[index].value[num].isShowAnswer)
+        showNoSubmitThree(index, num) {
+            this.$set(this.noSubmitThree[index].value[num], 'isShowAnswer', !this.noSubmitThree[index].value[num].isShowAnswer)
         },
         savePracticalThree() {
-            localStorage.setItem('english-chapter08-practicalThree',JSON.stringify(this.practicalThree))
+            localStorage.setItem('english-chapter08-practicalThree', JSON.stringify(this.practicalThree))
         },
-        handlePracticalThree(index,num) {
-            this.$set(this.practicalThree[index].value[num],'isRight',this.practicalThree[index].value[num].userAnswer == this.practicalThree[index].value[num].answer)
+        handlePracticalThree(index, num) {
+            this.$set(this.practicalThree[index].value[num], 'isRight', this.practicalThree[index].value[num].userAnswer == this.practicalThree[index].value[num].answer)
             this.savePracticalThree()
         },
         showPracticalThree(index) {
@@ -3518,9 +4029,99 @@
         outline: none;
     }
 }
+
 .finish-box {
-    border:2px dashed #d1d2d4;
-    border-radius:3%;
+    border: 2px dashed #d1d2d4;
+    border-radius: 3%;
+}
+
+.poster-img {
+    width: 100%;
+    position: relative;
+}
+
+.poster-input-box-one {
+    width: 18%;
+    height: 12%;
+    position: absolute;
+    top: 49%;
+    left: 3%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-two {
+    width: 23%;
+    height: 12%;
+    position: absolute;
+    top: 14%;
+    left: 38%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-six {
+    width: 23%;
+    height: 12%;
+    position: absolute;
+    top: 30.5%;
+    left: 38%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-three {
+    width: 23%;
+    height: 11%;
+    position: absolute;
+    top: 49%;
+    left: 38%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-four {
+    width: 23%;
+    height: 12%;
+    position: absolute;
+    bottom: 22.5%;
+    left: 38%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-five {
+    width: 23%;
+    height: 12%;
+    position: absolute;
+    bottom: 5.4%;
+    left: 38%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
 }
 .po-re {
     position: relative;

--
Gitblit v1.9.1