Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

zhongshujie

2024-07-22 0147b2e4cd7b1e38a84de32ea954b7ed47acf31f

 src/books/English/view/components/chapter008.vue

@@ -41,36 +41,13 @@
                                        </p>
                                        <p class="center">
                                            1.
                                            <select class="select-border" v-model="dropdownData.one.value"
                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
                                                <option v-for="(item, index) in dropDownList" :key="index"
                                                    :value="item">
                                                    {{ item }}
                                                </option>
                                            </select>
                                            <span class="icon-box">
                                                <svg v-if="dropdownData.one.isRight" t="1716986419862" class="icon"
                                                    viewBox="0 0 1820 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                                    <path
                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                                        fill="#1AFA29" p-id="18768"></path>
                                                </svg>
                                                <svg v-if="dropdownData.one.isRight == false" t="1716987085767"
                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                                    <path
                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                                        fill="#d81e06" p-id="25746"></path>
                                                </svg>
                                            </span>
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[0].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(0)" />
                                            <img :src="warmUp[0].value[0].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[0].isRight == true || warmUp[0].value[0].isRight == false">
                                        </p>
                                    </div>
                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                                        答案：intercity train
                                    </p>
                                </div>
                                <div class="right" style="width: 48%">
                                    <div>
@@ -79,36 +56,13 @@
                                        </p>
                                        <p class="center">
                                            2.
                                            <select class="select-border" v-model="dropdownData.two.value"
                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
                                                <option v-for="(item, index) in dropDownList" :key="index"
                                                    :value="item">
                                                    {{ item }}
                                                </option>
                                            </select>
                                            <span class="icon-box">
                                                <svg v-if="dropdownData.two.isRight" t="1716986419862" class="icon"
                                                    viewBox="0 0 1820 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                                    <path
                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                                        fill="#1AFA29" p-id="18768"></path>
                                                </svg>
                                                <svg v-if="dropdownData.two.isRight == false" t="1716987085767"
                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                                    <path
                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                                        fill="#d81e06" p-id="25746"></path>
                                                </svg>
                                            </span>
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[1].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(1)" />
                                            <img :src="warmUp[0].value[1].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[1].isRight == true || warmUp[0].value[1].isRight == false">
                                        </p>
                                    </div>
                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                                        答案：online shopping
                                    </p>
                                </div>
                            </div>

@@ -120,36 +74,14 @@
                                        </p>
                                        <p class="center">
                                            3.
                                            <select class="select-border" v-model="dropdownData.three.value"
                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
                                                <option v-for="(item, index) in dropDownList" :key="index"
                                                    :value="item">
                                                    {{ item }}
                                                </option>
                                            </select>
                                            <span class="icon-box">
                                                <svg v-if="dropdownData.three.isRight" t="1716986419862" class="icon"
                                                    viewBox="0 0 1820 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                                    <path
                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                                        fill="#1AFA29" p-id="18768"></path>
                                                </svg>
                                                <svg v-if="dropdownData.three.isRight == false" t="1716987085767"
                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                                    <path
                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                                        fill="#d81e06" p-id="25746"></path>
                                                </svg>
                                            </span>
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[2].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(2)" />
                                            <img :src="warmUp[0].value[2].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[2].isRight == true || warmUp[0].value[2].isRight == false">
                                        </p>
                                    </div>
                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                                        答案：electronic payment
                                    </p>

                                </div>
                                <div class="right" style="width: 48%">
                                    <div>
@@ -158,36 +90,14 @@
                                        </p>
                                        <p class="center">
                                            4.
                                            <select class="select-border" v-model="dropdownData.four.value"
                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
                                                <option v-for="(item, index) in dropDownList" :key="index"
                                                    :value="item">
                                                    {{ item }}
                                                </option>
                                            </select>
                                            <span class="icon-box">
                                                <svg v-if="dropdownData.four.isRight" t="1716986419862" class="icon"
                                                    viewBox="0 0 1820 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                                    <path
                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                                        fill="#1AFA29" p-id="18768"></path>
                                                </svg>
                                                <svg v-if="dropdownData.four.isRight == false" t="1716987085767"
                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                                    <path
                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                                        fill="#d81e06" p-id="25746"></path>
                                                </svg>
                                            </span>
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[3].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(3)" />
                                            <img :src="warmUp[0].value[3].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[3].isRight == true || warmUp[0].value[3].isRight == false">
                                        </p>
                                    </div>
                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                                        答案：shared bike
                                    </p>

                                </div>
                            </div>

@@ -199,36 +109,14 @@
                                        </p>
                                        <p class="center">
                                            5.
                                            <select class="select-border" v-model="dropdownData.five.value"
                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
                                                <option v-for="(item, index) in dropDownList" :key="index"
                                                    :value="item">
                                                    {{ item }}
                                                </option>
                                            </select>
                                            <span class="icon-box">
                                                <svg v-if="dropdownData.five.isRight" t="1716986419862" class="icon"
                                                    viewBox="0 0 1820 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                                    <path
                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                                        fill="#1AFA29" p-id="18768"></path>
                                                </svg>
                                                <svg v-if="dropdownData.five.isRight == false" t="1716987085767"
                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                                    <path
                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                                        fill="#d81e06" p-id="25746"></path>
                                                </svg>
                                            </span>
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[4].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(4)" />
                                            <img :src="warmUp[0].value[4].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[4].isRight == true || warmUp[0].value[4].isRight == false">
                                        </p>
                                    </div>
                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                                        答案：take-away service
                                    </p>

                                </div>
                                <div class="right" style="width: 48%">
                                    <div>
@@ -237,42 +125,40 @@
                                        </p>
                                        <p class="center">
                                            6.
                                            <select class="select-border" v-model="dropdownData.six.value"
                                                @change="setDropdownData" :disabled="dropdownData.isComplete">
                                                <option v-for="(item, index) in dropDownList" :key="index"
                                                    :value="item">
                                                    {{ item }}
                                                </option>
                                            </select>
                                            <span class="icon-box">
                                                <svg v-if="dropdownData.six.isRight" t="1716986419862" class="icon"
                                                    viewBox="0 0 1820 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                                    <path
                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                                        fill="#1AFA29" p-id="18768"></path>
                                                </svg>
                                                <svg v-if="dropdownData.six.isRight == false" t="1716987085767"
                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                                    <path
                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                                        fill="#d81e06" p-id="25746"></path>
                                                </svg>
                                            </span>
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[5].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(5)" />
                                            <img :src="warmUp[0].value[5].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[5].isRight == true || warmUp[0].value[5].isRight == false">
                                        </p>
                                    </div>
                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                                        答案：facial recognition
                                    </p>

                                </div>
                            </div>
                        </div>
                        <p><b>Ⅱ.What other jobs can you list?</b></p>
                        <p>____________________________________________</p>
                        <p><b>Ⅱ.What other jobs can you list?</b>
                            <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                    viewBox="0 0 20.501 20.501">
                                    <path class="a"
                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                                        transform="translate(-3327.144 15329)" />
                                </svg>
                            </span>
                        </p>
                        <p>
                            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
                            </textarea>
                        </p>
                        <div class="show-answer-box" v-if="showAnswerOne">
                            <div>答案:</div>
                            <div>
                                <img src="../../assets/images/M8WarmUp.png" alt="" class="w100" />
                            </div>
                        </div>
                    </div>

                </div>
                <div class="preface-bottom">
                    <span class="contet-num-box">136</span>
@@ -294,10 +180,22 @@
                <!-- 内容 -->
                <div class="padding-93">
                    <div class="bodystyle">
                        <h3 id="c065"><span class="bjh3">Listening</span></h3>
                        <p class="center"> <audio :src="resource.listenOne" controls
                                controlslist="noplaybackrate nodownload" class="audio" ></audio></p>
                        <p><b>Watch the video and find out how the speakers describe their jobs.</b></p>
                        <h3 id="c065" class="fl al-cn">
                            <span class="bjh3">Listening</span>
                            <!--controlslist="noplaybackrate nodownload"后面的音频框加入这个-->
                            <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio>
                        </h3>
                        <p><b>Watch the video and find out how the speakers describe their jobs.</b>
                            <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                    viewBox="0 0 20.501 20.501">
                                    <path class="a"
                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                                        transform="translate(-3327.144 15329)" />
                                </svg>
                            </span>
                        </p>
                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                            <tr class="table-th-bc">
                                <td class="tl-cn">Who is he/she?</td>
@@ -355,13 +253,60 @@
                                </td>
                            </tr>
                        </table>
                        <div class="show-answer-box" v-if="showAnswerTwo">
                            <div>答案:</div>
                            <div>
                                <img src="../../assets/images/M8ListeningOne.png" alt="" class="w100" />
                            </div>
                        </div>
                        <h3 id="c066"><span class="bjh3">Reading</span></h3>
                        <p>1.There is a saying that a part-time job can be a way to gain the experience necessary for
                            full-time employment.Do you agree? Why or why not?</p>
                        <p>2.If you’re considering a part-time job,what’s your expectation of it?</p>
                        <p class="center">__________________</p>
                            full-time employment.Do you agree? Why or why not?
                            <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                    viewBox="0 0 20.501 20.501">
                                    <path class="a"
                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                                        transform="translate(-3327.144 15329)" />
                                </svg>
                            </span>
                        </p>
                        <p>
                            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
                            </textarea>
                        </p>
                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
                            答案：(1).Gain confidence and responsibility &nbsp; (2).Explore alternate career options &nbsp; (3).Strengthen resume &nbsp;
                            (4).Develop work ethic skills &nbsp; (5).Create opportunities for socializing &nbsp; (6).Enhance communication skills &nbsp;
                            (7).Build networking opportunities &nbsp; (8).Gain independence &nbsp; (9).Get a stable cash flow &nbsp; (10).Learn money management skills &nbsp;
                        </p>
                        <p>2.If you’re considering a part-time job,what’s your expectation of it?
                            <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                    viewBox="0 0 20.501 20.501">
                                    <path class="a"
                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                                        transform="translate(-3327.144 15329)" />
                                </svg>
                            </span>
                        </p>
                        <p>
                            <textarea v-model="questionData.reading.three" placeholder="请输入内容" rows="6"
                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
                            </textarea>
                        </p>
                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
                            答案：(1).a good salary &nbsp; (2).a regular working time &nbsp; (3).a friendly working team &nbsp;
                            (4).comfortable working environment 
                            
                        </p>
                        <p class="center"> 
                            <input  type="text" class="input-bottom-border input-bc-t " style="width: 30%;"
                                        v-model="questionData.reading.four" @change="setBookQuestion" />
                        </p>
                        <p class="center"> <audio :src="resource.listenOne" controls
                                controlslist="noplaybackrate nodownload" class="audio" ></audio></p>
                                controlslist="noplaybackrate nodownload" class="audio"></audio></p>
                        <p>Everyone’s first job is special.There are a couple of reasons for this:the experience is
                            burned into one’s memory; it gives you the practice needed to
                            <span class="word-bc" @click="saveWord($event, 'fulfill')">fulfill</span>
@@ -437,9 +382,9 @@
                            <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
                            <span class="line-border-box"></span>
                        </p>
                        <p class="center"><audio :src="resource.readingTwo" controls
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
                               ></audio></p>
                        <p><audio :src="resource.readingTwo" controls
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
                                class="audio"></audio></p>
                        <p>fulfill /fʊlˈfɪl/ <i>v.</i> 符合；履行</p>
                        <div class="bkbj">
                            <p><i>to do or have what is required or necessary</i></p>
@@ -1094,8 +1039,8 @@
                        <p>2.What’s your suggestion for making the “right” career choice?</p>
                        <p class="center"><b>Choose a Career You Love</b></p>
                        <p class="center"><audio :src="resource.readingTwo" controls
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
                               ></audio></p>
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
                                class="audio"></audio></p>
                        <p>We spend a large
                            <span class="word-bc" @click="saveWord($event, 'portion')">portion</span>
                            of our lives working,so how we spend those years matters.It is
@@ -1177,7 +1122,7 @@
                            <span class="line-border-box"></span>
                        </p>
                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
                            style="margin-left: 10px" class="audio" ></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>
@@ -1607,8 +1552,8 @@
                        <h2 id="b031"><img class="img-0" alt="" src="../../assets/images/dy8-le3.jpg" /></h2>
                        <h3 id="c071"><span class="bjh3">Listening</span></h3>
                        <p class="center"> <audio :src="resource.readingTwo" controls
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
                                ></audio></p>
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
                                class="audio"></audio></p>
                        <p><b>Ⅰ.Derek is talking about his job interview.Listen to the recording and fill in the blanks
                                with what you hear.</b></p>
                        <p>Hi,everyone.I’m Derek Cruise.I landed a job interview the other day.It is a bank
@@ -1946,11 +1891,11 @@
                        <p><b>Role 1:Interviewer</b></p>
                        <p>1.Work with your partner and decide what questions you will ask during the
                            interview.2.Complete the worksheet for the interviewer.</p>
                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
                        <p class="center"></p>
                        <p><b>Role 2:Interviewee</b></p>
                        <p>1.Make a list of the information which might be useful in the interview.2.Finish the
                            follow-up email after the interview.</p>
                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" <p
                            class="center"></p>
                            <p><b>Role 2:Interviewee</b></p>
                            <p>1.Make a list of the information which might be useful in the interview.2.Finish the
                                follow-up email after the interview.</p>
                    </div>
                </div>
                <div class="preface-bottom">
@@ -2245,18 +2190,187 @@
    },
    data() {
        return {
            warmUp:[
            warmUp: [
                {
                    type: "fill",
                    isShowAnswer: false,
                    value: [
                        {
                            answer: 'fitness coach',
                            userAnswer: '',
                            isRight: null
                        },
                        {
                            answer: 'courier',
                            userAnswer: '',
                            isRight: null
                        },
                        {
                            answer: 'flight attendant',
                            userAnswer: '',
                            isRight: null
                        },
                        {
                            answer: 'sales representative',
                            userAnswer: '',
                            isRight: null
                        },
                        {
                            answer: 'cyberathlete',
                            userAnswer: '',
                            isRight: null
                        },
                        {
                            answer: 'machinist',
                            userAnswer: '',
                            isRight: null
                        },
                    ]
                },
            ],
            questionDataOn:[
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    

                }
                    value:[
                        {   
                            stem:"What job did the author take?",
                            answer:"Pulling out weeds",
                            userAnswer:"",
                        },
                        {
                            stem:"How did he describe his job?",
                            answer:"Tedious",
                            userAnswer:"",
                        },
                        {
                            stem:"What can be a proper title for this passage?",
                            answer:"My first job",
                            userAnswer:"",
                        },
                    ]
                },
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    value:[
                        {
                            userAnswer:"",
                        },
                        {   
                            userAnswer:"",
                        },
                        {   
                            userAnswer:"",
                        },
                        {
                            userAnswer:"",
                        },
                        {
                            userAnswer:"",
                        },
                    ]
                },
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    value:[
                        {   
                            answer:"I wanted to buy a new speed cube, but I did not have any money, and my parents would not give me the money.",
                            userAnswer:"",
                        },
                        {
                            answer:"The experience is burned in one's memory, it gives you the practice needed to fulfill other positions, and it teaches you about the value of money.",
                            userAnswer:"",
                        },
                        {
                            answer:"The experience hardened my spirits and resolve and supplied me with the value of money.",
                            userAnswer:"",
                        },
                        {
                            answer:"I went to Mrs. Hudson, and asked her for the work to tend her garden.",
                            userAnswer:"",
                        },
                        {
                            answer:"My first job was to pull out weeds.",
                            userAnswer:"",
                        },
                    ]
                },
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    value:[
                        {   
                            answer:"couple",
                            userAnswer:"",
                        },
                        {
                            answer:"elderly",
                            userAnswer:"",
                        },
                        {
                            answer:"neighborhood",
                            userAnswer:"",
                        },
                        {
                            answer:"tedious",
                            userAnswer:"",
                        },
                        {
                            answer:"value",
                            userAnswer:"",
                        },
                        {
                            answer:"sweat",
                            userAnswer:"",
                        },
                    ]
                },
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    value:[
                        {   
                            answer:"couple",
                            userAnswer:"",
                        },
                        {
                            answer:"elderly",
                            userAnswer:"",
                        },
                        {
                            answer:"neighborhood",
                            userAnswer:"",
                        },
                        {
                            answer:"tedious",
                            userAnswer:"",
                        },
                        {
                            answer:"value",
                            userAnswer:"",
                        },
                        {
                            answer:"sweat",
                            userAnswer:"",
                        },
                    ]
                },
            ],
            showAnswerOne: false,
            showAnswerTwo: false,
            showAnswerThree: false,
            showAnswerFour: false,
            imgThirteen: require("../../assets/images/grammar8-1.png"),
            imgThirteenOne: require("../../assets/images/grammar8-2.png"),
            correctIcon:require('@/assets/images/correct.svg'),
            errorIcon:require('@/assets/images/error.svg'),
            correctIcon: require('@/assets/images/correct.svg'),
            errorIcon: require('@/assets/images/error.svg'),
            showImg: false,
            showImgOne: false,
            rawData: {
@@ -2378,42 +2492,17 @@
                answerImg: require("../../assets/images/matching-one.png"),
            },
            questionData: {
                warnUp: {
                    one: {
                        value: "",
                        isRight: null,
                        answer: "Chinese knot",
                    },
                    two: {
                        value: "",
                        isRight: null,
                        answer: "Chinese medicine",
                    },
                    three: {
                        value: "",
                        isRight: null,
                        answer: "Chinese calligraphy",
                    },
                    four: {
                        value: "",
                        isRight: null,
                        answer: "Taichi",
                    },
                    five: {
                        value: "",
                        isRight: null,
                        answer: "sweet dumpling",
                    },
                    six: {
                        value: "",
                        isRight: null,
                        answer: "Chinese chess",
                    },
                    seven: "",
                },
                reading: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    eight: "",
                    nine: "",
                    ten: "",
                },
                table: {
                    one: "",
@@ -2550,10 +2639,10 @@
            
            listenThree:[
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    value:[
                    type: "fill",
                    isComplete: false,
                    isShowAnswer: false,
                    value: [
                        {
                            answer:'clerk',
                            userAnswer:'',
@@ -2791,13 +2880,38 @@

        };
    },
     mounted() {
         this.getPath();
    mounted() {
        const warmUp = localStorage.getItem("english-chapter-8-warmUp");
        if (warmUp) {
            this.warmUp = JSON.parse(warmUp);
        }
        const bookQuestion = localStorage.getItem("english-book-chapter08-question-one");
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
        }
        this.getPath();
    },
    methods: {
        handleWarmUp(type) {
            if (this.warmUp[0].value[type].userAnswer.trim()) {
                this.warmUp[0].value[type].isRight = this.warmUp[0].value[type].userAnswer.trim() == this.warmUp[0].value[type].answer
            } else {
                this.warmUp[0].value[type].isRight = null
            }
            this.setWarmUp();
        },
        setWarmUp() {
            localStorage.setItem("english-chapter-8-warmUp", JSON.stringify(this.warmUp));
        },
        setBookQuestion() {
            localStorage.setItem(
                "english-book-chapter08-question-one",
                JSON.stringify(this.questionData)
            );
        },
        arrayToString(data) {
            if(Array.isArray(data)) {
            return data.toString()
            if (Array.isArray(data)) {
                return data.toString()
            } else {
                return data
            }
@@ -2825,12 +2939,6 @@
        },
        setTestData() {
            localStorage.setItem("english-testOne", JSON.stringify(this.testData));
        },
        setBookQuestion() {
            localStorage.setItem(
                "english-book-question-one",
                JSON.stringify(this.questionData)
            );
        },
        async getPath() {
            this.resource.listenOne = await getResourcePath(