From 3ee26fb583c0c0a0caca79ca3010491a794534cc Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 22 七月 2024 14:27:04 +0800
Subject: [PATCH] 8合并

---
 src/books/English/view/components/chapter008.vue |  545 +++++++++++++++++++++++++++++++++---------------------
 1 files changed, 335 insertions(+), 210 deletions(-)

diff --git a/src/books/English/view/components/chapter008.vue b/src/books/English/view/components/chapter008.vue
index 812c58a..8bbfbf5 100644
--- a/src/books/English/view/components/chapter008.vue
+++ b/src/books/English/view/components/chapter008.vue
@@ -32,18 +32,244 @@
                         <h2 id="b029"><img class="img-0" alt="" src="../../assets/images/dy8-le1.jpg" /></h2>
                         <h3 id="c064"><span class="bjh3">Warm-up</span></h3>
                         <p><b>鈪�.Figure out what the people in the following pictures do.</b></p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-1.jpg" /></p>
-                        <p class="center">1._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-2.jpg" /></p>
-                        <p class="center">2._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-3.jpg" /></p>
-                        <p class="center">3._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-4.jpg" /></p>
-                        <p class="center">4._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-5.jpg" /></p>
-                        <p class="center">5._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-6.jpg" /></p>
-                        <p class="center">6._____________________</p>
+                        <div class="openImgBox">
+                            <div class="fl ju-bt">
+                                <div class="left" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-1.jpg" alt="" class="w100" />
+                                        </p>
+                                        <p class="center">
+                                            1.
+                                            <select class="select-border" v-model="dropdownData.one.value"
+                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
+                                                <option v-for="(item, index) in dropDownList" :key="index"
+                                                    :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <span class="icon-box">
+                                                <svg v-if="dropdownData.one.isRight" t="1716986419862" class="icon"
+                                                    viewBox="0 0 1820 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                                    <path
+                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                        fill="#1AFA29" p-id="18768"></path>
+                                                </svg>
+                                                <svg v-if="dropdownData.one.isRight == false" t="1716987085767"
+                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                                    <path
+                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                        fill="#d81e06" p-id="25746"></path>
+                                                </svg>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
+                                        绛旀锛歩ntercity train
+                                    </p>
+                                </div>
+                                <div class="right" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-2.jpg" alt="" style="width: 98%" />
+                                        </p>
+                                        <p class="center">
+                                            2.
+                                            <select class="select-border" v-model="dropdownData.two.value"
+                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
+                                                <option v-for="(item, index) in dropDownList" :key="index"
+                                                    :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <span class="icon-box">
+                                                <svg v-if="dropdownData.two.isRight" t="1716986419862" class="icon"
+                                                    viewBox="0 0 1820 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                                    <path
+                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                        fill="#1AFA29" p-id="18768"></path>
+                                                </svg>
+                                                <svg v-if="dropdownData.two.isRight == false" t="1716987085767"
+                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                                    <path
+                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                        fill="#d81e06" p-id="25746"></path>
+                                                </svg>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
+                                        绛旀锛歰nline shopping
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="fl ju-bt">
+                                <div class="left" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-3.jpg" alt="" style="width: 98%" />
+                                        </p>
+                                        <p class="center">
+                                            3.
+                                            <select class="select-border" v-model="dropdownData.three.value"
+                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
+                                                <option v-for="(item, index) in dropDownList" :key="index"
+                                                    :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <span class="icon-box">
+                                                <svg v-if="dropdownData.three.isRight" t="1716986419862" class="icon"
+                                                    viewBox="0 0 1820 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                                    <path
+                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                        fill="#1AFA29" p-id="18768"></path>
+                                                </svg>
+                                                <svg v-if="dropdownData.three.isRight == false" t="1716987085767"
+                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                                    <path
+                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                        fill="#d81e06" p-id="25746"></path>
+                                                </svg>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
+                                        绛旀锛歟lectronic payment
+                                    </p>
+                                </div>
+                                <div class="right" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-4.jpg" alt="" style="width: 94%" />
+                                        </p>
+                                        <p class="center">
+                                            4.
+                                            <select class="select-border" v-model="dropdownData.four.value"
+                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
+                                                <option v-for="(item, index) in dropDownList" :key="index"
+                                                    :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <span class="icon-box">
+                                                <svg v-if="dropdownData.four.isRight" t="1716986419862" class="icon"
+                                                    viewBox="0 0 1820 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                                    <path
+                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                        fill="#1AFA29" p-id="18768"></path>
+                                                </svg>
+                                                <svg v-if="dropdownData.four.isRight == false" t="1716987085767"
+                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                                    <path
+                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                        fill="#d81e06" p-id="25746"></path>
+                                                </svg>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
+                                        绛旀锛歴hared bike
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="fl ju-bt">
+                                <div class="left" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-5.jpg" alt="" class="w100" />
+                                        </p>
+                                        <p class="center">
+                                            5.
+                                            <select class="select-border" v-model="dropdownData.five.value"
+                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
+                                                <option v-for="(item, index) in dropDownList" :key="index"
+                                                    :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <span class="icon-box">
+                                                <svg v-if="dropdownData.five.isRight" t="1716986419862" class="icon"
+                                                    viewBox="0 0 1820 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                                    <path
+                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                        fill="#1AFA29" p-id="18768"></path>
+                                                </svg>
+                                                <svg v-if="dropdownData.five.isRight == false" t="1716987085767"
+                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                                    <path
+                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                        fill="#d81e06" p-id="25746"></path>
+                                                </svg>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
+                                        绛旀锛歵ake-away service
+                                    </p>
+                                </div>
+                                <div class="right" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-6.jpg" alt="" style="width: 98%" />
+                                        </p>
+                                        <p class="center">
+                                            6.
+                                            <select class="select-border" v-model="dropdownData.six.value"
+                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
+                                                <option v-for="(item, index) in dropDownList" :key="index"
+                                                    :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <span class="icon-box">
+                                                <svg v-if="dropdownData.six.isRight" t="1716986419862" class="icon"
+                                                    viewBox="0 0 1820 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                                    <path
+                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                        fill="#1AFA29" p-id="18768"></path>
+                                                </svg>
+                                                <svg v-if="dropdownData.six.isRight == false" t="1716987085767"
+                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                                    <path
+                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                        fill="#d81e06" p-id="25746"></path>
+                                                </svg>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
+                                        绛旀锛歠acial recognition
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
                         <p><b>鈪�.What other jobs can you list?</b></p>
                         <p>____________________________________________</p>
                     </div>
@@ -70,7 +296,7 @@
                     <div class="bodystyle">
                         <h3 id="c065"><span class="bjh3">Listening</span></h3>
                         <p class="center"> <audio :src="resource.listenOne" controls
-                                controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
+                                controlslist="noplaybackrate nodownload" class="audio" ></audio></p>
                         <p><b>Watch the video and find out how the speakers describe their jobs.</b></p>
                         <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                             <tr class="table-th-bc">
@@ -135,7 +361,7 @@
                         <p>2.If you鈥檙e considering a part-time job,what鈥檚 your expectation of it?</p>
                         <p class="center">__________________</p>
                         <p class="center"> <audio :src="resource.listenOne" controls
-                                controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
+                                controlslist="noplaybackrate nodownload" class="audio" ></audio></p>
                         <p>Everyone鈥檚 first job is special.There are a couple of reasons for this:the experience is
                             burned into one鈥檚 memory; it gives you the practice needed to
                             <span class="word-bc" @click="saveWord($event, 'fulfill')">fulfill</span>
@@ -213,7 +439,7 @@
                         </p>
                         <p class="center"><audio :src="resource.readingTwo" controls
                                 controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+                               ></audio></p>
                         <p>fulfill /f蕣l藞f瑟l/ <i>v.</i> 绗﹀悎锛涘饱琛�</p>
                         <div class="bkbj">
                             <p><i>to do or have what is required or necessary</i></p>
@@ -636,18 +862,26 @@
                         <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" /></p>
                         <div class="bk-wh">
                             <p class="dl-box">
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'dangerous')">dangerous</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'demanding')">demanding</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'dull')">dull</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'exciting')">exciting</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'repetitive')">repetitive</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'risky')">risky</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'satisfying')">satisfying</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'stimulating')">stimulating</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'stressful')">stressful</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'voluntary')">voluntary</span>
-              </p>
-                            
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'dangerous')">dangerous</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'demanding')">demanding</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'dull')">dull</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'exciting')">exciting</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'repetitive')">repetitive</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'risky')">risky</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'satisfying')">satisfying</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'stimulating')">stimulating</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'stressful')">stressful</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'voluntary')">voluntary</span>
+                            </p>
+
                             <p>銆�銆�銆�銆�銆�銆�銆�銆�銆�
                             </p>
                         </div>
@@ -861,7 +1095,7 @@
                         <p class="center"><b>Choose a Career You Love</b></p>
                         <p class="center"><audio :src="resource.readingTwo" controls
                                 controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+                               ></audio></p>
                         <p>We spend a large
                             <span class="word-bc" @click="saveWord($event, 'portion')">portion</span>
                             of our lives working,so how we spend those years matters.It is
@@ -943,7 +1177,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>portion /藞p蓴藧蕛n/ <i>n.</i>閮ㄥ垎</p>
                         <div class="bkbj">
                             <p><i>one part of sth.larger</i></p>
@@ -1374,7 +1608,7 @@
                         <h3 id="c071"><span class="bjh3">Listening</span></h3>
                         <p class="center"> <audio :src="resource.readingTwo" controls
                                 controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+                                ></audio></p>
                         <p><b>鈪�.Derek is talking about his job interview.Listen to the recording and fill in the blanks
                                 with what you hear.</b></p>
                         <p>Hi,everyone.I鈥檓 Derek Cruise.I landed a job interview the other day.It is a bank
@@ -1565,7 +1799,6 @@
                         <p>1.Work with your partner and decide what questions you will ask during the
                             interview.2.Complete the worksheet for the interviewer.</p>
                         <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
-                            style="margin-left: 10px" class="audio" @play="audioPlay"></audio>
                         <p class="center"></p>
                         <p><b>Role 2:Interviewee</b></p>
                         <p>1.Make a list of the information which might be useful in the interview.2.Finish the
@@ -1593,18 +1826,18 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p class="center"><b>Worksheet for the Interviewer</b></p>
-                        <table border="1" cellpadding="4" cellspacing="0"  class="fz-14 fieldset-5">
+                        <table border="1" cellpadding="4" cellspacing="0" class="fz-14 fieldset-5">
                             <tr class="table-tr-bc">
                                 <td class="tl-cn ">
                                     <p class="table-p">Name: <input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 35em"
-                                        v-model="testData.in.one" @change="setTestData" /></p>
+                                            class="input-bottom-border input-bc-t" style="width: 35em"
+                                            v-model="testData.in.one" @change="setTestData" /></p>
                                     <p class="table-p">Phone: <input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 34.8em"
-                                        v-model="testData.in.one" @change="setTestData" /></p>
+                                            class="input-bottom-border input-bc-t" style="width: 34.8em"
+                                            v-model="testData.in.one" @change="setTestData" /></p>
                                     <p class="table-p">Email: <input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 35em"
-                                        v-model="testData.in.one" @change="setTestData" /></p>
+                                            class="input-bottom-border input-bc-t" style="width: 35em"
+                                            v-model="testData.in.one" @change="setTestData" /></p>
                                 </td>
                             </tr>
 
@@ -1615,7 +1848,7 @@
                                         class="w100 table-tr-bc b0 table-textarea "
                                         @change="setBookQuestion"></textarea>
                                 </td>
-                  
+
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
@@ -1624,7 +1857,7 @@
                                         class="w100 table-tr-bc b0 table-textarea "
                                         @change="setBookQuestion"></textarea>
                                 </td>
-        
+
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
@@ -1633,7 +1866,7 @@
                                         class="w100 table-tr-bc b0 table-textarea "
                                         @change="setBookQuestion"></textarea>
                                 </td>
-  
+
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
@@ -1858,14 +2091,10 @@
         return {
             imgThirteen: require("../../assets/images/grammar8-1.png"),
             imgThirteenOne: require("../../assets/images/grammar8-2.png"),
-            showAnswerOne: false,
-            showAnswerTwo: false,
-            showAnswerThree: false,
-            showAnswerFour: false,
-            showAnswerFive: false,
+            correctIcon:require('@/assets/images/correct.svg'),
+            errorIcon:require('@/assets/images/error.svg'),
             showImg: false,
             showImgOne: false,
-            showQuestionAnswer: false,
             rawData: {
                 left: [
                     {
@@ -2121,14 +2350,6 @@
                 readingOne: "",
                 readingTwo: "",
             },
-            dropDownList: [
-                "online shopping",
-                "facial recognition",
-                "electronic payment",
-                "intercity train",
-                "shared bike",
-                "take-away service",
-            ],
             dropdownData: {
                 one: {
                     value: "",
@@ -2161,85 +2382,78 @@
                     answer: "facial recognition",
                 },
             },
+            listenThree:[
+                {
+                    type:"fill",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                }
+            ]
         };
     },
     mounted() {
-        const testData = localStorage.getItem("english-testOne");
-        if (testData) {
-            this.testData = JSON.parse(testData);
-        }
-        const bookQuestion = localStorage.getItem("english-book-question-one");
-        if (bookQuestion) {
-            this.questionData = JSON.parse(bookQuestion);
-        }
-        const dropdownData = localStorage.getItem("english-dropdown-one");
-        if (dropdownData) {
-            this.dropdownData = JSON.parse(dropdownData);
-        }
         this.getPath();
     },
     methods: {
+        arrayToString(data) {
+            if(Array.isArray(data)) {
+            return data.toString()
+            } else {
+                return data
+            }
+        },
+        isTextRight(answer, data, num) {
+            let flag = null;
+            if (data) {
+                flag = answer[num] == data
+            } else {
+                flag = false
+            }
+            return flag;
+        },
+        isShowRight(answer, userAnswer, data) {
+            let flag = null;
+            if (userAnswer.indexOf(data) > -1) {
+                flag = answer.indexOf(data) > -1 ? true : false;
+            } else {
+                flag = false
+            }
+            return flag;
+        },
         saveWord(event, word) {
             this.$emit("saveCharacters", event, word);
         },
         setTestData() {
             localStorage.setItem("english-testOne", JSON.stringify(this.testData));
         },
-        changeTestData() {
-            localStorage.removeItem("english-testOne");
-            this.testData = {
-                check: {
-                    isRight: null,
-                    answer: ["Culture", "Cuisine", "Landscapes"],
-                    value: []
-                },
-                tx: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                in: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                    isRight: null,
-                    answer: ['uisine', 'andscapes', 'ivilization', 'xplore', 'nique']
-                },
-                line: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                ts: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                },
-                gr: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                cm: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-            };
-        },
         setBookQuestion() {
-            console.log("淇濆瓨");
             localStorage.setItem(
                 "english-book-question-one",
                 JSON.stringify(this.questionData)
@@ -2263,95 +2477,6 @@
                 this.showImgOne = !this.showImgOne;
             }
             setTimeout(() => { this.$emit("initViewer", "") }, 500)
-        },
-        handleQuestion(type) {
-            if (type == "one") {
-                this.questionData.warnUp.one.value
-                    ? (this.questionData.warnUp.one.isRight =
-                        this.questionData.warnUp.one.value == "Chinese knot")
-                    : (this.questionData.warnUp.one.isRight = null);
-            } else if (type == "two") {
-                this.questionData.warnUp.two.value
-                    ? (this.questionData.warnUp.two.isRight =
-                        this.questionData.warnUp.two.value == "Chinese medicine")
-                    : (this.questionData.warnUp.two.isRight = null);
-            } else if (type == "three") {
-                this.questionData.warnUp.three.value
-                    ? (this.questionData.warnUp.three.isRight =
-                        this.questionData.warnUp.three.value == "Chinese calligraphy")
-                    : (this.questionData.warnUp.three.isRight = null);
-            } else if (type == "four") {
-                this.questionData.warnUp.four.value
-                    ? (this.questionData.warnUp.four.isRight =
-                        this.questionData.warnUp.four.value == "Taichi")
-                    : (this.questionData.warnUp.four.isRight = null);
-            } else if (type == "five") {
-                this.questionData.warnUp.five.value
-                    ? (this.questionData.warnUp.five.isRight =
-                        this.questionData.warnUp.five.value == "sweet dumpling")
-                    : (this.questionData.warnUp.five.isRight = null);
-            } else if (type == "six") {
-                this.questionData.warnUp.six.value
-                    ? (this.questionData.warnUp.six.isRight =
-                        this.questionData.warnUp.six.value == "Chinese chess")
-                    : (this.questionData.warnUp.six.isRight = null);
-            }
-        },
-        handleDropdown(type) {
-            const dropdownDatas = this.dropdownData;
-            for (let key in dropdownDatas) {
-                const item = dropdownDatas[key];
-                if (type == "judge") {
-                    item.value == item.answer
-                        ? (item.isRight = true)
-                        : (item.isRight = false);
-                    console.log(item.value, item.answer);
-                }
-            }
-            this.dropdownData = dropdownDatas;
-        },
-        changeDropdown() {
-            localStorage.removeItem("english-dropdown-one");
-            for (let key in this.dropdownData) {
-                const item = this.dropdownData[key];
-                item.value = "";
-                item.isRight = null;
-            }
-        },
-        setDropdownData() {
-            localStorage.setItem(
-                "english-dropdown-one",
-                JSON.stringify(this.dropdownData)
-            );
-        },
-        saveData() {
-            const item = this.testData['check']
-            const sortedArr1 = item.answer.slice().sort();
-            const sortedArr2 = item.value.slice().sort();
-            const isRight = sortedArr1.every(
-                (value, index) => value === sortedArr2[index]
-            );
-            const inData = this.testData['in']
-            let inString = []
-            for (let key in inData) {
-                const citem = inData[key];
-                if (key != 'answer' && key !== 'isRight') {
-                    console.log(key);
-                    inString.push(citem)
-                }
-
-
-            }
-            const inRight = inData.answer == inString
-            console.log('in', inData.answer, inString);
-            this.$set(this.testData['in'], 'isRight', inRight)
-            this.$set(this.testData['check'], 'isRight', isRight)
-            this.setTestData()
-            console.log(this.testData);
-
-        },
-        audioPlay() {
-            this.$emit("closeMiniAudio");
         },
     },
 };

--
Gitblit v1.9.1