From 30d147c4c92dbfd5ca1b2f8c24a617dc82d2d25b Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 28 四月 2025 18:34:51 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/books/English/view/components/chapter007.vue | 3166 +++++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 2,825 insertions(+), 341 deletions(-)

diff --git a/src/books/English/view/components/chapter007.vue b/src/books/English/view/components/chapter007.vue
index 11582e9..4cfb0ca 100644
--- a/src/books/English/view/components/chapter007.vue
+++ b/src/books/English/view/components/chapter007.vue
@@ -33,24 +33,317 @@
                         <h2 id="b025"><img class="img-0" alt="" src="../../assets/images/dy7-le1.jpg" /></h2>
                         <h3 id="c055"><span class="bjh3">Warm-up</span></h3>
                         <p><b>鈪�.Suppose it is your first day at work,how can you favorably impress your workmates?</b>
+                            <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
                         </p>
-                        <p>______________________________________________</p>
+                        <p> <textarea v-model="questionData.tx.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" style=" width: 92%"
+                                class="fz-16 fm-son" @change="setBookQuestion"></textarea>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerOne">
+                            绛旀锛�(1).Don鈥檛 be late &nbsp; (2).wear clean clothes &nbsp; (3).show respect to your coworkers
+                            (4).be polite &nbsp; (5).be confident &nbsp; (6).polish your shoes &nbsp;
+                            (7).brush your hair
+                        </p>
                         <p><b>鈪�.Put the following names of the departments in the proper blanks according to their
                                 functions.</b></p>
                         <p class="center"><img class="img-a" alt="" src="../../assets/images/0129-2.jpg" /></p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0129-1.jpg" /></p>
-                        <h3 id="c056"><span class="bjh3">Listening</span></h3>
-                        <p class="center"><audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-th-bc">
+                                <td class="tl-cn">Departments</td>
+                                <td class="tl-cn">Functions</td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.one.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.one.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.one.isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </td>
+                                <td>
+                                    It has overall responsibilities for creating, planning, implementing, and
+                                    integratingthe strategie direction of an organization.
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.two.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.two.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.two.isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </td>
+                                <td>
+                                    It deals with such matters as involving employees, hiring, training, labor
+                                    relations,and benefits.
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.three.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.three.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.three.isRight == false" t="1716987085767"
+                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </td>
+                                <td>
+                                    It is responsible for presenting, advertising and selling a company's products
+                                    orservices.
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.four.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.four.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.four.isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </td>
+                                <td>
+                                    It is responsible for finding new products and processes or improving existing ones.
+                                </td>
+
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.five.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.five.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.five.isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </td>
+                                <td>
+                                    It manages money in running a business, an activity or a project.
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.six.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.six.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.six.isRight == false" t="1716987085767" class="icon"
+                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                                            height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </td>
+                                <td>
+                                    It's a department where people assist the CEO to plan, organize and run a business.
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf w35">
+                                    <select class="select-border select-bc-t w80" v-model="dropdownData.dp.seven.value"
+                                        @change="handleDropdownData">
+                                        <option v-for="(item, index) in dropdownData.dp.dropDownList" :key="index"
+                                            :value="item">
+                                            {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box-big">
+                                        <svg v-if="dropdownData.dp.seven.isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                            p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
+                                            height="20">
+                                            <path
+                                                d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                fill="#1AFA29" p-id="18768"></path>
+                                        </svg>
+                                        <svg v-if="dropdownData.dp.seven.isRight == false" t="1716987085767"
+                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </td>
+                                <td>
+                                    It makes food, goods or materials, especially in large quantities.
+                                </td>
+                            </tr>
+                        </table>
+
+                        <h3 id="c056" class="fl al-cn">
+                            <span class="bjh3">Listening</span>
+                            <!--controlslist="noplaybackrate nodownload"鍚庨潰鐨勯煶棰戞鍔犲叆杩欎釜-->
+                            <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio>
+                        </h3>
                         <p><b>Listen to the monologue about workplace success and fill in the blanks with what you
-                                hear.</b></p>
-                        <p>Do you want to succeed in the workplace? Try your best for_____in everything you
-                            do.Excellence means to be the best in_____you do.Giving your 100% every time will help you
-                            achieve that excellence in no time at all.Put all your_____in whatever you do and achieve
-                            the best results.Care about the_____of your work and be willing to put in extra effort when
-                            necessary.You will get more_____to grow as an individual and make great progress within
-                            yourcareer.People with strong work ethic always a_______lot in return.</p>
+                                hear.</b>
+                                <span class="btn-box" @click="viewReadingOne">
+                                <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>Do you want to succeed in the workplace? Try your best for
+                            <input  type="text"
+                                class="input-bottom-border" style="width: 100px"
+                                v-model="readingOne[0].value[0].userAnswer" @blur="handleReadingOne" />
+                                <img :src="readingOne[0].value[0].isRight ? correctIcon : errorIcon"
+                                v-if="readingOne[0].value[0].isRight == false || readingOne[0].value[0].isRight == true">
+                            in everything you
+                            do.Excellence means to be the best in<input  type="text"
+                                class="input-bottom-border" style="width: 100px"
+                                v-model="readingOne[0].value[1].userAnswer" @blur="handleReadingOne" />
+                                <img :src="readingOne[0].value[1].isRight ? correctIcon : errorIcon"
+                                v-if="readingOne[0].value[1].isRight == false || readingOne[0].value[1].isRight == true">
+                                you do.Giving your 100% every time will help you
+                            achieve that excellence in no time at all.Put all your<input  type="text"
+                                class="input-bottom-border" style="width: 100px"
+                                v-model="readingOne[0].value[2].userAnswer" @blur="handleReadingOne" />
+                                <img :src="readingOne[0].value[2].isRight ? correctIcon : errorIcon"
+                                v-if="readingOne[0].value[2].isRight == false || readingOne[0].value[2].isRight == true">in whatever you do and achieve
+                            the best results.Care about the<input  type="text"
+                                class="input-bottom-border" style="width: 100px"
+                                v-model="readingOne[0].value[3].userAnswer" @blur="handleReadingOne" />
+                                <img :src="readingOne[0].value[3].isRight ? correctIcon : errorIcon"
+                                v-if="readingOne[0].value[3].isRight == false || readingOne[0].value[3].isRight == true">of your work and be willing to put in extra effort when
+                            necessary.You will get more<input  type="text"
+                                class="input-bottom-border" style="width: 100px"
+                                v-model="readingOne[0].value[4].userAnswer" @blur="handleReadingOne" />
+                                <img :src="readingOne[0].value[4].isRight ? correctIcon : errorIcon"
+                                v-if="readingOne[0].value[4].isRight == false || readingOne[0].value[4].isRight == true">to grow as an individual and make great progress within
+                            yourcareer.People with strong work ethic always a<input  type="text"
+                                class="input-bottom-border" style="width: 100px"
+                                v-model="readingOne[0].value[5].userAnswer" @blur="handleReadingOne" />
+                                <img :src="readingOne[0].value[5].isRight ? correctIcon : errorIcon"
+                                v-if="readingOne[0].value[5].isRight == false || readingOne[0].value[5].isRight == true">lot in return.</p>
+                            <div class="event-header-text-bc pd-5 w100 mt-20" v-if="readingOne[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <p v-for="(item, index) in readingOne[0].value" :key="index">
+                                {{ index + 1 }}.{{ item.answer }}
+                            </p>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -76,17 +369,52 @@
                         <h3 id="c057"><span class="bjh3">Reading</span></h3>
                         <p>1.If a man is called to be a street sweeper,he should sweep streets even as Michelangelo
                             painted,or Beethoven composed music or Shakespeare wrote poetry.What does this saying try to
-                            tell us?</p>
-                        <p>2.How can other people鈥檚 jobs influence our life?</p>
+                            tell us?
+                            <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p> <textarea v-model="questionData.tx.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" style=" width: 92%"
+                                class="fz-16 fm-son" @change="setBookQuestion"></textarea>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerTwo">
+                            绛旀锛�(1).Love whatever job one takes up &nbsp; (2).Work hard &nbsp; (3). To be creative &nbsp;
+                            (4).Practice as much as you can &nbsp; (5). Insist on doing something
+                        </p>
+                        <p>2.How can other people鈥檚 jobs influence our life?
+                            <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p> <textarea v-model="questionData.tx.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" style=" width: 92%"
+                                class="fz-16 fm-son" @change="setBookQuestion"></textarea>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerThree">
+                            绛旀锛�(1). Engineers make it easier for us to go somewhere by high-speed train. &nbsp;
+                            (2).Gardeners make our city more beautiful. &nbsp;
+                            (3).Deliverymen help to get our goods to us.&nbsp;
+                            (4).Farmers plant so many fruits and vegetables to satisfy our appetite.
+                        </p>
                         <p class="center"><b>Lineman Wang Jin</b></p>
-                        <p class="center"><audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+                        <p class="center"><audio :src="resource.readingOne" controls
+                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
+                                class="audio"></audio></p>
                         <p>Working on high-
-                            <span class="word-bc" @click="saveWord($event, 'voltage')">voltage</span>
+                            <span class="word-bc">voltage</span>
                             power lines is considered by many as a high-risk job.But for some
                             people it鈥檚 a daily
-                            <span class="word-bc" @click="saveWord($event, 'routine')">routine</span>
+                            <span class="word-bc">routine</span>
                             .
                         </p>
                         <p>Standing on towers over 100 meters high and working on ultra-high-voltage (UHV) lines,Wang
@@ -94,9 +422,9 @@
                             company.</p>
                         <p>Wang still clearly remembered the first time he touched the power line.鈥淚 was really scared
                             because at the moment of
-                            <span class="word-bc" @click="saveWord($event, 'contact')">contact</span>
+                            <span class="word-bc">contact</span>
                             ...500 000 volts of
-                            <span class="word-bc" @click="saveWord($event, 'electricity')">electricity</span>
+                            <span class="word-bc">electricity</span>
                             hit the gloves,鈥� recalled
                             Wang.
                         </p>
@@ -104,14 +432,14 @@
                             remote areas.</p>
                         <p>Summer in east China鈥檚 Shandong Province can be hot and dry.The steel tower is also
                             hot.Wearing
-                            <span class="word-bc" @click="saveWord($event, 'protective')">protective</span>
+                            <span class="word-bc">protective</span>
                             clothes in such weather,Wang felt
-                            <span class="word-bc" @click="saveWord($event, 'dizzy')">dizzy</span>
+                            <span class="word-bc">dizzy</span>
                             even before he started the
                             shift.
                         </p>
                         <p>In 2011,Wang finished the world鈥檚 first repair work on a 660-kilovolt live-
-                            <span class="word-bc" @click="saveWord($event, 'transmission')">transmission</span>
+                            <span class="word-bc">transmission</span>
                             line.The power transmitted by this line was almost one-tenth of the total power in the
                             entire province at that time.Wang won the National Science and Technology Progress Award鈥攐ne
                             of China鈥檚 highest national honors鈥攆or his excellent performance.
@@ -119,28 +447,28 @@
                         <p>China鈥檚 UHV power network continues to expand,so Wang and his colleagues have set up an
                             innovation center to address new challenges.</p>
                         <p>They have introduced more technologies including the use of drones for line
-                            <span class="word-bc" @click="saveWord($event, 'inspection')">inspection</span>
+                            <span class="word-bc">inspection</span>
                             and
-                            <span class="word-bc" @click="saveWord($event, 'maintenance')">maintenance</span>
+                            <span class="word-bc">maintenance</span>
                             .They have 240 drones and 80 operators,and they want to create an
                             unmanned,\
-                            <span class="word-bc" @click="saveWord($event, 'digital')">digital</span>
+                            <span class="word-bc">digital</span>
                             and
-                            <span class="word-bc" @click="saveWord($event, 'intelligent')">intelligent</span>
+                            <span class="word-bc">intelligent</span>
                             line inspection system.
                         </p>
                         <p>Wang is now a father of two.His family gave him the biggest support.His
-                            <span class="word-bc" @click="saveWord($event, 'dedication')">dedication</span>
+                            <span class="word-bc">dedication</span>
                             has made
                             him a role model for young people.Wang Innovation Studio now has nearly 100 members,who have
-                            <span class="word-bc" @click="saveWord($event, 'achieved')">achieved</span>
+                            <span class="word-bc" word="achieve">achieved</span>
                             achieved more than 30 technological innovations.
                         </p>
                         <p>By the end of 2020,a total of 35 UHV projects had been completed or were under
-                            <span class="word-bc" @click="saveWord($event, 'construction')">construction</span>
+                            <span class="word-bc">construction</span>
                             in China.Their total length is 48 000 kilometers.China鈥檚 electricity network has the highest
                             voltage and the biggest transmission
-                            <span class="word-bc" @click="saveWord($event, 'capacity')">capacity</span>
+                            <span class="word-bc">capacity</span>
                             in the world.Thanks to technicians like Wang
                             and his colleagues,China hasn鈥檛 experienced a large-scale power outage in the past 10 years.
                         </p>
@@ -171,7 +499,7 @@
                             <span class="line-border-box"></span>
                         </p>
                         <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
-                            style="margin-left: 10px" class="audio" @play="audioPlay"></audio>
+                            style="margin-left: 10px" class="audio"></audio>
                         <p>voltage /藞v蓹蕣lt瑟d蕭/ <i>n.</i> 鐢靛帇</p>
                         <div class="bkbj">
                             <p><i>electrical force measured in volts</i></p>
@@ -268,37 +596,114 @@
                         <div class="bkbj">
                             <p><i>the ability to hold or contain sth.; the ability to do sth.</i></p>
                         </div>
-                        <p>live-transmission line鐩存祦杈撶數绾胯矾</p>
-                        <p>under construction 淇缓涓�</p>
-                        <p>set up 寤虹珛锛涜绔�</p>
-                        <p>power outage鍋滅數</p>
+                        <div class="fl">
+                            <div class="left" style="width: 48%">
+                                <p>live-transmission line鐩存祦杈撶數绾胯矾</p>
+                                <p>under construction 淇缓涓�</p>
+                            </div>
+                            <div class="right" style="width: 48%">
+                                <p>set up 寤虹珛锛涜绔�</p>
+                                <p>power outage鍋滅數</p>
+                            </div>
+                        </div>
                         <p><b>鈪�.Reading comprehension.</b></p>
                         <p>A.Fill in the blanks with the exact words in the passage.</p>
-                        <p>1.Wang takes a high-risk job on high-voltage power lines as_______________.</p>
-                        <p>2.Wang Jin felt_______________when he first touched the power line.</p>
-                        <p>3.Wang finished the world鈥檚 first repair work on a 660-kilovolt_______________.</p>
-                        <p>4.The innovation center uses_______________for line inspection and maintenance.</p>
-                        <p>5.By 2020,a total of 35 UHV projects had been completed or_______________.</p>
+                        <p v-for="(item, index) in questionDataOne[0].value" :key="index">
+                            {{ index + 1 }}.{{ item.stemOne }}
+                            <input :disabled="questionDataOne[0].isComplete" type="text" class="input-bottom-border"
+                                style="width: 140px" v-model="item.userAnswer" @input="setQuestionDataOne" />
+                            {{ item.stemTwo }}
+                            <img :src="item.isRight ? correctIcon : errorIcon" v-if="questionDataOne[0].isComplete">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[0].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                            </p>
+                            <div v-for="(item, index) in questionDataOne[0].value" :key="'answerOne' + index">
+                                <p class="" style="margin-left: 40px">{{ index + 1 }}.{{ item.answer }}</p>
+                            </div>
+                        </div>
                         <p>B.Put the following statements in right order according to the course of Wang鈥檚 career
                             development in the passage.</p>
-                        <p>(銆�) Wang got one of the highest national awards for his superior performance.</p>
-                        <p>(銆�) Wang and his colleagues set up an innovation center to meet new work demand.</p>
-                        <p>(銆�) Wang was really afraid when he first touched the ultra-high-voltage line.</p>
-                        <p>(銆�) Wang and his colleagues want to create an digital and intelligent line inspection system.
+                        <p v-for="(item, index) in questionDataOne[1].value" :key="'select' + index">
+                            ( <select class="select-border w10" v-model="item.userAnswer" @change="setQuestionDataOne"
+                                :disabled="questionDataOne[1].isComplete">
+                                <option v-for="(citem, cindex) in questionDataOne[1].option" :key="'option' + cindex"
+                                    :value="citem">
+                                    {{ citem }}
+                                </option>
+                            </select>)
+                            {{ item.stem }}
+                            <img :src="item.isRight ? correctIcon : errorIcon" v-if="questionDataOne[1].isComplete">
                         </p>
-                        <p>(銆�) Wang and his colleagues use drones for checking and repairing the lines.</p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[1].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                                <span v-for="(item, index) in questionDataOne[1].value" :key="'answerTwo' + index">
+                                    {{ item.answer }} &nbsp;
+                                </span>
+                            </p>
+                        </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>One of my first c________in my job experience was the cultural difference.Different cultures
+                        <p>One of my first c<input :disabled="questionDataOne[2].isComplete" type="text"
+                                class="input-bottom-border" style="width: 60px" @input="setQuestionDataOne"
+                                v-model="questionDataOne[2].value[0].userAnswer" />
+                            <img :src="questionDataOne[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[2].isComplete">
+                            in my job experience was the cultural difference.Different cultures
                             make people think and behave differently.鈥淒o in Rome as the Romans do.鈥� In the first year I
-                            usually communicated with my c________.I spent a lot of time keeping in c________with my
-                            customers and developed my cross-cultural c________.In this way,I adapted to my new working
-                            environment very fast,p________well and finally I a________my goals.</p>
+                            usually communicated with my c<input :disabled="questionDataOne[2].isComplete" type="text"
+                                class="input-bottom-border" style="width: 60px" @input="setQuestionDataOne"
+                                v-model="questionDataOne[2].value[1].userAnswer" />
+                            <img :src="questionDataOne[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[2].isComplete">.I spent a
+                            lot of time keeping in c <input :disabled="questionDataOne[2].isComplete" type="text"
+                                class="input-bottom-border" style="width: 60px" @input="setQuestionDataOne"
+                                v-model="questionDataOne[2].value[2].userAnswer" />
+                            <img :src="questionDataOne[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[2].isComplete">with my
+                            customers and developed my cross-cultural c<input :disabled="questionDataOne[2].isComplete"
+                                type="text" class="input-bottom-border" style="width: 60px" @input="setQuestionDataOne"
+                                v-model="questionDataOne[2].value[3].userAnswer" />
+                            <img :src="questionDataOne[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[2].isComplete">.In this
+                            way,I adapted to my new working
+                            environment very fast,p<input :disabled="questionDataOne[2].isComplete" type="text"
+                                class="input-bottom-border" style="width: 60px" @input="setQuestionDataOne"
+                                v-model="questionDataOne[2].value[4].userAnswer" />
+                            <img :src="questionDataOne[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[2].isComplete">well and
+                            finally I a<input :disabled="questionDataOne[2].isComplete" type="text"
+                                class="input-bottom-border" style="width: 60px" @input="setQuestionDataOne"
+                                v-model="questionDataOne[2].value[5].userAnswer" />
+                            <img :src="questionDataOne[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[2].isComplete">my goals.
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[2].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                            </p>
+                            <p>
+                                <span v-for="(item, index) in questionDataOne[2].value" :key="'answerThree' + index">
+                                    {{ index + 1 }}.&nbsp; {{ item.answer }} &nbsp;
+                                </span>
+                            </p>
+                        </div>
                         <p>B.Underline the following expressions in the passage and make sentences with them.</p>
-                        <p>1.set up_________________________________________</p>
-                        <p>2.give support_________________________________________</p>
-                        <p>3.under construction_________________________________________</p>
+                        <p>1.set up</p>
+                        <textarea v-model="questionDataOne[3].value[0].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style=" margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setQuestionDataOne"></textarea>
+                        <p>2.give support</p>
+                        <textarea v-model="questionDataOne[3].value[1].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style=" margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setQuestionDataOne"></textarea>
+                        <p>3.under construction</p>
+                        <textarea v-model="questionDataOne[3].value[2].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="  margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setQuestionDataOne"></textarea>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -321,18 +726,36 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <p>4.thanks to_________________________________________</p>
-                        <p>5.power outage_________________________________________</p>
+                        <p>4.thanks to</p>
+                        <textarea v-model="questionDataOne[3].value[3].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="  margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setQuestionDataOne"></textarea>
+                        <p>5.power outage</p>
+                        <textarea v-model="questionDataOne[3].value[4].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="  margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setQuestionDataOne"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[3].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                            </p>
+                            <p v-for="(item, index) in questionDataOne[3].value" :key="'answerFour' + index">
+                                {{ index + 1 }}.&nbsp; {{ item.answer }} &nbsp;
+                            </p>
+                        </div>
                         <p>C.Translate the following sentences into Chinese.</p>
-                        <p>1.If you want to achieve a higher working goal,you need to consider it carefully right now.
-                        </p>
-                        <p>_________________________________________________________________</p>
-                        <p>2.To go for technical innovation,one must have the fearless spirit of a pathbreaker.</p>
-                        <p>_________________________________________________________________</p>
-                        <p>3.You need keep in contact with your customers when some problems arise.</p>
-                        <p>_________________________________________________________________</p>
-                        <p>4.Those employees believe that challenges offer opportunities to learn.</p>
-                        <p>_________________________________________________________________</p>
+                        <div v-for="(item, index) in questionDataOne[4].value" :key="'Translate' + index">
+                            <p>{{ index + 1 }}.{{ item.stem }}</p>
+                            <p> <input :disabled="questionDataOne[4].isComplete" type="text" @input="setQuestionDataOne"
+                                    class="input-bottom-border w95" v-model="item.userAnswer" /></p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[4].isShowAnswer">
+                            <p>
+                                渚嬪彞锛�
+                            </p>
+                            <p v-for="(item, index) in questionDataOne[4].value" :key="'answerFour' + index">
+                                {{ index + 1 }}.&nbsp; {{ item.answer }} &nbsp;
+                            </p>
+                        </div>
                         <p><b>鈪�.Grammar focus:The simple past &amp; past perfect tense.</b>
                             <span class="btn-box" @click="showAnswer('showImg')">
                                 <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
@@ -349,18 +772,64 @@
                         </div>
                         <p>A.Pick out two sentences of the simple past tense and the past perfect tense respectively
                             from the passage,and then write them down.</p>
-                        <p><b>The simple past tense:</b></p>
-                        <p>1._________________________________________</p>
-                        <p>2._________________________________________</p>
-                        <p><b>The past perfect tense:</b></p>
-                        <p>3._________________________________________</p>
-                        <p>4._________________________________________</p>
+                        <div v-for="(item, index) in questionDataOne[5].value" :key="'pt' + index">
+                            <p><b>{{ item.stem }}:</b></p>
+                            <p> {{ item.num + 1 }}.<input :disabled="questionDataOne[5].isComplete" type="text"
+                                    @input="setQuestionDataOne" class="input-bottom-border w90"
+                                    v-model="item.userAnswerOne" /></p>
+                            <p> {{ item.num + 2 }}. <input :disabled="questionDataOne[5].isComplete" type="text"
+                                    @input="setQuestionDataOne" class="input-bottom-border w90"
+                                    v-model="item.userAnswerTwo" /></p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[5].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                            </p>
+                            <div v-for="(item, index) in questionDataOne[5].value" :key="'answerFive' + index">
+                                <p>
+                                    {{ item.num + 1 }}.&nbsp; {{ item.answerOne }} &nbsp;
+                                </p>
+                                <p>
+                                    {{ item.num + 2 }}.&nbsp; {{ item.answerTwo }} &nbsp;
+                                </p>
+                            </div>
+                        </div>
                         <p>B.Fill in the blanks with the proper form of the given words.</p>
-                        <p>1.He_____more than 20 technological innovations before he turned 35.(achieve)</p>
-                        <p>2.She_____(give) a lot of financial support to animal protection organizations in 2022.</p>
-                        <p>3.She didn鈥檛 go to bed until she_____her work.(finish)</p>
-                        <p>4.He_____many awards because of his hard work last year.(win)</p>
-                        <p>5.They_____more technologies for line repairing by 2021.(introduce)</p>
+                        <p v-for="(item, index) in questionDataOne[6].value" :key="'ft' + index">
+                            {{ index + 1 }}.{{ item.stemOne }}
+                            <input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border w10"
+                                @input="setQuestionDataOne" v-model="item.userAnswer" />
+                            {{ item.stemTwo }}
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[6].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                            </p>
+                            <p>
+                                <span v-for="(item, index) in questionDataOne[6].value" :key="'answerFive' + index">
+                                    {{ index + 1 }}.&nbsp;{{ 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="c058"><span class="bjh3">Mini-project</span></h3>
                         <p>List some people who are dedicated to their work,and analyze the reasons for their
                             success.Jot down some notes,and then make a report to the class.</p>
@@ -387,23 +856,249 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0134-1.jpg" /></p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-th-bc">
+                                <td class="tl-cn">Names</td>
+                                <td class="tl-cn">Reasons</td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn">Yuan Longping</td>
+                                <td>
+                                    He was creative and started his research of hybrid rice technology,by which farmers
+                                    can produce harvests twice as large as before.
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.one"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.two"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.three"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.four"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.five"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.six"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                        </table>
                         <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" /></p>
                         <div class="bk-wh">
-                            <p>strong-willed銆�motivated銆�active銆�cooperative銆�stressful銆�disciplined銆�risky銆�helpful銆�dutiful銆�enthusiastic
+                            <p class="dl-box">
+                                <span class="word-bc mr-20 dl-span">strong-willed</span>
+                                <span class="word-bc mr-20 dl-span" word="motivate">motivated</span>
+                                <span class="word-bc mr-20 dl-span">active</span>
+                                <span class="word-bc mr-20 dl-span">cooperative</span>
+                                <span class="word-bc mr-20 dl-span">stressful</span>
+                                <span class="word-bc mr-20 dl-span" word="discipline">disciplined</span>
+                                <span class="word-bc mr-20 dl-span">risky</span>
+                                <span class="word-bc mr-20 dl-span">helpful</span>
+                                <span class="word-bc mr-20 dl-span">dutiful</span>
+                                <span class="word-bc mr-20 dl-span">enthusiastic</span>
                             </p>
+                        </div>
+                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
+                            <div class="banshi openImgBox">
+                                <div class="swiper-container swiper_ppt">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤01.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤02.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤03.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤04.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤05.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤06.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤07.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤08.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤09.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤10.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤11.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤12.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤13.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤14.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤15.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤16.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤17.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤18.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤19.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤20.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤21.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-1銆丮ODULE 7锛坙esson one锛塤22.jpg" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="swiper-button-next"></div>
+                                    <div class="swiper-button-prev"></div>
+                                    <div class="pageBox"></div>
+                                </div>
+                                <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->
+                            </div>
                         </div>
                         <h2 id="b026"><img class="img-0" alt="" src="../../assets/images/dy7-le2.jpg" /></h2>
                         <h3 id="c059"><span class="bjh3">Warm-up</span></h3>
                         <p><b>Put the expressions in the box below on the corresponding answer line under each
                                 picture.</b></p>
+
+
                         <div class="bk-wh">
                             <p>no bribery銆�punctual銆�attentive銆�gossiping</p>
                         </div>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0134-2.jpg" /></p>
-                        <p class="center">1._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0134-3.jpg" /></p>
-                        <p class="center">2._____________________</p>
+                        <div class="openImgBox">
+                            <div class="fl ju-bt">
+                                <div class="left" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img class="img-a" alt="" src="../../assets/images/0134-2.jpg" />
+                                        </p>
+                                        <p class="center">
+                                            1.<select class="select-border w45" v-model="warmUp[0].value[0].userAnswer"
+                                                @change="setWarmUp" :disabled="warmUp[0].isComplete">
+                                                <option v-for="( item, index) in warmUp[0].option"
+                                                    :key="'warmUp' + index" :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <img :src="warmUp[0].value[0].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].isComplete">
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%"
+                                        v-if="warmUp[0].isShowAnswer">
+                                        绛旀锛歿{ this.warmUp[0].value[0].answer }}
+                                    </p>
+                                </div>
+                                <div class="right" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img class="img-a" alt="" src="../../assets/images/0134-3.jpg" />
+                                        </p>
+                                        <p class="center">
+                                            2.<select class="select-border w45" v-model="warmUp[0].value[1].userAnswer"
+                                                @change="setWarmUp" :disabled="warmUp[0].isComplete">
+                                                <option v-for="( item, index) in warmUp[0].option"
+                                                    :key="'warmUp' + index" :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <img :src="warmUp[0].value[1].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].isComplete">
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%"
+                                        v-if="warmUp[0].isShowAnswer">
+                                        绛旀锛歿{ this.warmUp[0].value[1].answer }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -426,37 +1121,150 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0135-1.jpg" /></p>
-                        <p class="center">3._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0135-2.jpg" /></p>
-                        <p class="center">4._____________________</p>
+                        <div class="openImgBox">
+                            <div class="fl ju-bt">
+                                <div class="left" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img class="img-a" alt="" src="../../assets/images/0135-1.jpg" />
+                                        </p>
+                                        <p class="center">
+                                            3.<select class="select-border w45" v-model="warmUp[0].value[2].userAnswer"
+                                                @change="setWarmUp" :disabled="warmUp[0].isComplete">
+                                                <option v-for="( item, index) in warmUp[0].option"
+                                                    :key="'warmUp' + index" :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <img :src="warmUp[0].value[2].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].isComplete">
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%"
+                                        v-if="warmUp[0].isShowAnswer">
+                                        绛旀锛歿{ this.warmUp[0].value[2].answer }}
+                                    </p>
+                                </div>
+                                <div class="right" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img class="img-a" alt="" src="../../assets/images/0135-2.jpg" />
+                                        </p>
+                                        <p class="center">
+                                            4.<select class="select-border w45" v-model="warmUp[0].value[3].userAnswer"
+                                                @change="setWarmUp" :disabled="warmUp[0].isComplete">
+                                                <option v-for="( item, index) in warmUp[0].option"
+                                                    :key="'warmUp' + index" :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <img :src="warmUp[0].value[3].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].isComplete">
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%"
+                                        v-if="warmUp[0].isShowAnswer">
+                                        绛旀锛歿{ this.warmUp[0].value[3].answer }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ar w80">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handleWarmUp">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastWarmUp" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewWarmUp" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                         <h3 id="c060"><span class="bjh3">Reading</span></h3>
-                        <p>1.What examples come first to mind when referring to positive or poor work ethic?</p>
-                        <p>2.What kind of colleagues do you want to work with?</p>
+                        <p>1.What examples come first to mind when referring to positive or poor work ethic?
+                            <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.tx.four" 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).Strong work ethics: hard working, pioneering, innovation, selflessness, bravery,
+                            strictness, solidarity &nbsp;
+                            (2).Poor work ethics: corruption, concealing the truth, playing tricks, dishonesty,
+                        </p>
+                        <p>2.What kind of colleagues do you want to work with?
+                            <span class="btn-box" @click="showAnswerFive = !showAnswerFive">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p> <textarea v-model="questionData.tx.five" 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="showAnswerFive">
+                            绛旀锛�(1).Someone who is responsible, active, flexible, hard working. &nbsp;
+                            (2).Someone who can give me useful suggestion and advice. &nbsp;
+                            (3).Someone who can treat me equal and fair. &nbsp;
+                            (4).Someone can communicate with me openly and effectively.
+                        </p>
                         <p class="center"><b>Work Ethic in the Workplace</b></p>
-                        <p class="center"> <audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
-                        <p>Work ethic is a set of standards of behavior and beliefs regarding what is and isn鈥檛
+                        <p class="center"> <audio :src="resource.readingThree" controls
+                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
+                                class="audio"></audio></p>
+                        <p>Work ethic is a set of standards of behavior and beliefs
+                            <span class="word-bc" word="regard">regarding</span>
+                            what is and isn鈥檛
                             acceptable to do at work,which can be strong (good) or poor (bad).It depends on personal
-                            views of employees,their motivation,and overall company culture.</p>
+                            views of employees,their motivation,and overall company culture.
+                        </p>
                         <p>Next,we鈥檒l review some common examples of both strong and poor work ethic.</p>
                         <p><b>Example</b> 1</p>
                         <p>Angela鈥檚 director asked her to sort out data about the patients and
-                            insurance.Unfortunately,Angela isn鈥檛 very familiar with processing certain insurance claims.
+                            <span class="word-bc">insurance</span>
+                            .Unfortunately,Angela isn鈥檛 very familiar with processing certain insurance
+                            <span class="word-bc" word="claim">claims</span>
+                            .
                         </p>
                         <p>Rather than giving up,Angela decides to expand her skills.She networks with her coworkers in
                             the insurance department and consults her director.</p>
                         <p>In the process,she expands her skills to make sure she meets her goals.</p>
                         <p><b>Example</b> 2</p>
                         <p>Jim鈥檚 director asked him to review the financial reports from last quarter to look for
-                            purchases from one guest.The director gave him this task about a month ago and asked him to
-                            complete it within a few weeks.</p>
+                            <span class="word-bc" word="purchas">purchases</span>
+                            from one guest.The director gave him this task about a month ago and asked him to
+                            complete it within a few weeks.
+                        </p>
                         <p>Now,a month has passed,but Jim still hasn鈥檛 reviewed any of the reports.Rather than starting
                             early,he leaves it to the last minute and turns in an incomplete report.</p>
                         <p><b>Example</b> 3</p>
-                        <p>Sheila is sometimes bothered by the tasks assigned by her director.However,she never
-                            addresses her complaints to the director.Instead,she complains to her coworkers,friends,and
+                        <p>Sheila is sometimes
+                            <span class="word-bc" word="bother">bothered</span>
+                            by the tasks assigned by her director.However,she never
+                            <span class="word-bc" word="address">addresses</span>
+                            her
+                            <span class="word-bc" word="complaint">complaints</span>
+                            to the director.Instead,she complains to her coworkers,friends,and
                         </p>
                     </div>
                 </div>
@@ -488,17 +1296,21 @@
                             for half an hour or even longer.</p>
                         <p>Instead of trying hard to change the current situation,he makes various excuses for being
                             late.</p>
-                        <p>His constant delay shows a lack of respect for his job and coworkers.His coworkers think of
-                            him as being unreliable and irresponsible as a result.</p>
+                        <p>His
+                            <span class="word-bc">constant</span>
+                            delay shows a lack of respect for his job and coworkers.His coworkers think of
+                            him as being unreliable and irresponsible as a result.
+                        </p>
                         <p>The above examples represent a set of working attitudes that regulate employees鈥� behavior at
                             work.And what can you do to develop strong work ethic?</p>
                         <p class="fl al-cn mt-40">
                             <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"
-                                @play="audioPlay"></audio></p>
+                        <p>
+                            <audio :src="resource.readingFour" controls controlslist="noplaybackrate nodownload"
+                                style="margin-left: 10px" class="audio"></audio>
+                        </p>
                         <p>regarding /r瑟藞伞蓱藧d瑟艐/ <i>prep.</i> 鍏充簬锛涜嚦浜�</p>
                         <div class="bkbj">
                             <p><i>concerning sb./sth.; about sb./sth.</i></p>
@@ -534,8 +1346,14 @@
                         <div class="bkbj">
                             <p><i>happening all the time or repeatedly</i></p>
                         </div>
-                        <p>depend on 渚濋潬锛涗緷璧�</p>
-                        <p>sort out 鐞嗛『锛涙暣鐞�</p>
+                        <div class="fl">
+                            <div class="left" style="width: 48%;">
+                                <p>depend on 渚濋潬锛涗緷璧�</p>
+                            </div>
+                            <div class="right" style="width: 48%;">
+                                <p>sort out 鐞嗛『锛涙暣鐞�</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -558,28 +1376,124 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <p>give up 鏀惧純</p>
-                        <p>address sth.to sb. 鍚戞煇浜鸿鏌愪簨</p>
-                        <p>turn in 涓婁氦</p>
+                        <div class="fl">
+                            <div class="left" style="width: 48%;">
+                                <p>give up 鏀惧純</p>
+                                <p>address sth.to sb. 鍚戞煇浜鸿鏌愪簨</p>
+                            </div>
+                            <div class="right" style="width: 48%;">
+                                <p>turn in 涓婁氦</p>
+                            </div>
+                        </div>
                         <p><b>鈪�.Reading comprehension.</b></p>
                         <p>A.Match the names in the left column with their behavior in the right column.</p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0137-1.jpg" /></p>
+                        <div>
+                            <ul class="fl ju-bt matching-title-text">
+                                <li style="width: 40%; text-align: center">Name</li>
+                                <li style="width: 40%; text-align: center">Behavior</li>
+                            </ul>
+                            <matching :rawData="rawData" :question="question"></matching>
+                        </div>
                         <p>B.Write down the work ethic mentioned in each of the four examples,and decide whether they
                             are strong or poor.</p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0137-2.jpg" /></p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-th-bc">
+                                <td class="tl-cn">Examples</td>
+                                <td class="tl-cn" style="width: 70%;">Work Ethic Mentioned</td>
+                                <td class="tl-cn">
+                                    Strong or Poor
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn wh-no">Example 1</td>
+                                <td>
+                                    <textarea v-model="questionData.table.seven"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.eight"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn wh-no">
+                                    Example 2
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.nine"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.ten"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn wh-no">
+                                    Example 3
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.eleven"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.twelve"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn wh-no">
+                                    Example 4
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirteen"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.fourteen"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                        </table>
                         <p><b>鈪�.Language focus.</b></p>
                         <p>A.Fill in the blanks with the proper form of the words given below.</p>
                         <div class="bk-wh">
                             <p>bother銆�complain銆�constant銆�address銆�regarding</p>
                         </div>
-                        <p>1.Call me if you have any problems_____your work.</p>
-                        <p>2.Two questions often_____first-time corporate investors.</p>
-                        <p>3.Babies need_____attention.</p>
-                        <p>4.She_____to me about his rudeness.</p>
-                        <p>5.Please_____all complaints to the manager.</p>
+                        <p v-for="(item, index) in questionDataTwo[0].value" :key="'fbOne' + index">
+                            {{ index + 1 }}.{{ item.stemOne }}
+                            <input :disabled="questionDataTwo[0].isComplete" type="text" class="input-bottom-border w10"
+                                @input="setQuestionDataTwo" v-model="item.userAnswer" />
+                            {{ item.stemTwo }}
+                            <img :src="item.isRight ? correctIcon : errorIcon" v-if="questionDataTwo[0].isComplete">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataTwo[0].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                            </p>
+                            <p>
+                                <span v-for="(item, index) in questionDataTwo[0].value" :key="'fbThree' + index">
+                                    {{ index + 1 }}.&nbsp;{{ item.answer }}&nbsp;
+                                </span>
+                            </p>
+                        </div>
                         <p>B.Underline the following expressions in the passage and make sentences with them.</p>
-                        <p>1.depend on_________________________________________</p>
-                        <p>2.sort out_________________________________________</p>
+                        <p>1.depend on</p>
+                        <textarea v-model="questionDataTwo[1].value[0].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style=" margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setQuestionDataTwo"></textarea>
+                        <p>2.sort out</p>
+                        <textarea v-model="questionDataTwo[1].value[1].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style=" margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setQuestionDataTwo"></textarea>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -602,9 +1516,26 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <p>3.give up_________________________________________</p>
-                        <p>4.turn in_________________________________________</p>
-                        <p>5.address ...to ..._____________________________</p>
+                        <p>3.give up</p>
+                        <textarea v-model="questionDataTwo[1].value[2].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style=" margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setQuestionDataTwo"></textarea>
+                        <p>4.turn in</p>
+                        <textarea v-model="questionDataTwo[1].value[3].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style=" margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setQuestionDataTwo"></textarea>
+                        <p>5.address ...to ...</p>
+                        <textarea v-model="questionDataTwo[1].value[4].userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style=" margin-left: 40px; width: 92%" class="fz-16 fm-son"
+                            @change="setQuestionDataTwo"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataTwo[1].isShowAnswer">
+                            <p>
+                                渚嬪彞锛�
+                            </p>
+                            <p v-for="(item, index) in questionDataTwo[1].value" :key="'answerFour' + index">
+                                {{ index + 1 }}.&nbsp; {{ item.answer }} &nbsp;
+                            </p>
+                        </div>
                         <p><b>鈪�.Grammar focus:Conjunctions (and,or,but).</b>
                             <span class="btn-box" @click="showAnswer('showImgOne')">
                                 <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
@@ -625,11 +1556,42 @@
                             <p>1.We must double our efforts,or we will never be able to catch up with the others.</p>
                             <p>2.The camerawork is perfect,and the cast is good.</p>
                         </div>
-                        <p>1.I鈥檇 like to go to the theatre tonight,_____I鈥檓 too busy.</p>
-                        <p>2.Your delay shows a lack of respect for the job_____fellow coworkers.</p>
-                        <p>3.Work ethic can be strong_____poor.</p>
-                        <p>4.She is bothered by the tasks,_____she never complains.</p>
-                        <p>5.All the employees should show up on time_____even earlier.</p>
+                        <p v-for="(item, index) in questionDataTwo[2].value" :key="'fbTwo' + index">
+                            {{ index + 1 }}.{{ item.stemOne }}
+                            <input :disabled="questionDataTwo[2].isComplete" type="text" class="input-bottom-border w10"
+                                @input="setQuestionDataTwo" v-model="item.userAnswer" />
+                            {{ item.stemTwo }}
+                            <img :src="item.isRight ? correctIcon : errorIcon" v-if="questionDataTwo[2].isComplete">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataTwo[2].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                            </p>
+                            <p>
+                                <span v-for="(item, index) in questionDataTwo[2].value" :key="'fbFour' + index">
+                                    {{ index + 1 }}.&nbsp;{{ 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="handleQuestionDataTwo">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastQuestionDataTwo" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewQuestionDataTwo" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                         <h3 id="c061"><span class="bjh3">Mini-project</span></h3>
                         <p>Work in groups.Choose two of the work ethic from the box below,and discuss the way to develop
                             them,and then prepare a report to the class.</p>
@@ -637,7 +1599,31 @@
                             <p>faithfulness銆�initiative銆�innovation銆�selflessness銆�bravery銆�rigor銆�teamwork銆�fortitude</p>
                         </div>
                         <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0138-1.jpg" /></p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-th-bc">
+                                <td class="tl-cn">Work Ethic</td>
+                                <td class="tl-cn" style="width:90%;">The Way to Develop lt</td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn">Honesty</td>
+                                <td>
+                                    Don't tell/ies. IfI make a mistake, I will admit it and correet it.
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.fifteen"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.sixteen"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+
+                        </table>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -660,31 +1646,203 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0138-1.jpg" /></p>
+                        <p class="continued">continued</p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-th-bc">
+                                <td class="tl-cn">Work Ethic</td>
+                                <td class="tl-cn">The Way to Develop lt</td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn">
+                                    <textarea v-model="questionData.table.seventeen"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td style="width: 90%;">
+                                    <textarea v-model="questionData.table.eighteen"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.nineteen"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.twenty"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.twentyOne"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.twentyTwo"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.twentyThree"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.twentyFour"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                        </table>
+                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
+                            <div class="banshi openImgBox">
+                                <div class="swiper-container swiper_ppt">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤01.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤02.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤03.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤04.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤05.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤06.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤07.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤08.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤09.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤10.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤11.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤12.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤13.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤14.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-2銆丮ODULE 7锛坙esson two锛塤15.jpg" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="swiper-button-next"></div>
+                                    <div class="swiper-button-prev"></div>
+                                    <div class="pageBox"></div>
+                                </div>
+                                <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->
+                            </div>
+                        </div>
                         <h2 id="b027"><img class="img-0" alt="" src="../../assets/images/dy7-le3.jpg" /></h2>
-                        <h3 id="c062"><span class="bjh3">Listening</span></h3>
-                        <p class="center"><audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+                        <h3 id="c062" class="fl al-cn">
+                            <span class="bjh3">Listening</span>
+                            <!--controlslist="noplaybackrate nodownload"鍚庨潰鐨勯煶棰戞鍔犲叆杩欎釜-->
+                        </h3>
                         <p><b>鈪�.Jeff rarely showed up at the office on time.Listen to the recording and mark his excuses
                                 for being late.</b></p>
-                        <p>鈻� His car broke down.</p>
-                        <p>鈻� His car was borrowed.</p>
-                        <p>鈻� His clock was broken.</p>
-                        <p>鈻� His phone was out of service.</p>
-                        <p>鈻� His phone was out of battery.</p>
-                        <p>鈻� He didn鈥檛 get on the subway.</p>
-                        <p>鈻� He was ill.</p>
-                        <p>鈻� He was squeezed out of the bus.</p>
+                        <audio :src="resource.listenTwo" controls controlslist="noplaybackrate nodownload"
+                            class="audio"></audio>
+                        <ul class="fl">
+                            <li class="w50">
+                                <p v-for="(item, index) in this.questionDataThree[0].option.slice(0, 4)"
+                                    :key="'checkBox' + index">
+                                    <input type="checkbox" :value="item" name="item"
+                                        v-model="questionDataThree[0].userAnswer"
+                                        :disabled="questionDataThree[0].isComplete" @change="setQuestionDataThree">
+                                    {{ item }}
+                                    <img :src="isShowRight(questionDataThree[0].answer, questionDataThree[0].userAnswer, item) ? correctIcon : errorIcon"
+                                        v-if="questionDataThree[0].isComplete">
+                                </p>
+                            </li>
+                            <li class="w50">
+                                <p v-for="(item, index) in this.questionDataThree[0].option.slice(4, 8)"
+                                    :key="'checkBoxOne' + index">
+                                    <input type="checkbox" :value="item" name="item"
+                                        v-model="questionDataThree[0].userAnswer"
+                                        :disabled="questionDataThree[0].isComplete" @change="setQuestionDataThree">
+                                    {{ item }}
+                                    <img :src="isShowRight(questionDataThree[0].answer, questionDataThree[0].userAnswer, item) ? correctIcon : errorIcon"
+                                        v-if="questionDataThree[0].isComplete">
+                                </p>
+                            </li>
+                        </ul>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataThree[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span class="mr-20" v-for="(item, index) in questionDataThree[0].answer" :key="index">
+                                {{ index + 1 }}.{{ item }}
+                            </span>
+                        </div>
                         <p><b>鈪�.Susan,HR director,is now talking with Jenny about Jeff鈥檚 problems.Listen to the
                                 conversation and fill in the blanks with what you hear.</b></p>
+                        <audio :src="resource.listenThree" controls controlslist="noplaybackrate nodownload"
+                            class="audio"></audio>
                         <p>Susan:Have you noticed Jeff has been late many times?</p>
                         <p>Jenny:Yes,I want to have a talk with you about this.</p>
                         <p>Susan: From our punch records,I find that Jeff was late 7 times.Does his director Jim know
                             about this?</p>
                         <p>Jenny:I think Jim must have already talked with Jeff.But maybe Jeff doesn鈥檛 pay attention.
                         </p>
-                        <p>Susan:So,1._____?</p>
+                        <p>Susan:So,1. <input :disabled="questionDataThree[1].isComplete" type="text"
+                                class="input-bottom-border w40" @input="setQuestionDataThree"
+                                v-model="questionDataThree[1].value[0].userAnswer" />?
+                            <img :src="questionDataThree[1].value[0].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataThree[1].isComplete">
+                        </p>
                         <p>Jenny:I suppose we should give a warning notice to Jeff about his tardiness.</p>
                     </div>
                 </div>
@@ -708,27 +1866,138 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <p>Susan:2._____if I talked with his director first to get to know things better.</p>
-                        <p>Jenny:And perhaps we should have a talk with Jeff.</p>
-                        <p>Susan: I think so.3._____.It is very important to let him know how serious the problem is.
+                        <p>Susan:2.<input :disabled="questionDataThree[1].isComplete" type="text"
+                                class="input-bottom-border w40" @input="setQuestionDataThree"
+                                v-model="questionDataThree[1].value[1].userAnswer" />if I talked with his director first
+                            to get to know things better.
+                            <img :src="questionDataThree[1].value[1].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataThree[1].isComplete">
                         </p>
-                        <p>Jenny:4._____.</p>
-                        <p>Susan:Then after the talk,we 5._____to Jeff.</p>
+                        <p>Jenny:And perhaps we should have a talk with Jeff.</p>
+                        <p>Susan: I think so.3.<input :disabled="questionDataThree[1].isComplete" type="text"
+                                class="input-bottom-border w40" @input="setQuestionDataThree"
+                                v-model="questionDataThree[1].value[2].userAnswer" />.It is very important to let him
+                            know how serious the problem is.
+                            <img :src="questionDataThree[1].value[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataThree[1].isComplete">
+                        </p>
+                        <p>Jenny:4.<input :disabled="questionDataThree[1].isComplete" type="text"
+                                class="input-bottom-border w40" @input="setQuestionDataThree"
+                                v-model="questionDataThree[1].value[3].userAnswer" />.
+                            <img :src="questionDataThree[1].value[3].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataThree[1].isComplete">
+                        </p>
+                        <p>Susan:Then after the talk,we 5.<input :disabled="questionDataThree[1].isComplete" type="text"
+                                class="input-bottom-border w40" @input="setQuestionDataThree"
+                                v-model="questionDataThree[1].value[4].userAnswer" />to Jeff.
+                            <img :src="questionDataThree[1].value[4].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataThree[1].isComplete">
+                        </p>
                         <p>Jenny: OK.I will talk with Jeff this afternoon.I hope he won鈥檛 make the same mistake again in
                             the future.</p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataThree[1].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span class="mr-20" v-for="(item, index) in questionDataThree[1].value" :key="index">
+                                {{ index + 1 }}.{{ item.answer }}
+                            </span>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ar w80">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handleQuestionDataThree">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastQuestionDataThree" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewQuestionDataThree" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                         <h3 id="c063"><span class="bjh3">Practical Writing</span></h3>
                         <p>Work with your partner to discuss the following questions.</p>
-                        <p>1.What kind of notices have you ever read?</p>
-                        <p>2.Can you give some tips for writing a notice well?</p>
-                        <p><b>鈪�.Read the following tips,and summarize how to write a notice well.</b></p>
+                        <p>1.What kind of notices have you ever read?
+                            <span class="btn-box" @click="showAnswerFive = !showAnswerFive">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p> <textarea v-model="questionData.tx.five" 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="showAnswerFive">
+                            绛旀锛欰 notice for a meeting/activity/exam/lost and found/important announcement
+                        </p>
+                        <p>2.Can you give some tips for writing a notice well?
+                            <span class="btn-box" @click="showAnswerSix = !showAnswerSix">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p> <textarea v-model="questionData.tx.six" 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="showAnswerSix">
+                            绛旀锛�(1) Very short and attractive &nbsp;
+                            (2) Simple and easy-to-read &nbsp;
+                            (3) Very short and attractive &nbsp;
+                            (4) Only key information &nbsp;
+                        </p>
+                        <p><b>鈪�.Read the following tips,and summarize how to write a notice well.</b>
+                            <span class="btn-box" @click="showAnswerSeven = !showAnswerSeven">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
                         <p>A notice intends to publicize social events,inform staff of instructions,give
-                            information,change plans,etc.Most notices have the following features.</p>
-                        <div class="fieldset">
-                            <p>鈼� Very short and attractive</p>
-                            <p>鈼� Simple and easy-to-read</p>
-                            <p>鈼� Clear and specific</p>
-                            <p>鈼� Boldfaced words</p>
-                            <p class="center"><img class="img-g" alt="" src="../../assets/images/0140-1.jpg" /></p>
+                            information,change
+                            plans,etc.Most notices have the following features.</p>
+                        <div class="fieldset fl">
+                            <div class="w45">
+                                <p>鈼� Very short and attractive</p>
+                                <p>鈼� Simple and easy-to-read</p>
+                                <p>鈼� Clear and specific</p>
+                                <p>鈼� Boldfaced words</p>
+                            </div>
+                            <div class="fl w45 al-cn">
+                                <img class="img-b" alt="" src="../../assets/images/0140-1.jpg" />
+                            </div>
+                        </div>
+                        <p> <textarea v-model="questionData.tx.seven" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" style=" width: 92%"
+                                class="fz-16 fm-son" @change="setBookQuestion"></textarea>
+                        </p>
+                        <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerSeven">
+                            <p class="tl-lf">绛旀锛�</p>
+                            <p>1. A notice should be very short and attractive, capturing attention effectively.
+                            </p>
+                            <p>2. It should be simple and easy-to-read, ensuring that the message is easily understood.
+                            </p>
+                            <p>3. A notice should be clear and specific, leaving no room for confusion or
+                                misinterpretation.
+                            </p>
+                            <p>4. Important information or keywords should be emphasized using boldfaced words for
+                                better visibility and emphasis.
+                            </p>
                         </div>
                         <p><b>鈪�.Susan is going to issue a personnel warning notice to Jeff.Choose the items from the box
                                 below and fill in the blanks to make a proper notice.</b></p>
@@ -771,27 +2040,111 @@
                         </div>
                         <div class="bk-13">
                             <p>Dear Jeff Bell,</p>
-                            <p>Your HR department has been informed by your director that_____do not comply with Tech
-                                Market Technology Company鈥檚 policies:</p>
+                            <p class="tl-lf">Your HR department has been informed by your director that
+                                <select class="select-border select-bc-t w80" v-model="warmUpOne[0].value[0].userAnswer"
+                                    @change="setWarmUpOne">
+                                    <option v-for="(item, index) in warmUpOne[0].option" :key="index" :value="item">
+                                        {{ item }}
+                                    </option>
+                                </select>
+                                <img :src="warmUpOne[0].value[0].isRight ? correctIcon : errorIcon"
+                                    v-if="warmUpOne[0].isComplete">
+                                do not comply with Tech
+                                Market Technology Company鈥檚 policies:
+                            </p>
                             <p>路 Infraction 1:Being late for January 4th,13th,16th,17th,24th and 25th.</p>
-                            <p>_____on January 17th,2023.</p>
-                            <p>The following consequences,_____,will be applied,should you not demonstrate improvement
-                                or cease violation of company policies:</p>
+                            <p> <select class="select-border select-bc-t w80" v-model="warmUpOne[0].value[1].userAnswer"
+                                    @change="setWarmUpOne">
+                                    <option v-for="(item, index) in warmUpOne[0].option" :key="index" :value="item">
+                                        {{ item }}
+                                    </option>
+                                </select>
+                                <img :src="warmUpOne[0].value[1].isRight ? correctIcon : errorIcon"
+                                    v-if="warmUpOne[0].isComplete">on January 17th,2023.
+                            </p>
+                            <p class="tl-lf">The following consequences,
+                                <select class="select-border select-bc-t w80" v-model="warmUpOne[0].value[2].userAnswer"
+                                    @change="setWarmUpOne">
+                                    <option v-for="(item, index) in warmUpOne[0].option" :key="index" :value="item">
+                                        {{ item }}
+                                    </option>
+                                </select>
+                                <img :src="warmUpOne[0].value[2].isRight ? correctIcon : errorIcon"
+                                    v-if="warmUpOne[0].isComplete">,will be applied,should you not demonstrate
+                                improvement
+                                or cease violation of company policies:
+                            </p>
                             <p>1.Second warning notice issued</p>
-                            <p>2._____</p>
+                            <p>2. <select class="select-border select-bc-t w80"
+                                    v-model="warmUpOne[0].value[3].userAnswer" @change="setWarmUpOne">
+                                    <option v-for="(item, index) in warmUpOne[0].option" :key="index" :value="item">
+                                        {{ item }}
+                                    </option>
+                                </select>
+                                <img :src="warmUpOne[0].value[3].isRight ? correctIcon : errorIcon"
+                                    v-if="warmUpOne[0].isComplete">
+                            </p>
                             <p>3.Third and final warning notice followed by an in-person meeting</p>
                             <p>4.Termination of employment</p>
-                            <p>We will do whatever to_____.</p>
+                            <p class="tl-lf">We will do whatever to
+                                <select class="select-border select-bc-t w80" v-model="warmUpOne[0].value[4].userAnswer"
+                                    @change="setWarmUpOne">
+                                    <option v-for="(item, index) in warmUpOne[0].option" :key="index" :value="item">
+                                        {{ item }}
+                                    </option>
+                                </select>
+                                <img :src="warmUpOne[0].value[4].isRight ? correctIcon : errorIcon"
+                                    v-if="warmUpOne[0].isComplete">.
+                            </p>
                             <p>Supervisor鈥檚 signature:Jim Marche</p>
                             <p>Date:1/31/23</p>
                         </div>
-                        <p><b>鈪�.Put the following words in right order to make sentences.</b></p>
+                        <div class="event-header-text-bc pd-5" style="width: 90%" v-if="warmUpOne[0].isShowAnswer">
+                            <div>
+                                <p class="event-header-text-bc pd-5" v-for="(item, index) in warmUpOne[0].value"
+                                    :key="'warmUpOne' + index">
+                                    {{ index + 1 }}.{{ item.answer }}
+                                </p>
+                            </div>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ar w80">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handleWarmUpOne">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastWarmUpOne" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewWarmUpOne" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
+                        <p><b>鈪�.Put the following words in right order to make sentences.</b>
+                            <span class="btn-box" @click="showAnswerEight = !showAnswerEight">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
                         <p>1.used who everyone should coffee it the clean machine</p>
-                        <p>_________________________________________________</p>
+                        <p><input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.eight" /></p>
                         <p>2.to the this are welcome lecture attend all staff</p>
-                        <p>_________________________________________________</p>
+                        <p><input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.nine" /></p>
                         <p>3.due weather the badminton the to competition canceled be will</p>
-                        <p>_________________________________________________</p>
+                        <p><input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.ten" /></p>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -815,29 +2168,57 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p>4.gate school gather for the 8 at o鈥檆lock examination at will the we</p>
-                        <p>_________________________________________________</p>
+                        <p><input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.eleven" /></p>
                         <p>5.held will meeting contest in at be room tomorrow 9 p.m.the</p>
-                        <p>_________________________________________________</p>
+                        <p><input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.twelve" /></p>
+                        <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%"
+                            v-if="showAnswerEight">
+                            <p class="tl-lf table-p">绛旀锛�</p>
+                            <p>1.Everyone who used the coffee machine should clean it.
+                            </p>
+                            <p>2.All the staff are welcome to attend the lecture.
+                            </p>
+                            <p>3.Due to the weather the badminton competition will be canceled.
+                            </p>
+                            <p>4. We will gather at the gate at 8 o鈥檆lock for examination.
+                            </p>
+                            <p>5. Contest will be held in the meeting room at 9 p.m. tomorrow.
+                            </p>
+                        </div>
                         <p><b>鈪�.Susan,HR director,is responsible for writing a warning notice to Jason who delayed
-                                handling in a very important report.</b></p>
+                                handling in a very important report.</b>
+                            <span class="btn-box" @click="showAnswerNine = !showAnswerNine">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
                         <div class="fieldset-4">
                             <p class="left">Tech Market Technology Co.</p>
                             <p class="left">Warning 1</p>
-                            <p class="left">Employee鈥檚 Name:</p>
+                            <p class="left">Employee鈥檚 Name:<input type="text" @input="setBookQuestion"
+                                    class="input-bottom-border w20" v-model="questionData.tx.thirteen" /></p>
                             <p class="left">Supervisor鈥檚 Name: Jim Marche</p>
                             <p class="left">HR Representative鈥檚 Name: Susan Landen</p>
-                            <p class="left">Date:</p>
+                            <p class="left">Date:<input type="text" @input="setBookQuestion"
+                                    class="input-bottom-border w20" v-model="questionData.tx.fourteen" /></p>
                             <p><br /></p>
                             <p class="left">Dear Jason,</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
+                            <p class="left"><textarea v-model="questionData.tx.fifteen" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                                    style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea></p>
                             <p class="left">Supervisor鈥檚 signature: Jim Marche</p>
                             <p class="left">Date:1/31/23</p>
+                        </div>
+                        <div class="show-answer-box" v-if="showAnswerNine">
+                            <div>绛旀:</div>
+                            <div>
+                                <img src="../../assets/images/M7lessonThreePracticalWriting.png" alt="" class="w100" />
+                            </div>
                         </div>
                         <div class="un-h2">
                             <h2 id="b028">Unit Project</h2>
@@ -869,7 +2250,172 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0143-1.jpg" /></p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-th-bc">
+                                <td class="tl-cn">Examples</td>
+                                <td class="tl-cn">Strong/Bad</td>
+                                <td class="tl-cn">
+                                    Work Ethic
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">Barney is the employee that always follows through on his commitments.
+                                    If he agrees to take over another co-worker's shift.he always shows up. If he
+                                    commits to a deadline, you can count on him to meet that deadline.</td>
+                                <td class="tl-cn">
+                                    Strong
+                                </td>
+                                <td class="tl-cn">
+                                    Dedication
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">
+                                    Sarah consistently completes all of her assignments with careful attention. Whether
+                                    it鈥檚 staying up late to finish a research paper or sacrifcing her weekends to
+                                    prepare for projects.
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.twentyFive"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.twentySix"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">
+                                    Mary is always ready to lend a helping hand and offer help whenever needed, She
+                                    willingly shares her knowledge and expertise, contributing to the success of the
+                                    entire team.
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.twentySeven"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.twentyEight"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">
+                                    Amanda is the teacher who always inspires her students. She creates engaging lessons
+                                    that ignite their curiosity and encouragesthem to explore and learn. Amanda
+                                    motivates them to develop alifelong love for learning. </td>
+                                <td>
+                                    <textarea v-model="questionData.table.twentyNine"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirty"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">
+                                    Lisa is the customer service representative who consistently delivers outstanding
+                                    service. She patiently listens to customers鈥檆oncerns,empathizes with their
+                                    situation, and goes above and beyond to find solutions. </td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirtyOne"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirtyTwo"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">
+                                    James frequently forgets to submit his weekly report on time.causing delays in the
+                                    team's progress. This lack of consistency and attention to details affects the
+                                    project timelines and hampers effective communication within the team. </td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirtyThree"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirtyFour"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">
+                                    Andrew mistakenly sent an email to a client with incorrect information, During the
+                                    projeet review, he confessed to his supervisor that he was the one responsible for
+                                    the mistake, despite no one else was aware of it.</td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirtyFive"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirtySix"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">
+                                    John improved work productivity by introducing a new project management tool that
+                                    allowed for better task coordination. This led to more efficient project completion
+                                    and inereased output. </td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirtySeven"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirtyEight"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">
+                                    Mike failed to double-check important client documents before submitting them, which
+                                    not only caused frustration for the client but also required the team to invest
+                                    additional time and resources to rectify the mistake. </td>
+                                <td>
+                                    <textarea v-model="questionData.table.thirtyNine"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.forty"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">
+                                    Thomas frequently underestimated the time required for tasks.leading to rushed and
+                                    subpar work. His disorganized approach resulted in missed deadlines, delayed
+                                    deliverables, and frustrated clients. </td>
+                                <td>
+                                    <textarea v-model="questionData.table.fortyOne"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.fortyTwo"
+                                        class="w100 table-tr-bc b0 table-textarea "
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                        </table>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -893,14 +2439,20 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p><b>Task 2:</b>List the possible impact the above behavior will have on a company.</p>
-                        <p>1.____________________________________________</p>
-                        <p>2.____________________________________________</p>
-                        <p>3.____________________________________________</p>
+                        <p>1.<input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.sixteen" /></p>
+                        <p>2.<input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.seventeen" /></p>
+                        <p>3.<input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.eighteen" /></p>
                         <p><b>Task 3:</b>List at least three strong work ethic you should develop and the tips for
                             developing them.</p>
-                        <p>1.____________________________________________</p>
-                        <p>2.____________________________________________</p>
-                        <p>3.____________________________________________</p>
+                        <p>1.<input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.nineteen" /></p>
+                        <p>2.<input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.twenty" /></p>
+                        <p>3.<input type="text" @input="setBookQuestion" class="input-bottom-border w90"
+                                v-model="questionData.tx.twentyOne" /></p>
                         <div class="fieldset-9">
                             <p class="center"><b>Useful Expressions</b></p>
                             <p><b>Strong work ethic you should develop:</b></p>
@@ -919,6 +2471,114 @@
                             <p>Passiveness</p>
                             <p>Tardiness</p>
                             <p>Unprofessional behavior</p>
+                        </div>
+                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
+                            <div class="banshi openImgBox">
+                                <div class="swiper-container swiper_ppt">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤01.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤02.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤03.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤04.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤05.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤06.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤07.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤08.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤09.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤10.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤11.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤12.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤13.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤14.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤15.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤16.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤17.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤18.jpg" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/7-3銆丮ODULE 7锛坙esson three锛塤19.jpg" />
+                                            </div>
+                                        </div>
+                                      
+                                    </div>
+                                    <div class="swiper-button-next"></div>
+                                    <div class="swiper-button-prev"></div>
+                                    <div class="pageBox"></div>
+                                </div>
+                                <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -942,6 +2602,8 @@
     },
     data() {
         return {
+            correctIcon: require('@/assets/images/correct.svg'),
+            errorIcon: require('@/assets/images/error.svg'),
             imgThirteen: require("../../assets/images/grammar7-1.png"),
             imgThirteenOne: require("../../assets/images/grammar7-2.png"),
             showAnswerOne: false,
@@ -949,6 +2611,10 @@
             showAnswerThree: false,
             showAnswerFour: false,
             showAnswerFive: false,
+            showAnswerSix: false,
+            showAnswerSeven: false,
+            showAnswerEight: false,
+            showAnswerNine: false,
             showImg: false,
             showImgOne: false,
             showQuestionAnswer: false,
@@ -956,37 +2622,37 @@
                 left: [
                     {
                         oldId: "FB34",
-                        txt: "Martin銆�銆�銆�銆�Silk",
+                        txt: "Angela",
                     },
                     {
                         oldId: "64D6",
-                        txt: "Jessica銆�銆�The Great Wall",
+                        txt: "Jim",
                     },
                     {
                         oldId: "2ED4",
-                        txt: "Soren銆�銆�Chinese Food",
+                        txt: "Sheila",
                     },
                     {
                         oldId: "44DE",
-                        txt: "Chinese銆�銆�銆�銆�Tea",
+                        txt: "Jefff",
                     },
                 ],
                 right: [
                     {
                         oldId: "64D6",
-                        txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
+                        txt: "delaying his financial report for a month",
                     },
                     {
                         oldId: "FB34",
-                        txt: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
-                    },
-                    {
-                        oldId: "2ED4",
-                        txt: "The clothing material is quite popular among Roman women inancient times.",
+                        txt: "learning some new skills about insurance",
                     },
                     {
                         oldId: "44DE",
-                        txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
+                        txt: "almost never showing up at the ofce on time",
+                    },
+                    {
+                        oldId: "2ED4",
+                        txt: "always complaining about her tasks to others",
                     },
                 ],
             },
@@ -998,26 +2664,26 @@
                     {
                         id: "FB34",
                         linkValue:
-                            "The clothing material is quite popular among Roman women inancient times.",
-                        value: "Silk",
+                            "learning some new skills about insurance",
+                        value: "Angela",
                     },
                     {
                         id: "64D6",
                         linkValue:
-                            "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
-                        value: "The Great Wall",
+                            "delaying his financial report for a month",
+                        value: "Jim",
                     },
                     {
                         id: "2ED4",
                         linkValue:
-                            "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
-                        value: "Chinese Food",
+                            "always complaining about her tasks to others",
+                        value: "Sheila",
                     },
                     {
                         id: "44DE",
                         linkValue:
-                            "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
-                        value: "Chinese Tea",
+                            "almost never showing up at the ofce on time",
+                        value: "Jeff",
                     },
                 ],
                 optionStyle: undefined,
@@ -1026,37 +2692,37 @@
                     linkValues: [
                         {
                             oldId: "64D6",
-                            txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
-                        },
-                        {
-                            oldId: "44DE",
-                            txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
+                            txt: "delaying his financial report for a month",
                         },
                         {
                             oldId: "FB34",
-                            txt: "The clothing material is quite popular among Roman women inancient times.",
+                            txt: "learning some new skills about insurance",
+                        },
+                        {
+                            oldId: "44DE",
+                            txt: "almost never showing up at the ofce on time",
                         },
                         {
                             oldId: "2ED4",
-                            txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
+                            txt: "always complaining about her tasks to others",
                         },
                     ],
                     values: [
                         {
                             oldId: "FB34",
-                            txt: "Martin  Silk",
+                            txt: "Angela",
                         },
                         {
                             oldId: "64D6",
-                            txt: "The Great Wall",
+                            txt: "Jim",
                         },
                         {
                             oldId: "2ED4",
-                            txt: "Chinese Food",
+                            txt: "Sheila",
                         },
                         {
                             oldId: "44DE",
-                            txt: "Chinese Tea",
+                            txt: "Jefff",
                         },
                     ],
                 },
@@ -1068,45 +2734,43 @@
                 titleDescription: "1",
                 userChoise: [],
                 value: [],
-                answerImg: require("../../assets/images/matching-one.png"),
+                answerImg: require("../../assets/images/M7matching-one.png"),
             },
             questionData: {
-                warnUp: {
-                    one: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese knot",
-                    },
-                    two: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese medicine",
-                    },
-                    three: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese calligraphy",
-                    },
-                    four: {
-                        value: "",
-                        isRight: null,
-                        answer: "Taichi",
-                    },
-                    five: {
-                        value: "",
-                        isRight: null,
-                        answer: "sweet dumpling",
-                    },
-                    six: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese chess",
-                    },
-                    seven: "",
-                },
-                reading: {
+                tx: {
                     one: "",
                     two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    six: "",
+                    seven: "",
+                    eight: "",
+                    nine: "",
+                    ten: "",
+                    eleven: "",
+                    twelve: "",
+                    thirteen: "",
+                    fourteen: "",
+                    fifteen: "",
+                    sixteen: "",
+                    seventeen: "",
+                    eighteen: "",
+                    nineteen: "",
+                    twenty: "",
+                    twentyOne: "",
+                },
+                ip: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    six: "",
+                    seven: "",
+                    eight: "",
+                    nine: "",
+                    ten: "",
                 },
                 table: {
                     one: "",
@@ -1116,8 +2780,41 @@
                     five: "",
                     six: "",
                     seven: "",
-                    enight: "",
+                    eight: "",
                     nine: "",
+                    ten: "",
+                    eleven: "",
+                    twelve: "",
+                    thirteen: "",
+                    fourteen: "",
+                    fifteen: "",
+                    sixteen: "",
+                    seventeen: "",
+                    eighteen: "",
+                    nineteen: "",
+                    twenty: "",
+                    twentyOne: "",
+                    twentyTwo: "",
+                    twentyThree: "",
+                    twentyFour: "",
+                    twentyFive: "",
+                    twentySix: "",
+                    twentySeven: "",
+                    twentyEight: "",
+                    twentyNine: "",
+                    thirty: "",
+                    thirtyOne: "",
+                    thirtyTwo: "",
+                    thirtyThree: "",
+                    thirtyFour: "",
+                    thirtyFive: "",
+                    thirtySix: "",
+                    thirtySeven: "",
+                    thirtyEight: "",
+                    thirtyNine: "",
+                    forty: "",
+                    fortyOne: "",
+                    fortyTwo: "",
                 },
             },
             testData: {
@@ -1174,47 +2871,576 @@
                 listenOne: "",
                 readingOne: "",
                 readingTwo: "",
+                readingThree: "",
+                readingFour: "",
+                listenTwo: "",
+                listenThree: "",
             },
-            dropDownList: [
-                "online shopping",
-                "facial recognition",
-                "electronic payment",
-                "intercity train",
-                "shared bike",
-                "take-away service",
-            ],
+            //new
             dropdownData: {
-                one: {
-                    value: "",
-                    isRight: null,
-                    answer: "intercity train",
-                },
-                two: {
-                    value: "",
-                    isRight: null,
-                    answer: "online shopping",
-                },
-                three: {
-                    value: "",
-                    isRight: null,
-                    answer: "electronic payment",
-                },
-                four: {
-                    value: "",
-                    isRight: null,
-                    answer: "shared bike",
-                },
-                five: {
-                    value: "",
-                    isRight: null,
-                    answer: "take-away service",
-                },
-                six: {
-                    value: "",
-                    isRight: null,
-                    answer: "facial recognition",
-                },
+                isComplete: false,
+                dp: {
+                    dropDownList: [
+                        "HR department",
+                        "R & D department",
+                        "CEO office",
+                        "Finance department",
+                        "Production department",
+                        "Marketing department",
+                        "Administration office",
+                    ],
+                    one: {
+                        value: "",
+                        isRight: null,
+                        answer: "Administration office",
+                    },
+                    two: {
+                        value: "",
+                        isRight: null,
+                        answer: "HR department",
+                    },
+                    three: {
+                        value: "",
+                        isRight: null,
+                        answer: "Marketing department",
+                    },
+                    four: {
+                        value: "",
+                        isRight: null,
+                        answer: "R & D department",
+                    },
+                    five: {
+                        value: "",
+                        isRight: null,
+                        answer: "Finance department",
+                    },
+                    six: {
+                        value: "",
+                        isRight: null,
+                        answer: "CEO office",
+                    },
+                    seven: {
+                        value: "",
+                        isRight: null,
+                        answer: "Production department",
+                    },
+                }
+
+
             },
+            readingOne:[
+                {
+                    type: "fill",
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: 'excellence',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'whatever',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'focus',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'quality',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'opportunities',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'benefit',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                    ]
+                },
+            ],
+            questionDataOne: [
+                {
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stemOne: 'Wang takes a high-risk job on high-voltage power lines as',
+                            stemTwo: '.',
+                            answer: 'a team leader',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stemOne: 'Wang Jin felt',
+                            stemTwo: 'when he first touched the power line.',
+                            answer: '(really) scared',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stemOne: 'Wang finished the world鈥檚 first repair work on a 660-kilovolt',
+                            stemTwo: '.',
+                            answer: 'live-transmission line',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stemOne: 'The innovation center uses',
+                            stemTwo: 'for line inspection and maintenance.',
+                            answer: 'drones and operators',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stemOne: 'By 2020,a total of 35 UHV projects had been completed or',
+                            stemTwo: '.',
+                            answer: 'were under construction',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                    ]
+                },
+                {
+                    type: 'select',
+                    isShowAnswer: false,
+                    isComplete: false,
+                    option: ['1', '2', '3', '4', '5'],
+                    value: [
+                        {
+                            stem: 'Wang got one of the highest national awards for his superior performance.',
+                            answer: '3',
+                            userAnswer: '',
+                            isRight: null
+
+                        },
+                        {
+                            stem: 'Wang and his colleagues set up an innovation center to meet new work demand.',
+                            answer: '1',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stem: 'Wang was really afraid when he first touched the ultra-high-voltage line.',
+                            answer: '2',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stem: 'Wang and his colleagues want to create an digital and intelligent line inspection system..',
+                            answer: '5',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stem: 'Wang and his colleagues use drones for checking and repairing the lines.',
+                            answer: '4',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                    ]
+                },
+                {
+                    type: 'fill',
+                    isShowAnswer: false,
+                    isComplete: false,
+                    value: [
+                        {
+                            answer: 'challenges',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'coworkers',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'contact',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'capacities',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'performed',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'achieved',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                    ]
+
+                },
+                {
+                    type: 'text',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            userAnswer: "",
+                            answer: "The command post was set up in a forward position."
+                        },
+                        {
+                            userAnswer: "",
+                            answer: "My family members give me many supports for my study."
+                        },
+                        {
+                            userAnswer: "",
+                            answer: "In China, many projects are under construction in rural areas."
+                        },
+                        {
+                            userAnswer: "",
+                            answer: "Thanks to my insistence, I finally climbed the mountain."
+                        },
+                        {
+                            userAnswer: "",
+                            answer: "We rarely suffer power outage in recent 10 years in big cities. "
+                        },
+                    ]
+                },
+                {
+                    type: 'text',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stem: "If you want to achieve a higher working goal,you need to consider it carefully right now.",
+                            userAnswer: "",
+                            answer: "濡傛灉浣犳兂杈惧埌鏇撮珮鐨勫伐浣滅洰鏍囷紝鐜板湪灏辫浠旂粏鎬濊�冦��"
+                        },
+                        {
+                            stem: "To go for technical innovation,one must have the fearless spirit of a pathbreaker.",
+                            userAnswer: "",
+                            answer: "鎼炴妧鏈潻鏂板氨瑕佹湁涓�鑲′笉鎬曞洶闅剧殑闂姴銆�"
+                        },
+                        {
+                            stem: "You need keep in contact with your customers when some problems arise.",
+                            userAnswer: "",
+                            answer: "褰撳嚭鐜颁竴浜涢棶棰樻椂锛屼綘闇�瑕佷笌浣犵殑瀹㈡埛淇濇寔鑱旂郴銆�"
+                        },
+                        {
+                            stem: "Those employees believe that challenges offer opportunities to learn.",
+                            userAnswer: "",
+                            answer: "閭d簺鍛樺伐鐩镐俊鎸戞垬缁欎粬浠彁渚涗簡瀛︿範鐨勬満浼氥��"
+                        },
+                    ]
+                },
+                {
+                    type: 'text',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            num: 0,
+                            stem: "The simple past tense:",
+                            userAnswerOne: "",
+                            userAnswerTwo: "",
+                            answerOne: "He touched the power line.",
+                            answerTwo: "Wang felt dizzy.",
+                        },
+                        {
+                            num: 2,
+                            stem: "The past perfect tense:",
+                            userAnswerOne: "",
+                            userAnswerTwo: "",
+                            answerOne: "Wang Jin had achieved more than 30 technological innovations.",
+                            answerTwo: "A total of 35 UHV projects had been completed.",
+                        },
+
+                    ]
+                },
+                {
+                    type: "fills",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stemOne: 'He',
+                            stemTwo: 'more than 20 technological innovations before he turned 35.(achieve)',
+                            answer: 'had achieved',
+                            userAnswer: ''
+                        },
+                        {
+                            stemOne: 'She',
+                            stemTwo: '(give) a lot of financial support to animal protection organizations in 2022.',
+                            answer: 'gave',
+                            userAnswer: ''
+                        },
+                        {
+                            stemOne: 'She didn鈥檛 go to bed until she',
+                            stemTwo: 'her work.(finish)',
+                            answer: 'had finished',
+                            userAnswer: ''
+                        },
+                        {
+                            stemOne: 'He',
+                            stemTwo: 'many awards because of his hard work last year.(win)',
+                            answer: 'won',
+                            userAnswer: ''
+                        },
+                        {
+                            stemOne: 'They',
+                            stemTwo: 'more technologies for line repairing by 2021.(introduce)',
+                            answer: 'had introduced',
+                            userAnswer: ''
+                        },
+                    ]
+                },
+            ],
+            warmUp: [
+                {
+                    type: "select",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    option: ["no bribery", "punctual", "attentive", "gossiping"],
+                    value: [
+                        {
+                            answer: 'attentive',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'gossiping',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'no bribery',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'punctual',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                    ]
+                }
+            ],
+            questionDataTwo: [
+                {
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stemOne: 'Call me if you have any problems',
+                            stemTwo: 'your work.',
+                            answer: 'regarding',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stemOne: 'Two questions often',
+                            stemTwo: 'first-time corporate investors.',
+                            answer: 'bother',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stemOne: 'Babies need',
+                            stemTwo: 'attention.',
+                            answer: 'constant',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stemOne: 'She',
+                            stemTwo: 'to me about his rudeness.',
+                            answer: 'addressed',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            stemOne: 'Please',
+                            stemTwo: 'all complaints to the manager.',
+                            answer: 'complain',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                    ]
+                },
+                {
+                    type: 'text',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            userAnswer: "",
+                            answer: "It depends on personal views of employees, their motivation, and overall company culture."
+                        },
+                        {
+                            userAnswer: "",
+                            answer: "Angela鈥檚 director asked her to sort out data about the patients and insurance."
+                        },
+                        {
+                            userAnswer: "",
+                            answer: "Rather than giving up, Angela decides to expand her skills."
+                        },
+                        {
+                            userAnswer: "",
+                            answer: "Rather than starting early, he leaves it to the last minute and turns in an incomplete report. "
+                        },
+                        {
+                            userAnswer: "",
+                            answer: "However, she never addresses her complaints to the director."
+                        },
+                    ]
+                },
+                {
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stemOne: 'I鈥檇 like to go to the theatre tonight,',
+                            stemTwo: 'I鈥檓 too busy.',
+                            answer: 'but',
+                            userAnswer: ''
+                        },
+                        {
+                            stemOne: 'Your delay shows a lack of respect for the job',
+                            stemTwo: 'fellow coworkers.',
+                            answer: 'and',
+                            userAnswer: ''
+                        },
+                        {
+                            stemOne: 'Work ethic can be strong',
+                            stemTwo: 'poor.',
+                            answer: 'or',
+                            userAnswer: ''
+                        },
+                        {
+                            stemOne: 'She is bothered by the tasks,',
+                            stemTwo: 'she never complains.',
+                            answer: 'but',
+                            userAnswer: ''
+                        },
+                        {
+                            stemOne: 'All the employees should show up on time',
+                            stemTwo: 'even earlier.',
+                            answer: 'or',
+                            userAnswer: ''
+                        },
+                    ]
+                },
+            ],
+            questionDataThree: [
+                {
+                    type: "checkBox",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    option: [
+                        "His car broke down.",
+                        "His clock was broken.",
+                        "His phone was out of battery.",
+                        "He was ill.",
+                        "His car was borrowed.",
+                        "His phone was out of service.",
+                        "He didn鈥檛 get on the subway.",
+                        "He was squeezed out of the bus.",
+                    ],
+                    answer: [
+                        "His car broke down.",
+                        "His clock was broken.",
+                        "His phone was out of battery.",
+                        "He didn鈥檛 get on the subway.",
+                        "He was squeezed out of the bus.",
+                    ],
+                    userAnswer: [
+
+                    ]
+                },
+                {
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: 'what is your suggestion',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'It would be better',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'Your suggestion sounds like a good idea',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'I agree with you',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'will release a warning notice',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                    ]
+                },
+            ],
+            warmUpOne: [
+                {
+                    type: "select",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    option: [
+                        "in order of escalation",
+                        "you have committed the following actions",
+                        "you received a verbal warning",
+                        "help you improve your performance to meet our quality standards",
+                        "job suspension without pay for one workweek",
+                    ],
+                    value: [
+                        {
+                            answer: 'you have committed the following actions ',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'you received a verbal warning',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'in order of escalation',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'job suspension without pay for one workweek',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                        {
+                            answer: 'help you improve your performance to meet our quality standards',
+                            userAnswer: '',
+                            isRight: null,
+                        },
+                    ]
+                }
+            ],
+
         };
     },
     mounted() {
@@ -1222,19 +3448,59 @@
         if (testData) {
             this.testData = JSON.parse(testData);
         }
-        const bookQuestion = localStorage.getItem("english-book-question-one");
+        const bookQuestion = localStorage.getItem("english-book-chapter07-question-one");
         if (bookQuestion) {
             this.questionData = JSON.parse(bookQuestion);
         }
-        const dropdownData = localStorage.getItem("english-dropdown-one");
+        const dropdownData = localStorage.getItem("english-chapter-7-warmup-dropdown");
         if (dropdownData) {
             this.dropdownData = JSON.parse(dropdownData);
         }
+
+        const questionDataOne = localStorage.getItem("english-chapter-7-questionDataOne");
+        if (questionDataOne) {
+            this.questionDataOne = JSON.parse(questionDataOne);
+        }
+
+        const warmUp = localStorage.getItem("english-chapter-7-warmUp");
+        if (warmUp) {
+            this.warmUp = JSON.parse(warmUp);
+        }
+
+        const warmUpOne = localStorage.getItem("english-chapter-7-warmUpOne");
+        if (warmUpOne) {
+            this.warmUpOne = JSON.parse(warmUpOne);
+        }
+
+        const questionDataTwo = localStorage.getItem("english-chapter-7-questionDataTwo");
+        if (questionDataTwo) {
+            this.questionDataTwo = JSON.parse(questionDataTwo);
+        }
+
+        const questionDataThree = localStorage.getItem("english-chapter-7-questionDataThree");
+        if (questionDataThree) {
+            this.questionDataThree = JSON.parse(questionDataThree);
+        }
+
+        const readingOne = localStorage.getItem("english-chapter07-readingOne");
+        if (readingOne) {
+            this.readingOne = JSON.parse(readingOne);
+        }
+
         this.getPath();
     },
     methods: {
-        saveWord(event, word) {
-            this.$emit("saveCharacters", event, word);
+        isTextRight(answer, data, num) {
+            let flag = null;
+            answer[num] ? flag = answer[num] == data : flag = false;
+            return flag;
+        },
+        isShowRight(answer, userAnswer, data) {
+            let flag = null;
+            if (userAnswer.indexOf(data) > -1) {
+                flag = answer.indexOf(data) > -1 ? true : false;
+            }
+            return flag;
         },
         setTestData() {
             localStorage.setItem("english-testOne", JSON.stringify(this.testData));
@@ -1295,19 +3561,31 @@
         setBookQuestion() {
             console.log("淇濆瓨");
             localStorage.setItem(
-                "english-book-question-one",
+                "english-book-chapter07-question-one",
                 JSON.stringify(this.questionData)
             );
         },
         async getPath() {
             this.resource.listenOne = await getResourcePath(
-                "422139A2EF66EA888C5ED1D550AE23E0"
+                "20D9B02E3B0C95E7CD524224C57E643A"
             );
             this.resource.readingOne = await getResourcePath(
-                "3F442B682D84C8AB06C800B29D734920"
+                "01A4E8C1E8E2801EF48DDBBA3E4A30BD"
             );
             this.resource.readingTwo = await getResourcePath(
-                "E8719EC88026BCFB11D292AA999F6D3D"
+                "8D5057637DBB959B365E38360121FB41"
+            );
+            this.resource.readingThree = await getResourcePath(
+                "113D24C2D701120C0F6283A72F9F4366"
+            );
+            this.resource.readingFour = await getResourcePath(
+                "DE0C4081FE1FFE2374EDB989609B25E9"
+            );
+            this.resource.listenTwo = await getResourcePath(
+                "DB59D9F65B437605F766F7975026B61D"
+            );
+            this.resource.listenThree = await getResourcePath(
+                "53543E43DC90215C21CFC432D46CAB18"
             );
         },
         showAnswer(type) {
@@ -1351,61 +3629,267 @@
                     : (this.questionData.warnUp.six.isRight = null);
             }
         },
-        handleDropdown(type) {
-            const dropdownDatas = this.dropdownData;
-            for (let key in dropdownDatas) {
-                const item = dropdownDatas[key];
-                if (type == "judge") {
-                    item.value == item.answer
-                        ? (item.isRight = true)
-                        : (item.isRight = false);
-                    console.log(item.value, item.answer);
-                }
-            }
-            this.dropdownData = dropdownDatas;
+        audioPlay() {
+            this.$emit("closeMiniAudio");
         },
-        changeDropdown() {
-            localStorage.removeItem("english-dropdown-one");
-            for (let key in this.dropdownData) {
-                const item = this.dropdownData[key];
-                item.value = "";
-                item.isRight = null;
-            }
-        },
+        //new
         setDropdownData() {
             localStorage.setItem(
-                "english-dropdown-one",
+                "english-chapter-7-warmup-dropdown",
                 JSON.stringify(this.dropdownData)
             );
         },
-        saveData() {
-            const item = this.testData['check']
-            const sortedArr1 = item.answer.slice().sort();
-            const sortedArr2 = item.value.slice().sort();
-            const isRight = sortedArr1.every(
-                (value, index) => value === sortedArr2[index]
+        handleDropdownData() {
+            const dropdownDatas = this.dropdownData;
+            for (let key in dropdownDatas) {
+                const item = dropdownDatas[key]
+                if (key != "isComplete") {
+                    for (let keys in item) {
+                        const citem = item[keys]
+                        if (keys != "dropDownList") {
+                            if (citem.value) {
+                                citem.value == citem.answer ? citem.isRight = true : citem.isRight = false;
+                            }
+                        }
+                    }
+                }
+            }
+            this.dropdownData = dropdownDatas;
+            this.$set(this.dropdownData, "isComplete", true);
+            this.setDropdownData();
+        },
+        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" || item.type == "select") {
+                    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-7-questionDataOne",
+                JSON.stringify(this.questionDataOne)
             );
-            const inData = this.testData['in']
-            let inString = []
-            for (let key in inData) {
-                const citem = inData[key];
-                if (key != 'answer' && key !== 'isRight') {
-                    console.log(key);
-                    inString.push(citem)
+        },
+        recastQuestionDataOne() {
+            localStorage.removeItem("english-chapter-7-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" || item.type == "select") {
+                    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 = "";
+                        ditem.userAnswerOne = "";
+                        ditem.userAnswerTwo = "";
+                    }
+                }
+            }
+        },
+        viewQuestionDataOne() {
+            for (let index = 0; index < this.questionDataOne.length; index++) {
+                const item = this.questionDataOne[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        handleWarmUp() {
+            for (let index = 0; index < this.warmUp.length; index++) {
+                const item = this.warmUp[index];
+                item.isComplete = true;
+                item.isShowAnswer = true;
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.isRight = citem.answer == citem.userAnswer;
+                }
+            }
+        },
+        setWarmUp() {
+            localStorage.setItem(
+                "english-chapter-7-warmUp",
+                JSON.stringify(this.warmUp)
+            );
+        },
+        recastWarmUp() {
+            localStorage.removeItem("english-chapter-7-warmUp");
+            for (let index = 0; index < this.warmUp.length; index++) {
+                const item = this.warmUp[index];
+                item.isComplete = false;
+                item.isShowAnswer = false;
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.isRight = null;
+                    citem.userAnswer = "";
                 }
 
+            }
+        },
+        viewWarmUp() {
+            for (let index = 0; index < this.warmUp.length; index++) {
+                const item = this.warmUp[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        handleWarmUpOne() {
+            for (let index = 0; index < this.warmUpOne.length; index++) {
+                const item = this.warmUpOne[index];
+                item.isComplete = true;
+                item.isShowAnswer = true;
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.isRight = citem.answer == citem.userAnswer;
+                }
+            }
+        },
+        setWarmUpOne() {
+            localStorage.setItem(
+                "english-chapter-7-warmUpOne",
+                JSON.stringify(this.warmUpOne)
+            );
+        },
+        recastWarmUpOne() {
+            localStorage.removeItem("english-chapter-7-warmUpOne");
+            for (let index = 0; index < this.warmUpOne.length; index++) {
+                const item = this.warmUpOne[index];
+                item.isComplete = false;
+                item.isShowAnswer = false;
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.isRight = null;
+                    citem.userAnswer = "";
+                }
 
             }
-            const inRight = inData.answer == inString
-            console.log('in', inData.answer, inString);
-            this.$set(this.testData['in'], 'isRight', inRight)
-            this.$set(this.testData['check'], 'isRight', isRight)
-            this.setTestData()
-            console.log(this.testData);
-
         },
-        audioPlay() {
-            this.$emit("closeMiniAudio");
+        viewWarmUpOne() {
+            for (let index = 0; index < this.warmUpOne.length; index++) {
+                const item = this.warmUpOne[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+
+        handleQuestionDataTwo() {
+            for (let index = 0; index < this.questionDataTwo.length; index++) {
+                const item = this.questionDataTwo[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;
+                    }
+                }
+            }
+        },
+        setQuestionDataTwo() {
+            localStorage.setItem(
+                "english-chapter-7-questionDataTwo",
+                JSON.stringify(this.questionDataTwo)
+            );
+        },
+        recastQuestionDataTwo() {
+            localStorage.removeItem("english-chapter-7-questionDataTwo");
+            for (let index = 0; index < this.questionDataTwo.length; index++) {
+                const item = this.questionDataTwo[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 = "";
+                    }
+                }
+            }
+        },
+        viewQuestionDataTwo() {
+            for (let index = 0; index < this.questionDataTwo.length; index++) {
+                const item = this.questionDataTwo[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        handleQuestionDataThree() {
+            for (let index = 0; index < this.questionDataThree.length; index++) {
+                const item = this.questionDataThree[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;
+                    }
+                }
+            }
+        },
+        setQuestionDataThree() {
+            localStorage.setItem(
+                "english-chapter-7-questionDataThree",
+                JSON.stringify(this.questionDataThree)
+            );
+        },
+        recastQuestionDataThree() {
+            localStorage.removeItem("english-chapter-7-questionDataThree");
+            for (let index = 0; index < this.questionDataThree.length; index++) {
+                const item = this.questionDataThree[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 {
+                    item.userAnswer = [];
+                }
+            }
+        },
+        viewQuestionDataThree() {
+            for (let index = 0; index < this.questionDataThree.length; index++) {
+                const item = this.questionDataThree[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        saveReadingOne() {
+            localStorage.setItem('english-chapter07-readingOne', JSON.stringify(this.readingOne))
+        },
+        handleReadingOne(){
+            for (let index = 0; index < this.readingOne.length; index++) {
+                const item = this.readingOne[index];
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    if(citem.userAnswer != ""){
+                        citem.isRight = citem.answer == citem.userAnswer
+                    }else{
+                        citem.isRight=null
+                    }
+                }   
+            }
+            this.saveReadingOne()
+        },
+        viewReadingOne(){
+            for (let index = 0; index < this.readingOne.length; index++) {
+                const item = this.readingOne[index];
+                item.isShowAnswer = !item.isShowAnswer
+                
+            }
         },
     },
 };

--
Gitblit v1.9.1