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

---
 src/books/English/view/components/chapter004.vue | 3980 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 3,752 insertions(+), 228 deletions(-)

diff --git a/src/books/English/view/components/chapter004.vue b/src/books/English/view/components/chapter004.vue
index 29f79bd..b6344e8 100644
--- a/src/books/English/view/components/chapter004.vue
+++ b/src/books/English/view/components/chapter004.vue
@@ -21,55 +21,2533 @@
             </div>
         </div>
         <!-- 59 -->
-        <!-- <div class="page-box" page="65">
+        <div class="page-box" page="65">
             <div v-if="showPageList.indexOf(65) > -1">
 
                 <ul class="preface-odd-header w100 fl ju-bt">
                     <li class=""></li>
                     <li class="fz-18">
-                        <span class="chapter-left-bc-unit3">MODULE 4</span>
-                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                        <span class="chapter-left-bc-unit4">MODULE 4</span>
+                        <span class="chapter-right-bc-unit4 fw-bl chapter-right-cl-unit4">A BETTER WORLD WITH
                             VOLUNTEERS</span>
                     </li>
                 </ul>
-            
+
                 <div class="padding-93">
-                    <div class="bodystyle"></div>
+                    <div class="bodystyle">
+                        <h2 id="b013"><img class="img-0" alt="" src="../../assets/images/dy4-le1.jpg" /></h2>
+                        <h3 id="c028"><span class="bjh3">Warm-up</span></h3>
+                        <p><b>鈪�.Put the expressions in the box below on the corresponding answer line under each
+                                picture.</b></p>
+                        <div class="bk-wh">
+                            <p>robot floor cleaner銆�self-balancing scooter銆�camera drone銆�smartwatch銆�fingerprint door
+                                lock銆�VR headset</p>
+                        </div>
+                        <ul class="fl fw-wr dropdown-box-one" >
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0069-1.jpg" /></p>
+                                <p class="center">1.
+                                    <select class="select-border" v-model="warmUp[0].value[0].userAnswer" @change="savewarmUp"
+                                        :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                        {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <img :src="warmUp[0].value[0].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </p>
+                            </li>
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0069-2.jpg" /></p>
+                                <p class="center">2.
+                                    <select class="select-border" v-model="warmUp[0].value[1].userAnswer" @change="savewarmUp"
+                                        :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                        {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <img :src="warmUp[0].value[1].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </p>
+                            </li>
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0069-3.jpg" /></p>
+                                <p class="center">3.
+                                    <select class="select-border" v-model="warmUp[0].value[2].userAnswer" @change="savewarmUp"
+                                        :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                        {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <img :src="warmUp[0].value[2].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </p>
+                            </li>
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0069-4.jpg" /></p>
+                                <p class="center">4.
+                                    <select class="select-border" v-model="warmUp[0].value[3].userAnswer" @change="savewarmUp"
+                                        :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                        {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <img :src="warmUp[0].value[3].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </p>
+                            </li>
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0069-5.jpg" /></p>
+                                <p class="center">5.
+                                    <select class="select-border" v-model="warmUp[0].value[4].userAnswer" @change="savewarmUp"
+                                        :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                        {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <img :src="warmUp[0].value[4].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </p>
+                            </li>
+                            <li>
+                                <p class="center"><img class="w80" alt="" src="../../assets/images/0069-6.jpg" /></p>
+                                <p class="center">6.
+                                    <select class="select-border" v-model="warmUp[0].value[5].userAnswer" @change="savewarmUp"
+                                        :disabled="warmUp[0].isComplete">
+                                        <option v-for="(item, index) in warmUp[0].options" :key="index" :value="item">
+                                        {{ item }}
+                                        </option>
+                                    </select>
+                                    <span class="icon-box" v-if="warmUp[0].isComplete">
+                                        <img :src="warmUp[0].value[5].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </p>
+                            </li>
+                        </ul>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="warmUp[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in warmUp[0].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{ item.answer }}
+                            </span>
+                        </div>
+                        <p><b>鈪�.Read the following descriptions of the items in the above pictures,and then put the
+                                number of the corresponding picture in the blanks.</b></p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-16">
+                            <tr>
+                                <td>1. It takes pictures of the world from the sky.</td>
+                                <td>
+                                    <input type="text" :disabled="warmUp[1].isComplete" v-model="warmUp[1].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="savewarmUp" style="width:80px"> 
+                                    <span class="icon-box" v-if="warmUp[1].isComplete">
+                                            <img :src="warmUp[1].value[0].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>2. It allows us to open the door with fingertips.</td>
+                                <td>
+                                    <input type="text" :disabled="warmUp[1].isComplete" v-model="warmUp[1].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="savewarmUp" style="width:80px"> 
+                                    <span class="icon-box" v-if="warmUp[1].isComplete">
+                                        <img :src="warmUp[1].value[1].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>3. It cleans the foor of your room.</td>
+                                <td>
+                                    <input type="text" :disabled="warmUp[1].isComplete" v-model="warmUp[1].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="savewarmUp" style="width:80px"> 
+                                    <span class="icon-box" v-if="warmUp[1].isComplete">
+                                        <img :src="warmUp[1].value[2].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>4. It allows you to experience amazing places of the world without leaving home.</td>
+                                <td>
+                                    <input type="text" :disabled="warmUp[1].isComplete" v-model="warmUp[1].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="savewarmUp" style="width:80px"> 
+                                    <span class="icon-box" v-if="warmUp[1].isComplete">
+                                        <img :src="warmUp[1].value[3].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>5. It works as your personal transporter, and takes you from one place to another.</td>
+                                <td>
+                                    <input type="text" :disabled="warmUp[1].isComplete" v-model="warmUp[1].value[4].userAnswer" class="input-bottom-border input-bc-t" @input="savewarmUp" style="width:80px"> 
+                                    <span class="icon-box" v-if="warmUp[1].isComplete">
+                                        <img :src="warmUp[1].value[4].isRight ? correctIcon : errorIcon" alt="">
+                                    </span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>6. It can not only tell time but also keep track of your ftness.</td>
+                                <td>
+                                    <input type="text" :disabled="warmUp[1].isComplete" v-model="warmUp[1].value[5].userAnswer" class="input-bottom-border input-bc-t" @input="savewarmUp" style="width:80px"> 
+                                    <span class="icon-box" v-if="warmUp[1].isComplete">
+                                        <svg v-if="warmUp[1].value[5].isRight" t="1716986419862" class="icon"
+                                            viewBox="0 0 1820 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                            <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="warmUp[1].value[5].isRight == false" t="1716987085767"
+                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                            xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                            <path
+                                                d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                fill="#d81e06" p-id="25746"></path>
+                                        </svg>
+                                    </span>
+                                </td>
+                            </tr>
+                        </table>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="warmUp[1].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in warmUp[1].value" :key="index" class="mr-20">
+                                {{ item.answer }}
+                            </span>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ev" style="width:80%">
+                                <li>
+                                <button class="btn-border btn-w" @click="handlewarmUp">
+                                    鎻愪氦
+                                </button>
+                                </li>
+                                <li>
+                                <button @click="recastwarmUp" class="btn-border btn-w">
+                                    閲嶅仛
+                                </button>
+                                </li>
+                                <li>
+                                <button @click="viewwarmUp" class="parimary-btn">
+                                    鏌ョ湅绛旀
+                                </button>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                 </div>
                 <div class="preface-bottom">
-                    <span class="contet-num-box">39</span>
+                    <span class="contet-num-box">59</span>
                 </div>
             </div>
-        </div> -->
+        </div>
         <!-- 60 -->
-        <!-- <div class="page-box" page="66">
+        <div class="page-box" page="66">
             <div v-if="showPageList.indexOf(66) > -1">
-        
+
                 <div class="w100 mb-20" style="padding-right: 20px">
-                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
-                        <div class="preface-header-box event-header-text-bc-unit3">
+                    <div class="event-header-bc-unit4 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit4">
                             <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
-                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                            <span class="g-text event-text-color-unit4">鍩虹妯″潡涓�</span>
                         </div>
                     </div>
                 </div>
 
                 <div class="padding-93">
-                    <div class="bodystyle"></div>
+                    <div class="bodystyle">
+                        <h3 id="c029" class="fl al-cn">
+                            <span class="bjh3">Listening</span>
+                            <!--controlslist="noplaybackrate nodownload"鍚庨潰鐨勯煶棰戞鍔犲叆杩欎釜-->
+                            <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio>
+                        </h3>
+
+                        <p><b>Listen to the conversation between Tony and Zhang Ping and match the sentence halves.</b>
+                        </p>
+                        <matching :rawData="rawData" :question="question"></matching>
+                        <h3 id="c030"><span class="bjh3">Reading</span></h3>
+                        <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload" class="audio"
+                            ></audio>
+                        <p>
+                            1.Technology is all around us.What images spring to your mind when you hear the word 鈥渞obot鈥�?
+                            <span class="btn-box" @click="showNoSubmitAnswer(0,0)">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
+                                <path class="a"
+                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                    transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p> 
+                        <textarea name="" id="" cols="30" rows="10" class="w100" v-model="noSubmitData[0].value[0].userAnswer" @input="saveNoSubmitData"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitData[0].value[0].isShowAnswer">
+                            <span>绛旀:</span>
+                            <p v-for="(item,index) in noSubmitData[0].value[0].answer" :key="index">
+                                {{index + 1}}) {{item}}
+                            </p>
+                        </div>
+                        <p>
+                            2.How can robots help humans today in daily life and work?
+                            <span class="btn-box" @click="showNoSubmitAnswer(0,1)">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
+                                <path class="a"
+                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                    transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea name="" id="" cols="30" rows="10" class="w100" v-model="noSubmitData[0].value[1].userAnswer" @input="saveNoSubmitData"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitData[0].value[1].isShowAnswer">
+                            <span>绛旀:</span>
+                            <p v-for="(item,index) in noSubmitData[0].value[1].answer" :key="index">
+                                {{index + 1}}) {{item}}
+                            </p>
+                        </div>
+                        <p class="center"><b>Robots in Action</b></p>
+                        <p class="center">
+                            <audio :src="resource.readingOne" controls controlslist="noplaybackrate nodownload"
+                                class="audio" ></audio>
+                        </p>
+                        <p>Robots are on the rise! Today they can be found working in hotels and stores.Machines will
+                            soon be used to study sea
+
+                            <span class="word-bc" @click="saveWord($event, 'creatures')">creatures</span>
+                            up close.These robots can
+                            <span class="word-bc" @click="saveWord($event, 'blend')">blend</span>
+                            blend right in with underwater
+                            <span class="word-bc" @click="saveWord($event, 'habitats')">habitats</span>
+                            .Robots take on tasks to make our life easier and safer.Scientists keep coming up
+                            with jobs that machines can do.Sometimes,the machines can do a better job than humans.Take a
+                            look at the latest robots.
+                        </p>
+                        <p><b>Super Swimmer</b></p>
+                        <p>The Octobot is perfectly named.Its design is based on the
+                            <span class="word-bc" @click="saveWord($event, 'octopus')">octopus</span>
+                            .The robot is the size of a
+                            shoebox.It can blend in with its underwater surroundings.The Octobot can travel at seven
+                            inches per second.That is close to the speed of an octopus.The Octobot moves through water
+                            by slowly opening its soft
+                            <span class="word-bc" @click="saveWord($event, 'rubber')">rubber</span>
+                            arms and then
+                            <span class="word-bc" @click="saveWord($event, 'snapping')"> snapping</span>
+                            them shut.During tests,fish swam
+                            alongside the Octobot.Researchers can use the robot to study sea creatures.
+                        </p>
+                        <p class="center"><img class="img-f" alt="" src="../../assets/images/0070-4.jpg" /></p>
+                    </div>
                 </div>
                 <div class="preface-bottom">
-                    <span class="contet-num-box">12</span>
+                    <span class="contet-num-box">60</span>
                 </div>
             </div>
-        </div> -->
+        </div>
+        <!-- 61 -->
+        <div class="page-box" page="67">
+            <div v-if="showPageList.indexOf(67) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit4">MODULE 4</span>
+                        <span class="chapter-right-bc-unit4 fw-bl chapter-right-cl-unit4">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p><b>See Spot Run</b></p>
+                        <p>Spot looks and moves much like a real dog.But don鈥檛 expect it to play
+                            <span class="word-bc" @click="saveWord($event, 'fetch')">fetch</span>
+                            .Boston Dynamics
+                            created the four-legged,160-pound
+                            <span class="word-bc" @click="saveWord($event, 'mechanical')">mechanical</span>
+                            dog.It can climb mountains.It can cross
+                            woods.It can go upstairs.Spot can also keep itself from falling over if it loses its
+                            <span class="word-bc" @click="saveWord($event, 'balance')">balance</span>
+                            .In the future,Spot may be used for search-and-
+                            <span class="word-bc" @click="saveWord($event, 'rescue')">rescue</span>
+                            <span class="word-bc" @click="saveWord($event, 'missions')">missions</span>
+                            and to carry heavy
+                            <span class="word-bc" @click="saveWord($event, 'facilities')">facilities</span>
+                            .
+                        </p>
+                        <p class="center"><img class="img-f" alt="" src="../../assets/images/0071-3.jpg" /></p>
+                        <p><b>Hotel Helper</b></p>
+                        <p class="center"><img class="img-f" alt="" src="../../assets/images/0071-2.jpg" /></p>
+                        <p>No towels? No problem! At the Crowne Plaza in the Dishuihu area of Shanghai,Mingo robot is on
+                            the job.The three-foot-tall robot has been making deliveries to guest rooms.When a guest
+                            asks for an item,a clerk places it in Mingo鈥檚
+                            <span class="word-bc" @click="saveWord($event, 'lid')">lid</span>
+                            and enters the room number onto a
+                            screen.Guests are always very excited when Mingo arrives with a delivery.
+                        </p>
+                        <p><b>Big in Japan</b></p>
+                        <p>In Japan,scientists are leading the way in creating
+                            <span class="word-bc" @click="saveWord($event, 'humanoid')">humanoid</span>
+                            robots.SoftBank introduced
+                            Pepper,a four-foot-tall robot who can talk with humans and
+                            <span class="word-bc" @click="saveWord($event, 'react')">react</span>
+                            to emotions.If you
+                            <span class="word-bc" @click="saveWord($event, 'frown')">frown</span>
+                            ,Pepper will try to cheer you up.The robot is being used in stores.But SoftBank has
+                            bigger plans for Pepper.It may one day keep humans
+                            <span class="word-bc" @click="saveWord($event, 'company')">company</span>
+                            and help teach children.
+                        </p>
+                        <p class="center"><img class="img-f" alt="" src="../../assets/images/0071-1.jpg" /></p>
+                        <p class="fl al-cn mt-40">
+                            <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
+                            <span class="line-border-box"></span>
+                        </p>
+                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" 
+                                class="audio"
+                            ></audio>
+                        <p>creature /藞kri藧t蕛蓹(r)/ <i>n.</i> 鐢熺墿锛涳紙灏ゆ寚锛� 鍔ㄧ墿</p>
+                        <div class="bkbj">
+                            <p><i>a living thing that can move around,such as an animal</i></p>
+                        </div>
+                        <p>blend /blend/ <i>v.</i> 铻嶅悎锛涘崗璋�</p>
+                        <div class="bkbj">
+                            <p><i>to mix harmoniously</i></p>
+                        </div>
+                        <p>habitat /藞h忙b瑟t忙t/ <i>n.</i> 鏍栨伅鍦�</p>
+                        <div class="bkbj">
+                            <p><i>the place where a particular type of animal or plant is normally found</i></p>
+                        </div>
+                        <p>octopus /藞蓲kt蓹p蓹s/ <i>n.</i> 绔犻奔</p>
+                        <div class="bkbj">
+                            <p><i>a sea creature with a soft round body and eight long muscular arms</i></p>
+                        </div>
+                        <p>rubber /藞r蕦b蓹(r)/ <i>n.</i> 姗¤兌</p>
+                        <div class="bkbj">
+                            <p><i>a strong,waterproof,elastic substance made from the juice of a tropical plant</i></p>
+                        </div>
+                        <p>snap /sn忙p/ <i>v.</i> 锛堜娇鍟湴锛� 鍏充笂锛涙墦寮�</p>
+                        <div class="bkbj">
+                            <p><i>to move sth.into a particular position quickly,esp.with a sudden sharp noise</i></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">61</span>
+                </div>
+            </div>
+        </div>
+        <!-- 62 -->
+        <div class="page-box" page="68">
+            <div v-if="showPageList.indexOf(68) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit4 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit4">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit4">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>fetch /fet蕛/ <i>n.</i> 鍘诲彇鍥�</p>
+                        <div class="bkbj">
+                            <p><i>an act of going for sth.and then bringing it back</i></p>
+                        </div>
+                        <p>mechanical /m蓹藞k忙n瑟kl/ <i>adj.</i> 鏈烘鐨勶紱鏈哄櫒鐨�</p>
+                        <div class="bkbj">
+                            <p><i>operated by power from an engine</i></p>
+                        </div>
+                        <p>balance /藞b忙l蓹ns/ <i>n.</i> 骞宠 </p>
+                        <div class="bkbj">
+                            <p><i>even distribution of weight</i></p>
+                        </div>
+                        <p>rescue /藞reskju藧/ <i>n.</i> 鏁戞彺锛涜惀鏁�</p>
+                        <div class="bkbj">
+                            <p><i>the act of saving sb./sth.from a dangerous or difficult situation</i></p>
+                        </div>
+                        <p>mission /藞m瑟蕛n/ <i>n.</i> 浠诲姟锛涗娇鍛�</p>
+                        <div class="bkbj">
+                            <p><i>an important official job that a person or group of people is given to do</i></p>
+                        </div>
+                        <p>facility /f蓹藞s瑟l蓹ti/ <i>n.</i> 璁惧锛涜鏂�</p>
+                        <div class="bkbj">
+                            <p><i>equipment,buildings,services,etc.that are provided for a particular purpose</i></p>
+                        </div>
+                        <p>lid /l瑟d/ <i>n.</i> 鐩栧瓙</p>
+                        <div class="bkbj">
+                            <p><i>a cover over a container that can be removed or opened by turning it or lifting it</i>
+                            </p>
+                        </div>
+                        <p>humanoid /藞hju藧m蓹n蓴瑟d/ <i>adj.</i> 鍍忎汉鐨勶紱浠夸汉鐨�</p>
+                        <div class="bkbj">
+                            <p><i>behaving and looking like a human being</i></p>
+                        </div>
+                        <p>react /ri藞忙kt/ <i>v.</i> 鍥炲簲锛涜捣鍙嶅簲</p>
+                        <div class="bkbj">
+                            <p><i>to behave in a particular way as a result of or in response to sth.</i></p>
+                        </div>
+                        <p>frown /fra蕣n/ <i>v.</i> 鐨辩湁锛涜箼棰�</p>
+                        <div class="bkbj">
+                            <p><i>to make a serious,angry or worried expression by bringing your eyebrows closer
+                                    together</i></p>
+                        </div>
+                        <p>company /藞k蕦mp蓹ni/ <i>n.</i> 闄即锛涘仛浼�</p>
+                        <div class="bkbj">
+                            <p><i>the fact of being with sb.else and not alone</i></p>
+                        </div>
+                        <p>in action 鍦ㄦ椿鍔紱鍦ㄨ繍杞�</p>
+                        <p>blend in (with sth.) 涓庯紙鏌愮墿锛� 鍗佸垎鍗忚皟</p>
+                        <p>on the job 鍦ㄥ矖锛涘湪宸ヤ綔</p>
+                        <p>on the rise 涓庢棩淇卞</p>
+                        <p>cheer sb.up 锛堜娇鏌愪汉锛� 鏇撮珮鍏存垨鏇村揩娲�</p>
+                        <p><b>鈪�.Reading comprehension.</b></p>
+                        <p>A.Read the passage and complete the summary.</p>
+                        <p>Nowadays,there has been a rapid increase in the use of robots in different areas.They make
+                            people鈥檚 lives 1.
+                            <input type="text" :disabled="readingOne[0].isComplete" v-model="readingOne[0].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <span class="icon-box" v-if="readingOne[0].isComplete">
+                                <img :src="readingOne[0].value[0].isRight ? correctIcon : errorIcon" alt="">
+                            </span>
+                            .Sometimes,machines can perform better than humans.There are four
+                            examples of the latest robots.Octobot is designed to study 2.
+                            <input type="text" :disabled="readingOne[0].isComplete" v-model="readingOne[0].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <span class="icon-box" v-if="readingOne[0].isComplete">
+                                <img :src="readingOne[0].value[1].isRight ? correctIcon : errorIcon" alt="">
+                            </span>
+                            ,which can blend in
+                            with its underwater surroundings.Spot is a mechanical dog which may</p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">62</span>
+                </div>
+            </div>
+        </div>
+        <!-- 63 -->
+        <div class="page-box" page="69">
+            <div v-if="showPageList.indexOf(69) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit4">MODULE 4</span>
+                        <span class="chapter-right-bc-unit4 fw-bl chapter-right-cl-unit4">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p> be used for 3.
+                            <input type="text" :disabled="readingOne[0].isComplete" v-model="readingOne[0].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <span class="icon-box" v-if="readingOne[0].isComplete">
+                                <img :src="readingOne[0].value[2].isRight ? correctIcon : errorIcon" alt="">
+                            </span>
+                            missions.Mingo could be found in hotels making 4.
+                            <input type="text" :disabled="readingOne[0].isComplete" v-model="readingOne[0].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <span class="icon-box" v-if="readingOne[0].isComplete">
+                                <img :src="readingOne[0].value[3].isRight ? correctIcon : errorIcon" alt="">
+                            </span>
+                            .A humanoid
+                            robot Pepper has been created to communicate with humans and react to 5.
+                            <input type="text" :disabled="readingOne[0].isComplete" v-model="readingOne[0].value[4].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <span class="icon-box" v-if="readingOne[0].isComplete">
+                                <img :src="readingOne[0].value[4].isRight ? correctIcon : errorIcon" alt="">
+                            </span>
+                        .</p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="readingOne[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in readingOne[0].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{  item.answer }}
+                            </span>
+                        </div>
+                        <p>B.Match the four types of robots introduced in the passage with the descriptions below.</p>
+                        <!-- <p class="center"><img class="img-a" alt="" src="../../assets/images/0073-1.jpg" /></p> -->
+                            <ul class="choice-select">
+                                <!-- <li >
+                                    <span>{{item}}</span>
+                                    <dropdown :options="readingOne[1].option" @changeDropdownData="index == 0 ? changeDropdownDataOne : index == 1 ? changeDropdownDataTwo : index == 2 ? changeDropdownDataThree : changeDropdownDataFour "></dropdown>
+                                    <img :src="readingOne[1].value.isRight ? correctIcon : errorIcon" alt="" v-if="readingOne[1].isComplete">
+                                </li> -->
+                                <li>
+                                    <span>Pepper</span>
+                                     <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataOne" ref="choiceDropdownOne"></dropdown>
+                                    <img :src="readingOne[1].value[0].isRight ? correctIcon : errorIcon" alt="" v-if="readingOne[1].isComplete">
+                                </li>
+                                <li>
+                                    <span>Spot</span>
+                                    <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataTwo" ref="choiceDropdownTwo"></dropdown>
+                                    <img :src="readingOne[1].value[1].isRight ? correctIcon : errorIcon" alt="" v-if="readingOne[1].isComplete">
+                                </li>
+                                <li>
+                                    <span>Mingo</span>
+                                    <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataThree" ref="choiceDropdownThree"></dropdown>
+                                    <img :src="readingOne[1].value[2].isRight ? correctIcon : errorIcon" alt="" v-if="readingOne[1].isComplete">
+                                </li>
+                                <li>
+                                    <span>Octobot</span>
+                                    <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataFour" ref="choiceDropdownFour"></dropdown>
+                                    <img :src="readingOne[1].value[3].isRight ? correctIcon : errorIcon" alt="" v-if="readingOne[1].isComplete">
+                                </li>
+                            </ul>
+                            <div class="event-header-text-bc pd-5 w100 mt-20"
+                                v-if="readingOne[1].isShowAnswer">
+                                <span>绛旀锛�</span>
+                                <span v-for="(item,index) in readingOne[1].value" :key="index" class="mr-20">
+                                    {{index + 1}}.{{  arrayToString(item.answer) }}
+                                </span>
+                            </div>
+                        <!-- <p>1. It moves like a real dog.</p>
+                        <p>2. It could be found in stores.</p>
+                        <p>3. It is the size of a shoebox.</p>
+                        <p>4. It can carry heavy facilities.</p>
+                        <p>5. It will cheer you up if you frown.</p>
+                        <p>6. It can bring guests small items to their rooms.</p>
+                        <p>7. It's about three-foot-tall with a screen on the top.</p>
+                        <p>8. It travels close to the speed of an octopus in the water.</p> -->
+                        <p><b>鈪�.Language focus.</b></p>
+                        <p>A.Fill in the blanks with the proper form of the words given below.</p>
+                        <div class="bk-wh">
+                            <p>facility銆�mission銆�mechanical銆�habitat銆�creature銆�react</p>
+                        </div>
+                        <p>1.This jellyfish looks like a 
+                            <input type="text" :disabled="readingOne[2].isComplete" v-model="readingOne[2].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[2].value[0].isRight ? correctIcon : errorIcon"  v-if="readingOne[2].isComplete">
+                            from outer space.</p>
+                        <p>2.The giant panda 
+                            <input type="text" :disabled="readingOne[2].isComplete" v-model="readingOne[2].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[2].value[1].isRight ? correctIcon : errorIcon"  v-if="readingOne[2].isComplete">
+                            is commonly known as a bamboo forest.</p>
+                        <p>3.China launched its first manned space 
+                            <input type="text" :disabled="readingOne[2].isComplete" v-model="readingOne[2].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[2].value[2].isRight ? correctIcon : errorIcon"  v-if="readingOne[2].isComplete">
+                            in 2003.</p>
+                        <p>4.E-Theatre is equipped with state-of-the-art audio and video 
+                            <input type="text" :disabled="readingOne[2].isComplete" v-model="readingOne[2].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[2].value[3].isRight ? correctIcon : errorIcon"  v-if="readingOne[2].isComplete">
+                            .</p>
+                        <p>5.Research shows that video games can help us think and 
+                            <input type="text" :disabled="readingOne[2].isComplete" v-model="readingOne[2].value[4].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[2].value[4].isRight ? correctIcon : errorIcon"  v-if="readingOne[2].isComplete">
+                            faster.</p>
+                        <p>6.Our company has over 10 years of experience in the field of 
+                            <input type="text" :disabled="readingOne[2].isComplete" v-model="readingOne[2].value[5].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[2].value[5].isRight ? correctIcon : errorIcon"  v-if="readingOne[2].isComplete">
+                            engineering.</p>
+                        <p>B.Choose the correct preposition or adverb.</p>
+                        <p>1.I have not yet seen the machines 
+                            <input type="text" :disabled="readingOne[3].isComplete" v-model="readingOne[3].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[3].value[0].isRight ? correctIcon : errorIcon"  v-if="readingOne[3].isComplete">
+                            (<i>in / into</i>) action.</p>
+                        <p>2.Technology is 
+                            <input type="text" :disabled="readingOne[3].isComplete" v-model="readingOne[3].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[3].value[1].isRight ? correctIcon : errorIcon"  v-if="readingOne[3].isComplete">
+                            (<i>off / on</i>) the rise more than ever before.</p>
+                        <p>3.The secretary is not willing to take 
+                            <input type="text" :disabled="readingOne[3].isComplete" v-model="readingOne[3].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[3].value[2].isRight ? correctIcon : errorIcon"  v-if="readingOne[3].isComplete">
+                            (<i>up / on</i>) any extra work.
+                        </p>
+                        <p>4.Employees are not allowed to smoke while 
+                            <input type="text" :disabled="readingOne[3].isComplete" v-model="readingOne[3].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[3].value[3].isRight ? correctIcon : errorIcon"  v-if="readingOne[3].isComplete">
+                            (<i>on / in</i>) the job.</p>
+                        <p>5.I don鈥檛 know how to cheer him 
+                            <input type="text" :disabled="readingOne[3].isComplete" v-model="readingOne[3].value[4].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:80px"> 
+                            <img :src="readingOne[3].value[4].isRight ? correctIcon : errorIcon"  v-if="readingOne[3].isComplete">
+                            (<i>up / on</i>) when he found the
+                            project was a total failure.
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="readingOne[3].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in readingOne[3].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{  item.answer }}
+                            </span>
+                        </div>
+                        <p>C.Translate the following sentences into Chinese.</p>
+                        <p>1.While riding your scooter,you should keep your body in balance.
+                            <img :src="readingOne[4].value[0].isRight ? correctIcon : errorIcon"  v-if="readingOne[4].isComplete">
+                        </p>
+                        <p>
+                            <input type="text" :disabled="readingOne[4].isComplete" v-model="readingOne[4].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne"> 
+                        </p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">63</span>
+                </div>
+            </div>
+        </div>
+        <!-- 64 -->
+        <div class="page-box" page="70">
+            <div v-if="showPageList.indexOf(70) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit4 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit4">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit4">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>2.The task of the robot is to serve the technicians on the site by fetching supplies from a
+                            central store.
+                            <img :src="readingOne[4].value[1].isRight ? correctIcon : errorIcon"  v-if="readingOne[4].isComplete">
+                        </p>
+                        <p>
+                            <input type="text" :disabled="readingOne[4].isComplete" v-model="readingOne[4].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne">
+                        </p>
+                        <p>3.Not only does our team have professional equipment,but they also have a great amount of
+                            rescue experience.
+                            <img :src="readingOne[4].value[2].isRight ? correctIcon : errorIcon"  v-if="readingOne[4].isComplete">
+                        </p>
+                        <p>
+                            <input type="text" :disabled="readingOne[4].isComplete" v-model="readingOne[4].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne">
+                        </p>
+                        <p>4.Food processors are great tools for blending vegetables and fruits.
+                            <img :src="readingOne[4].value[3].isRight ? correctIcon : errorIcon"  v-if="readingOne[4].isComplete">
+                        </p>
+                        <p>
+                            <input type="text" :disabled="readingOne[4].isComplete" v-model="readingOne[4].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="readingOne[4].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in readingOne[4].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{  item.answer }}
+                            </span>
+                        </div>
+                        <p><b>鈪�.Grammar focus:The comparative degree.</b>
+                            <span class="btn-box" @click="showAnswer('showImg')">
+                                <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="30864"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M387.2 471.152l-154.768 258.72v103.488h515.792V626.384l-149.12 103.488z m283.712-51.744a77.632 77.632 0 1 0 77.392 77.616 77.504 77.504 0 0 0-77.472-77.616zM640 0H160.72A96.736 96.736 0 0 0 64 96.72V927.36a96.736 96.736 0 0 0 96.72 96.64h702.56A96.704 96.704 0 0 0 960 927.36V298.016z m7.808 94.736l226.544 211.008h-146.544a80.08 80.08 0 0 1-80-80zM896 927.36a32.688 32.688 0 0 1-32.72 32.64h-702.56A32.704 32.704 0 0 1 128 927.36V96.72A32.752 32.752 0 0 1 160.72 64l423.088 0.384v161.44a144.176 144.176 0 0 0 144 143.92H896z"
+                                        p-id="30865"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <div class="openImgBox" v-if="showImg">
+                            <img class="w100" :src="imgThirteen" />
+                        </div>
+                        <p>A.Write the comparative form for each word below.</p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff;margin:0 auto" class="fz-14">
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf" style="width: 33%;">
+                                    l. often 鈫�
+                                    <input :disabled="readingOne[5].isComplete"
+                                        type="text" class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingOne[5].value[0].userAnswer" @change="saveReadingOne" />
+                                    <img :src="readingOne[5].value[0].isRight ? correctIcon : errorIcon"  v-if="readingOne[5].isComplete">
+                                </td>
+                                <td class="tl-lf" style="width: 33%;">2. go0d 鈫�<input :disabled="readingOne[5].isComplete"
+                                        type="text" class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingOne[5].value[1].userAnswer" @change="saveReadingOne" />
+                                    <img :src="readingOne[5].value[1].isRight ? correctIcon : errorIcon"  v-if="readingOne[5].isComplete">
+                                </td>
+                                <td class="tl-lf" style="width: 33%;">3. bad 鈫�<input :disabled="readingOne[5].isComplete"
+                                        type="text" class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingOne[5].value[2].userAnswer" @change="saveReadingOne" />
+                                        <img :src="readingOne[5].value[2].isRight ? correctIcon : errorIcon"  v-if="readingOne[5].isComplete">
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc ">
+                                <td class="tl-lf">4. early 鈫�<input :disabled="readingOne[5].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingOne[5].value[3].userAnswer" @change="saveReadingOne" />
+                                    <img :src="readingOne[5].value[3].isRight ? correctIcon : errorIcon"  v-if="readingOne[5].isComplete">
+                                </td>
+                                <td class="tl-lf">5. heavy 鈫�<input :disabled="readingOne[5].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingOne[5].value[4].userAnswer" @change="saveReadingOne" />
+                                    <img :src="readingOne[5].value[4].isRight ? correctIcon : errorIcon"  v-if="readingOne[5].isComplete">
+                                </td>
+                                <td class="tl-lf">6. late 鈫�<input :disabled="readingOne[5].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingOne[5].value[5].userAnswer" @change="saveReadingOne" />
+                                    <img :src="readingOne[5].value[5].isRight ? correctIcon : errorIcon"  v-if="readingOne[5].isComplete">
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-lf">7. dangerous 鈫�<input :disabled="readingOne[5].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingOne[5].value[6].userAnswer" @change="saveReadingOne" />
+                                    <img :src="readingOne[5].value[6].isRight ? correctIcon : errorIcon"  v-if="readingOne[5].isComplete">
+                                </td>
+                                <td class="tl-lf">8. thin 鈫�<input :disabled="readingOne[5].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingOne[5].value[7].userAnswer" @change="saveReadingOne" />
+                                    <img :src="readingOne[5].value[7].isRight ? correctIcon : errorIcon"  v-if="readingOne[5].isComplete">
+                                </td>
+                                <td class="tl-lf">9. far 鈫�<input :disabled="readingOne[5].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingOne[5].value[8].userAnswer" @change="saveReadingOne" />
+                                    <img :src="readingOne[5].value[8].isRight ? correctIcon : errorIcon"  v-if="readingOne[5].isComplete">
+                                </td>
+                            </tr>
+                        </table>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="readingOne[5].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in readingOne[5].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{  arrayToString(item.answer)  }}
+                            </span>
+                        </div>
+                        <p>B.Fill in the blanks with the correct comparatives from the above.</p>
+                        <p>1.The new car model may be launched 
+                            <input type="text" :disabled="readingOne[6].isComplete" v-model="readingOne[6].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:86px">
+                            <img :src="readingOne[6].value[0].isRight ? correctIcon : errorIcon"  v-if="readingOne[6].isComplete">
+                            than expected.</p>
+                        <p>2.The higher we go above the earth,the 
+                            <input type="text" :disabled="readingOne[6].isComplete" v-model="readingOne[6].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:86px">
+                            <img :src="readingOne[6].value[1].isRight ? correctIcon : errorIcon"  v-if="readingOne[6].isComplete">
+                            the air is.</p>
+                        <p>3.What you plant now,you will harvest 
+                            <input type="text" :disabled="readingOne[6].isComplete" v-model="readingOne[6].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:86px">
+                            <img :src="readingOne[6].value[2].isRight ? correctIcon : errorIcon"  v-if="readingOne[6].isComplete">
+                            .</p>
+                        <p>4.People come online 
+                            <input type="text" :disabled="readingOne[6].isComplete" v-model="readingOne[6].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:86px">
+                            <img :src="readingOne[6].value[3].isRight ? correctIcon : errorIcon"  v-if="readingOne[6].isComplete">
+                            with smartphones than with any other device.</p>
+                        <p>5.The big ball is 
+                            <input type="text" :disabled="readingOne[6].isComplete" v-model="readingOne[6].value[4].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:86px">
+                            <img :src="readingOne[6].value[4].isRight ? correctIcon : errorIcon"  v-if="readingOne[6].isComplete">
+                            than the small ball.</p>
+                        <p>6.In fact,the summer heat is 
+                            <input type="text" :disabled="readingOne[6].isComplete" v-model="readingOne[6].value[5].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:86px">
+                            <img :src="readingOne[6].value[5].isRight ? correctIcon : errorIcon"  v-if="readingOne[6].isComplete">
+                            than lightning.</p>
+                        <p>7.Our mission is to create a/an 
+                            <input type="text" :disabled="readingOne[6].isComplete" v-model="readingOne[6].value[6].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:86px">
+                            <img :src="readingOne[6].value[6].isRight ? correctIcon : errorIcon"  v-if="readingOne[6].isComplete">
+                            everyday life for the many people.</p>
+                        <p>8.I wanted to discuss it 
+                            <input type="text" :disabled="readingOne[6].isComplete" v-model="readingOne[6].value[7].userAnswer" class="input-bottom-border input-bc-t" @input="saveReadingOne" style="width:86px">
+                            <img :src="readingOne[6].value[7].isRight ? correctIcon : errorIcon"  v-if="readingOne[6].isComplete">
+                            ,but we didn鈥檛 have time.
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20"
+                            v-if="readingOne[6].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in readingOne[6].value" :key="index" class="mr-20">
+                                {{index + 1}}.{{  item.answer }}
+                            </span>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ev" style="width:80%">
+                                <li>
+                                <button class="btn-border btn-w" @click="handleReadingOne">
+                                    鎻愪氦
+                                </button>
+                                </li>
+                                <li>
+                                <button @click="recastReadingOne" class="btn-border btn-w">
+                                    閲嶅仛
+                                </button>
+                                </li>
+                                <li>
+                                <button @click="viewReadingOne" class="parimary-btn">
+                                    鏌ョ湅绛旀
+                                </button>
+                                </li>
+                            </ul>
+                        </div>
+                        <h3 id="c031"><span class="bjh3">Mini-project</span></h3>
+                        <p>Robots play a bigger role in our life than ever before.Discuss the following questions with
+                            your partner.Afterwards,share your thoughts in class.</p>
+                        <div class="fieldset">
+                            <p>Questions:1.What are the differences between humanoid robots and human beings?</p>
+                            <p>銆�銆�銆�2.List the things that robots can鈥檛 do but humans can.</p>
+                            <p>銆�銆�銆�3.If you could design your own robot,what functions would you expect of it?</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">64</span>
+                </div>
+            </div>
+        </div>
+        <!-- 65 -->
+        <div class="page-box" page="71">
+            <div v-if="showPageList.indexOf(71) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit4">MODULE 4</span>
+                        <span class="chapter-right-bc-unit4 fw-bl chapter-right-cl-unit4">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn table-th-bc">The differences between humanoid robotsand human beings
+                                </td>
+                                <td class="tl-lf">
+                                    <p class="table-p">l. Humans are organic beings, yhile robots are not.</p>
+                                    <p class="fl al-cn">
+                                        2.
+                                        <input v-model="noSubmitData[1].value[0].userAnswer" 
+                                            class="w100 input-bottom-border input-bc-t" @change="saveNoSubmitData" />
+                                    </p>
+                                    <p class="fl al-cn">
+                                        3.
+                                        <input v-model="noSubmitData[1].value[1].userAnswer" 
+                                            class="w100 input-bottom-border input-bc-t" @change="saveNoSubmitData" />
+                                    </p>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn table-th-bc">
+                                    The things that robots can't do but humans
+                                </td>
+                                <td>
+                                    <p class="table-p">1. Do creative work.</p>
+                                    <p class="fl al-cn">
+                                        2.
+                                        <input v-model="noSubmitData[1].value[2].userAnswer" 
+                                            class="w100 input-bottom-border input-bc-t" @change="saveNoSubmitData" />
+                                    </p>
+                                    <p class="fl al-cn">
+                                        3.
+                                        <input v-model="noSubmitData[1].value[3].userAnswer" 
+                                            class="w100 input-bottom-border input-bc-t" @change="saveNoSubmitData" />
+                                    </p>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn table-th-bc">
+                                    The functions of your designed robot
+                                </td>
+                                <td>
+                                    <p class="table-p">1. Fold clothes for you.</p>
+                                    <p class="fl al-cn">
+                                        2.
+                                        <input v-model="noSubmitData[1].value[4].userAnswer" 
+                                            class="w100 input-bottom-border input-bc-t" @change="saveNoSubmitData" />
+                                    </p>
+                                    <p class="fl al-cn">
+                                        3.
+                                        <input v-model="noSubmitData[1].value[5].userAnswer" 
+                                            class="w100 input-bottom-border input-bc-t" @change="saveNoSubmitData" />
+                                    </p>
+                                </td>
+                            </tr>
+                        </table>
+                        <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, 'physical')">physical</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'complex')">complex</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'social')">social</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'relationship')">relationship</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'feeling')">feeling</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'emotion')">emotion</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'empathy')">empathy</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'thought')">thought</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'tireless')">tireless</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'creative')">creative</span>
+                            </p>
+                            <p>銆�銆�銆�銆�銆�銆�銆�銆�銆�
+                            </p>
+                        </div>
+                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
+                            <div class="banshi openImgBox">
+                                <div class="swiper-container swiper_ppt">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_01.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_02.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_03.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_04.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_05.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_06.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_07.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_08.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_09.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_10.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_11.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_12.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_13.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_14.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_15.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_16.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_17.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_18.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_19.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_20.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_21.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_22.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_23.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_24.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_25.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_26.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_27.png" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="swiper-button-next"></div>
+                                    <div class="swiper-button-prev"></div>
+                                    <div class="pageBox"></div>
+                                </div>
+                                <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->
+                            </div>
+                        </div>
+                        <h2 id="b014"><img class="img-0" alt="" src="../../assets/images/dy4-le2.jpg" /></h2>
+                        <h3 id="c032"><span class="bjh3">Warm-up</span></h3>
+                        <p><b>Work in groups and ask your group members about their interest in science,and then report
+                                your findings to the class.</b></p>
+                        <div class="fieldset-1">
+                            <p class="center"><b>Interest in Science</b></p>
+                            <ul>
+                               <li v-for="(item,index) in noSubmitData[2].value.slice(0,2)" :key="index">
+                                <p>
+                                    {{index + 1}}.{{item.stem}}
+                                    <img :src="item.isRight ? correctIcon : errorIcon"  v-if="noSubmitData[2].isComplete">
+                                </p>
+                                
+                                <p v-for="(citem,cindex) in item.option" :key="cindex">
+                                    <input type="checkbox" 
+                                        :value="citem" 
+                                        :name="item.stem" 
+                                        v-model="item.userAnswer" 
+                                        :disabled="noSubmitData[2].isComplete"
+                                        @change="saveNoSubmitData"
+                                    >
+                                    {{citem}}
+                                </p>
+                               </li> 
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">65</span>
+                </div>
+            </div>
+        </div>
+        <!-- 66 -->
+        <div class="page-box" page="72">
+            <div v-if="showPageList.indexOf(72) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit4 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit4">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit4">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <div class="fieldset-1">
+                            <ul>
+                               <li v-for="(item,index) in noSubmitData[2].value.slice(2,5)" :key="index">
+                                <p>
+                                    {{index + 3}}.{{item.stem}}
+                                    <img :src="item.isRight ? correctIcon : errorIcon"  v-if="noSubmitData[2].isComplete">
+                                </p>
+                                
+                                <p v-for="(citem,cindex) in item.option" :key="cindex">
+                                    <input type="checkbox" :value="citem" :name="item.stem" v-model="item.userAnswer" :disabled="noSubmitData[2].isComplete" @change="saveNoSubmitData">
+                                    {{citem}}
+                                </p>
+                               </li> 
+                            </ul>
+                        </div>
+                        <p>You may start your survey report with the following expressions:</p>
+                        <p><i>Most students seem</i>鈥�</p>
+                        <p><i>It appears that most students</i>鈥�</p>
+                        <p><i>What surprised me is that</i>鈥�</p>
+                        <textarea name="" id="" cols="30" rows="10" class="w100" v-model="noSubmitData[3].value[0].userAnswer" @change="saveNoSubmitData"></textarea>
+                        <h3 id="c033"><span class="bjh3">Reading</span></h3>
+                        <p>1.Are you amazed by the stars in the night sky,wondering what brought life into existence?
+                            <span class="btn-box" @click="showNoSubmitAnswer(3,1)">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
+                                <path class="a"
+                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                    transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea name="" id="" cols="30" rows="10" class="w100" v-model="noSubmitData[3].value[1].userAnswer" @change="saveNoSubmitData"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitData[3].value[1].isShowAnswer">
+                            <span>绛旀锛歿{noSubmitData[3].value[1].answer}}</span>
+                        </div>
+                        <p>2.What is your dream about space exploration?
+                            <span class="btn-box" @click="showNoSubmitAnswer(3,2)">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
+                                <path class="a"
+                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                    transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea name="" id="" cols="30" rows="10" class="w100" v-model="noSubmitData[3].value[2].userAnswer" @change="saveNoSubmitData"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitData[3].value[2].isShowAnswer">
+                            <span>绛旀:</span>
+                            <p v-for="(item,index) in noSubmitData[3].value[2].answer" :key="index">
+                                {{index + 1}}) {{item}}
+                            </p>
+                        </div>
+                        <p class="center"><b>Fresh Face of Science</b></p>
+                        <p class="center">
+                             <audio :src="resource.readingThree" controls
+                                controlslist="noplaybackrate nodownload" class="audio" ></audio></p>
+                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0076-2.jpg" /></p>
+                        <p>According to Zhao Hongzhou,founder of China鈥檚
+                            <span class="word-bc" @click="saveWord($event, 'scientometrics')">scientometrics</span>
+                            ,scientists typically make their
+                            biggest achievements between the ages of 25 and 45,which is true of the scientists and
+                            engineers working on FAST(Five-hundred-meter Aperture Spherical
+                            <span class="word-bc" @click="saveWord($event, 'Telescope')">Telescope</span>
+                            ).Its engineering
+                            and operation team has an average age of 39,while its on-site team has an average age of
+                            30.Meanwhile,the scientific spirit these young scientists have shown is also moving.
+                        </p>
+                        <p>As the world鈥檚 largest radio telescope,it has been </p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">66</span>
+                </div>
+            </div>
+        </div>
+        <!-- 67 -->
+        <div class="page-box" page="73">
+            <div v-if="showPageList.indexOf(73) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit4">MODULE 4</span>
+                        <span class="chapter-right-bc-unit4 fw-bl chapter-right-cl-unit4">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>quite helpful in the discovery of around 340
+                            <span class="word-bc" @click="saveWord($event, 'pulsars')">pulsars</span>
+                            ,since becoming operational in September
+                            2016.It has also contributed to helping human beings better understand the
+                            <span class="word-bc" @click="saveWord($event, 'origin')">origin</span>
+                            of fast radio
+                            <span class="word-bc" @click="saveWord($event, 'bursts')">bursts</span>
+                            ,extremely brief but powerful flashes in the
+                            <span class="word-bc" @click="saveWord($event, 'universe')">universe</span>
+                            .FAST was listed by the journals
+                            <i>Nature</i> and<i> Science</i> as one of the biggest scientific discoveries of 2020.
+                        </p>
+                        <p>The construction of FAST pushed the team to its physical and
+                            <span class="word-bc" @click="saveWord($event, 'intellectual')">intellectual </span>
+                            limits,including
+                            creating new systems to operate the telescope,also known as the 鈥淪ky Eye鈥�.At the age of
+                            28,Yao Rui,a researcher behind FAST鈥檚 feed
+                            <span class="word-bc" @click="saveWord($event, 'cabin')">cabin</span>
+                            ,was responsible for creating the 鈥�
+                            <span class="word-bc" @click="saveWord($event, 'pupil')">pupil</span>鈥� of
+                            the 鈥淪ky Eye鈥� after joining the team.Some of her most challenging tasks involved downsizing
+                            the cabin鈥檚 weight from 34 to 30 tons,while keeping most of the systems inside and leaving
+                            enough room to fill it with as much
+                            <span class="word-bc" @click="saveWord($event, 'complex')">complex</span>
+                            and sensitive equipment as possible.Yao鈥檚
+                            solution was to change the shape of the cabin to a
+                            <span class="word-bc" @click="saveWord($event, 'diamond')">diamond</span>
+                            structure.The redesign was
+                            <span class="word-bc" @click="saveWord($event, 'daring')">daring</span>
+                            ,but later testing proved that it worked perfectly.鈥淚鈥檓 not worried about
+                            problems,because wherever there is a problem,there is a chance for further research,鈥� she
+                            said.鈥淎s a young scientist,I am lucky to associate my personal passions with the needs of
+                            the nation,so I can improve and grow together with the country.鈥�
+                        </p>
+                        <p>Sun Jinghai,a 38-year-old researcher of FAST,was involved in perfecting and protecting the
+                            giant machine.Nan Rendong,FAST鈥檚 former chief scientist,often stressed that FAST not only
+                            needed to be
+                            <span class="word-bc" @click="saveWord($event, 'precise')">precise</span>
+                            and sensitive in its applications,but it should also be beautiful to
+                            look at.鈥淗e expected nothing less of an instrument of national significance,鈥� Sun said.He
+                            spent 15 years on FAST,and,in return,FAST helped him to grow,increased his knowledge,and
+                            <span class="word-bc" @click="saveWord($event, 'rewar')">rewar</span>
+                            ded him with confidence as he
+                            <span class="word-bc" @click="saveWord($event, 'overcame')">overcame</span>
+                            many difficulties and setbacks.
+                        </p>
+                        <p>The 鈥淪ky Eye鈥� is open to the world and offers more
+                            <span class="word-bc" @click="saveWord($event, 'observation')">observation</span>
+                            possibilities to the global
+                            scientific
+                            <span class="word-bc" @click="saveWord($event, 'community')">community</span>
+                            ,contributing Chinese wisdom to building a community of a shared future
+                            for humanity.
+                        </p>
+                        <p class="fl al-cn mt-40">
+                            <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
+                            <span class="line-border-box"></span>
+                        </p>
+                        <audio :src="resource.readingFour" controls controlslist="noplaybackrate nodownload" class="audio"
+                            ></audio>
+                        <p>scientometrics /藞sa瑟蓹nt蓹蕣藞metr瑟ks/ <i>n.</i> 绉戝璁¢噺瀛�</p>
+                        <div class="bkbj">
+                            <p><i>the science of measuring and analyzing science</i></p>
+                        </div>
+                        <p>telescope /藞tel瑟sk蓹蕣p/ <i>n.</i> 鏈涜繙闀�</p>
+                        <div class="bkbj">
+                            <p><i>a piece of equipment shaped like a tube that is used to view distant objects</i></p>
+                        </div>
+                        <p>pulsar /藞p蕦ls蓱藧(r)/ <i>n.</i> 鑴夊啿鏄�</p>
+                        <div class="bkbj">
+                            <p><i>a star that cannot be seen but that sends out regular rapid radio signals</i></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">67</span>
+                </div>
+            </div>
+        </div>
+        <!-- 68 -->
+        <div class="page-box" page="74">
+            <div v-if="showPageList.indexOf(74) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit4 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit4">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit4">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>origin /藞蓲r瑟d蕭瑟n/ <i>n.</i> 璧峰洜锛涜捣婧�</p>
+                        <div class="bkbj">
+                            <p><i>the cause of sth.or the point from which sth.starts</i></p>
+                        </div>
+                        <p>burst /b蓽藧st/ <i>n.</i> 鐖嗚锛涚垎鐮�</p>
+                        <div class="bkbj">
+                            <p><i>a sudden brief outbreak or explosion</i></p>
+                        </div>
+                        <p>universe /藞ju藧n瑟v蓽藧s/ <i>n.</i> 瀹囧畽</p>
+                        <div class="bkbj">
+                            <p><i>the whole of space and everything in it,including the earth,the planets and the
+                                    stars</i></p>
+                        </div>
+                        <p>intellectual /藢瑟nt蓹藞lekt蕛u蓹l/ <i>adj.</i> 鏅哄姏鐨勶紱鑴戝姏鐨�</p>
+                        <div class="bkbj">
+                            <p><i>using a person鈥檚 ability to think in a logical way and understand things</i></p>
+                        </div>
+                        <p>cabin /藞k忙b瑟n/ <i>n.</i> 鑸变綋锛涜埞鑸�</p>
+                        <div class="bkbj">
+                            <p><i>a small room on a ship in which you live or sleep</i></p>
+                        </div>
+                        <p>pupil /藞pju藧pl/ <i>n.</i> 鐬冲瓟</p>
+                        <div class="bkbj">
+                            <p><i>the small round black area at the center of the eye</i></p>
+                        </div>
+                        <p>complex /藞k蓲mpleks/ <i>adj.</i> 澶嶆潅鐨�</p>
+                        <div class="bkbj">
+                            <p><i>made up of (usu.several) closely connected parts</i></p>
+                        </div>
+                        <p>diamond /藞da瑟蓹m蓹nd/ <i>n.</i> 鑿卞舰</p>
+                        <div class="bkbj">
+                            <p><i>a shape with four straight sides of equal length and with angles that are not right
+                                    angles</i></p>
+                        </div>
+                        <p>daring /藞de蓹r瑟艐/ <i>adj.</i> 锛堝嚭濂囧湴锛� 澶ц儐鐨�</p>
+                        <div class="bkbj">
+                            <p><i>bold in a new or unusual way</i></p>
+                        </div>
+                        <p>precise /pr瑟藞sa瑟s/ <i>adj.</i> 鍑嗙‘鐨勶紱绮剧‘鐨�</p>
+                        <div class="bkbj">
+                            <p><i>exact and accurate in all its details</i></p>
+                        </div>
+                        <p>reward /r瑟藞w蓴藧d/ <i>v.</i> 鍥炴姤锛涘鍔�</p>
+                        <div class="bkbj">
+                            <p><i>to give sth.to sb.because they have done sth.good or worked hard</i></p>
+                        </div>
+                        <p>overcome /藢蓹蕣v蓹藞k蕦m/ <i>v.</i> 鍏嬫湇锛涜В鍐�</p>
+                        <div class="bkbj">
+                            <p><i>to succeed in dealing with or controlling a problem that has been preventing you from
+                                    achieving sth.</i></p>
+                        </div>
+                        <p>observation /藢蓲bz蓹藞ve瑟蕛n/ <i>n.</i> 瑙傚療锛涜娴�</p>
+                        <div class="bkbj">
+                            <p><i>the act of watching sb./sth.carefully for a period of time</i></p>
+                        </div>
+                        <p>community /k蓹藞mju藧n蓹ti/ <i>n.</i> 鏈夊叡鍚屽埄鐩婄殑闆嗕綋</p>
+                        <div class="bkbj">
+                            <p><i>a group of people with shared interests</i></p>
+                        </div>
+                        <p>work on 鑷村姏浜庯紱浠庝簨</p>
+                        <p>be responsible for 瀵光�︹�﹁礋璐�</p>
+                        <p>in return 浣滀负鍥炴姤</p>
+                        <p>contribute to 鏈夊姪浜庯紱瀵光�︹�︽湁鎵�璐$尞</p>
+                        <p>be involved in 鍙備笌锛涙秹鍙�</p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">68</span>
+                </div>
+            </div>
+        </div>
+        <!-- 69 -->
+        <div class="page-box" page="75">
+            <div v-if="showPageList.indexOf(75) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit4">MODULE 4</span>
+                        <span class="chapter-right-bc-unit4 fw-bl chapter-right-cl-unit4">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <div class="bj-note">
+                            <p><b>Notes:</b></p>
+                            <p>FAST锛氬叏绉颁负Five-hundred-metre Aperture Spherical
+                                Telescope銆備簲鐧剧背鍙e緞灏勭數鏈涜繙闀滀綅浜庝腑鍥借吹宸炵渷榛斿崡甯冧緷鏃忚嫍鏃忚嚜娌诲窞澧冨唴锛屾槸鍏锋湁鎴戝浗鑷富鐭ヨ瘑浜ф潈銆佷笘鐣屾渶澶у崟鍙e緞銆佹渶鐏垫晱鐨勫皠鐢垫湜杩滈暅銆傚畠琚獕涓衡�滀腑鍥藉ぉ鐪尖�濓紝澶у箙鎷撳睍浜嗕汉绫荤殑瑙嗛噹锛岀敤浜庢帰绱㈠畤瀹欑殑璧锋簮鍜屾紨鍖栥��
+                            </p>
+                            <p>Nan Rendong锛氬崡浠佷笢锛屼腑鍥藉ぉ鏂囧瀹讹紝鈥滀腑鍥藉ぉ鐪尖��
+                                鐨勪富瑕佸彂璧疯�呭拰濂犲熀浜猴紝鑷�1994骞撮」鐩鐮旂┒鍒�2016骞村缓鎴愶紝鍧氭寔浜�22骞达紝鍦ㄥ皠鐢靛ぉ鏂囩爺绌堕鍩熴�佸浗瀹堕噸澶ч渶姹傘�佸浗闄呭悎浣滅瓑鏂归潰鍋氬嚭浜嗛噸瑕佽础鐚紝琚巿浜堚�滀汉姘戠瀛﹀鈥� 鍥藉鑽h獕绉板彿銆�
+                            </p>
+                        </div>
+                        <p><b>鈪�.Reading comprehension.</b></p>
+                        <p>A.Complete the introduction of the FAST team with the numbers in the box.</p>
+                        <div class="bk-wh">
+                            <p>15銆�28銆�30銆�38銆�39銆�340銆�2016</p>
+                        </div>
+                        <p class="center">
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn table-th-bc">The FAST Team</td>
+                                <td style="width: 65%;">
+                                    <p class="table-p">
+                                        The engineering and operation team has an average age of 1.
+                                        <input :disabled="readingTwo[0].isComplete"
+                                        type="text" class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingTwo[0].value[0].userAnswer" @change="saveReadingTwo" />
+                                        <img :src="readingTwo[0].value[0].isRight ? correctIcon : errorIcon"  v-if="readingTwo[0].isComplete">
+                                        while the on-site team has an average age of 2.
+                                        <input :disabled="readingTwo[0].isComplete"
+                                        type="text" class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingTwo[0].value[1].userAnswer" @change="saveReadingTwo" />
+                                        <img :src="readingTwo[0].value[1].isRight ? correctIcon : errorIcon"  v-if="readingTwo[0].isComplete">
+                                    </p>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn table-th-bc">Achievements</td>
+                                <td style="width: 65%;">
+                                    <p class="table-p">The team built the world鈥檚 largest radio telescope, which has been quite helpful in the discovery of around  3.
+                                        <input :disabled="readingTwo[0].isComplete"
+                                        type="text" class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingTwo[0].value[2].userAnswer" @change="saveReadingTwo" />
+                                        <img :src="readingTwo[0].value[2].isRight ? correctIcon : errorIcon"  v-if="readingTwo[0].isComplete">
+                                        pulsars, since becoming operational in September 4.
+                                        <input :disabled="readingTwo[0].isComplete"
+                                        type="text" class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingTwo[0].value[3].userAnswer" @change="saveReadingTwo" />
+                                        <img :src="readingTwo[0].value[3].isRight ? correctIcon : errorIcon"  v-if="readingTwo[0].isComplete">
+                                        </p>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn table-th-bc">Contributions ofTeam Members</td>
+                                <td style="width: 65%;">
+                                    <p class="table-p">A researcher behind FAST鈥檚 feed cabin, was responsible for creating the 鈥減upil鈥� of the 鈥淪ky Eye鈥�. She joined the team at the age of  5.
+                                        <input :disabled="readingTwo[0].isComplete"
+                                        type="text" class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingTwo[0].value[4].userAnswer" @change="saveReadingTwo" />
+                                        <img :src="readingTwo[0].value[4].isRight ? correctIcon : errorIcon"  v-if="readingTwo[0].isComplete">
+                                        Sun Jinghai A 6.
+                                        <input :disabled="readingTwo[0].isComplete"
+                                        type="text" class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingTwo[0].value[5].userAnswer" @change="saveReadingTwo" />
+                                        <img :src="readingTwo[0].value[5].isRight ? correctIcon : errorIcon"  v-if="readingTwo[0].isComplete">
+                                        ________-year-old researcher of FAST, was involved in perfecting and protecting the giant machine. He spent 7.
+                                        <input :disabled="readingTwo[0].isComplete"
+                                        type="text" class="input-bottom-border input-bc-t" style="width: 5em"
+                                        v-model="readingTwo[0].value[6].userAnswer" @change="saveReadingTwo" />
+                                        <img :src="readingTwo[0].value[6].isRight ? correctIcon : errorIcon"  v-if="readingTwo[0].isComplete">
+                                        years on FAST.
+                                    </p>
+                                </td>
+                            </tr>
+                        </table>
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="readingTwo[0].isShowAnswer">
+                            <span>绛旀:</span>
+                            <span v-for="(item,index) in readingTwo[0].value" :key="index">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
+                        <p>B.Decide whether the following statements are true (T) or false (F).</p>
+                        <p v-for="(item,index) in readingTwo[1].value" :key="index">
+                            (
+                                <select v-model="item.userAnswer" class="select-border" @change="saveReadingTwo">
+                                    <option v-for="(citem, cindex) in readingTwo[1].option" :key="cindex"
+                                        :value="citem">
+                                        {{ citem }}
+                                    </option>
+                                </select>
+                            )
+                            {{index + 1}}.{{item.stem}}
+                            <img :src="item.isRight ? correctIcon : errorIcon"  v-if="readingTwo[1].isComplete">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="readingTwo[1].isShowAnswer">
+                            <span>绛旀:</span>
+                            <span v-for="(item,index) in readingTwo[1].value" :key="index">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">69</span>
+                </div>
+            </div>
+        </div>
+        <!-- 70 -->
+        <div class="page-box" page="76">
+            <div v-if="showPageList.indexOf(76) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit4 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit4">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit4">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p><b>鈪�.Language focus.</b></p>
+                        <p v-for="(item,index) in readingTwo[2].value" :key="index">
+                            {{index + 1}}.{{item.stemOne}}
+                            <input :disabled="readingTwo[2].isComplete" type="text"
+                                class="input-bottom-border" style="width: 60px" v-model="item.userAnswer" @input="saveReadingTwo"
+                             />
+                            {{item.stemTwo}}
+                            <img :src="item.isRight ? correctIcon : errorIcon"  v-if="readingTwo[2].isComplete">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="readingTwo[2].isShowAnswer">
+                            <span>绛旀:</span>
+                            <span v-for="(item,index) in readingTwo[2].value" :key="index">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
+                        <p>B.Fill in the blanks with the proper form of the expressions given below.</p>
+                        <div class="bk-wh">
+                            <p>work on銆�in return銆�be responsible for銆�be involved in銆�contribute to</p>
+                        </div>
+                        <p v-for="(item,index) in readingTwo[3].value" :key="'list' + index">
+                            {{index + 1}}.{{item.stemOne}}
+                            <input :disabled="readingTwo[3].isComplete" type="text"
+                                class="input-bottom-border" style="width: 60px" v-model="item.userAnswer" @input="saveReadingTwo"
+                             />
+                            {{item.stemTwo}}
+                            <img :src="item.isRight ? correctIcon : errorIcon"  v-if="readingTwo[3].isComplete">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="readingTwo[3].isShowAnswer">
+                            <span>绛旀:</span>
+                            <span v-for="(item,index) in readingTwo[3].value" :key="index">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
+                        <p><b>鈪�.Grammar focus:The superlative degree.</b>
+                            <span class="btn-box" @click="showAnswer('showImgOne')">
+                                <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="30864"
+                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                    <path
+                                        d="M387.2 471.152l-154.768 258.72v103.488h515.792V626.384l-149.12 103.488z m283.712-51.744a77.632 77.632 0 1 0 77.392 77.616 77.504 77.504 0 0 0-77.472-77.616zM640 0H160.72A96.736 96.736 0 0 0 64 96.72V927.36a96.736 96.736 0 0 0 96.72 96.64h702.56A96.704 96.704 0 0 0 960 927.36V298.016z m7.808 94.736l226.544 211.008h-146.544a80.08 80.08 0 0 1-80-80zM896 927.36a32.688 32.688 0 0 1-32.72 32.64h-702.56A32.704 32.704 0 0 1 128 927.36V96.72A32.752 32.752 0 0 1 160.72 64l423.088 0.384v161.44a144.176 144.176 0 0 0 144 143.92H896z"
+                                        p-id="30865"></path>
+                                </svg>
+                            </span>
+                        </p>
+                        <div class="openImgBox" v-if="showImgOne">
+                            <img class="w100" :src="imgThirteenOne" />
+                        </div>
+                        <p>Complete the sentences with the superlative form of the words in the brackets.</p>
+                        <p v-for="(item,index) in readingTwo[4].value" :key="'hold' + index">
+                            {{index + 1}}.{{item.stemOne}}
+                            <input :disabled="readingTwo[4].isComplete" type="text"
+                                class="input-bottom-border" style="width: 60px" v-model="item.userAnswer" @input="saveReadingTwo"
+                             />
+                            {{item.stemTwo}}
+                            <img :src="item.isRight ? correctIcon : errorIcon"  v-if="readingTwo[4].isComplete">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="readingTwo[4].isShowAnswer">
+                            <span>绛旀:</span>
+                            <span v-for="(item,index) in readingTwo[4].value" :key="index">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ev" style="width:80%">
+                                <li>
+                                <button class="btn-border btn-w" @click="handleReadingTwo">
+                                    鎻愪氦
+                                </button>
+                                </li>
+                                <li>
+                                <button @click="recastReadingTwo" class="btn-border btn-w">
+                                    閲嶅仛
+                                </button>
+                                </li>
+                                <li>
+                                <button @click="viewReadingTwo" class="parimary-btn">
+                                    鏌ョ湅绛旀
+                                </button>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">70</span>
+                </div>
+            </div>
+        </div>
+        <!-- 71 -->
+        <div class="page-box" page="77">
+            <div v-if="showPageList.indexOf(77) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit4">MODULE 4</span>
+                        <span class="chapter-right-bc-unit4 fw-bl chapter-right-cl-unit4">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <h3 id="c034"><span class="bjh3">Mini-project</span></h3>
+                        <p>A large number of scientists have made major contributions to the advancement of science and
+                            technology,the improvement of people鈥檚 lives,and the development of the Chinese nation.Work
+                            in groups and list some great Chinese scientists and their contributions to the world,and
+                            then discuss with your group members about their spirit towards scientific research and
+                            innovation.
+                        </p>
+                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
+
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-th-bc">
+                                <td class="tl-cn">Scientists</td>
+                                <td class="tl-cn">Contributions</td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td class="tl-cn">Zhang Heng</td>
+                                <td class="tl-lf">
+                                    He invented a machine called seismometer(鍦板姩浠�), which could sense distant
+                                    earthquakes,
+                                    and indicated in which direction they were happening.
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="noSubmitData[4].value[0].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @input="saveNoSubmitData"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="noSubmitData[4].value[1].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitData"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="noSubmitData[4].value[2].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @input="saveNoSubmitData"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="noSubmitData[4].value[3].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitData"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="noSubmitData[4].value[4].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @input="saveNoSubmitData"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="noSubmitData[4].value[5].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitData"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="noSubmitData[4].value[6].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @input="saveNoSubmitData"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="noSubmitData[4].value[7].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitData"></textarea>
+                                </td>
+                            </tr>
+                        </table>
+                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
+                            <div class="banshi openImgBox">
+                                <div class="swiper-container swiper_ppt">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_01.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_02.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_03.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_04.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_05.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_06.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_07.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_08.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_09.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_10.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_11.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_12.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_13.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_14.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_15.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_16.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_17.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_18.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_19.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_20.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_21.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_22.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_23.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_24.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_25.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_26.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_27.png" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="swiper-button-next"></div>
+                                    <div class="swiper-button-prev"></div>
+                                    <div class="pageBox"></div>
+                                </div>
+                                <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->
+                            </div>
+                        </div>
+                        <h2 id="b015"><img class="img-0" alt="" src="../../assets/images/dy4-le3.jpg" /></h2>
+                        <h3 id="c035" class="fl al-cn">
+                            <span class="bjh3">Listening</span>
+                            <!--controlslist="noplaybackrate nodownload"鍚庨潰鐨勯煶棰戞鍔犲叆杩欎釜-->
+                        </h3>
+                        <p><b>鈪�.Listen to Nadia talking about her favorite electronic device and mark what she says
+                                about it.</b>
+                        </p>
+                        <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio>
+                        <p>
+                           <input type="checkbox" value="What it is" name="what" v-model="listenTwo[0].value[0].userAnswer" :disabled="listenTwo[0].isComplete"> 
+                            1.What it is
+                            <img :src="isTextRight(listenTwo[0].value[0].answer,listenTwo[0].value[0].userAnswer[0],0) ? correctIcon : errorIcon"  v-if="listenTwo[0].isComplete">
+                        </p>
+                        <p>
+                            <input type="checkbox" value="Where Nadia got it" name="what" v-model="listenTwo[0].value[0].userAnswer" :disabled="listenTwo[0].isComplete"> 
+                            2.Where Nadia got it
+                            <img :src="isTextRight(listenTwo[0].value[0].answer,listenTwo[0].value[0].userAnswer[1],1) ? correctIcon : errorIcon"  v-if="listenTwo[0].isComplete">
+                        </p>
+                        <p>
+                            <input type="checkbox" value="How much it is" name="what" v-model="listenTwo[0].value[0].userAnswer" :disabled="listenTwo[0].isComplete">
+                            3.How much it is
+                            <img :src="isTextRight(listenTwo[0].value[0].answer,listenTwo[0].value[0].userAnswer[2],2) ? correctIcon : errorIcon"  v-if="listenTwo[0].isComplete">
+                        </p>
+                        <p>
+                            <input type="checkbox" value="What Nadia uses it for" name="what" v-model="listenTwo[0].value[0].userAnswer" :disabled="listenTwo[0].isComplete">
+                            4.What Nadia uses it for
+                            <img :src="isTextRight(listenTwo[0].value[0].answer,listenTwo[0].value[0].userAnswer[3],3) ? correctIcon : errorIcon"  v-if="listenTwo[0].isComplete">
+                        </p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">71</span>
+                </div>
+            </div>
+        </div>
+        <!-- 72 -->
+        <div class="page-box" page="78">
+            <div v-if="showPageList.indexOf(78) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit4 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit4">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit4">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>
+                            <input type="checkbox" value="When Nadia owned it" name="what" v-model="listenTwo[0].value[0].userAnswer" :disabled="listenTwo[0].isComplete">
+                            5.When Nadia owned it
+                            <img :src="isTextRight(listenTwo[0].value[0].answer,listenTwo[0].value[0].userAnswer[4],4) ? correctIcon : errorIcon"  v-if="listenTwo[0].isComplete">
+                        </p>
+                        <p>
+                            <input 
+                                type="checkbox" 
+                                value="Why it is important to Nadia" 
+                                name="what" 
+                                v-model="listenTwo[0].value[0].userAnswer"
+                                :disabled="listenTwo[0].isComplete"
+                            >
+                            6.Why it is important to Nadia
+                            <img :src="isTextRight(listenTwo[0].value[0].answer,listenTwo[0].value[0].userAnswer[5],5) ? correctIcon : errorIcon"  v-if="listenTwo[0].isComplete">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="listenTwo[0].isShowAnswer">
+                            <span>绛旀:</span>
+                            <span v-for="(item,index) in listenTwo[0].value[0].answer" :key="index">
+                                {{index + 1}}.{{item}}
+                            </span>
+                        </div>
+                        <p><b>鈪�.Ms.Zhang is discussing technology trends with her students.Listen to the
+                                conversation,and write down the benefits of each App.</b>
+                        </p>
+                        <audio :src="resource.listenThree" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio>
+                        <p class="center">
+                            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                                <tr class="table-th-bc">
+                                    <td class="tl-cn">Artificial Inteligence Apps</td>
+                                    <td class="tl-cn">Benefits</td>
+                                </tr>
+                                <tr class="table-tr-bc">
+                                    <td class="tl-cn">
+                                        digital assistance
+                                    </td>
+                                    <td class="tl-lf">
+                                        <p class="table-p">
+                                            It reminds me to do things.
+                                        </p>
+                                        <p class="table-p">
+                                            It wakes me up 1.
+                                            <input :disabled="listenTwo[1].isComplete"
+                                            type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                            v-model="listenTwo[1].value[0].userAnswer" @change="savelistenTwo" />
+                                            <img :src="listenTwo[1].value[0].isRight ? correctIcon : errorIcon"  v-if="listenTwo[1].isComplete">
+                                            in the morning.
+                                        </p>
+                                        <p class="table-p">
+                                            It plays my 2.
+                                            <input :disabled="listenTwo[1].isComplete"
+                                            type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                            v-model="listenTwo[1].value[1].userAnswer" @change="savelistenTwo" />
+                                            <img :src="listenTwo[1].value[1].isRight ? correctIcon : errorIcon"  v-if="listenTwo[1].isComplete">
+                                            music.
+                                        </p>
+                                        <p class="table-p">
+                                            I chat with it when I am alone..
+                                        </p>
+                                    </td>
+                                </tr>
+                                <tr class="table-tr-bc">
+                                    <td class="tl-cn">
+                                        online shopping recommendation
+                                    </td>
+                                    <td class="tl-lf">
+                                        <p class="table-p">
+                                            It 3.
+                                            <input :disabled="listenTwo[1].isComplete"
+                                            type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                            v-model="listenTwo[1].value[2].userAnswer" @change="savelistenTwo" />
+                                            <img :src="listenTwo[1].value[2].isRight ? correctIcon : errorIcon"  v-if="listenTwo[1].isComplete">
+                                            suggests things that I
+                                            want.
+                                        </p>
+                                        <p class="table-p">
+                                            It makes shopping a 4.
+                                            <input :disabled="listenTwo[1].isComplete"
+                                            type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                            v-model="listenTwo[1].value[3].userAnswer" @change="savelistenTwo" />
+                                            <img :src="listenTwo[1].value[3].isRight ? correctIcon : errorIcon"  v-if="listenTwo[1].isComplete">
+                                            experience.
+                                        </p>
+                                    </td>
+                                </tr>
+                                <tr class="table-tr-bc">
+                                    <td class="tl-cn">
+                                        instant translation
+                                    </td>
+                                    <td class="tl-lf">
+                                        <p class="table-p">
+                                            They help me communicate easily when I travel abroad.
+                                        </p>
+                                        <p class="table-p">
+                                            They're so 5.
+                                            <input :disabled="listenTwo[1].isComplete"
+                                            type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                            v-model="listenTwo[1].value[4].userAnswer" @change="savelistenTwo" />
+                                            <img :src="listenTwo[1].value[4].isRight ? correctIcon : errorIcon"  v-if="listenTwo[1].isComplete">
+                                            for foreign language
+                                            learning.
+                                        </p>
+                                        <p class="table-p">
+                                            I can figure out words or the meaning of words 6.
+                                            <input :disabled="listenTwo[1].isComplete"
+                                            type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                            v-model="listenTwo[1].value[5].userAnswer" @change="savelistenTwo" />
+                                            <img :src="listenTwo[1].value[5].isRight ? correctIcon : errorIcon"  v-if="listenTwo[1].isComplete">
+                                        </p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="listenTwo[1].isShowAnswer">
+                            <span>绛旀:</span>
+                            <span v-for="(item,index) in listenTwo[1].value" :key="index">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ev" style="width:80%">
+                                <li>
+                                <button class="btn-border btn-w" @click="handleListenTwo">
+                                    鎻愪氦
+                                </button>
+                                </li>
+                                <li>
+                                <button @click="recastListenTwo" class="btn-border btn-w">
+                                    閲嶅仛
+                                </button>
+                                </li>
+                                <li>
+                                <button @click="viewListenTwo" class="parimary-btn">
+                                    鏌ョ湅绛旀
+                                </button>
+                                </li>
+                            </ul>
+                        </div>
+                        
+                        <h3 id="c036"><span class="bjh3">Practical Writing</span></h3>
+                        <p>Work with your partner to discuss the following questions.</p>
+                        <p>1.What is a sales letter like?
+                            <span class="btn-box" @click="showNoSubmitAnswer(5,0)">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
+                                <path class="a"
+                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                    transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitData[5].value[0].isShowAnswer">
+                            <span>绛旀锛歿{noSubmitData[5].value[0].answer}}</span>
+                        </div>
+                        <textarea name="" id="" cols="30" rows="10" v-model="noSubmitData[5].value[0].userAnswer" class="w100" @input="saveNoSubmitData"></textarea>
+                        <p>2.What are the purposes of a sales letter?
+                            <span class="btn-box" @click="showNoSubmitAnswer(5,1)">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
+                                <path class="a"
+                                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                    transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <textarea name="" id="" cols="30" rows="10" v-model="noSubmitData[5].value[1].userAnswer" class="w100" @input="saveNoSubmitData"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitData[5].value[1].isShowAnswer">
+                            <span>绛旀锛歿{noSubmitData[5].value[1].answer}}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">72</span>
+                </div>
+            </div>
+        </div>
+        <!-- 73 -->
+        <div class="page-box" page="79">
+            <div v-if="showPageList.indexOf(79) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit4">MODULE 4</span>
+                        <span class="chapter-right-bc-unit4 fw-bl chapter-right-cl-unit4">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p><b>鈪�.Read the following tips and find out how to write an effective sales letter.</b></p>
+                        <p>A sales letter is a marketing tool that businesses use to promote products or service.Like
+                            any other letter you write,you need to include the basics and convey your messages as
+                            clearly as possible.Generally,every sales letter should contain the following elements:</p>
+                        <div class="fieldset">
+                            <p>鈾� <b>A Headline</b>鈥擥rab the reader鈥檚 attention and highlight your main purpose.</p>
+                            <p>鈾� <b>Introduction</b>鈥擯rovide the details of your products or service.</p>
+                            <p>鈾� <b>Body</b>鈥擝uild your credibility.Highlight information such as the product鈥檚
+                                worth,how it performs compared to similar products,or a list of satisfied customers.</p>
+                            <p>鈾� <b>Call to Action</b>鈥擡ncourage the reader to respond.</p>
+                            <p class="center"><img class="img-f" alt="" src="../../assets/images/0083-1.jpg" /></p>
+                        </div>
+                        <p><b>鈪�.As a sales manager,Nadia is writing a letter to introduce a new gardening tool to her
+                                clients.Complete the letter by filling in the blanks with the expressions in the box
+                                below.</b></p>
+                        <div class="bk-wh">
+                            <p>take advantage of銆�suffer from銆�limited time銆�easy to handle銆�difference between</p>
+                        </div>
+                        <div class="fieldset-3">
+                            <p class="left">Easyman Hardware Inc.</p>
+                            <p class="left">3489 Greene Ave.</p>
+                            <p class="left">Olympia, WA</p>
+                            <p class="left">Subject: Home Gardening Made Easy</p>
+                            <p class="left">Dear Mr. Smith,</p>
+                            <p class="left">Gardening can be back-breaking work when you are not using the right tools.
+                                Almost 90% of homeowners injure their backs just by simply raking (鑰�) the leaves in
+                                their back yards. If you are like them and 1.
+                                <input :disabled="practicalWriting[0].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                v-model="practicalWriting[0].value[0].userAnswer" @input="savePracticalWriting" />
+                                <img :src="practicalWriting[0].value[0].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[0].isComplete">
+                                a sore back after gardening, then
+                                you need to use our new easy rake leaf blower.</p>
+                            <p class="left">What is the 2.
+                                <input :disabled="practicalWriting[0].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                v-model="practicalWriting[0].value[1].userAnswer" @input="savePracticalWriting" />
+                                <img :src="practicalWriting[0].value[1].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[0].isComplete">
+                                raking and blowing leaves:</p>
+                            <p class="left">銆�銆�鈼廚o bending over, so less back pain</p>
+                            <p class="left">銆�銆�鈼�3.
+                                <input :disabled="practicalWriting[0].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                v-model="practicalWriting[0].value[2].userAnswer" @input="savePracticalWriting" />
+                                <img :src="practicalWriting[0].value[2].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[0].isComplete">
+                                and your arms do not ache</p>
+                            <p class="left">銆�銆�鈼廝owerful motor blows leaves right where you want them</p>
+                            <p class="left">銆�銆�鈼廌urable and easy to store in your garage</p>
+                            <p class="left">銆�銆�鈼�4.
+                                <input :disabled="practicalWriting[0].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                v-model="practicalWriting[0].value[3].userAnswer" @input="savePracticalWriting" />
+                                <img :src="practicalWriting[0].value[3].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[0].isComplete">
+                                20% discount with every purchase</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">73</span>
+                </div>
+            </div>
+        </div>
+        <!-- 74 -->
+        <div class="page-box" page="80">
+            <div v-if="showPageList.indexOf(80) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit4 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit4">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit4">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <div class="fieldset-3">
+                            <p class="left">To 5.
+                                <input :disabled="practicalWriting[0].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" style="width: 60px"
+                                v-model="practicalWriting[0].value[4].userAnswer" @input="savePracticalWriting" />
+                                <img :src="practicalWriting[0].value[4].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[0].isComplete">
+                                this offer, just come into our store on the corner of Main and
+                                Front Streets between 8 a.m. and 5 p.m. and see what this leaf blower can do for you.
+                            </p>
+                            <p class="left">Sincerely,</p>
+                            <p class="left">Nadia Jones</p>
+                            <p class="left">Sales Manager</p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="practicalWriting[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item,index) in practicalWriting[0].value" :key="index">
+                                {{index + 1}}.{{item.answer}}
+                            </span>
+                        </div>
+                        <p><b>鈪�.Translate the Chinese in the brackets into English to complete the sentences.</b></p>
+                        <p class="tl-left">1.Are you having trouble cleaning your house?
+                            <input :disabled="practicalWriting[1].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" 
+                                v-model="practicalWriting[1].value[0].userAnswer" @input="savePracticalWriting" />
+                            <img :src="practicalWriting[1].value[0].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[1].isComplete">
+                            (鎴戜滑鏈夎В鍐虫柟妗�).</p>
+                        <p class="tl-left">2.
+                            <input :disabled="practicalWriting[1].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" 
+                                v-model="practicalWriting[1].value[1].userAnswer" @input="savePracticalWriting" />
+                            <img :src="practicalWriting[1].value[1].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[1].isComplete">
+                            (鎴戜滑鍒氬垰鎺ㄥ嚭涓�娆炬柊浜у搧) 鈥攎odern sweeper XSweep.</p>
+                        <p class="tl-left">3.With XSweep,you can do it straight from the ground and 
+                            <input :disabled="practicalWriting[1].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" 
+                                v-model="practicalWriting[1].value[2].userAnswer" @input="savePracticalWriting" />
+                            <img :src="practicalWriting[1].value[2].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[1].isComplete">
+                            (瀹冪殑闀垮害鍙揪4鑻卞昂).</p>
+                        <p class="tl-left">4.How much will this cost you?
+                            <input :disabled="practicalWriting[1].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" 
+                                v-model="practicalWriting[1].value[3].userAnswer" @input="savePracticalWriting" />
+                            <img :src="practicalWriting[1].value[3].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[1].isComplete">
+                            (鍚繍璐瑰彧瑕�19.99缇庡厓).</p>
+                        <p class="tl-left">5.
+                            <input :disabled="practicalWriting[1].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" 
+                                v-model="practicalWriting[1].value[4].userAnswer" @input="savePracticalWriting" />
+                            <img :src="practicalWriting[1].value[4].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[1].isComplete">
+                            (濡傛灉鎮ㄦ劅鍏磋叮鎴栨兂浜嗚В鏇村淇℃伅),you can call us directly at 493-201-2018.</p>
+                        <p class="tl-left">6.
+                            <input :disabled="practicalWriting[1].isComplete"
+                                type="text" class="input-bottom-border input-bc-t" 
+                                v-model="practicalWriting[1].value[5].userAnswer" @input="savePracticalWriting" />
+                            <img :src="practicalWriting[1].value[5].isRight ? correctIcon : errorIcon"  v-if="practicalWriting[1].isComplete">
+                            (娆㈣繋鎮ㄦ潵璇曠敤鎴戜滑鐨勬柊浜у搧) and we assure you that you will love it.
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="practicalWriting[1].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <p v-for="(item,index) in practicalWriting[1].value" :key="index">
+                                {{index + 1}}.{{item.answer}}
+                            </p>
+                        </div>
+                        <p>鈪�<b>.Wang Qiang,Nadia's client,is planning to have a thorough housecleaning.Nadia wants to
+                                seize the chance to introduce their new sweeper XSweep to him.Work with your partner and
+                                write a sales letter of the new sweeper.</b></p>
+                        <div class="fieldset-4">
+                            <p class="left">Wang Qiang</p>
+                            <p class="left">2398 Red Street</p>
+                            <p class="left">Salem, MA 34588</p>
+                            <p class="left">Subject: A Household Cleaning Tool You Need</p>
+                            <p class="left"><br /></p>
+                            <p class="left">Dear Mr. Wang,</p>
+                            <p class="left">
+                                <textarea name="" id="" cols="30" rows="20" v-model="practicalWriting[2].value[0].userAnswer" class="w100" @input="savePracticalWriting"></textarea>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">74</span>
+                </div>
+            </div>
+        </div>
+        <!-- 75 -->
+        <div class="page-box" page="81">
+            <div v-if="showPageList.indexOf(81) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit4">MODULE 4</span>
+                        <span class="chapter-right-bc-unit4 fw-bl chapter-right-cl-unit4">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <div class="fieldset-4">
+                            <p class="left">Sincerely,</p>
+                            <p class="left">Nadia Jones</p>
+                            <p class="left">Sales Manager</p>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ev" style="width:80%">
+                                <li>
+                                <button class="btn-border btn-w" @click="handlePracticalWriting">
+                                    鎻愪氦
+                                </button>
+                                </li>
+                                <li>
+                                <button @click="recastPracticalWriting" class="btn-border btn-w">
+                                    閲嶅仛
+                                </button>
+                                </li>
+                                <li>
+                                <button @click="viewPracticalWriting" class="parimary-btn">
+                                    鏌ョ湅绛旀
+                                </button>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="un-h2">
+                            <h2 id="b016">Unit Project</h2>
+                        </div>
+                        <p class="center"><img class="img-f" alt="" src="../../assets/images/0085-1.jpg" /></p>
+                        <p>Youth are pushing the world forward and shaping the world鈥檚 future.The annual innovation and
+                            entrepreneurship competition (鍒涙柊鍒涗笟澶ц禌) is coming.All the participants are required to create
+                            鈥淔it
+                            for Future鈥� products and solve the world鈥檚 problems through innovation.Work in groups and
+                            find
+                            ways to make a product or solutions and sign up for the competition.</p>
+                        <p><b>Working steps:</b></p>
+                        <p>鉃� Form groups of five</p>
+                        <p>鉃� Each group thinks of a product they want to create(either invent a new product,or create a
+                            variation on the basis of a product you know)</p>
+                        <p>鉃� Develop the details of your product by answering the questions in the box below</p>
+                        <div class="fieldset-5">
+                            <p>What functions does your product have?</p>
+                            <p>Who will buy your product? Why will they buy it?</p>
+                            <p>What advantages does your product have?</p>
+                            <p>Why is your product superior to other products?</p>
+                            <p>How much will your product cost?</p>
+                        </div>
+                        <p>鉃� Draft a sales letter to introduce your product to potential customers</p>
+                        <p>鉃� Make a presentation in front of the class</p>
+                        <p>鉃� Vote for the best product</p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">75</span>
+                </div>
+            </div>
+        </div>
+        <!-- 76 -->
+        <div class="page-box" page="82">
+            <div v-if="showPageList.indexOf(82) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit4 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit4">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit4">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
+                        <div class="fieldset-4">
+                            <p class="left">Harrison Allen</p>
+                            <p class="left">ABC Textiles</p>
+                            <p class="left">435 Celina, Texas</p>
+                            <p><br /></p>
+                            <p class="left">Dear Mr. Allen,</p>
+                            <p class="left">
+                                <textarea name="" id="" cols="30" rows="20" v-model="noSubmitData[6].value[0].userAnswer" class="w100" @input="saveNoSubmitData"></textarea>
+                            </p>
+                            <p class="left">Sincerely,</p>
+                            <p class="left">Lin Yi</p>
+                            <p class="left">Marketing Manager</p>
+                        </div>
+                        <div class="fieldset-4">
+                            <p class="center"><b>Useful Expressions</b></p>
+                            <p>I am really excited about showing you 鈥�</p>
+                            <p>I am going to show you 鈥�</p>
+                            <p>This is one of our latest designs.</p>
+                            <p>It is made of/from/in 鈥�</p>
+                            <p>You can use it to 鈥�</p>
+                            <p>These 鈥� are designed by 鈥�</p>
+                            <p>The package includes 鈥�</p>
+                            <p>It has/contains 鈥�</p>
+                            <p>This kind of 鈥� is practical and economical for the needs of 鈥�</p>
+                            <p>Our products are of superb quality and reasonable price.</p>
+                            <p>We can very well compete against 鈥� in price.</p>
+                            <p>鈥� are the best-selling products of this kind.</p>
+                        </div>
+                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
+                            <div class="banshi openImgBox">
+                                <div class="swiper-container swiper_ppt">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_01.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_02.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_03.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_04.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_05.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_06.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_07.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_08.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_09.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_10.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_11.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_12.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_13.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_14.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_15.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_16.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_17.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_18.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_19.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_20.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_21.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_22.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_23.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_24.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_25.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_26.png" />
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="imgBox" style="width: 100%; height: 100%">
+                                                <img src="../../assets/images/ppt/ppt_27.png" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="swiper-button-next"></div>
+                                    <div class="swiper-button-prev"></div>
+                                    <div class="pageBox"></div>
+                                </div>
+                                <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">76</span>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script>
 import matching from "@/components/matching/matching.vue";
+import dropdown from '@/components/dropdown/index.vue'
 import { getResourcePath } from "@/assets/methods/resources";
 export default {
     name: "chapter-Four",
-    components: { matching },
+    components: { matching,dropdown },
     props: {
         showPageList: {
             type: Array,
@@ -77,50 +2555,56 @@
     },
     data() {
         return {
-            imgThirteen: require("../../assets/images/grammar.jpg"),
-            showAnswerOne: false,
-            showAnswerTwo: false,
-            showAnswerThree: false,
-            showAnswerFour: false,
-            showAnswerFive: false,
+            correctIcon:require('@/assets/images/correct.svg'),
+            errorIcon:require('@/assets/images/error.svg'),
+            imgThirteen: require("../../assets/images/grammar4-1.png"),
+            imgThirteenOne: require("../../assets/images/grammar4-2.png"),
             showImg: false,
-            showQuestionAnswer: false,
+            showImgOne: false,
             rawData: {
                 left: [
                     {
                         oldId: "FB34",
-                        txt: "Martin銆�銆�銆�銆�Silk",
+                        txt: "1. My phone",
                     },
                     {
                         oldId: "64D6",
-                        txt: "Jessica銆�銆�The Great Wall",
+                        txt: "2. We can pay for almost anything",
                     },
                     {
                         oldId: "2ED4",
-                        txt: "Soren銆�銆�Chinese Food",
+                        txt: "3. Now almost nobody uses",
                     },
                     {
                         oldId: "44DE",
-                        txt: "Chinese銆�銆�銆�銆�Tea",
+                        txt: "4. We rely on mobile phones",
                     },
+                    {
+                        oldId: "J20B",
+                        txt: "5. Mobile phones have changed",
+                    }
                 ],
                 right: [
                     {
-                        oldId: "64D6",
-                        txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
-                    },
-                    {
-                        oldId: "FB34",
-                        txt: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
-                    },
-                    {
                         oldId: "2ED4",
-                        txt: "The clothing material is quite popular among Roman women inancient times.",
+                        txt: "a.a fixed-line telephone.",
                     },
                     {
                         oldId: "44DE",
-                        txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
+                        txt: "b. all the time now.",
                     },
+                    {
+                        oldId: "64D6",
+                        txt: "c. online or by using an App on the phone.",
+                    },
+                    {
+                        oldId: "FB34",
+                        txt: "d. is almost dead.",
+                    },
+                    {
+                        oldId: "J20B",
+                        txt: "e. how we go about our everyday life.",
+                    }
                 ],
             },
             value: [],
@@ -131,66 +2615,81 @@
                     {
                         id: "FB34",
                         linkValue:
-                            "The clothing material is quite popular among Roman women inancient times.",
-                        value: "Silk",
+                            "d. is almost dead.",
+                        value: "1. My phone",
                     },
                     {
                         id: "64D6",
                         linkValue:
-                            "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
-                        value: "The Great Wall",
+                            "c. online or by using an App on the phone.",
+                        value: "2. We can pay for almost anything",
                     },
                     {
                         id: "2ED4",
                         linkValue:
-                            "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
-                        value: "Chinese Food",
+                            "a. a fixed-line telephone.",
+                        value: "3. Now almost nobody uses",
                     },
                     {
                         id: "44DE",
                         linkValue:
-                            "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
-                        value: "Chinese Tea",
+                            "b. all the time now.",
+                        value: "4. We rely on mobile phones",
+                    },
+                    {
+                        id: "J20B",
+                        linkValue:
+                            "e. how we go about our everyday life.",
+                        value: "5. Mobile phones have changed",
                     },
                 ],
                 optionStyle: undefined,
                 id: 489306,
                 options: {
                     linkValues: [
+
                         {
-                            oldId: "64D6",
-                            txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
+                            oldId: "2ED4",
+                            txt: "a.a fixed-line telephone.",
                         },
                         {
                             oldId: "44DE",
-                            txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
+                            txt: "b. all the time now.",
+                        },
+                        {
+                            oldId: "64D6",
+                            txt: "c. online or by using an App on the phone.",
                         },
                         {
                             oldId: "FB34",
-                            txt: "The clothing material is quite popular among Roman women inancient times.",
+                            txt: "d. is almost dead.",
                         },
                         {
-                            oldId: "2ED4",
-                            txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
-                        },
+                            oldId: "J20B",
+                            txt: "e. how we go about our everyday life.",
+                        }
                     ],
                     values: [
                         {
                             oldId: "FB34",
-                            txt: "Martin  Silk",
+                            txt: "1. My phone",
                         },
                         {
                             oldId: "64D6",
-                            txt: "The Great Wall",
+                            txt: "2. We can pay for almost anything",
                         },
                         {
                             oldId: "2ED4",
-                            txt: "Chinese Food",
+                            txt: "3. Now almost nobody uses",
                         },
                         {
                             oldId: "44DE",
-                            txt: "Chinese Tea",
+                            txt: "4. We rely on mobile phones",
                         },
+                        {
+                            oldId: "J20B",
+                            txt: "5. Mobile phones have changed",
+                        }
                     ],
                 },
                 questionType: "matching",
@@ -201,7 +2700,7 @@
                 titleDescription: "1",
                 userChoise: [],
                 value: [],
-                answerImg: require("../../assets/images/matching-one.png"),
+                answerImg: require("../../assets/images/matching-four.png"),
             },
             questionData: {
                 warnUp: {
@@ -249,65 +2748,19 @@
                     five: "",
                     six: "",
                     seven: "",
-                    enight: "",
+                    eight: "",
                     nine: "",
-                },
-            },
-            testData: {
-                check: [],
-                tx: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                in: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                line: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                ts: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                },
-                gr: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                cm: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
                 },
             },
             resource: {
                 listenOne: "",
                 readingOne: "",
                 readingTwo: "",
+                readingThree: "",
+                readingFour: "",
+                listenTwo: "",
+                listenThree: "",
             },
-            dropDownList: [
-                "animal rescue and care",
-                "blood donation",
-                "community clean-ups",
-                "language service",
-            ],
             dropdownData: {
                 one: {
                     value: "",
@@ -330,13 +2783,838 @@
                     answer: "animal rescue and care",
                 },
             },
+            // 鏂板
+            warmUp:[
+                {
+                    type:'drapDown',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    options:['robot floor cleaner','self-balancing scooter','camera drone','camera drone','camera drone','VR headset'],
+                    value:[
+                        {
+                            answer:'robot floor cleaner',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'camera drone',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'VR headset',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'fingerprint door lock',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'smartwatch',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'self-balancing scooter',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:"2",
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            answer:"4",
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            answer:"1",
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            answer:"3",
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            answer:"6",
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            answer:"5",
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                    ]
+                }
+            ],
+            noSubmitData:[
+                {
+                    type:'shortAnswer',
+                    value:[
+                        {
+                            answer:[
+                                'a two-legged humanoid who can do house work',
+                                'a giant one-armed industrial robot holding a welding torch',
+                                'an alternative to pets like the robotic dog',
+                                'autonomous vehicles which can navigate and operate independently',
+                                'a companion to interact with humans, especially for the elderly or people with disabilities'
+                            ],
+                            isShowAnswer:false,
+                            userAnswer:'',
+                        },
+                        {
+                            answer:[
+                                'Domestic chores',
+                                'Healthcare support',
+                                'Manufacturing and labor-intensive tasks',
+                                'Assistance for people with disabilities',
+                                'Exploration and research',
+                                'Customer service',
+                                'Education',
+                                'Agriculture'
+                            ],
+                            isShowAnswer:false,
+                            userAnswer:''
+                        }
+                    ]
+                },
+                {
+                    type:'shortAnswer',
+                    value:[
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                    ]
+                },
+                {
+                    type:'checkbox',
+                    value:[
+                        {
+                            stem:'Do you like science?',
+                            option:['YES (Continue to Question 2)','NO (Go directly to Question 4)'],
+                            userAnswer:[]
+                        },
+                        {
+                            stem:'What/Who inspired your interest in science?',
+                            option:['Parents/Relatives.','Film/TV.','Friends.','Internet.','Teachers.',' A special event.','School or a particular subject.','I don鈥檛 know.','Books.','Other.'],
+                            userAnswer:[]
+                        },
+                        {
+                            stem:'Why are you interested in studying science?',
+                            option:['I am curious about the world.','It challenges me intellectually.','To earn money.','To get a good job.','To help others or contribute to society.','I don鈥檛 know.','To search for answers or make new discoveries.','Other.'],
+                            userAnswer:[]
+                        },
+                        {
+                            stem:'What are the main reasons that you are not interested in science?',
+                            option:[' It鈥檚 difficult for me to understand.','I find it boring.','Science is not spread to the public effectively.','I鈥檓 too lazy.','There has been nothing to encourage or inspire me.','I don鈥檛 know.','I don鈥檛 like my science teacher.','Other.'],
+                            userAnswer:[]
+                        }
+                    ]
+                },
+                {
+                    type:'shortAnswer',
+                    value:[
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:'',
+                            isShowAnswer:false,
+                            answer:'Staring at the unknown yet massive sky with clouds rolling by, way past the trees and deep into the stars, you are reminded of how small they are. Somehow the sky fills us with amazement and wonderment. Staring at the sky gears you to asking questions. Perhaps because it is a door to a universe. The sky reminds us of our past and where we are coming from. When you stare at the sky you see a history of places and times before you. You can see beyond where you are right now and peer towards where you are coming from.'
+                        },
+                        {
+                            userAnswer:'',
+                            isShowAnswer:false,
+                            answer:['a journey to Mars or other planets and travel in deep space',"uncover the secrets of the Universe and life鈥檚 origin",'find traces of distant life.','colonize space and exploit resources on other planets']
+                        },
+                    ]
+                },
+                {
+                    type:'table',
+                    value:[
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                    ]
+                },
+                {
+                    type:'shortAnswer',
+                    value:[
+                        {
+                            userAnswer:'',
+                            isShowAnswer:false,
+                            answer:'Sales letter is written to a potential consumer to introduce the company, a product, or service.'
+                        },
+                        {
+                            userAnswer:'',
+                            isShowAnswer:false,
+                            answer:'A sales letter aims introduce new product and service to your prospective clients, explains to the reader how they will benefit from the product or service and convinces them to buy your product or service.'
+                        },
+                    ]
+                },
+                {
+                    type:'shortAnswer',
+                    value:[
+                        {
+                            userAnswer:''
+                        }
+                    ]
+                },
+                
+            ],
+            readingOne:[
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'easier and safer',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'sea creatures',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'search-and-rescue',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'deliveries',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'emotions',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'select',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    stem:['Pepper','Spot','Mingo','Octobot'],
+                    option:[
+                        'It moves like a real dog.',
+                        'It could be found in stores.',
+                        'It is the size of a shoebox.',
+                        'It can carry heavy facilities.',
+                        'It will cheer you up if you frown.',
+                        'It can bring guests small items to their rooms.',
+                        "It's about three-foot-tall with a screen on the top.",
+                        'It travels close to the speed of an octopus in the water.',
+                    ],
+                    value:[
+                        {
+                            userAnswer:[],
+                            answer:['It could be found in stores.','It will cheer you up if you frown.']
+                        },
+                        {
+                            userAnswer:[],
+                            answer:['It moves like a real dog.','It can carry heavy facilities.']
+                        },
+                        {
+                            userAnswer:[],
+                            answer:['It can bring guests small items to their rooms.',"It's about three-foot-tall with a screen on the top.",]
+                        },
+                        {
+                            userAnswer:[],
+                            answer:["It is the size of a shoebox.","It travels close to the speed of an octopus in the water."]
+                        }
+                    ]
+                },
+                {
+                    type:"fill",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'creature',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'habitat',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'mission',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'facilities',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'react',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'mechanical',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:"fill",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'in',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'on',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'on',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'on',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'up',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:"fill",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'鍦ㄩ獞骞宠 杞︾殑鏃跺�欒淇濇寔韬綋骞宠 ',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'鏈哄櫒浜虹殑浠诲姟鏄负鐜板満鐨勬妧鏈汉鍛樻彁渚涗腑澶粨搴撶墿璧勫彇閫佹湇鍔�',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'鎴戜滑鐨勫洟闃熶笉浠呮湁涓撲笟鐨勮澶囷紝杩樻湁涓板瘜鐨勬晳鎻寸粡楠�',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'椋熺墿鏂欑悊鏈烘槸鎼呮媽钄彍鍜屾按鏋滅殑濂藉伐鍏�',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'table',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'more often',
+                            userAnswer:'',
+                            isRight:""
+                        },
+                        {
+                            answer:'better',
+                            userAnswer:'',
+                            isRight:""
+                        },
+                        {
+                            answer:'worse',
+                            userAnswer:'',
+                            isRight:""
+                        },
+                        {
+                            answer:'earlier',
+                            userAnswer:'',
+                            isRight:""
+                        },
+                        {
+                            answer:'heavier',
+                            userAnswer:'',
+                            isRight:""
+                        },
+                        {
+                            answer:'later',
+                            userAnswer:'',
+                            isRight:""
+                        },
+                        {
+                            answer:'more dangerous',
+                            userAnswer:'',
+                            isRight:""
+                        },
+                        {
+                            answer:'thinner',
+                            userAnswer:'',
+                            isRight:""
+                        },
+                        {
+                            answer:['farther','further'],
+                            userAnswer:'',
+                            isRight:""
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'earlier',
+                            userAnswer:"",
+                            isRight:''
+                        },
+                        {
+                            answer:'thinner',
+                            userAnswer:"",
+                            isRight:''
+                        },
+                        {
+                            answer:'later',
+                            userAnswer:"",
+                            isRight:''
+                        },
+                        {
+                            answer:'more often',
+                            userAnswer:"",
+                            isRight:''
+                        },
+                        {
+                            answer:'heavier',
+                            userAnswer:"",
+                            isRight:''
+                        },
+                        {
+                            answer:'more dangerous',
+                            userAnswer:"",
+                            isRight:''
+                        },
+                        {
+                            answer:'better',
+                            userAnswer:"",
+                            isRight:''
+                        },
+                        {
+                            answer:'further',
+                            userAnswer:"",
+                            isRight:''
+                        },
+                    ]
+                }
+            ],
+            readingTwo:[
+                {
+                    type:'fill',
+                    isShowAnswer:false,
+                    isComplete:false,
+                    value:[
+                        {
+                            answer:'39',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'30',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'340',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'2016',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'28',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'38',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'15',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'select',
+                    isShowAnswer:false,
+                    isComplete:false,
+                    option:['T','F'],
+                    value:[
+                        {
+                            stem:'According to Zhao Hongzhou鈥檚 analysis,scientists usually make their greatest achievements before the age of 45.',
+                            answer:'F',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'FAST helps scientists better understand the origin of the universe and find potential life on other planets.',
+                            answer:'F',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'Yao Rui is lucky to associate her personal interests with the development of the country.',
+                            answer:'T',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'Sun Jinghai encountered many difficulties in the construction of FAST and lost confidence in himself.',
+                            answer:'F',
+                            userAnswer:''
+                        },
+                        {
+                            stem:'Young Chinese scientists contribute their wisdom to building a community of a shared future.',
+                            answer:'T',
+                            userAnswer:''
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            stemOne:'The o',
+                            stemTwo:'of life is one of the great mysteries in the universe.',
+                            answer:'rigin',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'The most c',
+                            stemTwo:'science is biology followed by chemistry and next is physics.',
+                            answer:'omplex',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'Years of doing scientific research had made her very p',
+                            stemTwo:'in her working methods.',
+                            answer:'recise',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'The competition is designed to inspire and r',
+                            stemTwo:'the next generation of scientific leaders.',
+                            answer:'eward',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'Learning how to o',
+                            stemTwo:'challenges is a necessary life skill on the road to success.',
+                            answer:'vercome',
+                            userAnswer:''
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            stemOne:'If we are nice to others,we expect that they will be nice to us',
+                            stemTwo:'.',
+                            answer:'in return',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'We will always remember Yuan Longping who',
+                            stemTwo:'China鈥檚 food security.',
+                            answer:'contributes to',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'The service of food delivery robot is still not satisfactory,but the company say they鈥檙e',
+                            stemTwo:'it.',
+                            answer:'working on',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'All drivers',
+                            stemTwo:'their vehicles鈥攅ven when it鈥檚 a self-driving car accident.',
+                            answer:'responsible for',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'Studies show how customers can',
+                            stemTwo:'innovation development by giving feedback.',
+                            answer:'be involved in',
+                            userAnswer:''
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            stemOne:'He is probably the ',
+                            stemTwo:'(creative) designer in our company.',
+                            answer:'most creative',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'This automated store offers the',
+                            stemTwo:'(wide) variety of products.',
+                            answer:'widest',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'His ankles hurt badly,but his knees hurt',
+                            stemTwo:'(badly).',
+                            answer:'worst',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'Penicillin is one of the',
+                            stemTwo:'(big) scientific discoveries of all time.',
+                            answer:'biggest',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'You can contact me',
+                            stemTwo:'(easily) by email.Here鈥檚 my address.',
+                            answer:'most easily',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'The light bulb is one of the',
+                            stemTwo:'(helpful) inventions.',
+                            answer:'most helpful',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'In our office,Zhang Ming works by far the',
+                            stemTwo:'(hard).',
+                            answer:'hardest',
+                            userAnswer:''
+                        },
+                        {
+                            stemOne:'As I live',
+                            stemTwo:'(near) to the station,I鈥檒l go and buy the train tickets for us.',
+                            answer:'nearest',
+                            userAnswer:''
+                        },
+                    ]
+                },
+            ],
+            listenTwo:[
+                {
+                    type:'checkbox',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            userAnswer:[],
+                            answer:['What it is','Where Nadia got it','How much it is','What Nadia uses it for','When Nadia owned it','Why it is important to Nadia']
+                        }
+                    ]
+                },
+                {
+                    type:'table',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'regularly',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'favorite',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'smartly',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'fun and easy',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'useful',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'Instantly',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                }
+            ],
+            practicalWriting:[
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'suffer from',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'difference between',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'easy to handle',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'limited time',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            answer:'take advantage of',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            answer:'We have a solution for you',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            answer:'We have just launched a new product',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            answer:'it extends up to 4 feet',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            answer:'Only $19.99 with shipping',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            answer:'If you鈥檙e interested or want to know more information',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            answer:'Welcome you to sample our new product',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                    ]
+                },
+                {
+                    type:'shortAnswer',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            userAnswer:''
+                        }
+                    ]
+                }
+            ]
         };
     },
     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);
@@ -345,130 +3623,65 @@
         if (dropdownData) {
             this.dropdownData = JSON.parse(dropdownData);
         }
+        const warmUp = localStorage.getItem('english-chapter04-warmup')
+        if(warmUp) this.warmUp = JSON.parse(warmUp)
+        const noSubmitData = localStorage.getItem('english-chapter04-noSubmitData')
+        if(noSubmitData) this.noSubmitData = JSON.parse(noSubmitData)
+        const readingOne = localStorage.getItem('english-chapter04-readingOne')
+        if(readingOne) this.readingOne = JSON.parse(readingOne)
+        const readingTwo =  localStorage.getItem('english-chapter04-readingTwo')
+        if(readingTwo) this.readingTwo = JSON.parse(readingTwo)
+        const practicalWriting =  localStorage.getItem('english-chapter04-practicalWriting')
+        if(practicalWriting) this.practicalWriting = JSON.parse(practicalWriting)
         this.getPath();
     },
     methods: {
+        isTextRight(answer, data, num) {
+            let flag = null;
+            if (data) {
+                flag = answer[num] == data
+            }
+            return flag;
+        },
+        arrayToString(data) {
+            if(Array.isArray(data)) {
+            return data.toString()
+            } else {
+                return data
+            }
+        },
         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: [],
-                tx: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                in: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                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)
-            );
-        },
         async getPath() {
             this.resource.listenOne = await getResourcePath(
-                "422139A2EF66EA888C5ED1D550AE23E0"
+                "A502FE9E4A034ACF1B055B1D547C4B8F"
             );
             this.resource.readingOne = await getResourcePath(
-                "3F442B682D84C8AB06C800B29D734920"
+                "59A4053C6BE193D9A97945841614841D"
             );
             this.resource.readingTwo = await getResourcePath(
-                "E8719EC88026BCFB11D292AA999F6D3D"
+                "541CA8B7A9AE8746340C1259A83F8422"
+            );
+            this.resource.readingThree = await getResourcePath(
+                "53A742267A1C22C01B8D5D35B13D3B9A"
+            );
+        
+            this.resource.listenTwo = await getResourcePath(
+                "2683C3F79104E353CE30961433F6AB35"
+            );
+
+            this.resource.listenThree = await getResourcePath(
+                "2683C3F79104E353CE30961433F6AB35"
             );
         },
         showAnswer(type) {
             if (type == "showImg") {
                 this.showImg = !this.showImg;
+            } else if (type == "showImgOne") {
+                this.showImgOne = !this.showImgOne;
             }
-        },
-        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;
+            setTimeout(() => { this.$emit("initViewer", "") }, 500)
         },
         changeDropdown() {
             localStorage.removeItem("english-dropdown-one");
@@ -478,20 +3691,331 @@
                 item.isRight = null;
             }
         },
-        setDropdownData() {
-            localStorage.setItem(
-                "english-dropdown-one",
-                JSON.stringify(this.dropdownData)
-            );
+        // 鏂板
+        showNoSubmitAnswer(index,num) {
+            this.$set(this.noSubmitData[index].value[num],'isShowAnswer',!this.noSubmitData[index].value[num].isShowAnswer)
         },
-        saveData() {
-            console.log(this.testData);
+        savewarmUp() {
+            localStorage.setItem('english-chapter04-warmup',JSON.stringify(this.warmUp))
         },
-        audioPlay() {
-            this.$emit("closeMiniAudio");
+        handlewarmUp() {
+            for (let index = 0; index < this.warmUp.length; index++) {
+                const item = this.warmUp[index];
+                item.isComplete = true
+                item.isShowAnswer = true
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.isRight = citem.userAnswer == citem.answer
+                }
+            }
+            this.savewarmUp()
         },
+        recastwarmUp() {
+            for (let index = 0; index < this.warmUp.length; index++) {
+                const item = this.warmUp[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.isRight = null
+                    citem.userAnswer = ''
+                }
+            }
+            localStorage.removeItem('english-chapter04-warmup')
+        },
+        viewwarmUp() {
+            for (let index = 0; index < this.warmUp.length; index++) {
+                const item = this.warmUp[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        saveNoSubmitData() {
+            localStorage.setItem('english-chapter04-noSubmitData',JSON.stringify(this.noSubmitData))
+        },
+        saveReadingOne() {
+            localStorage.setItem('english-chapter04-readingOne',JSON.stringify(this.readingOne))
+        },
+        changeDropdownDataOne(data) {
+            this.$set(this.readingOne[1].value[0],'userAnswer',data)
+            this.saveReadingOne()
+        },
+        changeDropdownDataTwo(data) {
+            this.$set(this.readingOne[1].value[1],'userAnswer',data)
+            this.saveReadingOne()
+        },
+        changeDropdownDataThree(data) {
+            this.$set(this.readingOne[1].value[2],'userAnswer',data)
+            this.saveReadingOne()
+        },
+        changeDropdownDataFour(data) {
+            this.$set(this.readingOne[1].value[3],'userAnswer',data)
+            this.saveReadingOne()
+        },
+        handleReadingOne() {
+            for (let index = 0; index < this.readingOne.length; index++) {
+                const item = this.readingOne[index];
+                item.isComplete = true
+                item.isShowAnswer = true
+                for (let cindex = 0;  cindex< item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    if(item.type == 'select') {
+                        const sortedArr1 = citem.answer.slice().sort();
+                        const sortedArr2 = citem.userAnswer.slice().sort();
+                        citem.isRight = sortedArr1.every(
+                            (value, index) => value === sortedArr2[index]
+                        );
+                    } else if(item.type == 'table') {
+                        if(typeof citem.userAnswer == 'string') {
+                            citem.isRight == citem.userAnswer == citem.answer
+                        } else {
+                            citem.isRight == citem.answer.indexOf(citem.userAnswer) > -1 ? true :false
+                        }
+                    } 
+                    else {
+                        citem.isRight = citem.answer == citem.userAnswer
+                    }
+                    
+                }
+            }
+            console.log('read',this.readingOne);
+        },
+        recastReadingOne() {
+            localStorage.removeItem('english-chapter04-readingOne')
+            this.$refs.choiceDropdownOne.submitSelection()
+            this.$refs.choiceDropdownTwo.submitSelection()
+            this.$refs.choiceDropdownThree.submitSelection()
+            this.$refs.choiceDropdownFour.submitSelection()
+            for (let index = 0; index < this.readingOne.length; index++) {
+                const item = this.readingOne[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                for (let cindex = 0;  cindex< item.value.length; cindex++) {
+                    const citem = item.value[cindex]
+                    citem.isRight = null
+                    if(item.type == 'select') {
+                        citem.userAnswer = []
+                    } else {
+                        citem.userAnswer = ''
+                    }
+                    
+                }
+            }
+        },
+        viewReadingOne() {
+            for (let index = 0; index < this.readingOne.length; index++) {
+                const item = this.readingOne[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        saveReadingTwo() {
+            localStorage.setItem('english-chapter04-readingTwo',JSON.stringify(this.readingTwo))
+        },
+        handleReadingTwo() {
+            for (let index = 0; index < this.readingTwo.length; index++) {
+                const item = this.readingTwo[index];
+                item.isComplete = true
+                item.isShowAnswer = true
+                for (let cindex = 0;  cindex < item.value.length; cindex++) {
+                    const citem = item.value[index];
+                    citem.isRight = citem.answer == citem.userAnswer
+                }
+            }
+            this.saveReadingTwo()
+        },
+        recastReadingTwo() {
+            localStorage.removeItem('english-chapter04-readingTwo')
+            for (let index = 0; index < this.readingTwo.length; index++) {
+                const item = this.readingTwo[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                for (let cindex = 0;  cindex < item.value.length; cindex++) {
+                    const citem = item.value[index];
+                    citem.isRight = null
+                    citem.userAnswer = ''
+                }
+            }
+        },
+        viewReadingTwo() {
+            for (let index = 0; index < this.readingTwo.length; index++) {
+                const item = this.readingTwo[index];
+                item.isShowAnswer = true
+            }
+        },
+        savelistenTwo() {
+            localStorage.setItem('english-chapter04-listenTwo',JSON.stringify(this.listenTwo))
+        },
+        handleListenTwo() {
+            for (let index = 0; index < this.listenTwo.length; index++) {
+                const item = this.listenTwo[index];
+                item.isComplete = true
+                item.isShowAnswer = true
+                if(item.type == 'table') {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = citem.answer == citem.userAnswer
+                    }
+                }   
+                
+            }
+            this.savelistenTwo()
+        },
+        recastListenTwo() {
+            for (let index = 0; index < this.listenTwo.length; index++) {
+                const item = this.listenTwo[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                if(item.type == 'table') {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = null
+                        citem.userAnswer = ''
+                    }
+                }   
+                
+            }
+            localStorage.removeItem('english-chapter04-listenTwo')
+        },
+        viewListenTwo() {
+            for (let index = 0; index < this.listenTwo.length; index++) {
+                const item = this.listenTwo[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        savePracticalWriting() {
+            localStorage.setItem('english-chapter04-practicalWriting',JSON.stringify(this.practicalWriting))
+        },
+        handlePracticalWriting() {
+            for (let index = 0; index < this.practicalWriting.length; index++) {
+                const item = this.practicalWriting[index];
+                item.isComplete = true,
+                item.isShowAnswer = true
+                if(item.type != 'shortAnswer')  {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = citem.answer == citem.userAnswer
+                    }
+                }
+            }
+            this.savePracticalWriting()
+        },
+        recastPracticalWriting() {
+            for (let index = 0; index < this.practicalWriting.length; index++) {
+                const item = this.practicalWriting[index];
+                item.isComplete = false
+                item.isShowAnswer = false
+                for (let cindex = 0; cindex < item.value.length; cindex++) {
+                    const citem = item.value[cindex];
+                    citem.userAnswer = ''
+                    if(item.type != 'shortAnswer')  
+                        citem.isRight = null
+                }
+                
+            }
+            localStorage.removeItem('english-chapter04-practicalWriting')
+        },
+        viewPracticalWriting() {
+            for (let index = 0; index < this.practicalWriting.length; index++) {
+                const item = this.practicalWriting[index];
+                item.isShowAnswer = false
+            }
+        }
     },
 };
 </script>
 
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+p {
+    font-size: 16px !important;
+}
+
+.bodystyle {
+    margin: 0 !important;
+}
+
+.line-border-box {
+    margin-left: 10px;
+    display: inline-block;
+    width: 50%;
+    height: 3px;
+    background-color: #f9a71b;
+}
+
+.mr-20 {
+    margin-right: 20px;
+}
+
+.dl-box {
+    display: flex;
+    flex-wrap: wrap;
+
+    .dl-span {
+        display: inline-block;
+        text-indent: 0;
+        margin-bottom: 15px;
+        height: 20px;
+        line-height: 20px;
+    }
+}
+
+.btn-w {
+    font-size: 14px;
+    border-width: 1px;
+    min-width: 80px;
+    height: 30px;
+    background-color: #fff;
+
+    &:hover {
+        background-color: #0bab87;
+        color: #fff;
+    }
+}
+
+.banshi {
+    position: relative;
+    margin-top: 40px;
+    width: 100%;
+    height: 350px;
+    margin: 0 auto;
+}
+
+.pageBox {
+    z-index: 9999999999;
+    color: #999;
+    position: absolute;
+    left: 48%;
+    bottom: 0px;
+}
+
+select {
+    height: 24px;
+}
+
+.mini-audio {
+    width: 200px;
+    height: 200px;
+    position: fixed;
+    right: 0;
+    background-color: red;
+}
+.dropdown-box-one {
+    
+    li {
+        width: 33%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+    }
+}
+.choice-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    li {
+        display: flex;
+        margin-top: 5px;
+        span {
+            margin-right: 4px;
+        }
+    }
+}
+</style>
\ No newline at end of file

--
Gitblit v1.9.1