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/chapter008.vue | 2168 +++++++++++++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 1,819 insertions(+), 349 deletions(-)

diff --git a/src/books/English/view/components/chapter008.vue b/src/books/English/view/components/chapter008.vue
index 25f3528..dfea12a 100644
--- a/src/books/English/view/components/chapter008.vue
+++ b/src/books/English/view/components/chapter008.vue
@@ -276,10 +276,14 @@
                                 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 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">
@@ -296,16 +300,18 @@
                                 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 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 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
+                        <p class="center"> <audio :src="resource.readingOne" controls
                                 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
@@ -382,9 +388,8 @@
                             <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
                             <span class="line-border-box"></span>
                         </p>
-                        <p><audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
-                                class="audio"></audio></p>
+                        <p><audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
+                                style="margin-left: 10px" class="audio"></audio></p>
                         <p>fulfill /f蕣l藞f瑟l/ <i>v.</i> 绗﹀悎锛涘饱琛�</p>
                         <div class="bkbj">
                             <p><i>to do or have what is required or necessary</i></p>
@@ -475,12 +480,21 @@
                         </div>
                         <p><b>鈪�.Reading comprehension.</b></p>
                         <p>A.Read the passage and answer the following questions.</p>
-                        <p>1.What job did the author take?</p>
-                        <p>____________________________________________________</p>
-                        <p>2.How did he describe his job?</p>
-                        <p>____________________________________________________</p>
-                        <p>3.What can be a proper title for this passage?</p>
-                        <p>____________________________________________________</p>
+                        <div v-for="(item, index) in questionDataOne[0].value" :key="'one' + index">
+                            <p class="tl-lf">{{ index + 1 }}.{{ item.stem }}</p>
+                            <p>
+                                <input :disabled="questionDataOne[0].isComplete" type="text" class="input-bottom-border"
+                                    style="width: 90%" v-model="item.userAnswer" @input="setQuestionDataOne" />
+                            </p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[0].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                                <span v-for="(item, index) in questionDataOne[0].value" :key="'oneanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </span>
+                            </p>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -505,33 +519,110 @@
                     <div class="bodystyle">
                         <p>B.Put the questions in the right blanks according to the main idea of each paragraph,and then
                             find the answer to each question.</p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0150-1.jpg" /></p>
+                        <div class="center poster-img">
+                            <img class="img-a" alt="" src="../../assets/images/0150-1.jpg" />
+                            <input type="text" class="poster-input-box-one"
+                                v-model="questionDataOne[1].value[0].userAnswer" @change="setQuestionDataOne" />
+                            <input type="text" class="poster-input-box-two"
+                                v-model="questionDataOne[1].value[1].userAnswer" @change="setQuestionDataOne" />
+                            <input type="text" class="poster-input-box-six"
+                                v-model="questionDataOne[1].value[2].userAnswer" @change="setQuestionDataOne" />
+                            <input type="text" class="poster-input-box-three"
+                                v-model="questionDataOne[1].value[3].userAnswer" @change="setQuestionDataOne" />
+                            <input type="text" class="poster-input-box-four"
+                                v-model="questionDataOne[1].value[4].userAnswer" @change="setQuestionDataOne" />
+                            <input type="text" class="poster-input-box-five"
+                                v-model="questionDataOne[1].value[5].userAnswer" @change="setQuestionDataOne" />
+                        </div>
                         <p>The answer to each question:</p>
-                        <p>1.________________________________________________</p>
-                        <p>2.________________________________________________</p>
-                        <p>3.________________________________________________</p>
-                        <p>4.________________________________________________</p>
-                        <p>5.________________________________________________</p>
+                        <div v-for="(item, index) in questionDataOne[2].value" :key="'two' + index">
+                            <p>{{ index + 1 }}.<input :disabled="questionDataOne[2].isComplete" type="text"
+                                    class="input-bottom-border" style="width: 90%" v-model="item.userAnswer"
+                                    @input="setQuestionDataOne" /></p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[2].isShowAnswer">
+                            <div>
+                                绛旀锛�
+                                <p v-for="(item, index) in questionDataOne[2].value" :key="'twoanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </p>
+                            </div>
+                        </div>
                         <p><b>鈪�.Language focus.</b></p>
                         <p>A.Fill in the blanks with the proper words in the passage.The initial letters of the words
                             have been given.</p>
-                        <p>The first job experience is burned into our memories for a c_______of reasons,and Nicholas
+                        <p>The first job experience is burned into our memories for a c
+                            <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[0].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[0].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">
+                            of reasons,and Nicholas
                             remembered his well.When he was about 16,he wanted to buy a speed cube.Unfortunately,he had
                             no money,so he decided to take a job and earn enough money for it.He planned to help
-                            e________people with their gardens,so he went to Mrs.Hudson who just lived in his n_______.
-                            Although his job of pulling out weeds there was t_________, he managed to get the money he
+                            e <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[1].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[1].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">
+
+                            people with their gardens,so he went to Mrs.Hudson who just lived in his n
+                            <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[2].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">.
+                            Although his job of pulling out weeds there was t
+                            <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[3].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[3].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">
+                            , he managed to get the money he
                             needed for his speed cube.And most importantly,that working experience made him realize the
-                            v_______of money through his s_________.</p>
+                            v
+                            <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[4].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[4].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">
+                            of money through his s
+                            <input :disabled="questionDataOne[3].isComplete" type="text" class="input-bottom-border"
+                                style="width: 10%" v-model="questionDataOne[3].value[5].userAnswer"
+                                @input="setQuestionDataOne" />
+                            <img :src="questionDataOne[3].value[5].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[3].isComplete">
+                            .
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[3].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                                <span v-for="(item, index) in questionDataOne[3].value" :key="'threeanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </span>
+                            </p>
+                        </div>
                         <p>B.Underline the following expressions in the passage and make sentences with them.</p>
-                        <p>1.out of nowhere______________________________</p>
-                        <p>2.as to______________________________________</p>
-                        <p>3.build up___________________________________</p>
-                        <p>4.at least___________________________________</p>
-                        <p>5.take away__________________________________</p>
+                        <div v-for="(item, index) in questionDataOne[4].value" :key="'three' + index">
+                            <p>{{ index + 1 }}.{{ item.stem }}</p>
+                            <p>
+                                <textarea v-model="item.userAnswer" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" style=" width: 92%"
+                                    class="fz-16 fm-son" @change="setQuestionDataOne">
+                            </textarea>
+                            </p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[4].isShowAnswer">
+                            <div>
+                                绛旀锛�
+                                <p v-for="(item, index) in questionDataOne[4].value" :key="'fouranswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </p>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
-                    <span class="contet-num-box">146</span>
+                    <span class="contet-num-box">140</span>
                 </div>
             </div>
         </div>
@@ -551,17 +642,21 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p>C.Translate the following sentences into Chinese.</p>
-                        <p>1.Wang Jinxi,the 鈥淚ron Man鈥�,successfully fulfilled his job under incredible difficulties.</p>
-                        <p>____________________________________________________</p>
-                        <p>2.Zhang Guimei,a teacher,spent all her money purchasing things needed for the girls in her
-                            school.</p>
-                        <p>____________________________________________________</p>
-                        <p>3.Wu Dajing impressed the whole nation when fighting to supply his teammates with a better
-                            position in the lane.</p>
-                        <p>____________________________________________________</p>
-                        <p>4.Wang Yaping with resolve won her family鈥檚 support to be the first woman in China鈥檚 new
-                            space station.</p>
-                        <p>____________________________________________________</p>
+                        <div v-for="(item, index) in questionDataOne[5].value" :key="'four' + index">
+                            <p>{{ index + 1 }}.{{ item.stem }}</p>
+                            <p>
+                                <input :disabled="questionDataOne[5].isComplete" type="text" class="input-bottom-border"
+                                    style="width: 90%" v-model="item.userAnswer" @input="setQuestionDataOne" />
+                            </p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[5].isShowAnswer">
+                            <div>
+                                绛旀锛�
+                                <p v-for="(item, index) in questionDataOne[5].value" :key="'fiveanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </p>
+                            </div>
+                        </div>
                         <p><b>鈪�.Grammar focus:The simple present &amp; past tense.</b>
                             <span class="btn-box" @click="showAnswer('showImg')">
                                 <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
@@ -579,58 +674,153 @@
                         <p>A.Based on the form of the underlined verbs tell us whether the following sentences are about
                             the past or the present.</p>
                         <p>锛坧resent锛�1.Everyone鈥檚 first job <span class="u">is</span> special.</p>
-                        <p>锛堛��銆�锛�2.I <span class="u">wanted</span> to buy a new speed cube.</p>
-                        <p>锛堛��銆�锛�3.I <span class="u">went</span> to the oldest person I knew in my neighborhood.</p>
-                        <p>锛堛��銆�锛�4.It <span class="u">seems</span> these experiences harden our spirits and resolve.</p>
-                        <p>锛堛��銆�锛�5.When I <span class="u">was</span> about sixteen years old, I <span class="u">wanted
-                            </span>to buy a new speed cube.</p>
-                        <p>锛堛��銆�锛�6.I <span class="u">think</span> everyone should get down on one鈥檚 knees and pull weeds.
+                        <p>锛�<input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border"
+                                style="width: 15%" v-model="questionDataOne[6].value[0].userAnswer"
+                                @input="setQuestionDataOne" />锛�
+                            2.I <span class="u">wanted</span> to buy a new speed cube.
+                            <img :src="questionDataOne[6].value[0].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[6].isComplete">
                         </p>
+                        <p>锛�<input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border"
+                                style="width: 15%" v-model="questionDataOne[6].value[1].userAnswer"
+                                @input="setQuestionDataOne" />锛�3.I <span class="u">went</span> to the oldest person I
+                            knew in my neighborhood.
+                            <img :src="questionDataOne[6].value[1].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[6].isComplete">
+                        </p>
+                        <p>锛�<input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border"
+                                style="width: 15%" v-model="questionDataOne[6].value[2].userAnswer"
+                                @input="setQuestionDataOne" />锛�4.It <span class="u">seems</span> these experiences
+                            harden our spirits and resolve.
+                            <img :src="questionDataOne[6].value[2].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[6].isComplete">
+                        </p>
+                        <p>锛�<input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border"
+                                style="width: 15%" v-model="questionDataOne[6].value[3].userAnswer"
+                                @input="setQuestionDataOne" />锛�5.When I <span class="u">was</span> about sixteen years
+                            old, I <span class="u">wanted
+                            </span>to buy a new speed cube.
+                            <img :src="questionDataOne[6].value[3].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[6].isComplete">
+                        </p>
+                        <p>锛�<input :disabled="questionDataOne[6].isComplete" type="text" class="input-bottom-border"
+                                style="width: 15%" v-model="questionDataOne[6].value[4].userAnswer"
+                                @input="setQuestionDataOne" />锛�6.I <span class="u">think</span> everyone should get down
+                            on one鈥檚 knees and pull weeds.
+                            <img :src="questionDataOne[6].value[4].isRight ? correctIcon : errorIcon"
+                                v-if="questionDataOne[6].isComplete">
+                        </p>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[6].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                                <span v-for="(item, index) in questionDataOne[6].value" :key="'sixanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </span>
+                            </p>
+                        </div>
                         <p>B.Write the present or the past form of the following verbs.</p>
-                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14 w100">
                             <tr class="table-tr-bc">
-                                <td class="tl-cn">give<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" /></td>
-                                <td class="tl-cn">spend<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" /></td>
-                                <td class="tl-cn"><input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />had
+                                <td class="tl-cn">give
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 40%"
+                                        v-model="questionDataOne[7].value[0].userAnswer" @input="setQuestionDataOne" />
+                                    <img :src="questionDataOne[7].value[0].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
+                                </td>
+                                <td class="tl-cn">spend
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[1].userAnswer" @input="setQuestionDataOne" />
+                                    <img :src="questionDataOne[7].value[1].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
+                                </td>
+                                <td class="tl-cn">
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[2].userAnswer" @input="setQuestionDataOne" />
+                                    had
+                                    <img :src="questionDataOne[7].value[2].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
                             </tr>
                             <tr class="table-tr-bc ">
-                                <td class="tl-cn"><input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                <td class="tl-cn">
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[3].userAnswer" @input="setQuestionDataOne" />
                                     went
+                                    <img :src="questionDataOne[7].value[3].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
-                                <td class="tl-cn"><input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                <td class="tl-cn">
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[4].userAnswer" @input="setQuestionDataOne" />
                                     began
+                                    <img :src="questionDataOne[7].value[4].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
-                                <td class="tl-cn">say<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                <td class="tl-cn">say
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[5].userAnswer" @input="setQuestionDataOne" />
+                                    <img :src="questionDataOne[7].value[5].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
-                                <td class="tl-cn">get<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                <td class="tl-cn">get
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[6].userAnswer" @input="setQuestionDataOne" />
+                                    <img :src="questionDataOne[7].value[6].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
-                                <td class="tl-cn">think<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />
+                                <td class="tl-cn">think
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[7].userAnswer" @input="setQuestionDataOne" />
+                                    <img :src="questionDataOne[7].value[7].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
-                                <td class="tl-cn">asy<input :disabled="testData.isComplete" type="text"
-                                        class="input-bottom-border input-bc-t" style="width: 5em"
-                                        v-model="testData.in.one" @change="setTestData" />chose
+                                <td class="tl-cn">asy
+                                    <input :disabled="questionDataOne[7].isComplete" type="text"
+                                        class="input-bottom-border input-bc-t" style="width: 45%"
+                                        v-model="questionDataOne[7].value[8].userAnswer" @input="setQuestionDataOne" />
+                                    chose
+                                    <img :src="questionDataOne[7].value[8].isRight ? correctIcon : errorIcon"
+                                        v-if="questionDataOne[7].isComplete">
                                 </td>
                             </tr>
                         </table>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="questionDataOne[7].isShowAnswer">
+                            <p>
+                                绛旀锛�
+                                <span v-for="(item, index) in questionDataOne[7].value" :key="'sixanswer' + index">
+                                    {{ index + 1 }}.{{ item.answer }} &nbsp;
+                                </span>
+                            </p>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ar w80">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handleQuestionDataOne">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastQuestionDataOne" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewQuestionDataOne" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                         <h3 id="c067"><span class="bjh3">Mini-project</span></h3>
                         <p>People do different jobs and hold different ideas about their jobs.You are required to:</p>
                         <p>1.Do a small survey among your family members or relatives and jot down their opinions;</p>
@@ -687,120 +877,120 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.five"
+                                    <textarea v-model="noSubmitTwo[0].value[0].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.six"
+                                    <textarea v-model="noSubmitTwo[0].value[1].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.seven"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitTwo[0].value[2].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea"  @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.eight"
+                                    <textarea v-model="noSubmitTwo[0].value[3].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.nine"
+                                    <textarea v-model="noSubmitTwo[0].value[4].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.ten"
+                                    <textarea v-model="noSubmitTwo[0].value[5].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.eleven"
+                                    <textarea v-model="noSubmitTwo[0].value[6].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twelve"
+                                    <textarea v-model="noSubmitTwo[0].value[7].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.thirteen"
+                                    <textarea v-model="noSubmitTwo[0].value[8].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.fourteen"
+                                    <textarea v-model="noSubmitTwo[0].value[9].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.fifteen"
+                                    <textarea v-model="noSubmitTwo[0].value[10].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.sixteen"
+                                    <textarea v-model="noSubmitTwo[0].value[11].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.seventeen"
+                                    <textarea v-model="noSubmitTwo[0].value[12].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.eighteen"
+                                    <textarea v-model="noSubmitTwo[0].value[13].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.nineteen"
+                                    <textarea v-model="noSubmitTwo[0].value[14].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twenty"
+                                    <textarea v-model="noSubmitTwo[0].value[15].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twentyOne"
+                                    <textarea v-model="noSubmitTwo[0].value[16].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twentyTwo"
+                                    <textarea v-model="noSubmitTwo[0].value[17].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twentyThree"
+                                    <textarea v-model="noSubmitTwo[0].value[18].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twentyFour"
+                                    <textarea v-model="noSubmitTwo[0].value[19].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twentyFive"
+                                    <textarea v-model="noSubmitTwo[0].value[20].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                         </table>
@@ -1001,12 +1191,45 @@
                     <div class="bodystyle">
                         <h2 id="b030"><img class="img-0" alt="" src="../../assets/images/dy8-le2.jpg" /></h2>
                         <h3 id="c068"><span class="bjh3">Warm-up</span></h3>
-                        <p><b>Mostly,the first step to map out your career is to create a career road map for
+                        <p>
+                            <b>Mostly,the first step to map out your career is to create a career road map for
                                 yourself.Work with your partner and figure out what the pictures in the following road
-                                maps possibly mean,and then choose the proper expressions to fill in the blanks.</b></p>
+                                maps possibly mean,and then choose the proper expressions to fill in the blanks.
+                            </b>
+                            <span class="btn-box" @click="showDropTwo(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>
                         <p><b>Road map</b>1锛�</p>
                         <p><b>People often think that career path works like this:</b></p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0153-1.jpg" /></p>
+                        <ul class="fl">
+                            <li>
+                                <img class="img-a" alt="" src="../../assets/images/job-1.jpg" />
+                            </li>
+                            <li class="fl de-cl">
+                                <div style="height:50%;padding-left:25px" class="fl de-cl ju-ev">
+                                    <div v-for="(item,index) in dropTwo[0].value" :key="index">
+                                        <select  v-model="item.userAnswer" @change="handleDropTwo(0,index)" style="width:200px;height:35px"
+                                            >
+                                            <option v-for="(citem, cindex) in dropTwo[0].option" :key="'change' + cindex" :value="citem">
+                                            {{ citem}}
+                                            </option>
+                                        </select>
+                                        <img :src="item.isRight ? correctIcon : errorIcon"  v-if="item.isRight == true || item.isRight == false">
+                                    </div>
+                                </div>
+                                <div>
+                                    <img class="img-a" alt="" src="../../assets/images/job-2.jpg" />
+                                </div>
+                            </li>
+                        </ul>
+                        <!-- <p class="center">
+                            <img class="img-a" alt="" src="../../assets/images/0153-1.jpg" />
+                        </p> -->
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1031,14 +1254,65 @@
                     <div class="bodystyle">
                         <p><b>Road map</b>2锛�</p>
                         <p><b>In reality,it looks more like:</b></p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0154-1.jpg" /></p>
-                        <h3 id="c069"><span class="bjh3">Reading</span></h3>
-                        <p>1.Working hard is only the first part of success.Making good choices is the second part.It
-                            truly takes both to achieve success at whatever you do.What鈥檚 your interpretation of the
-                            sentence?</p>
-                        <p>2.What鈥檚 your suggestion for making the 鈥渞ight鈥� career choice?</p>
+                        <div class="center po-re " >
+                            <img class="img-a" alt="" src="../../assets/images/0154-1.jpg" />
+                            <div class="reality-one">
+                                <select  v-model="dropTwo[1].value[0].userAnswer" @change="handleDropTwo(1,0)" 
+                                    >
+                                    <option v-for="(citem, cindex) in dropTwo[1].option" :key="'change' + cindex" :value="citem">
+                                    {{ citem}}
+                                    </option>
+                                </select>
+                                <img :src="dropTwo[1].value[0].isRight ? correctIcon : errorIcon"  v-if="dropTwo[1].value[0].isRight == true || dropTwo[1].value[0].isRight == false">
+                            </div>
+                            <div class="reality-two">
+                                <select  v-model="dropTwo[1].value[1].userAnswer" @change="handleDropTwo(1,1)" style="width:120px;height:35px"
+                                    >
+                                    <option v-for="(citem, cindex) in dropTwo[1].option" :key="'change' + cindex" :value="citem">
+                                    {{ citem}}
+                                    </option>
+                                </select>
+                                <img :src="dropTwo[1].value[1].isRight ? correctIcon : errorIcon"  v-if="dropTwo[1].value[1].isRight == true || dropTwo[1].value[1].isRight == false">
+                            </div>
+                            <div class="reality-three">
+                                <select  v-model="dropTwo[1].value[2].userAnswer" @change="handleDropTwo(1,2)" style="width:120px;height:35px"
+                                    >
+                                    <option v-for="(citem, cindex) in dropTwo[1].option" :key="'change' + cindex" :value="citem">
+                                    {{ citem}}
+                                    </option>
+                                </select>
+                                <img :src="dropTwo[1].value[2].isRight ? correctIcon : errorIcon"  v-if="dropTwo[1].value[2].isRight == true || dropTwo[1].value[2].isRight == false">
+                            </div>
+                        </div>
+                        
+                        <h3 id="c069" class="fl al-cn">
+                            <span class="bjh3">Reading</span>
+                            <audio :src="resource.listenTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+                        </h3>
+                        <ul>
+                            <li v-for="(item,index) in noSubmitTwo[1].value" :key="index">
+                                <p>
+                                    {{index + 1}}.{{item.stem}}
+                                    <span class="btn-box" @click="showNoSubmitTWo(1,index)">
+                                        <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="item.userAnswer" class="w100" @input="saveNoSubmitTWo"></textarea>
+                                <div class="event-header-text-bc pd-5 w100 mt-20"
+                                    v-if="item.isShowAnswer">
+                                    <span>绛旀锛�</span>
+                                    <span v-for="(citem,cindex) in item.answer" :key="cindex" class="mr-20">
+                                        {{  citem }}
+                                    </span>
+                                </div>
+                            </li>
+                        </ul>
                         <p class="center"><b>Choose a Career You Love</b></p>
-                        <p class="center"><audio :src="resource.readingTwo" controls
+                        <p class="center"><audio :src="resource.readingThree" controls
                                 controlslist="noplaybackrate nodownload" style="margin-left: 10px"
                                 class="audio"></audio></p>
                         <p>We spend a large
@@ -1121,7 +1395,7 @@
                             <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"
+                        <audio :src="resource.readingFour" controls controlslist="noplaybackrate nodownload"
                             style="margin-left: 10px" class="audio"></audio>
                         <p>portion /藞p蓴藧蕛n/ <i>n.</i>閮ㄥ垎</p>
                         <div class="bkbj">
@@ -1224,38 +1498,42 @@
                         <p><b>鈪�.Reading comprehension.</b></p>
                         <p>A.Mark the suggestions given by the author when choosing a career.</p>
                         <p>Deciding on a Career拢Income</p>
-                        <p>鈻ducation</p>
-                        <p>鈻xperience</p>
-                        <p>鈻oals</p>
-                        <p>鈻appiness</p>
-                        <p>鈻nterest</p>
-                        <p>鈻atisfaction</p>
-                        <p>鈻kills</p>
-                        <p>鈻alues</p>
+                        <p v-for="(item,index) in listenTwo[0].option" :key="index">
+                            <input type="checkbox" :value="item" name="what" v-model="listenTwo[0].value[0].userAnswer" :disabled="listenTwo[0].isComplete" :change="saveListenTwo"> 
+                            {{item}}
+                            <img :src="isShowRight(listenTwo[0].answer,listenTwo[0].value[0].userAnswer,item) ? correctIcon : errorIcon"  v-if="listenTwo[0].isComplete">
+                        </p>
                         <p>B.Decide whether the following statements are true (T) or false (F).</p>
-                        <p>(銆�) 1.When we decide on our future career,satisfaction and happiness matter a lot.</p>
-                        <p>(銆�) 2.Positive emotions make us more productive and satisfied in our jobs.</p>
-                        <p>(銆�) 3.Our past experiences have nothing to do with our jobs in the future.</p>
-                        <p>(銆�) 4.There is no need to worry about what career we are going to take.</p>
-                        <p>(銆�) 5.Luxuries will bring enjoyment to us,but that feeling cannot last forever.</p>
+                        <p v-for="(item,index) in listenTwo[1].value" :key=" 'dropdown' + index">
+                            (
+                                <select v-model="item.userAnswer" class="select-border" @change="saveListenTwo">
+                                    <option v-for="(citem, cindex) in listenTwo[1].option" :key="cindex"
+                                        :value="citem">
+                                        {{ citem }}
+                                    </option>
+                                </select>
+                            )
+                            {{index + 1}}.{{item.stem}}
+                            <img :src="item.isRight ? correctIcon : errorIcon"  v-if="listenTwo[1].isComplete">
+                        </p>
                         <p><b>鈪�.Language focus.</b></p>
                         <p>A.Replace the words in italics with the exact words in the passage and change the form if
                             necessary.</p>
-                        <p>1.Once you find a desired <i>occupation</i>,you鈥檒l notice a change even in your daily
-                            life._____________</p>
-                        <p>2.Only a small <i>part</i> of the budget is spent on books._____________</p>
-                        <p>3.Happiness itself can help to shape job market <i>results</i> and even firm
-                            performance._____________</p>
-                        <p>4.Those who are <i>excited</i> about numbers can work in the accounting field._____________
+                        <p v-for="(item,index) in listenTwo[2].value" :key="'Language' + index">
+                            {{index + 1}}.{{item.stem}}
+                            <input type="text" :disabled="listenTwo[2].isComplete" v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px"> 
+                            <img :src="item.isRight ? correctIcon : errorIcon"  v-if="listenTwo[2].isComplete">
                         </p>
-                        <p>5.We need to leave our <i>pleasant</i> zone at work if we want growth
-                            opportunities._____________</p>
                         <p>B.Fill in the blanks with the proper form of the expressions given below.</p>
                         <div class="bk-wh">
                             <p>a portion of銆�fall into place銆�be passionate about銆�later on be銆�comfortable with</p>
                         </div>
-                        <p>1.Keep your options open and everything will___________.</p>
-                        <p>2.You鈥檇 better set a long-term goal that you can___________.</p>
+                        <p v-for="(item,index) in listenTwo[3].value.slice(0,2)" :key="'Languages' + index">
+                            {{index + 1}}.{{item.stemOne}}
+                            <input type="text" :disabled="listenTwo[3].isComplete" v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px"> 
+                            <img :src="item.isRight ? correctIcon : errorIcon"  v-if="listenTwo[3].isComplete">
+                            {{item.stemTwo}}
+                        </p>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1278,9 +1556,12 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <p>3.Anyone hired into the company must___________the system.</p>
-                        <p>4.You must accept___________the blame for this crisis.</p>
-                        <p>5.Many people plan to take one job of any kind and consider a new career path___________.</p>
+                        <p v-for="(item,index) in listenTwo[3].value.slice(2,5)" :key="'Languages' + index">
+                            {{index + 3}}.{{item.stemOne}}
+                            <input type="text" :disabled="listenTwo[3].isComplete" v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px"> 
+                            <img :src="item.isRight ? correctIcon : errorIcon"  v-if="listenTwo[3].isComplete">
+                            {{item.stemTwo}}
+                        </p>
                         <p><b>鈪�.Grammar focus:Pronouns (it,one).</b><span class="btn-box"
                                 @click="showAnswer('showImgOne')">
                                 <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
@@ -1303,16 +1584,31 @@
                             <p>2.Having a career that we are passionate about,<i>one</i> that gives our life a sense of
                                 purpose,and one that we are comfortable with is important.</p>
                         </div>
-                        <p>1.Although finding a new job might not be easy,there are many different methods to
-                            find_______effectively.</p>
-                        <p>2.As you make a decision about your career,_______is important to reflect on your
-                            interest,skills and career goals.</p>
-                        <p>3.People will usually set a milestone in their career path,_______that they will work for in
-                            the next five or ten years.</p>
-                        <p>4.A career aptitude test could be helpful,because_______will give you suggestions based on
-                            the test of your personal type.</p>
-                        <p>5.We all have to work,and for most of us,if you discount weekends and sleep,_______will take
-                            up at least half our available time.</p>
+                        <p v-for="(item,index) in listenTwo[4].value" :key="'Languagese' + index">
+                            {{index + 1}}.{{item.stemOne}}
+                            <input type="text" :disabled="listenTwo[4].isComplete" v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px"> 
+                            <img :src="item.isRight ? correctIcon : errorIcon"  v-if="listenTwo[4].isComplete">
+                            {{item.stemTwo}}
+                        </p>
+                        <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="c070"><span class="bjh3">Mini-project</span></h3>
                         <p>Work in groups.Every one of you will take a job in the future.Ask your group members what job
                             he/she is going to choose and why he/she chooses this job.Jot down some notes,and prepare a
@@ -1356,49 +1652,49 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twentySix"
+                                    <textarea v-model="noSubmitTwo[2].value[0].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twentySeven"
-                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                    <textarea v-model="noSubmitTwo[2].value[1].userAnswer"
+                                        class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twentyEight"
+                                    <textarea v-model="noSubmitTwo[2].value[2].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.twentyNine"
+                                    <textarea v-model="noSubmitTwo[2].value[3].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.thirty"
+                                    <textarea v-model="noSubmitTwo[2].value[4].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.thirtyOne"
+                                    <textarea v-model="noSubmitTwo[2].value[5].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.thirtyTwo"
+                                    <textarea v-model="noSubmitTwo[2].value[6].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.thirtyThree"
+                                    <textarea v-model="noSubmitTwo[2].value[7].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="saveNoSubmitTWo"></textarea>
                                 </td>
                             </tr>
                         </table>
@@ -1551,17 +1847,66 @@
                         </div>
                         <h2 id="b031"><img class="img-0" alt="" src="../../assets/images/dy8-le3.jpg" /></h2>
                         <h3 id="c071"><span class="bjh3">Listening</span></h3>
-                        <p class="center"> <audio :src="resource.readingTwo" controls
-                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
-                                class="audio"></audio></p>
                         <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> <audio :src="resource.listenTwo" controls controlslist="noplaybackrate nodownload"
+                                style="margin-left: 10px" class="audio"></audio></p>
                         <p>Hi,everyone.I鈥檓 Derek Cruise.I landed a job interview the other day.It is a bank
-                            1._________that I鈥檝e wanted for a long time.I鈥檓 excited you know.The job is quite
-                            2._________and I love to play with 3._________.I prepared my 4._________,and bought a
-                            suit.My friend reminded me that I should send a follow-up 5._________after the interview.But
+                            1.
+                            <input type="text" :disabled="listenThree[0].isComplete"
+                                v-model="listenThree[0].value[0].userAnswer" class="input-bottom-border input-bc-t"
+                                @input="saveListenThree" style="width:80px">
+                            <img :src="listenThree[0].value[0].isRight ? correctIcon : errorIcon"
+                                v-if="listenThree[0].isComplete">
+                            that I鈥檝e wanted for a long time.I鈥檓 excited you know.The job is quite
+                            2.
+                            <input type="text" :disabled="listenThree[0].isComplete"
+                                v-model="listenThree[0].value[1].userAnswer" class="input-bottom-border input-bc-t"
+                                @input="saveListenThree" style="width:80px">
+                            <img :src="listenThree[0].value[1].isRight ? correctIcon : errorIcon"
+                                v-if="listenThree[0].isComplete">
+                            and I love to play with 3.
+                            <input type="text" :disabled="listenThree[0].isComplete"
+                                v-model="listenThree[0].value[2].userAnswer" class="input-bottom-border input-bc-t"
+                                @input="saveListenThree" style="width:80px">
+                            <img :src="listenThree[0].value[2].isRight ? correctIcon : errorIcon"
+                                v-if="listenThree[0].isComplete">
+                            .I prepared my 4.
+                            <input type="text" :disabled="listenThree[0].isComplete"
+                                v-model="listenThree[0].value[3].userAnswer" class="input-bottom-border input-bc-t"
+                                @input="saveListenThree" style="width:80px">
+                            <img :src="listenThree[0].value[3].isRight ? correctIcon : errorIcon"
+                                v-if="listenThree[0].isComplete">
+                            ,and bought a
+                            suit.My friend reminded me that I should send a follow-up 5.
+                            <input type="text" :disabled="listenThree[0].isComplete"
+                                v-model="listenThree[0].value[4].userAnswer" class="input-bottom-border input-bc-t"
+                                @input="saveListenThree" style="width:80px">
+                            <img :src="listenThree[0].value[4].isRight ? correctIcon : errorIcon"
+                                v-if="listenThree[0].isComplete">
+                            after the interview.But
                             I feel worried about writing the letter,for I know little about it.Anyway,I am
-                            well-prepared,I guess.Now all I鈥檝e got to do is to take that job.Wish me good luck!</p>
+                            well-prepared,I guess.Now all I鈥檝e got to do is to take that job.Wish me good luck!
+                        </p>
+                        <div class="w100 fl ju-cn">
+                            <ul class="fl ju-ev" style="width:80%">
+                                <li>
+                                    <button class="btn-border btn-w" @click="handleListenThree">
+                                        鎻愪氦
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="recastListenThree" class="btn-border btn-w">
+                                        閲嶅仛
+                                    </button>
+                                </li>
+                                <li>
+                                    <button @click="viewListenThree" class="parimary-btn">
+                                        鏌ョ湅绛旀
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1584,8 +1929,23 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <p><b>鈪�.Susan is interviewing the candidate Derek.Listen to the conversation and write down
-                                Susan's questions.</b></p>
+                        <p>
+                            <b>
+                                鈪�.Susan is interviewing the candidate Derek.Listen to the conversation and write down
+                                Susan's questions.
+                            </b>
+                            <span class="btn-box" @click="showNoSubmitThree(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>
+                        <p > <audio :src="resource.listenThree" controls
+                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
+                                class="audio"></audio></p>
                         <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                             <tr class="table-th-bc">
                                 <td class="tl-cn wh-no">Susan's Questions</td>
@@ -1594,9 +1954,9 @@
 
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.thirtyFour"
+                                    <textarea v-model="noSubmitThree[0].value[0].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @change="saveNoSubmitThree"></textarea>
                                 </td>
                                 <td class="tl-cn">
                                     <p class="table-p">Studying Finance in East College</p>
@@ -1607,9 +1967,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.thirtyFive"
+                                    <textarea v-model="noSubmitThree[0].value[0].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @change="saveNoSubmitThree"></textarea>
                                 </td>
                                 <td class="tl-lf">
                                     Analyzing financial data with ERP software
@@ -1617,9 +1977,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.thirtySix"
+                                    <textarea v-model="noSubmitThree[0].value[0].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @change="saveNoSubmitThree"></textarea>
                                 </td>
                                 <td class="tl-lf">
                                     To put finance theories into practice
@@ -1627,9 +1987,9 @@
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
-                                    <textarea v-model="questionData.table.thirtySeven"
+                                    <textarea v-model="noSubmitThree[0].value[0].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea textarea-box"
-                                        @change="setBookQuestion"></textarea>
+                                        @change="saveNoSubmitThree"></textarea>
                                 </td>
                                 <td class="tl-cn">
                                     <p class="table-p">A hard-working person</p>
@@ -1638,10 +1998,49 @@
                                 </td>
                             </tr>
                         </table>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitThree[0].value[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item, index) in noSubmitThree[0].value" :key="index" class="mr-20">
+                                {{ index + 1 }}.{{ item.answer }}
+                            </span>
+                        </div>
                         <h3 id="c072"><span class="bjh3">Practical Writing</span></h3>
                         <p>Work with your partner to discuss the following questions.</p>
-                        <p>1.How do you follow up after a job interview?</p>
-                        <p>2.How do you write follow-up emails after an interview?</p>
+                        <p>
+                            1.How do you follow up after a job interview?
+                            <span class="btn-box" @click="showNoSubmitThree(1, 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" v-model="noSubmitThree[1].value[0].userAnswer"
+                            class="w100" @input="saveNoSubmitThree"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitThree[1].value[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <p v-for="(item, index) in noSubmitThree[1].value[0].answer" :key="index">
+                                {{ index + 1 }}) {{ item }}
+                            </p>
+                        </div>
+                        <p>
+                            2.How do you write follow-up emails after an interview?
+                            <span class="btn-box" @click="showNoSubmitThree(1, 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="noSubmitThree[1].value[1].userAnswer"
+                            class="w100" @input="saveNoSubmitThree"></textarea>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="noSubmitThree[1].value[1].isShowAnswer">
+                            <span>绛旀锛歿{ noSubmitThree[1].value[1].answer }}</span>
+                        </div>
                         <p><b>鈪�.Read the following tips,and find out why a follow-up email is needed after an
                                 interview.</b></p>
                         <p>A follow-up email is a good way to show your interest in the position and,most important of
@@ -1678,20 +2077,73 @@
                 <!-- 鍐呭 -->
                 <div class="padding-93">
                     <div class="bodystyle">
-                        <p><b>鈪�.Fill in the blanks with the right expressions from the labels to finish the following-up
-                                email.</b></p>
-                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0161-1.jpg" /></p>
-                        <p><b>鈪�.Put the following words in right order to make sentences.</b></p>
-                        <p>1.thank銆�for銆�me銆�meet銆�taking銆�the銆�time銆�to銆�with銆�yesterday銆�you</p>
-                        <p>_______________________________________________</p>
-                        <p>2.I銆�appreciate銆�interview銆�me銆�the銆�time銆�to銆�took銆�you</p>
-                        <p>_______________________________________________</p>
-                        <p>3.I銆�about銆�am銆�excited銆�joining銆�of銆�possibility銆�the銆�very銆�you</p>
-                        <p>_______________________________________________</p>
-                        <p>4.I銆�about銆�enjoyed銆�position銆�speaking銆�the銆�today銆�with銆�you</p>
-                        <p>_______________________________________________</p>
-                        <p>5.I銆�am銆�and銆�for銆�forward銆�from銆�hearing銆�in銆�interested銆�look銆�to銆�very銆�working銆�you銆�you</p>
-                        <p>_______________________________________________</p>
+                        <p>
+                            <b>鈪�.Fill in the blanks with the right expressions from the labels to finish the
+                                following-up
+                                email.
+                            </b>
+                            <span class="btn-box" @click="showPracticalThree(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="finish-box">
+                            <p>From: Jack Thompson</p>
+                            <p>To: Mr. Jim</p>
+                            <p v-for="(item, index) in practicalThree[0].value" :key="index">
+                                {{ item.stemOne }}
+                                <select class="select-border" v-model="item.userAnswer"
+                                    @change="handlePracticalThree(0, index)">
+                                    <option v-for="(citem, cindex) in item.option" :key="'change' + cindex"
+                                        :value="citem">
+                                        {{ citem }}
+                                    </option>
+                                </select>
+                                <img :src="item.isRight ? correctIcon : errorIcon"
+                                    v-if="item.isRight == true || item.isRight == false">
+                                {{ item.stemTwo }}
+                            </p>
+                            <p>Sincerely,</p>
+                            <p>Jack Thompson</p>
+                            <p>Jackthompson@email.com</p>
+                            <p>312-465-7981</p>
+                        </div>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="practicalThree[0].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <span v-for="(item, index) in practicalThree[0].value" :key="index" class="mr-20">
+                                {{ item.answer }}
+                            </span>
+                        </div>
+                        <p>
+                            <b>鈪�.Put the following words in right order to make sentences.</b>
+                            <span class="btn-box" @click="showPracticalThree(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>
+                        <ul>
+                            <li v-for="(item, index) in practicalThree[1].value" :key="index">
+                                <p>
+                                    {{ index + 1 }}.{{ item.stem }}
+                                </p>
+                                <input type="text" v-model="item.userAnswer" class="input-bottom-border input-bc-t"
+                                    @input="savePracticalThree">
+                            </li>
+                        </ul>
+                        <div class="event-header-text-bc pd-5 w100 mt-20" v-if="practicalThree[1].isShowAnswer">
+                            <span>绛旀锛�</span>
+                            <p v-for="(item, index) in practicalThree[1].value" :key="index" class="mr-20">
+                                {{ index + 1 }}.{{ item.answer }}
+                            </p>
+                        </div>
                     </div>
                 </div>
                 <div class="preface-bottom">
@@ -1717,23 +2169,34 @@
                         <p><b>鈪�.After his interview Derek wants to send a follow-up email.Work with your partner and
                                 write one for him.</b></p>
                         <div class="fieldset-4">
-                            <p class="left">From:</p>
-                            <p class="left">To:</p>
-                            <p class="left">Subject:</p>
+                            <p class="left">
+                                From:
+                                <input type="text" v-model="practicalThree[2].value[0].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
+                            </p>
+                            <p class="left">
+                                To:
+                                <input type="text" v-model="practicalThree[2].value[1].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
+                            </p>
+                            <p class="left">
+                                Subject:
+                                <input type="text" v-model="practicalThree[2].value[2].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
+                            </p>
                             <p><br /></p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
+                            <textarea name="" id="" cols="30" rows="18" v-model="practicalThree[2].value[3].userAnswer"
+                                class="w100" @input="savePracticalThree"></textarea>
                             <p class="left">derekcruise@email.com</p>
                             <p class="left">521-764-8809</p>
                         </div>
                         <div class="un-h2">
                             <h2 id="b032">Unit Project</h2>
                         </div>
+                        <video :src="resource.videoPathOne" webkit-playsinline="true" x-webkit-airplay="true"
+                            playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true"
+                            x5-playsinline="" controls controlslist="nodownload" class="w100 video"
+                            style="margin-top: 40px;"></video>
                         <p>In the following job ads,there are some job vacancies from different companies.Read carefully
                             and make a decision about the one you are going to apply for.First tell your partner the
                             reason why that job interests you.Then work in pairs,role-playing the interviewer and the
@@ -1743,11 +2206,9 @@
                         <p><b>Role 1:Interviewer</b></p>
                         <p>1.Work with your partner and decide what questions you will ask during the
                             interview.2.Complete the worksheet for the interviewer.</p>
-                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" <p
-                            class="center"></p>
-                            <p><b>Role 2:Interviewee</b></p>
-                            <p>1.Make a list of the information which might be useful in the interview.2.Finish the
-                                follow-up email after the interview.</p>
+                        <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">
@@ -1771,52 +2232,58 @@
                 <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 w100">
                             <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>
-                                    <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>
-                                    <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>
+                                    <p class="table-p">
+                                        Name:
+                                        <input type="text" v-model="practicalThree[3].value[0].userAnswer"
+                                            class="input-bottom-border input-bc-t" @input="savePracticalThree">
+                                    </p>
+                                    <p class="table-p">
+                                        Phone:
+                                        <input type="text" v-model="practicalThree[3].value[1].userAnswer"
+                                            class="input-bottom-border input-bc-t" @input="savePracticalThree">
+                                    </p>
+                                    <p class="table-p">
+                                        Email:
+                                        <input type="text" v-model="practicalThree[3].value[2].userAnswer"
+                                            class="input-bottom-border input-bc-t" @input="savePracticalThree">
+                                    </p>
                                 </td>
                             </tr>
 
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
                                     <p class="table-p">Work experience</p>
-                                    <textarea v-model="questionData.table.thirtyEight"
+                                    <textarea v-model="practicalThree[3].value[3].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="savePracticalThree"></textarea>
                                 </td>
 
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
                                     <p class="table-p">Education</p>
-                                    <textarea v-model="questionData.table.thirtyNine"
+                                    <textarea v-model="practicalThree[3].value[4].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="savePracticalThree"></textarea>
                                 </td>
 
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
                                     <p class="table-p">Skills</p>
-                                    <textarea v-model="questionData.table.forty"
+                                    <textarea v-model="practicalThree[3].value[5].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
-                                        @change="setBookQuestion"></textarea>
+                                        @input="savePracticalThree"></textarea>
                                 </td>
 
                             </tr>
                             <tr class="table-tr-bc">
                                 <td class="tl-cn">
                                     <p class="table-p">Other related information</p>
-                                    <textarea v-model="questionData.table.fortyOne"
+                                    <textarea v-model="practicalThree[3].value[6].userAnswer"
                                         class="w100 table-tr-bc b0 table-textarea "
                                         @change="setBookQuestion"></textarea>
                                 </td>
@@ -1824,15 +2291,24 @@
                         </table>
                         <p class="center"><b>Follow-up Email for the Interviewee</b></p>
                         <div class="fieldset-4">
-                            <p class="left">From:</p>
-                            <p class="left">To:</p>
-                            <p class="left">Subject:</p>
+                            <p class="left">
+                                From:
+                                <input type="text" v-model="practicalThree[4].value[0].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
+                            </p>
+                            <p class="left">
+                                To:
+                                <input type="text" v-model="practicalThree[4].value[1].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
+                            </p>
+                            <p class="left">
+                                Subject:
+                                <input type="text" v-model="practicalThree[4].value[2].userAnswer"
+                                    class="input-bottom-border input-bc-t" @input="savePracticalThree">
+                            </p>
                             <p><br /></p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
-                            <p class="left">____________________________________________</p>
+                            <textarea name="" id="" cols="30" rows="18" v-model="practicalThree[4].value[3].userAnswer"
+                                class="w100" @input="savePracticalThree"></textarea>
                         </div>
                     </div>
                 </div>
@@ -2036,7 +2512,7 @@
         return {
             warmUp: [
                 {
-                    type: "fill",
+                    type: "fills",
                     isShowAnswer: false,
                     value: [
                         {
@@ -2072,137 +2548,262 @@
                     ]
                 },
             ],
-            questionDataOn:[
+            questionDataOne: [
                 {
-                    type:"fill",
-                    isComplete:false,
-                    isShowAnswer:false,
-                    value:[
-                        {   
-                            stem:"What job did the author take?",
-                            answer:"Pulling out weeds",
-                            userAnswer:"",
+                    type: "fills",
+                    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: "How did he describe his job?",
+                            answer: "Tedious",
+                            userAnswer: "",
                         },
                         {
-                            stem:"What can be a proper title for this passage?",
-                            answer:"My first job",
-                            userAnswer:"",
+                            stem: "What can be a proper title for this passage?",
+                            answer: "My first job",
+                            userAnswer: "",
                         },
                     ]
                 },
                 {
-                    type:"fill",
-                    isComplete:false,
-                    isShowAnswer:false,
-                    value:[
+                    type: "fills",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
                         {
-                            userAnswer:"",
-                        },
-                        {   
-                            userAnswer:"",
-                        },
-                        {   
-                            userAnswer:"",
+                            userAnswer: "",
                         },
                         {
-                            userAnswer:"",
+                            userAnswer: "",
                         },
                         {
-                            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:"",
+                    type: "fills",
+                    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 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: "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: "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:"",
+                            answer: "My first job was to pull out weeds.",
+                            userAnswer: "",
                         },
                     ]
                 },
                 {
-                    type:"fill",
-                    isComplete:false,
-                    isShowAnswer:false,
-                    value:[
-                        {   
-                            answer:"couple",
-                            userAnswer:"",
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: "couple",
+                            userAnswer: "",
+                            isRight: null,
                         },
                         {
-                            answer:"elderly",
-                            userAnswer:"",
+                            answer: "elderly",
+                            userAnswer: "",
+                            isRight: null,
                         },
                         {
-                            answer:"neighborhood",
-                            userAnswer:"",
+                            answer: "neighborhood",
+                            userAnswer: "",
+                            isRight: null,
                         },
                         {
-                            answer:"tedious",
-                            userAnswer:"",
+                            answer: "tedious",
+                            userAnswer: "",
+                            isRight: null,
                         },
                         {
-                            answer:"value",
-                            userAnswer:"",
+                            answer: "value",
+                            userAnswer: "",
+                            isRight: null,
                         },
                         {
-                            answer:"sweat",
-                            userAnswer:"",
+                            answer: "sweat",
+                            userAnswer: "",
+                            isRight: null,
                         },
                     ]
                 },
                 {
-                    type:"fill",
-                    isComplete:false,
-                    isShowAnswer:false,
-                    value:[
-                        {   
-                            answer:"couple",
-                            userAnswer:"",
+                    type: "fills",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stem: "out of nowher",
+                            answer: "Success never comes out of nowhere.",
+                            userAnswer: "",
+
                         },
                         {
-                            answer:"elderly",
-                            userAnswer:"",
+                            stem: "as to",
+                            answer: "We might have questions as to where we could get a job.",
+                            userAnswer: "",
                         },
                         {
-                            answer:"neighborhood",
-                            userAnswer:"",
+                            stem: "build up",
+                            answer: "Salesperson should build up a good relationship with the customers.",
+                            userAnswer: "",
                         },
                         {
-                            answer:"tedious",
-                            userAnswer:"",
+                            stem: "at least",
+                            answer: "Full-time employees usually work at least 5 days a week.",
+                            userAnswer: "",
                         },
                         {
-                            answer:"value",
-                            userAnswer:"",
+                            stem: "take away",
+                            answer: "When a project wraps up, you are sure to take away some experience and new knowledge.",
+                            userAnswer: "",
+                        }
+                    ]
+                },
+                {
+                    type: "fills",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stem: "Wang Jinxi,the 鈥淚ron Man鈥�,successfully fulfilled his job under incredible difficulties.",
+                            answer: "鈥滈搧浜衡�濈帇杩涘枩鍦ㄦ瀬绔洶闅剧殑鏉′欢涓嬫垚鍔熷湴瀹屾垚浜嗕粬鐨勫伐浣溿��",
+                            userAnswer: "",
+
                         },
                         {
-                            answer:"sweat",
-                            userAnswer:"",
+                            stem: "Zhang Guimei,a teacher,spent all her money purchasing things needed for the girls in her school.",
+                            answer: "寮犳姊呰�佸笀鎶婂ス鎵�鏈夌殑閽遍兘鑺卞湪涓哄鏍$殑濂冲瀛愯喘涔版墍闇�鐨勭墿鍝佷笂浜嗐��",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Wu Dajing impressed the whole nation when fighting to supply his teammates with a better position in the lane.",
+                            answer: "姝﹀ぇ闈栧湪璧涘満涓婂鍔涗负闃熷弸浜夊緱鏈夊埄浣嶇疆鐨勪簨杩癸紝璁╁叏鍥戒汉姘戦兘涓轰箣鎰熷姩銆�",
+                            userAnswer: "",
+                        },
+                        {
+                            stem: "Wang Yaping with resolve won her family鈥檚 support to be the first woman in China鈥檚 new space station.",
+                            answer: "鐜嬩簹钀嶇殑鍧氭寔涓哄ス璧㈠緱浜嗗浜虹殑鏀寔锛岃濂规垚涓轰腑鍥芥柊绌洪棿绔欑殑绗竴浣嶅コ鑸ぉ鍛樸��",
+                            userAnswer: "",
+                        },
+                    ]
+                },
+                {
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: "past",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "past",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "present",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: " past",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "present",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                    ]
+                },
+                {
+                    type: "fill",
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            answer: "gave",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "spent",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "have",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "go",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+
+                            answer: "begin",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "said",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "got",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+                            answer: "thought",
+                            userAnswer: "",
+                            isRight: null,
+                        },
+                        {
+
+                            answer: "choose",
+                            userAnswer: "",
+                            isRight: null,
                         },
                     ]
                 },
@@ -2444,8 +3045,13 @@
             },
             resource: {
                 listenOne: "",
+                listenTwo: "",
+                listenThree: "",
                 readingOne: "",
                 readingTwo: "",
+                readingThree: "",
+                readingFour: "",
+                videoPathOne: ''
             },
             dropdownData: {
                 one: {
@@ -2479,6 +3085,7 @@
                     answer: "facial recognition",
                 },
             },
+
             listenThree: [
                 {
                     type: "fill",
@@ -2486,36 +3093,596 @@
                     isShowAnswer: false,
                     value: [
                         {
-                            answer: '',
+                            answer: 'clerk',
                             userAnswer: '',
                             isRight: null
                         },
                         {
-                            answer: '',
+                            answer: 'challenging',
                             userAnswer: '',
                             isRight: null
                         },
                         {
-                            answer: '',
+                            answer: 'numbers',
                             userAnswer: '',
                             isRight: null
                         },
                         {
-                            answer: '',
+                            answer: 'resume',
                             userAnswer: '',
                             isRight: null
                         },
                         {
-                            answer: '',
+                            answer: 'letter',
                             userAnswer: '',
                             isRight: null
                         },
                     ]
                 }
+            ],
+            noSubmitThree: [
+                {
+                    type: 'table',
+                    value: [
+                        {
+                            answer: 'Could you tell me a little bit about yourself?',
+                            userAnswer: '',
+                            isShowAnswer: false,
+                        },
+                        {
+                            answer: 'Can you tell me about that job in detail?',
+                            userAnswer: ''
+                        },
+                        {
+                            answer: 'Why are you applying for this job then?',
+                            userAnswer: ''
+                        },
+                        {
+                            answer: 'What are your strengths?',
+                            userAnswer: ''
+                        },
+                    ]
+                },
+                {
+                    type: 'shortAnswer',
+                    value: [
+                        {
+                            answer: [
+                                'Ask for next steps and contact information',
+                                'Assess your interview performance',
+                                'Write down anything you want to remember',
+                                'Send a thank you note to the hiring manager',
+                                'Reference a current industry event in the news or literature',
+                                'Connect on social media business networking sites',
+                                'Send any supporting documents',
+                                'Contact your references',
+                                'Get comfortable with waiting'
+                            ],
+                            userAnswer: '',
+                            isShowAnswer: false
+                        },
+                        {
+                            answer: 'A follow-up email is a good way to show your interest in the position and, most important of all, your good manners. ',
+                            userAnswer: '',
+                            isShowAnswer: false
+                        },
+                    ]
+                }
+            ],
+            practicalThree: [
+                {
+                    type: "dropdown",
+                    isShowAnswer: false,
+                    isComplete: false,
+                    value: [
+                        {
+                            stemOne: 'Subject: 1.',
+                            stemTwo: '',
+                            answer: '1. Thanks for meeting with me',
+                            userAnswer: '',
+                            option: [
+                                '1. Thanks for meeting with me',
+                                '2. I wish I could get the job'
+                            ]
+                        },
+                        {
+                            stemOne: '2.',
+                            stemTwo: 'Mr. Jin,',
+                            answer: '2. Dear',
+                            userAnswer: '',
+                            option: [
+                                '1. Hello',
+                                '2. Dear'
+                            ]
+                        },
+                        {
+                            stemOne: '3.',
+                            stemTwo: 'the talk earlier today. Our conversation about the Marketing Manager position was inspiring,and it was fantastic to learn more about the position.',
+                            answer: '2. We had great fun in',
+                            userAnswer: '',
+                            option: [
+                                '1. Thanks so much for',
+                                '2. We had great fun in'
+                            ]
+                        },
+                        {
+                            stemOne: "The job sounds exciting, and I think I would be an ideal candidate thanks to 4.",
+                            stemTwo: 'in the field.',
+                            answer: '1. my years of experience',
+                            userAnswer: '',
+                            option: [
+                                '1. my years of experience',
+                                "2. my friends' help"
+                            ]
+                        },
+                        {
+                            stemOne: '5.',
+                            stemTwo: '.Thanks again for the opportunity.',
+                            answer: '1. Please contact me if you want to discuss further',
+                            userAnswer: '',
+                            option: [
+                                '1. Please contact me if you want to discuss further',
+                                "2. I have great confidence that I will get the job"
+                            ]
+                        },
+                    ]
+                },
+                {
+                    type: 'fill',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            stem: 'thank銆�for銆�me銆�meet銆�taking銆�the銆�time銆�to銆�with銆�yesterday銆�you',
+                            answer: 'Thank you for taking the time to meet with me yesterday.',
+                            userAnswer: '',
+                        },
+                        {
+                            stem: 'I銆�appreciate銆�interview銆�me銆�the銆�time銆�to銆�took銆�you',
+                            answer: 'I appreciate the time you took to interview me.',
+                            userAnswer: '',
+                        },
+                        {
+                            stem: 'I銆�about銆�am銆�excited銆�joining銆�of銆�possibility銆�the銆�very銆�you',
+                            answer: 'I am very excited about the possibility of joining you.',
+                            userAnswer: '',
+                        },
+                        {
+                            stem: 'I銆�about銆�enjoyed銆�position銆�speaking銆�the銆�today銆�with銆�you',
+                            answer: 'I enjoyed speaking with you today about the position.',
+                            userAnswer: '',
+                        },
+                        {
+                            stem: 'I銆�am銆�and銆�for銆�forward銆�from銆�hearing銆�in銆�interested銆�look銆�to銆�very銆�working銆�you銆�you',
+                            answer: 'I am very interested in working for you and look forward to hearing from you.',
+                            userAnswer: '',
+                        },
+                    ]
+                },
+                {
+                    type: 'emial',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                    ]
+                },
+                {
+                    type: 'table',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                    ]
+                },
+                {
+                    type: 'emial',
+                    isComplete: false,
+                    isShowAnswer: false,
+                    value: [
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                        {
+                            userAnswer: ''
+                        },
+                    ]
+                },
+            ],
+            noSubmitTwo:[
+                {
+                    type:'table',
+                    value:[
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                        {
+                            userAnswer:'',
+                        },
+                    ]
+                },
+                {
+                    type:'shortAnswer',
+                    value:[
+                        {
+                            stem:'.Working hard is only the first part of success.Making good choices is the second part.It truly takes both to achieve success at whatever you do.What鈥檚 your interpretation of the sentence?',
+                            answer:[
+                                'In order to be happy, you need to love what you are doing in life. Choosing a career, here, plays an important role in determining the level of your achievements. If you land down with a career that does not suit your qualification and potential, then you will only be wasting your time and energy into something which is neither good for your career nor your life. Selecting a wrong career will hold you in an inappropriate situation which will not only affect your professional life but will have an adverse impact on your personal life too.'
+                            ],
+                            userAnswer:'',
+                            isShowAnswer:false
+                        },
+                        {
+                            stem:'What鈥檚 your suggestion for making the 鈥渞ight鈥� career choice?',
+                            answer:[
+                                '1) Be aware of how other factors influence you',
+                                '2) Never forget your strengths',
+                                '3) Volunteer in your possible professions',
+                                '4) Consider how you want your career to support you financially ',
+                                '5) Take your time 鈥� don鈥檛 feel like you have to rush the process',
+                                '6) Be patient with yourself, and keep in mind this is a challenging task',
+                                '7) Reflect on what subjects in high school you enjoyed',
+                                '8) Think about your dreams in life but try to understand why'
+                            ],
+                            userAnswer:'',
+                            isShowAnswer:false
+                        },
+                    ]
+                },
+                {
+                    type:'table',
+                    value:[
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                        {
+                            userAnswer:''
+                        },
+                    ]
+                }
+            ],
+            dropTwo:[
+                {
+                    type:'dropdown',
+                    isShowAnswer:false,
+                    option:[
+                        'identify passion','go to school'
+                    ],
+                    value:[
+                        {
+                            answer:'identify passion',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'go to school',
+                            userAnswer:''
+                        },
+                    ]
+                },
+                {
+                    type:'dropdown',
+                    isComplete:false,
+                    option:[
+                        'change your mind',
+                        'get another job',
+                        'focus on one'
+                    ],
+                    value:[
+                        {
+                            answer:'focus on one',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'change your mind',
+                            userAnswer:''
+                        },
+                        {
+                            answer:'get another job',
+                            userAnswer:''
+                        },
+                    ]
+                }
+            ],
+            listenTwo:[
+                {
+                    type:'checkbox',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    answer:['Experience','Happiness','Income','Satisfaction'],
+                    option:[
+                        'Education','Experience','Goals','Happiness','Interest','Satisfaction','Skills','Values'
+                    ],
+                    value:[
+                        {
+                            userAnswer:[]
+                        }
+                    ]
+                },
+                {
+                    type:"dropdown",
+                    isComplete:false,
+                    isShowAnswer:false,
+                    option:['T','F'],
+                    value:[
+                        {
+                            stem:'When we decide on our future career,satisfaction and happiness matter a lot.',
+                            answer:'T',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            stem:'Positive emotions make us more productive and satisfied in our jobs.',
+                            answer:'T',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            stem:'Our past experiences have nothing to do with our jobs in the future.',
+                            answer:'F',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            stem:'Our past experiences have nothing to do with our jobs in the future.',
+                            answer:'F',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            stem:'Luxuries will bring enjoyment to us,but that feeling cannot last forever.',
+                            answer:'T',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            stem:'Once you find a desired occupation,you鈥檒l notice a change even in your daily life.',
+                            answer:'career',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            stem:'Only a small part of the budget is spent on books.',
+                            answer:'beneficial',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            stem:'Happiness itself can help to shape job market results and even firm performance.',
+                            answer:'outcomes',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            stem:'Those who are excited about numbers can work in the accounting field.',
+                            answer:'passionate',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                        {
+                            stem:'We need to leave our pleasant zone at work if we want growth opportunities.',
+                            answer:'comfortable',
+                            userAnswer:'',
+                            isRight:null,
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            
+                            stemOne:'Keep your options open and everything will',
+                            stemTwo:'.',
+                            answer:'fall into place',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            
+                            stemOne:'You鈥檇 better set a long-term goal that you can',
+                            stemTwo:'.',
+                            answer:'be passionate about',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            
+                            stemOne:'Anyone hired into the company must',
+                            stemTwo:'the system.',
+                            answer:'be comfortable with',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            
+                            stemOne:'You must accept',
+                            stemTwo:'the blame for this crisis.',
+                            answer:'a portion of',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            
+                            stemOne:'the blame for this crisis.',
+                            stemTwo:'.',
+                            answer:'later on',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
+                {
+                    type:'fill',
+                    isComplete:false,
+                    isShowAnswer:false,
+                    value:[
+                        {
+                            
+                            stemOne:'Although finding a new job might not be easy,there are many different methods to find',
+                            stemTwo:'effectively.',
+                            answer:'one',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            
+                            stemOne:'As you make a decision about your career,',
+                            stemTwo:'is important to reflect on your interest,skills and career goals.',
+                            answer:'it',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            
+                            stemOne:'People will usually set a milestone in their career path,',
+                            stemTwo:'that they will work for in the next five or ten years.',
+                            answer:'one',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            
+                            stemOne:'A career aptitude test could be helpful,because',
+                            stemTwo:'will give you suggestions based on the test of your personal type.',
+                            answer:'it',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                        {
+                            
+                            stemOne:'We all have to work,and for most of us,if you discount weekends and sleep,',
+                            stemTwo:'will take up at least half our available time.',
+                            answer:'it',
+                            userAnswer:'',
+                            isRight:null
+                        },
+                    ]
+                },
             ]
         };
     },
-    mounted() {
+     mounted() {
         const warmUp = localStorage.getItem("english-chapter-8-warmUp");
         if (warmUp) {
             this.warmUp = JSON.parse(warmUp);
@@ -2524,8 +3691,24 @@
         if (bookQuestion) {
             this.questionData = JSON.parse(bookQuestion);
         }
-        this.getPath();
-    },
+        const questionDataOne = localStorage.getItem("english-chapter-08-questionDataOne");
+        if (questionDataOne) {
+            this.questionDataOne = JSON.parse(questionDataOne);
+        }
+         this.getPath();
+         const listenThree = localStorage.getItem('english-chapter08-listenThree')
+         if(listenThree) this.listenThree = JSON.parse(listenThree)
+         const noSubmitThree =  localStorage.getItem('english-chapter08-noSubmitThree')
+        if(noSubmitThree) this.noSubmitThree = JSON.parse(noSubmitThree)
+        const practicalThree =  localStorage.getItem('english-chapter08-practicalThree')
+        if(practicalThree) this.practicalThree = JSON.parse(practicalThree)
+        const noSubmitTwo =  localStorage.getItem('english-chapter08-noSubmitTwo')
+        if(noSubmitTwo) this.noSubmitTwo = JSON.parse(noSubmitTwo)
+        const dropTwo =  localStorage.getItem('english-chapter08-dropTwo')
+        if(dropTwo) this.dropTwo = JSON.parse(dropTwo)
+        const listenTwo =  localStorage.getItem('english-chapter08-listenTwo')
+        if(listenTwo) this.listenTwo = JSON.parse(listenTwo)
+    }, 
     methods: {
         handleWarmUp(type) {
             if (this.warmUp[0].value[type].userAnswer.trim()) {
@@ -2543,6 +3726,51 @@
                 "english-book-chapter08-question-one",
                 JSON.stringify(this.questionData)
             );
+        },
+        handleQuestionDataOne() {
+            for (let index = 0; index < this.questionDataOne.length; index++) {
+                const item = this.questionDataOne[index];
+                item.isComplete = true;
+                item.isShowAnswer = true;
+                if (item.type == "fill") {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = citem.answer == citem.userAnswer;
+                    }
+                }
+            }
+        },
+        setQuestionDataOne() {
+            localStorage.setItem(
+                "english-chapter-08-questionDataOne",
+                JSON.stringify(this.questionDataOne)
+            );
+        },
+        recastQuestionDataOne() {
+            localStorage.removeItem("english-chapter-08-questionDataOne");
+            for (let index = 0; index < this.questionDataOne.length; index++) {
+                const item = this.questionDataOne[index];
+                item.isComplete = false;
+                item.isShowAnswer = false;
+                if (item.type == "fill") {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = null;
+                        citem.userAnswer = "";
+                    }
+                } else {
+                    for (let dindex = 0; dindex < item.value.length; dindex++) {
+                        const ditem = item.value[dindex];
+                        ditem.userAnswer = "";
+                    }
+                }
+            }
+        },
+        viewQuestionDataOne() {
+            for (let index = 0; index < this.questionDataOne.length; index++) {
+                const item = this.questionDataOne[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
         },
         arrayToString(data) {
             if (Array.isArray(data)) {
@@ -2577,14 +3805,33 @@
         },
         async getPath() {
             this.resource.listenOne = await getResourcePath(
-                "422139A2EF66EA888C5ED1D550AE23E0"
+                "0D60202A6F614D6B23AF7C48AFC39AB6"
             );
             this.resource.readingOne = await getResourcePath(
-                "3F442B682D84C8AB06C800B29D734920"
+                "8C19582CDE35B48FDA735B7E0C206F77"
             );
             this.resource.readingTwo = await getResourcePath(
-                "E8719EC88026BCFB11D292AA999F6D3D"
+                "946A5702CC80B0DB657CCFD66DEE1515"
             );
+            this.resource.readingThree = await getResourcePath(
+                "ADAFFAB7BC7A868574889809AB1166A6"
+            );
+            this.resource.readingFour = await getResourcePath(
+                "966C8CEB3448A41D92BDF9B494F02B88"
+            );
+            this.resource.listenTwo = await getResourcePath(
+                "76546423FCFAB4B861BC8B94C97D24A2"
+            );
+            this.resource.listenThree = await getResourcePath(
+                "717A3B915B114D7DC5CA9D3AAA1FC3ED"
+            );
+            this.resource.listenTwo = await getResourcePath(
+                "ADAFFAB7BC7A868574889809AB1166A6"
+            );
+            this.resource.videoPathOne = await getResourcePath(
+                "29A9C275EEF0BF71C52BE68D8842C0E4"
+            );
+
         },
         showAnswer(type) {
             if (type == "showImg") {
@@ -2594,6 +3841,107 @@
             }
             setTimeout(() => { this.$emit("initViewer", "") }, 500)
         },
+        saveListenThree() {
+            localStorage.setItem('english-chapter08-listenThree', JSON.stringify(this.listenThree))
+        },
+        handleListenThree() {
+            for (let index = 0; index < this.listenThree.length; index++) {
+                const item = this.listenThree[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.saveListenThree()
+        },
+        recastListenThree() {
+            for (let index = 0; index < this.listenThree.length; index++) {
+                const item = this.listenThree[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-chapter08-listenThree')
+        },
+        viewListenThree() {
+            for (let index = 0; index < this.listenThree.length; index++) {
+                const item = this.listenThree[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        },
+        saveNoSubmitThree() {
+            localStorage.setItem('english-chapter08-noSubmitThree', JSON.stringify(this.noSubmitThree))
+        },
+        showNoSubmitThree(index, num) {
+            this.$set(this.noSubmitThree[index].value[num], 'isShowAnswer', !this.noSubmitThree[index].value[num].isShowAnswer)
+        },
+        savePracticalThree() {
+            localStorage.setItem('english-chapter08-practicalThree', JSON.stringify(this.practicalThree))
+        },
+        handlePracticalThree(index, num) {
+            this.$set(this.practicalThree[index].value[num], 'isRight', this.practicalThree[index].value[num].userAnswer == this.practicalThree[index].value[num].answer)
+            this.savePracticalThree()
+        },
+        showPracticalThree(index) {
+            this.$set(this.practicalThree[index],'isShowAnswer',!this.practicalThree[index].isShowAnswer)
+        },
+        saveNoSubmitTWo() {
+            localStorage.setItem('english-chapter08-noSubmitTwo',JSON.stringify(this.noSubmitTwo))
+        },
+        showNoSubmitTWo(index,num) {
+            this.$set(this.noSubmitTwo[index].value[num],'isShowAnswer',!this.noSubmitTwo[index].value[num].isShowAnswer)
+        },
+        saveDropTwo() {
+            localStorage.setItem('english-chapter08-dropTwo',JSON.stringify(this.dropTwo))
+        },
+        handleDropTwo(index,num) {
+            this.$set(this.dropTwo[index].value[num],'isRight',this.dropTwo[index].value[num].userAnswer == this.dropTwo[index].value[num].answer)
+            this.saveDropTwo()
+        },
+        saveListenTwo() {
+            localStorage.setItem('english-chapter08-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 !== 'checkbox') {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = citem.userAnswer == citem.answer
+                    }
+                }
+            }
+            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 !== 'checkbox') {
+                    for (let cindex = 0; cindex < item.value.length; cindex++) {
+                        const citem = item.value[cindex];
+                        citem.isRight = null
+                        citem.userAnswer = null
+                    }
+                }
+            }
+            localStorage.removeItem('english-chapter08-listenTwo')
+        },
+        viewListenTwo() {
+            for (let index = 0; index < this.listenTwo.length; index++) {
+                const item = this.listenTwo[index];
+                item.isShowAnswer = !item.isShowAnswer
+            }
+        }
     },
 };
 </script>
@@ -2681,4 +4029,126 @@
         outline: none;
     }
 }
+
+.finish-box {
+    border: 2px dashed #d1d2d4;
+    border-radius: 3%;
+}
+
+.poster-img {
+    width: 100%;
+    position: relative;
+}
+
+.poster-input-box-one {
+    width: 18%;
+    height: 12%;
+    position: absolute;
+    top: 49%;
+    left: 3%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-two {
+    width: 23%;
+    height: 12%;
+    position: absolute;
+    top: 14%;
+    left: 38%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-six {
+    width: 23%;
+    height: 12%;
+    position: absolute;
+    top: 30.5%;
+    left: 38%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-three {
+    width: 23%;
+    height: 11%;
+    position: absolute;
+    top: 49%;
+    left: 38%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-four {
+    width: 23%;
+    height: 12%;
+    position: absolute;
+    bottom: 22.5%;
+    left: 38%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.poster-input-box-five {
+    width: 23%;
+    height: 12%;
+    position: absolute;
+    bottom: 5.4%;
+    left: 38%;
+    border: 0;
+    border-bottom: 1px solid #000000;
+
+    &:focus {
+        outline: none;
+    }
+}
+.po-re {
+    position: relative;
+}
+.reality-one,.reality-two,.reality-three {
+    width:18%;
+    height:7%;
+    select {
+        width:100%;
+        height:100%;
+    }
+}
+.reality-one {
+
+    position:absolute;
+    right: 30%;
+    top: 30%;
+
+}
+.reality-two {
+    position:absolute;
+    right: 50%;
+    top: 47%;
+}
+.reality-three {
+    position:absolute;
+    right: 44%;
+    bottom: 6.5%;
+}
 </style>
\ No newline at end of file

--
Gitblit v1.9.1