From be6d91929e7095ec76cccaab240a84159626b421 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 22 七月 2024 16:26:54 +0800
Subject: [PATCH] 英语第八单元(调试16:26)

---
 src/books/English/view/components/chapter008.vue |  761 ++++++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 501 insertions(+), 260 deletions(-)

diff --git a/src/books/English/view/components/chapter008.vue b/src/books/English/view/components/chapter008.vue
index 812c58a..25f3528 100644
--- a/src/books/English/view/components/chapter008.vue
+++ b/src/books/English/view/components/chapter008.vue
@@ -32,21 +32,133 @@
                         <h2 id="b029"><img class="img-0" alt="" src="../../assets/images/dy8-le1.jpg" /></h2>
                         <h3 id="c064"><span class="bjh3">Warm-up</span></h3>
                         <p><b>鈪�.Figure out what the people in the following pictures do.</b></p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-1.jpg" /></p>
-                        <p class="center">1._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-2.jpg" /></p>
-                        <p class="center">2._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-3.jpg" /></p>
-                        <p class="center">3._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-4.jpg" /></p>
-                        <p class="center">4._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-5.jpg" /></p>
-                        <p class="center">5._____________________</p>
-                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-6.jpg" /></p>
-                        <p class="center">6._____________________</p>
-                        <p><b>鈪�.What other jobs can you list?</b></p>
-                        <p>____________________________________________</p>
+                        <div class="openImgBox">
+                            <div class="fl ju-bt">
+                                <div class="left" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-1.jpg" alt="" class="w100" />
+                                        </p>
+                                        <p class="center">
+                                            1.
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[0].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(0)" />
+                                            <img :src="warmUp[0].value[0].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[0].isRight == true || warmUp[0].value[0].isRight == false">
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="right" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-2.jpg" alt="" style="width: 98%" />
+                                        </p>
+                                        <p class="center">
+                                            2.
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[1].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(1)" />
+                                            <img :src="warmUp[0].value[1].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[1].isRight == true || warmUp[0].value[1].isRight == false">
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="fl ju-bt">
+                                <div class="left" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-3.jpg" alt="" style="width: 98%" />
+                                        </p>
+                                        <p class="center">
+                                            3.
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[2].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(2)" />
+                                            <img :src="warmUp[0].value[2].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[2].isRight == true || warmUp[0].value[2].isRight == false">
+                                        </p>
+                                    </div>
+
+                                </div>
+                                <div class="right" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-4.jpg" alt="" style="width: 94%" />
+                                        </p>
+                                        <p class="center">
+                                            4.
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[3].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(3)" />
+                                            <img :src="warmUp[0].value[3].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[3].isRight == true || warmUp[0].value[3].isRight == false">
+                                        </p>
+                                    </div>
+
+                                </div>
+                            </div>
+
+                            <div class="fl ju-bt">
+                                <div class="left" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-5.jpg" alt="" class="w100" />
+                                        </p>
+                                        <p class="center">
+                                            5.
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[4].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(4)" />
+                                            <img :src="warmUp[0].value[4].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[4].isRight == true || warmUp[0].value[4].isRight == false">
+                                        </p>
+                                    </div>
+
+                                </div>
+                                <div class="right" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0146-6.jpg" alt="" style="width: 98%" />
+                                        </p>
+                                        <p class="center">
+                                            6.
+                                            <input type="text" class="input-bottom-border w50"
+                                                v-model="warmUp[0].value[5].userAnswer" @input="setWarmUp"
+                                                @blur="handleWarmUp(5)" />
+                                            <img :src="warmUp[0].value[5].isRight ? correctIcon : errorIcon"
+                                                v-if="warmUp[0].value[5].isRight == true || warmUp[0].value[5].isRight == false">
+                                        </p>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                        <p><b>鈪�.What other jobs can you list?</b>
+                            <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p>
+                            <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
+                            </textarea>
+                        </p>
+                        <div class="show-answer-box" v-if="showAnswerOne">
+                            <div>绛旀:</div>
+                            <div>
+                                <img src="../../assets/images/M8WarmUp.png" alt="" class="w100" />
+                            </div>
+                        </div>
                     </div>
+
                 </div>
                 <div class="preface-bottom">
                     <span class="contet-num-box">136</span>
@@ -68,10 +180,22 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <h3 id="c065"><span class="bjh3">Listening</span></h3>
-                        <p class="center"> <audio :src="resource.listenOne" controls
-                                controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
-                        <p><b>Watch the video and find out how the speakers describe their jobs.</b></p>
+                        <h3 id="c065" class="fl al-cn">
+                            <span class="bjh3">Listening</span>
+                            <!--controlslist="noplaybackrate nodownload"鍚庨潰鐨勯煶棰戞鍔犲叆杩欎釜-->
+                            <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio>
+                        </h3>
+                        <p><b>Watch the video and find out how the speakers describe their jobs.</b>
+                            <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
                         <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                             <tr class="table-th-bc">
                                 <td class="tl-cn">Who is he/she?</td>
@@ -129,13 +253,60 @@
                                 </td>
                             </tr>
                         </table>
+                        <div class="show-answer-box" v-if="showAnswerTwo">
+                            <div>绛旀:</div>
+                            <div>
+                                <img src="../../assets/images/M8ListeningOne.png" alt="" class="w100" />
+                            </div>
+                        </div>
                         <h3 id="c066"><span class="bjh3">Reading</span></h3>
                         <p>1.There is a saying that a part-time job can be a way to gain the experience necessary for
-                            full-time employment.Do you agree? Why or why not?</p>
-                        <p>2.If you鈥檙e considering a part-time job,what鈥檚 your expectation of it?</p>
-                        <p class="center">__________________</p>
+                            full-time employment.Do you agree? Why or why not?
+                            <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p>
+                            <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
+                            </textarea>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
+                            绛旀锛�(1).Gain confidence and responsibility &nbsp; (2).Explore alternate career options &nbsp; (3).Strengthen resume &nbsp;
+                            (4).Develop work ethic skills &nbsp; (5).Create opportunities for socializing &nbsp; (6).Enhance communication skills &nbsp;
+                            (7).Build networking opportunities &nbsp; (8).Gain independence &nbsp; (9).Get a stable cash flow &nbsp; (10).Learn money management skills &nbsp;
+                        </p>
+                        <p>2.If you鈥檙e considering a part-time job,what鈥檚 your expectation of it?
+                            <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
+                                    viewBox="0 0 20.501 20.501">
+                                    <path class="a"
+                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                                        transform="translate(-3327.144 15329)" />
+                                </svg>
+                            </span>
+                        </p>
+                        <p>
+                            <textarea v-model="questionData.reading.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
+                            </textarea>
+                        </p>
+                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
+                            绛旀锛�(1).a good salary &nbsp; (2).a regular working time &nbsp; (3).a friendly working team &nbsp;
+                            (4).comfortable working environment 
+                            
+                        </p>
+                        <p class="center"> 
+                            <input  type="text" class="input-bottom-border input-bc-t " style="width: 30%;"
+                                        v-model="questionData.reading.four" @change="setBookQuestion" />
+                        </p>
                         <p class="center"> <audio :src="resource.listenOne" controls
-                                controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
+                                controlslist="noplaybackrate nodownload" class="audio"></audio></p>
                         <p>Everyone鈥檚 first job is special.There are a couple of reasons for this:the experience is
                             burned into one鈥檚 memory; it gives you the practice needed to
                             <span class="word-bc" @click="saveWord($event, 'fulfill')">fulfill</span>
@@ -211,9 +382,9 @@
                             <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
                             <span class="line-border-box"></span>
                         </p>
-                        <p class="center"><audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+                        <p><audio :src="resource.readingTwo" controls
+                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
+                                class="audio"></audio></p>
                         <p>fulfill /f蕣l藞f瑟l/ <i>v.</i> 绗﹀悎锛涘饱琛�</p>
                         <div class="bkbj">
                             <p><i>to do or have what is required or necessary</i></p>
@@ -636,18 +807,26 @@
                         <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" /></p>
                         <div class="bk-wh">
                             <p class="dl-box">
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'dangerous')">dangerous</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'demanding')">demanding</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'dull')">dull</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'exciting')">exciting</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'repetitive')">repetitive</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'risky')">risky</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'satisfying')">satisfying</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'stimulating')">stimulating</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'stressful')">stressful</span>
-                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'voluntary')">voluntary</span>
-              </p>
-                            
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'dangerous')">dangerous</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'demanding')">demanding</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'dull')">dull</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'exciting')">exciting</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'repetitive')">repetitive</span>
+                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'risky')">risky</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'satisfying')">satisfying</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'stimulating')">stimulating</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'stressful')">stressful</span>
+                                <span class="word-bc mr-20 dl-span"
+                                    @click="saveWord($event, 'voluntary')">voluntary</span>
+                            </p>
+
                             <p>銆�銆�銆�銆�銆�銆�銆�銆�銆�
                             </p>
                         </div>
@@ -860,8 +1039,8 @@
                         <p>2.What鈥檚 your suggestion for making the 鈥渞ight鈥� career choice?</p>
                         <p class="center"><b>Choose a Career You Love</b></p>
                         <p class="center"><audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
+                                class="audio"></audio></p>
                         <p>We spend a large
                             <span class="word-bc" @click="saveWord($event, 'portion')">portion</span>
                             of our lives working,so how we spend those years matters.It is
@@ -943,7 +1122,7 @@
                             <span class="line-border-box"></span>
                         </p>
                         <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
-                            style="margin-left: 10px" class="audio" @play="audioPlay"></audio>
+                            style="margin-left: 10px" class="audio"></audio>
                         <p>portion /藞p蓴藧蕛n/ <i>n.</i>閮ㄥ垎</p>
                         <div class="bkbj">
                             <p><i>one part of sth.larger</i></p>
@@ -1373,8 +1552,8 @@
                         <h2 id="b031"><img class="img-0" alt="" src="../../assets/images/dy8-le3.jpg" /></h2>
                         <h3 id="c071"><span class="bjh3">Listening</span></h3>
                         <p class="center"> <audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
-                                @play="audioPlay"></audio></p>
+                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
+                                class="audio"></audio></p>
                         <p><b>鈪�.Derek is talking about his job interview.Listen to the recording and fill in the blanks
                                 with what you hear.</b></p>
                         <p>Hi,everyone.I鈥檓 Derek Cruise.I landed a job interview the other day.It is a bank
@@ -1564,12 +1743,11 @@
                         <p><b>Role 1:Interviewer</b></p>
                         <p>1.Work with your partner and decide what questions you will ask during the
                             interview.2.Complete the worksheet for the interviewer.</p>
-                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
-                            style="margin-left: 10px" class="audio" @play="audioPlay"></audio>
-                        <p class="center"></p>
-                        <p><b>Role 2:Interviewee</b></p>
-                        <p>1.Make a list of the information which might be useful in the interview.2.Finish the
-                            follow-up email after the interview.</p>
+                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" <p
+                            class="center"></p>
+                            <p><b>Role 2:Interviewee</b></p>
+                            <p>1.Make a list of the information which might be useful in the interview.2.Finish the
+                                follow-up email after the interview.</p>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1593,18 +1771,18 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p class="center"><b>Worksheet for the Interviewer</b></p>
-                        <table border="1" cellpadding="4" cellspacing="0"  class="fz-14 fieldset-5">
+                        <table border="1" cellpadding="4" cellspacing="0" class="fz-14 fieldset-5">
                             <tr class="table-tr-bc">
                                 <td class="tl-cn ">
                                     <p class="table-p">Name: <input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 35em"
-                                        v-model="testData.in.one" @change="setTestData" /></p>
+                                            class="input-bottom-border input-bc-t" style="width: 35em"
+                                            v-model="testData.in.one" @change="setTestData" /></p>
                                     <p class="table-p">Phone: <input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 34.8em"
-                                        v-model="testData.in.one" @change="setTestData" /></p>
+                                            class="input-bottom-border input-bc-t" style="width: 34.8em"
+                                            v-model="testData.in.one" @change="setTestData" /></p>
                                     <p class="table-p">Email: <input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 35em"
-                                        v-model="testData.in.one" @change="setTestData" /></p>
+                                            class="input-bottom-border input-bc-t" style="width: 35em"
+                                            v-model="testData.in.one" @change="setTestData" /></p>
                                 </td>
                             </tr>
 
@@ -1615,7 +1793,7 @@
                                         class="w100 table-tr-bc b0 table-textarea "
                                         @change="setBookQuestion"></textarea>
                                 </td>
-                  
+
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
@@ -1624,7 +1802,7 @@
                                         class="w100 table-tr-bc b0 table-textarea "
                                         @change="setBookQuestion"></textarea>
                                 </td>
-        
+
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
@@ -1633,7 +1811,7 @@
                                         class="w100 table-tr-bc b0 table-textarea "
                                         @change="setBookQuestion"></textarea>
                                 </td>
-  
+
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
@@ -1856,16 +2034,189 @@
     },
     data() {
         return {
-            imgThirteen: require("../../assets/images/grammar8-1.png"),
-            imgThirteenOne: require("../../assets/images/grammar8-2.png"),
+            warmUp: [
+                {
+                    type: "fill",
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: 'fitness coach',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'courier',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'flight attendant',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'sales representative',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'cyberathlete',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: 'machinist',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                    ]
+                },
+            ],
+            questionDataOn:[
+                {
+                    type:"fill",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {   
+                            stem:"What job did the author take?",
+                            answer:"Pulling out weeds",
+                            userAnswer:"",
+                        },
+                        {
+                            stem:"How did he describe his job?",
+                            answer:"Tedious",
+                            userAnswer:"",
+                        },
+                        {
+                            stem:"What can be a proper title for this passage?",
+                            answer:"My first job",
+                            userAnswer:"",
+                        },
+                    ]
+                },
+                {
+                    type:"fill",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            userAnswer:"",
+                        },
+                        {   
+                            userAnswer:"",
+                        },
+                        {   
+                            userAnswer:"",
+                        },
+                        {
+                            userAnswer:"",
+                        },
+                        {
+                            userAnswer:"",
+                        },
+                    ]
+                },
+                {
+                    type:"fill",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {   
+                            answer:"I wanted to buy a new speed cube, but I did not have any money, and my parents would not give me the money.",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"The experience is burned in one's memory, it gives you the practice needed to fulfill other positions, and it teaches you about the value of money.",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"The experience hardened my spirits and resolve and supplied me with the value of money.",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"I went to Mrs. Hudson, and asked her for the work to tend her garden.",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"My first job was to pull out weeds.",
+                            userAnswer:"",
+                        },
+                    ]
+                },
+                {
+                    type:"fill",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {   
+                            answer:"couple",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"elderly",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"neighborhood",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"tedious",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"value",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"sweat",
+                            userAnswer:"",
+                        },
+                    ]
+                },
+                {
+                    type:"fill",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {   
+                            answer:"couple",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"elderly",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"neighborhood",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"tedious",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"value",
+                            userAnswer:"",
+                        },
+                        {
+                            answer:"sweat",
+                            userAnswer:"",
+                        },
+                    ]
+                },
+            ],
             showAnswerOne: false,
             showAnswerTwo: false,
             showAnswerThree: false,
             showAnswerFour: false,
-            showAnswerFive: false,
+            imgThirteen: require("../../assets/images/grammar8-1.png"),
+            imgThirteenOne: require("../../assets/images/grammar8-2.png"),
+            correctIcon: require('@/assets/images/correct.svg'),
+            errorIcon: require('@/assets/images/error.svg'),
             showImg: false,
             showImgOne: false,
-            showQuestionAnswer: false,
             rawData: {
                 left: [
                     {
@@ -1985,42 +2336,17 @@
                 answerImg: require("../../assets/images/matching-one.png"),
             },
             questionData: {
-                warnUp: {
-                    one: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese knot",
-                    },
-                    two: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese medicine",
-                    },
-                    three: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese calligraphy",
-                    },
-                    four: {
-                        value: "",
-                        isRight: null,
-                        answer: "Taichi",
-                    },
-                    five: {
-                        value: "",
-                        isRight: null,
-                        answer: "sweet dumpling",
-                    },
-                    six: {
-                        value: "",
-                        isRight: null,
-                        answer: "Chinese chess",
-                    },
-                    seven: "",
-                },
                 reading: {
                     one: "",
                     two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    six: "",
+                    seven: "",
+                    eight: "",
+                    nine: "",
+                    ten: "",
                 },
                 table: {
                     one: "",
@@ -2121,14 +2447,6 @@
                 readingOne: "",
                 readingTwo: "",
             },
-            dropDownList: [
-                "online shopping",
-                "facial recognition",
-                "electronic payment",
-                "intercity train",
-                "shared bike",
-                "take-away service",
-            ],
             dropdownData: {
                 one: {
                     value: "",
@@ -2161,89 +2479,101 @@
                     answer: "facial recognition",
                 },
             },
+            listenThree: [
+                {
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: '',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: '',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: '',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: '',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                        {
+                            answer: '',
+                            userAnswer: '',
+                            isRight: null
+                        },
+                    ]
+                }
+            ]
         };
     },
     mounted() {
-        const testData = localStorage.getItem("english-testOne");
-        if (testData) {
-            this.testData = JSON.parse(testData);
+        const warmUp = localStorage.getItem("english-chapter-8-warmUp");
+        if (warmUp) {
+            this.warmUp = JSON.parse(warmUp);
         }
-        const bookQuestion = localStorage.getItem("english-book-question-one");
+        const bookQuestion = localStorage.getItem("english-book-chapter08-question-one");
         if (bookQuestion) {
             this.questionData = JSON.parse(bookQuestion);
-        }
-        const dropdownData = localStorage.getItem("english-dropdown-one");
-        if (dropdownData) {
-            this.dropdownData = JSON.parse(dropdownData);
         }
         this.getPath();
     },
     methods: {
+        handleWarmUp(type) {
+            if (this.warmUp[0].value[type].userAnswer.trim()) {
+                this.warmUp[0].value[type].isRight = this.warmUp[0].value[type].userAnswer.trim() == this.warmUp[0].value[type].answer
+            } else {
+                this.warmUp[0].value[type].isRight = null
+            }
+            this.setWarmUp();
+        },
+        setWarmUp() {
+            localStorage.setItem("english-chapter-8-warmUp", JSON.stringify(this.warmUp));
+        },
+        setBookQuestion() {
+            localStorage.setItem(
+                "english-book-chapter08-question-one",
+                JSON.stringify(this.questionData)
+            );
+        },
+        arrayToString(data) {
+            if (Array.isArray(data)) {
+                return data.toString()
+            } else {
+                return data
+            }
+        },
+        isTextRight(answer, data, num) {
+            let flag = null;
+            if (data) {
+                flag = answer[num] == data
+            } else {
+                flag = false
+            }
+            return flag;
+        },
+        isShowRight(answer, userAnswer, data) {
+            let flag = null;
+            if (userAnswer.indexOf(data) > -1) {
+                flag = answer.indexOf(data) > -1 ? true : false;
+            } else {
+                flag = false
+            }
+            return flag;
+        },
         saveWord(event, word) {
             this.$emit("saveCharacters", event, word);
         },
         setTestData() {
             localStorage.setItem("english-testOne", JSON.stringify(this.testData));
-        },
-        changeTestData() {
-            localStorage.removeItem("english-testOne");
-            this.testData = {
-                check: {
-                    isRight: null,
-                    answer: ["Culture", "Cuisine", "Landscapes"],
-                    value: []
-                },
-                tx: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                in: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                    isRight: null,
-                    answer: ['uisine', 'andscapes', 'ivilization', 'xplore', 'nique']
-                },
-                line: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                ts: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                },
-                gr: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-                cm: {
-                    one: "",
-                    two: "",
-                    three: "",
-                    four: "",
-                    five: "",
-                },
-            };
-        },
-        setBookQuestion() {
-            console.log("淇濆瓨");
-            localStorage.setItem(
-                "english-book-question-one",
-                JSON.stringify(this.questionData)
-            );
         },
         async getPath() {
             this.resource.listenOne = await getResourcePath(
@@ -2263,95 +2593,6 @@
                 this.showImgOne = !this.showImgOne;
             }
             setTimeout(() => { this.$emit("initViewer", "") }, 500)
-        },
-        handleQuestion(type) {
-            if (type == "one") {
-                this.questionData.warnUp.one.value
-                    ? (this.questionData.warnUp.one.isRight =
-                        this.questionData.warnUp.one.value == "Chinese knot")
-                    : (this.questionData.warnUp.one.isRight = null);
-            } else if (type == "two") {
-                this.questionData.warnUp.two.value
-                    ? (this.questionData.warnUp.two.isRight =
-                        this.questionData.warnUp.two.value == "Chinese medicine")
-                    : (this.questionData.warnUp.two.isRight = null);
-            } else if (type == "three") {
-                this.questionData.warnUp.three.value
-                    ? (this.questionData.warnUp.three.isRight =
-                        this.questionData.warnUp.three.value == "Chinese calligraphy")
-                    : (this.questionData.warnUp.three.isRight = null);
-            } else if (type == "four") {
-                this.questionData.warnUp.four.value
-                    ? (this.questionData.warnUp.four.isRight =
-                        this.questionData.warnUp.four.value == "Taichi")
-                    : (this.questionData.warnUp.four.isRight = null);
-            } else if (type == "five") {
-                this.questionData.warnUp.five.value
-                    ? (this.questionData.warnUp.five.isRight =
-                        this.questionData.warnUp.five.value == "sweet dumpling")
-                    : (this.questionData.warnUp.five.isRight = null);
-            } else if (type == "six") {
-                this.questionData.warnUp.six.value
-                    ? (this.questionData.warnUp.six.isRight =
-                        this.questionData.warnUp.six.value == "Chinese chess")
-                    : (this.questionData.warnUp.six.isRight = null);
-            }
-        },
-        handleDropdown(type) {
-            const dropdownDatas = this.dropdownData;
-            for (let key in dropdownDatas) {
-                const item = dropdownDatas[key];
-                if (type == "judge") {
-                    item.value == item.answer
-                        ? (item.isRight = true)
-                        : (item.isRight = false);
-                    console.log(item.value, item.answer);
-                }
-            }
-            this.dropdownData = dropdownDatas;
-        },
-        changeDropdown() {
-            localStorage.removeItem("english-dropdown-one");
-            for (let key in this.dropdownData) {
-                const item = this.dropdownData[key];
-                item.value = "";
-                item.isRight = null;
-            }
-        },
-        setDropdownData() {
-            localStorage.setItem(
-                "english-dropdown-one",
-                JSON.stringify(this.dropdownData)
-            );
-        },
-        saveData() {
-            const item = this.testData['check']
-            const sortedArr1 = item.answer.slice().sort();
-            const sortedArr2 = item.value.slice().sort();
-            const isRight = sortedArr1.every(
-                (value, index) => value === sortedArr2[index]
-            );
-            const inData = this.testData['in']
-            let inString = []
-            for (let key in inData) {
-                const citem = inData[key];
-                if (key != 'answer' && key !== 'isRight') {
-                    console.log(key);
-                    inString.push(citem)
-                }
-
-
-            }
-            const inRight = inData.answer == inString
-            console.log('in', inData.answer, inString);
-            this.$set(this.testData['in'], 'isRight', inRight)
-            this.$set(this.testData['check'], 'isRight', isRight)
-            this.setTestData()
-            console.log(this.testData);
-
-        },
-        audioPlay() {
-            this.$emit("closeMiniAudio");
         },
     },
 };

--
Gitblit v1.9.1