From 0147b2e4cd7b1e38a84de32ea954b7ed47acf31f Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 22 七月 2024 16:29:17 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/books/English/view/components/chapter008.vue |  587 ++++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 505 insertions(+), 82 deletions(-)

diff --git a/src/books/English/view/components/chapter008.vue b/src/books/English/view/components/chapter008.vue
index 25f3528..098d4b1 100644
--- a/src/books/English/view/components/chapter008.vue
+++ b/src/books/English/view/components/chapter008.vue
@@ -1557,11 +1557,46 @@
                         <p><b>鈪�.Derek is talking about his job interview.Listen to the recording and fill in the blanks
                                 with what you hear.</b></p>
                         <p>Hi,everyone.I鈥檓 Derek Cruise.I landed a job interview the other day.It is a bank
-                            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 +1619,19 @@
                 <!-- 鍐呭 -->
                 <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>
                         <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 +1640,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 +1653,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 +1663,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 +1673,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 +1684,48 @@
                                 </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 +1762,68 @@
                 <!-- 鍐呭 -->
                 <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 +1849,39 @@
                         <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
@@ -1771,52 +1919,55 @@
                 <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 +1975,20 @@
                         </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>
@@ -2446,6 +2602,7 @@
                 listenOne: "",
                 readingOne: "",
                 readingTwo: "",
+                videoPathOne:''
             },
             dropdownData: {
                 one: {
@@ -2479,40 +2636,248 @@
                     answer: "facial recognition",
                 },
             },
-            listenThree: [
+            
+            listenThree:[
                 {
                     type: "fill",
                     isComplete: false,
                     isShowAnswer: false,
                     value: [
                         {
-                            answer: '',
-                            userAnswer: '',
-                            isRight: null
+                            answer:'clerk',
+                            userAnswer:'',
+                            isRight:null
                         },
                         {
-                            answer: '',
-                            userAnswer: '',
-                            isRight: null
+                            answer:'challenging',
+                            userAnswer:'',
+                            isRight:null
                         },
                         {
-                            answer: '',
-                            userAnswer: '',
-                            isRight: null
+                            answer:'numbers',
+                            userAnswer:'',
+                            isRight:null
                         },
                         {
-                            answer: '',
-                            userAnswer: '',
-                            isRight: null
+                            answer:'resume',
+                            userAnswer:'',
+                            isRight:null
                         },
                         {
-                            answer: '',
-                            userAnswer: '',
-                            isRight: null
+                            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:''
+                        },
+                    ]
+                },
+            ],
+
         };
     },
     mounted() {
@@ -2585,6 +2950,10 @@
             this.resource.readingTwo = await getResourcePath(
                 "E8719EC88026BCFB11D292AA999F6D3D"
             );
+            this.resource.videoPathOne = await getResourcePath(
+                "29A9C275EEF0BF71C52BE68D8842C0E4"
+            );
+            
         },
         showAnswer(type) {
             if (type == "showImg") {
@@ -2594,6 +2963,56 @@
             }
             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)
+        }
     },
 };
 </script>
@@ -2681,4 +3100,8 @@
         outline: none;
     }
 }
+.finish-box {
+    border:2px dashed #d1d2d4;
+    border-radius:3%;
+}
 </style>
\ No newline at end of file

--
Gitblit v1.9.1