zhongshujie
2024-07-22 0147b2e4cd7b1e38a84de32ea954b7ed47acf31f
src/books/English/view/components/chapter008.vue
@@ -32,21 +32,133 @@
                        <h2 id="b029"><img class="img-0" alt="" src="../../assets/images/dy8-le1.jpg" /></h2>
                        <h3 id="c064"><span class="bjh3">Warm-up</span></h3>
                        <p><b>Ⅰ.Figure out what the people in the following pictures do.</b></p>
                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-1.jpg" /></p>
                        <p class="center">1._____________________</p>
                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-2.jpg" /></p>
                        <p class="center">2._____________________</p>
                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-3.jpg" /></p>
                        <p class="center">3._____________________</p>
                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-4.jpg" /></p>
                        <p class="center">4._____________________</p>
                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-5.jpg" /></p>
                        <p class="center">5._____________________</p>
                        <p class="center"><img class="img-e" alt="" src="../../assets/images/0146-6.jpg" /></p>
                        <p class="center">6._____________________</p>
                        <p><b>Ⅱ.What other jobs can you list?</b></p>
                        <p>____________________________________________</p>
                        <div class="openImgBox">
                            <div class="fl ju-bt">
                                <div class="left" style="width: 48%">
                                    <div>
                                        <p class="center">
                                            <img src="../../assets/images/0146-1.jpg" alt="" class="w100" />
                                        </p>
                                        <p class="center">
                                            1.
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[0].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(0)" />
                                            <img :src="warmUp[0].value[0].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[0].isRight == true || warmUp[0].value[0].isRight == false">
                                        </p>
                                    </div>
                                </div>
                                <div class="right" style="width: 48%">
                                    <div>
                                        <p class="center">
                                            <img src="../../assets/images/0146-2.jpg" alt="" style="width: 98%" />
                                        </p>
                                        <p class="center">
                                            2.
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[1].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(1)" />
                                            <img :src="warmUp[0].value[1].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[1].isRight == true || warmUp[0].value[1].isRight == false">
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="fl ju-bt">
                                <div class="left" style="width: 48%">
                                    <div>
                                        <p class="center">
                                            <img src="../../assets/images/0146-3.jpg" alt="" style="width: 98%" />
                                        </p>
                                        <p class="center">
                                            3.
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[2].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(2)" />
                                            <img :src="warmUp[0].value[2].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[2].isRight == true || warmUp[0].value[2].isRight == false">
                                        </p>
                                    </div>
                                </div>
                                <div class="right" style="width: 48%">
                                    <div>
                                        <p class="center">
                                            <img src="../../assets/images/0146-4.jpg" alt="" style="width: 94%" />
                                        </p>
                                        <p class="center">
                                            4.
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[3].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(3)" />
                                            <img :src="warmUp[0].value[3].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[3].isRight == true || warmUp[0].value[3].isRight == false">
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="fl ju-bt">
                                <div class="left" style="width: 48%">
                                    <div>
                                        <p class="center">
                                            <img src="../../assets/images/0146-5.jpg" alt="" class="w100" />
                                        </p>
                                        <p class="center">
                                            5.
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[4].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(4)" />
                                            <img :src="warmUp[0].value[4].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[4].isRight == true || warmUp[0].value[4].isRight == false">
                                        </p>
                                    </div>
                                </div>
                                <div class="right" style="width: 48%">
                                    <div>
                                        <p class="center">
                                            <img src="../../assets/images/0146-6.jpg" alt="" style="width: 98%" />
                                        </p>
                                        <p class="center">
                                            6.
                                            <input type="text" class="input-bottom-border w50"
                                                v-model="warmUp[0].value[5].userAnswer" @input="setWarmUp"
                                                @blur="handleWarmUp(5)" />
                                            <img :src="warmUp[0].value[5].isRight ? correctIcon : errorIcon"
                                                v-if="warmUp[0].value[5].isRight == true || warmUp[0].value[5].isRight == false">
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p><b>Ⅱ.What other jobs can you list?</b>
                            <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                    viewBox="0 0 20.501 20.501">
                                    <path class="a"
                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                                        transform="translate(-3327.144 15329)" />
                                </svg>
                            </span>
                        </p>
                        <p>
                            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
                            </textarea>
                        </p>
                        <div class="show-answer-box" v-if="showAnswerOne">
                            <div>答案:</div>
                            <div>
                                <img src="../../assets/images/M8WarmUp.png" alt="" class="w100" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="preface-bottom">
                    <span class="contet-num-box">136</span>
@@ -68,24 +180,145 @@
                <!-- 内容 -->
                <div class="padding-93">
                    <div class="bodystyle">
                        <h3 id="c065"><span class="bjh3">Listening</span></h3>
                        <p class="center"> <audio :src="resource.listenOne" controls
                                controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
                        <p><b>Watch the video and find out how the speakers describe their jobs.</b></p>
                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0147-2.jpg" /></p>
                        <h3 id="c065" class="fl al-cn">
                            <span class="bjh3">Listening</span>
                            <!--controlslist="noplaybackrate nodownload"后面的音频框加入这个-->
                            <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio>
                        </h3>
                        <p><b>Watch the video and find out how the speakers describe their jobs.</b>
                            <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                    viewBox="0 0 20.501 20.501">
                                    <path class="a"
                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                                        transform="translate(-3327.144 15329)" />
                                </svg>
                            </span>
                        </p>
                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                            <tr class="table-th-bc">
                                <td class="tl-cn">Who is he/she?</td>
                                <td class="tl-cn">What's his/her job?</td>
                                <td class="tl-cn" style="width: 65%;">How does he/she describe the job?</td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    Duan Xinyue
                                </td>
                                <td class="tl-cn">
                                    Teacher
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.one"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    Luo Xinya
                                </td>
                                <td class="tl-cn">
                                    Pet Doctor
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.two"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    Sun Yijie
                                </td>
                                <td class="tl-cn">
                                    Taxi Driver
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.three"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    Wu Qi
                                </td>
                                <td class="tl-cn">
                                    Photographer
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.four"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                        </table>
                        <div class="show-answer-box" v-if="showAnswerTwo">
                            <div>答案:</div>
                            <div>
                                <img src="../../assets/images/M8ListeningOne.png" alt="" class="w100" />
                            </div>
                        </div>
                        <h3 id="c066"><span class="bjh3">Reading</span></h3>
                        <p>1.There is a saying that a part-time job can be a way to gain the experience necessary for
                            full-time employment.Do you agree? Why or why not?</p>
                        <p>2.If you’re considering a part-time job,what’s your expectation of it?</p>
                        <p class="center">__________________</p>
                            full-time employment.Do you agree? Why or why not?
                            <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                    viewBox="0 0 20.501 20.501">
                                    <path class="a"
                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                                        transform="translate(-3327.144 15329)" />
                                </svg>
                            </span>
                        </p>
                        <p>
                            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
                            </textarea>
                        </p>
                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
                            答案:(1).Gain confidence and responsibility &nbsp; (2).Explore alternate career options &nbsp; (3).Strengthen resume &nbsp;
                            (4).Develop work ethic skills &nbsp; (5).Create opportunities for socializing &nbsp; (6).Enhance communication skills &nbsp;
                            (7).Build networking opportunities &nbsp; (8).Gain independence &nbsp; (9).Get a stable cash flow &nbsp; (10).Learn money management skills &nbsp;
                        </p>
                        <p>2.If you’re considering a part-time job,what’s your expectation of it?
                            <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
                                    viewBox="0 0 20.501 20.501">
                                    <path class="a"
                                        d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                                        transform="translate(-3327.144 15329)" />
                                </svg>
                            </span>
                        </p>
                        <p>
                            <textarea v-model="questionData.reading.three" placeholder="请输入内容" rows="6"
                                style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
                            </textarea>
                        </p>
                        <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
                            答案:(1).a good salary &nbsp; (2).a regular working time &nbsp; (3).a friendly working team &nbsp;
                            (4).comfortable working environment
                        </p>
                        <p class="center">
                            <input  type="text" class="input-bottom-border input-bc-t " style="width: 30%;"
                                        v-model="questionData.reading.four" @change="setBookQuestion" />
                        </p>
                        <p class="center"> <audio :src="resource.listenOne" controls
                                controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
                                controlslist="noplaybackrate nodownload" class="audio"></audio></p>
                        <p>Everyone’s first job is special.There are a couple of reasons for this:the experience is
                            burned into one’s memory; it gives you the practice needed to fulfill other positions; and
                            it teaches you about the value of money.</p>
                        <p>When I was sixteen years old,I wanted to buy a new speed cube,but I did not have any money.My
                            burned into one’s memory; it gives you the practice needed to
                            <span class="word-bc" @click="saveWord($event, 'fulfill')">fulfill</span>
                            other positions; and
                            it teaches you about the value of money.
                        </p>
                        <p>When I was sixteen years old,I wanted to buy a new speed
                            <span class="word-bc" @click="saveWord($event, 'cube')">cube</span>
                            ,but I did not have any money.My
                            parents were not the type of people to give money to me out of nowhere,or even for work done
                            at home.I had to find work in order to purchase one.</p>
                            at home.I had to find work in order to purchase one.
                        </p>
                    </div>
                </div>
                <div class="preface-bottom">
@@ -108,28 +341,50 @@
                <!-- 内容 -->
                <div class="padding-93">
                    <div class="bodystyle">
                        <p>So,I inquired as to who could give me work around town.I lived in the town of Woodway,which
                            had enough people,especially elderly people,who needed help in their yards.I went to the
                            oldest person I knew in my neighbourhood,Mrs.Hudson.She was over eighty years old,and could
                        <p>So,I
                            <span class="word-bc" @click="saveWord($event, 'inquired')">inquired</span>
                            as to who could give me work around town.I lived in the town of Woodway,which
                            had enough people,especially
                            <span class="word-bc" @click="saveWord($event, 'elderly')">elderly</span>
                            people,who needed help in their yards.I went to the
                            oldest person I knew in my
                            <span class="word-bc" @click="saveWord($event, 'neighbourhood')">neighbourhood</span>
                            ,Mrs.Hudson.She was over eighty years old,and could
                            not tend her garden anymore.She had flowers,a grass lawn,and some tomato plants.I knocked on
                            her door,building up enough courage to ask her for work.She answered that indeed she needed
                            help in her garden.</p>
                        <p>My first job was to pull out weeds.I got down on my knees with foam protectors and began to
                            pull out weeds one by one in her front yard and backyard.After this tedious task,I mowed her
                            lawn—front and back.That was it for my first day,and it took me about two hours.I asked her
                            help in her garden.
                        </p>
                        <p>My first job was to pull out
                            <span class="word-bc" @click="saveWord($event, 'weeds')">weeds</span>
                            .I got down on my knees with
                            <span class="word-bc" @click="saveWord($event, 'foam')">foam</span>
                            protectors and began to
                            pull out weeds one by one in her front yard and backyard.After this
                            <span class="word-bc" @click="saveWord($event, 'tedious')">tedious</span>
                            task,I
                            <span class="word-bc" @click="saveWord($event, 'mowed')">mowed</span>
                            her
                            <span class="word-bc" @click="saveWord($event, 'lawn')">lawn</span>
                            —front and back.That was it for my first day,and it took me about two hours.I asked her
                            how much I would get paid,and she said,“I will give you $5 an hour.” It was less than I
                            thought I would get paid,but at least I had a job and the money for my cube.</p>
                            thought I would get paid,but at least I had a job and the money for my cube.
                        </p>
                        <p>I think everyone should get down on one’s knees and pull weeds.I think everyone should feel
                            the burning sun on one’s back as they mow.It seems these experiences harden spirits and
                            resolve.Besides this,a first job like this teaches you the value of money,and as sweat
                            turned into the “cube”,it is something no one can take away.</p>
                            the burning sun on one’s back as they mow.It seems these experiences
                            <span class="word-bc" @click="saveWord($event, 'harden')">harden</span>
                            spirits and
                            <span class="word-bc" @click="saveWord($event, 'resolve')">resolve</span>
                            .Besides this,a first job like this teaches you the value of money,and as
                            <span class="word-bc" @click="saveWord($event, 'sweat')">sweat</span>
                            turned into the “cube”,it is something no one can take away.
                        </p>
                        <p class="fl al-cn mt-40">
                            <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
                            <span class="line-border-box"></span>
                        </p>
                        <p class="center"><audio :src="resource.readingTwo" controls
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
                                @play="audioPlay"></audio></p>
                        <p><audio :src="resource.readingTwo" controls
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
                                class="audio"></audio></p>
                        <p>fulfill /fʊlˈfɪl/ <i>v.</i> 符合;履行</p>
                        <div class="bkbj">
                            <p><i>to do or have what is required or necessary</i></p>
@@ -307,7 +562,20 @@
                        <p>4.Wang Yaping with resolve won her family’s support to be the first woman in China’s new
                            space station.</p>
                        <p>____________________________________________________</p>
                        <p><b>Ⅲ.Grammar focus:The simple present &amp; past tense.</b></p>
                        <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"
                                    xmlns="http://www.w3.org/2000/svg" p-id="30864"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                    <path
                                        d="M387.2 471.152l-154.768 258.72v103.488h515.792V626.384l-149.12 103.488z m283.712-51.744a77.632 77.632 0 1 0 77.392 77.616 77.504 77.504 0 0 0-77.472-77.616zM640 0H160.72A96.736 96.736 0 0 0 64 96.72V927.36a96.736 96.736 0 0 0 96.72 96.64h702.56A96.704 96.704 0 0 0 960 927.36V298.016z m7.808 94.736l226.544 211.008h-146.544a80.08 80.08 0 0 1-80-80zM896 927.36a32.688 32.688 0 0 1-32.72 32.64h-702.56A32.704 32.704 0 0 1 128 927.36V96.72A32.752 32.752 0 0 1 160.72 64l423.088 0.384v161.44a144.176 144.176 0 0 0 144 143.92H896z"
                                        p-id="30865"></path>
                                </svg>
                            </span>
                        </p>
                        <div class="openImgBox" v-if="showImg">
                            <img class="w100" :src="imgThirteen" />
                        </div>
                        <p>A.Based on the form of the underlined verbs tell us whether the following sentences are about
                            the past or the present.</p>
                        <p>(present)1.Everyone’s first job <span class="u">is</span> special.</p>
@@ -319,7 +587,50 @@
                        <p>(  )6.I <span class="u">think</span> everyone should get down on one’s knees and pull weeds.
                        </p>
                        <p>B.Write the present or the past form of the following verbs.</p>
                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0151-1.jpg" /></p>
                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                            <tr class="table-tr-bc">
                                <td class="tl-cn">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>
                            </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" />
                                    went
                                </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" />
                                    began
                                </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>
                            </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>
                                <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>
                                <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>
                            </tr>
                        </table>
                        <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>
@@ -353,11 +664,318 @@
                            <p>    3.How does he/she describe his/her job?</p>
                        </div>
                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0152-1.jpg" /></p>
                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                            <tr class="table-th-bc">
                                <td class="tl-cn wh-no">The Respondent</td>
                                <td class="tl-cn">The Job</td>
                                <td class="tl-cn">The Description</td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn wh-no">
                                    Zhang Wei's Mum
                                </td>
                                <td class="tl-cn">
                                    A Teacher
                                </td>
                                <td class="tl-lf">
                                    She teaches English in a high schpol. Her job is quite <span
                                        class="input-bottom-border">stressful </span> and <span
                                        class="input-bottom-border">challenging</span> , but she feels <span
                                        class="input-bottom-border">rewarding</span> rewarding when her students make
                                    progress.
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.five"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.six"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.seven"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.eight"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.nine"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.ten"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.eleven"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twelve"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.thirteen"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.fourteen"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.fifteen"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.sixteen"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.seventeen"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box "
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.eighteen"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.nineteen"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twenty"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twentyOne"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twentyTwo"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twentyThree"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twentyFour"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twentyFive"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                        </table>
                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" /></p>
                        <div class="bk-wh">
                            <p>dangerous demanding dull exciting repetitive risky satisfying stimulating stressful voluntary
                            <p class="dl-box">
                                <span class="word-bc mr-20 dl-span"
                                    @click="saveWord($event, 'dangerous')">dangerous</span>
                                <span class="word-bc mr-20 dl-span"
                                    @click="saveWord($event, 'demanding')">demanding</span>
                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'dull')">dull</span>
                                <span class="word-bc mr-20 dl-span"
                                    @click="saveWord($event, 'exciting')">exciting</span>
                                <span class="word-bc mr-20 dl-span"
                                    @click="saveWord($event, 'repetitive')">repetitive</span>
                                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'risky')">risky</span>
                                <span class="word-bc mr-20 dl-span"
                                    @click="saveWord($event, 'satisfying')">satisfying</span>
                                <span class="word-bc mr-20 dl-span"
                                    @click="saveWord($event, 'stimulating')">stimulating</span>
                                <span class="word-bc mr-20 dl-span"
                                    @click="saveWord($event, 'stressful')">stressful</span>
                                <span class="word-bc mr-20 dl-span"
                                    @click="saveWord($event, 'voluntary')">voluntary</span>
                            </p>
                            <p>         
                            </p>
                        </div>
                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
                            <div class="banshi openImgBox">
                                <div class="swiper-container swiper_ppt">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_01.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_02.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_03.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_04.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_05.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_06.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_07.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_08.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_09.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_10.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_11.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_12.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_13.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_14.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_15.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_16.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_17.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_18.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_19.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_20.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_21.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_22.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_23.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_24.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_25.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_26.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_27.png" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                    <div class="pageBox"></div>
                                </div>
                                <!-- 显示当前页和总页数的元素 -->
                            </div>
                        </div>
                    </div>
                </div>
@@ -415,18 +1033,20 @@
                        <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’s your interpretation of the
                            sentence?</p>
                        <p>2.What’s your suggestion for making the “right” career choice?</p>
                        <p class="center"><b>Choose a Career You Love</b></p>
                        <p class="center"><audio :src="resource.readingTwo" controls
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
                                @play="audioPlay"></audio></p>
                        <p>We spend a large portion of our lives working,so how we spend those years matters.It is
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
                                class="audio"></audio></p>
                        <p>We spend a large
                            <span class="word-bc" @click="saveWord($event, 'portion')">portion</span>
                            of our lives working,so how we spend those years matters.It is
                            beneficial to find a career that will bring satisfaction and happiness rather than find one
                            based on income.</p>
                            based on income.
                        </p>
                    </div>
                </div>
                <div class="preface-bottom">
@@ -453,33 +1073,56 @@
                            said.</p>
                        <p>When we have a job that we love,we are more productive and satisfied.There is more passion to
                            get up in the morning and begin working.There are more positive emotions associated with
                            doing something we care about.Sometimes people choose a certain profession because of past
                            experiences.</p>
                            doing something we care about.Sometimes people choose a certain
                            <span class="word-bc" @click="saveWord($event, 'profession')">profession</span>
                            because of past
                            experiences.
                        </p>
                        <p>Someone may choose to be an actor because they want others to be happy.Someone may choose to
                            be a doctor because someone they knew was ill.Someone may choose to be a vet because they
                            be a doctor because someone they knew was ill.Someone may choose to be a
                            <span class="word-bc" @click="saveWord($event, 'vet')">vet</span>
                            because they
                            care about animals.These past experiences may influence a career,and the career may provide
                            more satisfaction and a sense of purpose.</p>
                            more satisfaction and a sense of purpose.
                        </p>
                        <p>We shouldn’t spend a lot of time worrying about where we should be.Things will fall into
                            place as they are meant to.There isn’t one correct path and everyone’s life is different.We
                            may face challenges that bring greater outcomes later on.</p>
                            may face challenges that bring greater
                            <span class="word-bc" @click="saveWord($event, 'outcomes')">outcomes</span>
                            later on.
                        </p>
                        <p>Some may argue that they need more money to survive and be happy.It is true that we need
                            money to survive,but after a certain amount it doesn’t give us any more happiness.It can
                            provide necessities like food,water,clothes,and shelter.It can also provide luxuries like
                            provide
                            <span class="word-bc" @click="saveWord($event, 'necessities')">necessities</span>
                            like food,water,clothes,and
                            <span class="word-bc" @click="saveWord($event, 'shelter')">shelter</span>
                            .It can also provide
                            <span class="word-bc" @click="saveWord($event, 'luxuries')">luxuries</span>
                            like
                            vacations and going out to eat at a restaurant.But when we enjoy something,the feeling of
                            enjoyment doesn’t last forever.We usually return to our baseline state shortly after.Every
                            individual’s needs are different,but we can sometimes play a part in our emotional
                            state.Having more luxury items and wants doesn’t bring happiness that lasts.</p>
                        <p>Having a career that we are passionate about,one that gives our life a sense of purpose,and
                            one that we are comfortable with is important.Finding a career shouldn’t be based on income
                            enjoyment doesn’t last forever.We usually return to our
                            <span class="word-bc" @click="saveWord($event, 'baseline')">baseline</span>
                            state shortly after.Every
                            individual’s needs are different,but we can sometimes play a part in our
                            <span class="word-bc" @click="saveWord($event, 'emotional')">emotional</span>
                            state.Having more luxury items and wants doesn’t bring happiness that lasts.
                        </p>
                        <p>Having a career that we are
                            <span class="word-bc" @click="saveWord($event, 'passionate')">passionate</span>
                            about,one that gives our life a sense of purpose,and
                            one that we are
                            <span class="word-bc" @click="saveWord($event, 'comfortable')">comfortable</span>
                            with is important.Finding a career shouldn’t be based on income
                            or forced.We spend a huge amount of our lives working,so we should spend this time doing
                            something we are passionate about.</p>
                            something we are passionate about.
                        </p>
                        <p class="fl al-cn mt-40">
                            <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
                            <span class="line-border-box"></span>
                        </p>
                        <p class="center"> <audio :src="resource.readingTwo" controls
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
                                @play="audioPlay"></audio></p>
                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
                            style="margin-left: 10px" class="audio"></audio>
                        <p>portion /ˈpɔːʃn/ <i>n.</i>部分</p>
                        <div class="bkbj">
                            <p><i>one part of sth.larger</i></p>
@@ -638,7 +1281,20 @@
                        <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><b>Ⅲ.Grammar focus:Pronouns (it,one).</b></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"
                                    xmlns="http://www.w3.org/2000/svg" p-id="30864"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                    <path
                                        d="M387.2 471.152l-154.768 258.72v103.488h515.792V626.384l-149.12 103.488z m283.712-51.744a77.632 77.632 0 1 0 77.392 77.616 77.504 77.504 0 0 0-77.472-77.616zM640 0H160.72A96.736 96.736 0 0 0 64 96.72V927.36a96.736 96.736 0 0 0 96.72 96.64h702.56A96.704 96.704 0 0 0 960 927.36V298.016z m7.808 94.736l226.544 211.008h-146.544a80.08 80.08 0 0 1-80-80zM896 927.36a32.688 32.688 0 0 1-32.72 32.64h-702.56A32.704 32.704 0 0 1 128 927.36V96.72A32.752 32.752 0 0 1 160.72 64l423.088 0.384v161.44a144.176 144.176 0 0 0 144 143.92H896z"
                                        p-id="30865"></path>
                                </svg>
                            </span>
                        </p>
                        <div class="openImgBox" v-if="showImgOne">
                            <img class="w100" :src="imgThirteenOne" />
                        </div>
                        <p>Read the examples and complete the sentences with <i>it</i> or <i>one</i>.</p>
                        <p><b>Examples:</b></p>
                        <div class="fieldset-2">
@@ -684,20 +1340,263 @@
                <div class="padding-93">
                    <div class="bodystyle">
                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0159-1.jpg" /></p>
                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                            <tr class="table-th-bc">
                                <td class="tl-cn wh-no">What job is he/she interested in?</td>
                                <td class="tl-cn">Why does he'she choose this job?</td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    Architeet
                                </td>
                                <td class="tl-lf">
                                    My fatnily is engaged in a construction business. And I have hada dream to build my
                                    own house ever since I was a kid.
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twentySix"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twentySeven"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twentyEight"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.twentyNine"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.thirty"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.thirtyOne"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.thirtyTwo"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <textarea v-model="questionData.table.thirtyThree"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                        </table>
                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
                            <div class="banshi openImgBox">
                                <div class="swiper-container swiper_ppt">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_01.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_02.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_03.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_04.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_05.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_06.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_07.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_08.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_09.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_10.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_11.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_12.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_13.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_14.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_15.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_16.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_17.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_18.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_19.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_20.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_21.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_22.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_23.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_24.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_25.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_26.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_27.png" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                    <div class="pageBox"></div>
                                </div>
                                <!-- 显示当前页和总页数的元素 -->
                            </div>
                        </div>
                        <h2 id="b031"><img class="img-0" alt="" src="../../assets/images/dy8-le3.jpg" /></h2>
                        <h3 id="c071"><span class="bjh3">Listening</span></h3>
                        <p class="center"> <audio :src="resource.readingTwo" controls
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
                                @play="audioPlay"></audio></p>
                                controlslist="noplaybackrate nodownload" style="margin-left: 10px"
                                class="audio"></audio></p>
                        <p><b>Ⅰ.Derek is talking about his job interview.Listen to the recording and fill in the blanks
                                with what you hear.</b></p>
                        <p>Hi,everyone.I’m Derek Cruise.I landed a job interview the other day.It is a bank
                            1._________that I’ve wanted for a long time.I’m 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’ve wanted for a long time.I’m 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’ve got to do is to take that job.Wish me good luck!</p>
                            well-prepared,I guess.Now all I’ve 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">
@@ -720,13 +1619,113 @@
                <!-- 内容 -->
                <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 class="center"><img class="img-a" alt="" src="../../assets/images/0160-1.jpg" /></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>
                                <td class="tl-cn">Derek's Responses</td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="noSubmitThree[0].value[0].userAnswer"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="saveNoSubmitThree"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <p class="table-p">Studying Finance in East College</p>
                                    <p class="table-p">Having been working as an intemn in T&G Accounting Company for
                                        the last two years</p>
                                    <p class="table-p">Speaking fluent Chinese</p>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="noSubmitThree[0].value[0].userAnswer"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="saveNoSubmitThree"></textarea>
                                </td>
                                <td class="tl-lf">
                                    Analyzing financial data with ERP software
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="noSubmitThree[0].value[0].userAnswer"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="saveNoSubmitThree"></textarea>
                                </td>
                                <td class="tl-lf">
                                    To put finance theories into practice
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <textarea v-model="noSubmitThree[0].value[0].userAnswer"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="saveNoSubmitThree"></textarea>
                                </td>
                                <td class="tl-cn">
                                    <p class="table-p">A hard-working person</p>
                                    <p class="table-p">A fast learer</p>
                                    <p class="table-p">Getting along well with people</p>
                                </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
@@ -763,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">
@@ -802,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
@@ -828,12 +1891,11 @@
                        <p><b>Role 1:Interviewer</b></p>
                        <p>1.Work with your partner and decide what questions you will ask during the
                            interview.2.Complete the worksheet for the interviewer.</p>
                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
                            style="margin-left: 10px" class="audio" @play="audioPlay"></audio>
                        <p class="center"></p>
                        <p><b>Role 2:Interviewee</b></p>
                        <p>1.Make a list of the information which might be useful in the interview.2.Finish the
                            follow-up email after the interview.</p>
                        <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" <p
                            class="center"></p>
                            <p><b>Role 2:Interviewee</b></p>
                            <p>1.Make a list of the information which might be useful in the interview.2.Finish the
                                follow-up email after the interview.</p>
                    </div>
                </div>
                <div class="preface-bottom">
@@ -857,30 +1919,76 @@
                <div class="padding-93">
                    <div class="bodystyle">
                        <p class="center"><b>Worksheet for the Interviewer</b></p>
                        <div class="fieldset-5">
                            <p class="left">Name:</p>
                            <p class="left">Phone:</p>
                            <p class="left">Email:</p>
                            <p class="left">Work experience</p>
                            <p><br /></p>
                            <p class="left">Education</p>
                            <p><br /></p>
                            <p class="left">Skills</p>
                            <p><br /></p>
                            <p class="left">Other related information</p>
                            <p><br /></p>
                        </div>
                        <p><b>Follow-up Email for the Interviewee</b></p>
                        <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 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="practicalThree[3].value[3].userAnswer"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @input="savePracticalThree"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <p class="table-p">Education</p>
                                    <textarea v-model="practicalThree[3].value[4].userAnswer"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @input="savePracticalThree"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn">
                                    <p class="table-p">Skills</p>
                                    <textarea v-model="practicalThree[3].value[5].userAnswer"
                                        class="w100 table-tr-bc b0 table-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="practicalThree[3].value[6].userAnswer"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                        </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>
@@ -913,6 +2021,153 @@
                            <p>I’m sure you’re still in research mode right now ...</p>
                            <p>Please feel free to contact me if I can provide you with any further information.</p>
                        </div>
                        <div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
                            <div class="banshi openImgBox">
                                <div class="swiper-container swiper_ppt">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_01.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_02.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_03.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_04.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_05.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_06.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_07.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_08.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_09.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_10.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_11.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_12.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_13.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_14.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_15.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_16.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_17.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_18.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_19.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_20.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_21.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_22.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_23.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_24.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_25.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_26.png" />
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="imgBox" style="width: 100%; height: 100%">
                                                <img src="../../assets/images/ppt/ppt_27.png" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                    <div class="pageBox"></div>
                                </div>
                                <!-- 显示当前页和总页数的元素 -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="preface-bottom">
@@ -935,14 +2190,189 @@
    },
    data() {
        return {
            imgThirteen: require("../../assets/images/grammar.jpg"),
            warmUp: [
                {
                    type: "fill",
                    isShowAnswer: false,
                    value: [
                        {
                            answer: 'fitness coach',
                            userAnswer: '',
                            isRight: null
                        },
                        {
                            answer: 'courier',
                            userAnswer: '',
                            isRight: null
                        },
                        {
                            answer: 'flight attendant',
                            userAnswer: '',
                            isRight: null
                        },
                        {
                            answer: 'sales representative',
                            userAnswer: '',
                            isRight: null
                        },
                        {
                            answer: 'cyberathlete',
                            userAnswer: '',
                            isRight: null
                        },
                        {
                            answer: 'machinist',
                            userAnswer: '',
                            isRight: null
                        },
                    ]
                },
            ],
            questionDataOn:[
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    value:[
                        {
                            stem:"What job did the author take?",
                            answer:"Pulling out weeds",
                            userAnswer:"",
                        },
                        {
                            stem:"How did he describe his job?",
                            answer:"Tedious",
                            userAnswer:"",
                        },
                        {
                            stem:"What can be a proper title for this passage?",
                            answer:"My first job",
                            userAnswer:"",
                        },
                    ]
                },
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    value:[
                        {
                            userAnswer:"",
                        },
                        {
                            userAnswer:"",
                        },
                        {
                            userAnswer:"",
                        },
                        {
                            userAnswer:"",
                        },
                        {
                            userAnswer:"",
                        },
                    ]
                },
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    value:[
                        {
                            answer:"I wanted to buy a new speed cube, but I did not have any money, and my parents would not give me the money.",
                            userAnswer:"",
                        },
                        {
                            answer:"The experience is burned in one's memory, it gives you the practice needed to fulfill other positions, and it teaches you about the value of money.",
                            userAnswer:"",
                        },
                        {
                            answer:"The experience hardened my spirits and resolve and supplied me with the value of money.",
                            userAnswer:"",
                        },
                        {
                            answer:"I went to Mrs. Hudson, and asked her for the work to tend her garden.",
                            userAnswer:"",
                        },
                        {
                            answer:"My first job was to pull out weeds.",
                            userAnswer:"",
                        },
                    ]
                },
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    value:[
                        {
                            answer:"couple",
                            userAnswer:"",
                        },
                        {
                            answer:"elderly",
                            userAnswer:"",
                        },
                        {
                            answer:"neighborhood",
                            userAnswer:"",
                        },
                        {
                            answer:"tedious",
                            userAnswer:"",
                        },
                        {
                            answer:"value",
                            userAnswer:"",
                        },
                        {
                            answer:"sweat",
                            userAnswer:"",
                        },
                    ]
                },
                {
                    type:"fill",
                    isComplete:false,
                    isShowAnswer:false,
                    value:[
                        {
                            answer:"couple",
                            userAnswer:"",
                        },
                        {
                            answer:"elderly",
                            userAnswer:"",
                        },
                        {
                            answer:"neighborhood",
                            userAnswer:"",
                        },
                        {
                            answer:"tedious",
                            userAnswer:"",
                        },
                        {
                            answer:"value",
                            userAnswer:"",
                        },
                        {
                            answer:"sweat",
                            userAnswer:"",
                        },
                    ]
                },
            ],
            showAnswerOne: false,
            showAnswerTwo: false,
            showAnswerThree: false,
            showAnswerFour: false,
            showAnswerFive: false,
            imgThirteen: require("../../assets/images/grammar8-1.png"),
            imgThirteenOne: require("../../assets/images/grammar8-2.png"),
            correctIcon: require('@/assets/images/correct.svg'),
            errorIcon: require('@/assets/images/error.svg'),
            showImg: false,
            showQuestionAnswer: false,
            showImgOne: false,
            rawData: {
                left: [
                    {
@@ -1062,42 +2492,17 @@
                answerImg: require("../../assets/images/matching-one.png"),
            },
            questionData: {
                warnUp: {
                    one: {
                        value: "",
                        isRight: null,
                        answer: "Chinese knot",
                    },
                    two: {
                        value: "",
                        isRight: null,
                        answer: "Chinese medicine",
                    },
                    three: {
                        value: "",
                        isRight: null,
                        answer: "Chinese calligraphy",
                    },
                    four: {
                        value: "",
                        isRight: null,
                        answer: "Taichi",
                    },
                    five: {
                        value: "",
                        isRight: null,
                        answer: "sweet dumpling",
                    },
                    six: {
                        value: "",
                        isRight: null,
                        answer: "Chinese chess",
                    },
                    seven: "",
                },
                reading: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    eight: "",
                    nine: "",
                    ten: "",
                },
                table: {
                    one: "",
@@ -1107,8 +2512,40 @@
                    five: "",
                    six: "",
                    seven: "",
                    enight: "",
                    eight: "",
                    nine: "",
                    ten: "",
                    eleven: "",
                    twelve: "",
                    thirteen: "",
                    fourteen: "",
                    fifteen: "",
                    sixteen: "",
                    seventeen: "",
                    eighteen: "",
                    nineteen: "",
                    twenty: "",
                    twentyOne: "",
                    twentyTwo: "",
                    twentyThree: "",
                    twentyFour: "",
                    twentyFive: "",
                    twentySix: "",
                    twentySeven: "",
                    twentyEight: "",
                    twentyNine: "",
                    thirty: "",
                    thirtyOne: "",
                    thirtyTwo: "",
                    thirtyThree: "",
                    thirtyFour: "",
                    thirtyFive: "",
                    thirtySix: "",
                    thirtySeven: "",
                    thirtyEight: "",
                    thirtyNine: "",
                    forty: "",
                    fortyOne: "",
                },
            },
            testData: {
@@ -1165,15 +2602,8 @@
                listenOne: "",
                readingOne: "",
                readingTwo: "",
                videoPathOne:''
            },
            dropDownList: [
                "online shopping",
                "facial recognition",
                "electronic payment",
                "intercity train",
                "shared bike",
                "take-away service",
            ],
            dropdownData: {
                one: {
                    value: "",
@@ -1206,89 +2636,309 @@
                    answer: "facial recognition",
                },
            },
            listenThree:[
                {
                    type: "fill",
                    isComplete: false,
                    isShowAnswer: false,
                    value: [
                        {
                            answer:'clerk',
                            userAnswer:'',
                            isRight:null
                        },
                        {
                            answer:'challenging',
                            userAnswer:'',
                            isRight:null
                        },
                        {
                            answer:'numbers',
                            userAnswer:'',
                            isRight:null
                        },
                        {
                            answer:'resume',
                            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() {
        const testData = localStorage.getItem("english-testOne");
        if (testData) {
            this.testData = JSON.parse(testData);
        const warmUp = localStorage.getItem("english-chapter-8-warmUp");
        if (warmUp) {
            this.warmUp = JSON.parse(warmUp);
        }
        const bookQuestion = localStorage.getItem("english-book-question-one");
        const bookQuestion = localStorage.getItem("english-book-chapter08-question-one");
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
        }
        const dropdownData = localStorage.getItem("english-dropdown-one");
        if (dropdownData) {
            this.dropdownData = JSON.parse(dropdownData);
        }
        this.getPath();
    },
    methods: {
        handleWarmUp(type) {
            if (this.warmUp[0].value[type].userAnswer.trim()) {
                this.warmUp[0].value[type].isRight = this.warmUp[0].value[type].userAnswer.trim() == this.warmUp[0].value[type].answer
            } else {
                this.warmUp[0].value[type].isRight = null
            }
            this.setWarmUp();
        },
        setWarmUp() {
            localStorage.setItem("english-chapter-8-warmUp", JSON.stringify(this.warmUp));
        },
        setBookQuestion() {
            localStorage.setItem(
                "english-book-chapter08-question-one",
                JSON.stringify(this.questionData)
            );
        },
        arrayToString(data) {
            if (Array.isArray(data)) {
                return data.toString()
            } else {
                return data
            }
        },
        isTextRight(answer, data, num) {
            let flag = null;
            if (data) {
                flag = answer[num] == data
            } else {
                flag = false
            }
            return flag;
        },
        isShowRight(answer, userAnswer, data) {
            let flag = null;
            if (userAnswer.indexOf(data) > -1) {
                flag = answer.indexOf(data) > -1 ? true : false;
            } else {
                flag = false
            }
            return flag;
        },
        saveWord(event, word) {
            this.$emit("saveCharacters", event, word);
        },
        setTestData() {
            localStorage.setItem("english-testOne", JSON.stringify(this.testData));
        },
        changeTestData() {
            localStorage.removeItem("english-testOne");
            this.testData = {
                check: {
                    isRight: null,
                    answer: ["Culture", "Cuisine", "Landscapes"],
                    value: []
                },
                tx: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                in: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    isRight: null,
                    answer: ['uisine', 'andscapes', 'ivilization', 'xplore', 'nique']
                },
                line: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                ts: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                },
                gr: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                cm: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
            };
        },
        setBookQuestion() {
            console.log("保存");
            localStorage.setItem(
                "english-book-question-one",
                JSON.stringify(this.questionData)
            );
        },
        async getPath() {
            this.resource.listenOne = await getResourcePath(
@@ -1300,101 +2950,69 @@
            this.resource.readingTwo = await getResourcePath(
                "E8719EC88026BCFB11D292AA999F6D3D"
            );
            this.resource.videoPathOne = await getResourcePath(
                "29A9C275EEF0BF71C52BE68D8842C0E4"
            );
        },
        showAnswer(type) {
            if (type == "showImg") {
                this.showImg = !this.showImg;
            } else if (type == "showImgOne") {
                this.showImgOne = !this.showImgOne;
            }
            setTimeout(() => { this.$emit("initViewer", "") }, 500)
        },
        handleQuestion(type) {
            if (type == "one") {
                this.questionData.warnUp.one.value
                    ? (this.questionData.warnUp.one.isRight =
                        this.questionData.warnUp.one.value == "Chinese knot")
                    : (this.questionData.warnUp.one.isRight = null);
            } else if (type == "two") {
                this.questionData.warnUp.two.value
                    ? (this.questionData.warnUp.two.isRight =
                        this.questionData.warnUp.two.value == "Chinese medicine")
                    : (this.questionData.warnUp.two.isRight = null);
            } else if (type == "three") {
                this.questionData.warnUp.three.value
                    ? (this.questionData.warnUp.three.isRight =
                        this.questionData.warnUp.three.value == "Chinese calligraphy")
                    : (this.questionData.warnUp.three.isRight = null);
            } else if (type == "four") {
                this.questionData.warnUp.four.value
                    ? (this.questionData.warnUp.four.isRight =
                        this.questionData.warnUp.four.value == "Taichi")
                    : (this.questionData.warnUp.four.isRight = null);
            } else if (type == "five") {
                this.questionData.warnUp.five.value
                    ? (this.questionData.warnUp.five.isRight =
                        this.questionData.warnUp.five.value == "sweet dumpling")
                    : (this.questionData.warnUp.five.isRight = null);
            } else if (type == "six") {
                this.questionData.warnUp.six.value
                    ? (this.questionData.warnUp.six.isRight =
                        this.questionData.warnUp.six.value == "Chinese chess")
                    : (this.questionData.warnUp.six.isRight = null);
            }
        saveListenThree() {
            localStorage.setItem('english-chapter08-listenThree',JSON.stringify(this.listenThree))
        },
        handleDropdown(type) {
            const dropdownDatas = this.dropdownData;
            for (let key in dropdownDatas) {
                const item = dropdownDatas[key];
                if (type == "judge") {
                    item.value == item.answer
                        ? (item.isRight = true)
                        : (item.isRight = false);
                    console.log(item.value, item.answer);
        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.dropdownData = dropdownDatas;
            this.saveListenThree()
        },
        changeDropdown() {
            localStorage.removeItem("english-dropdown-one");
            for (let key in this.dropdownData) {
                const item = this.dropdownData[key];
                item.value = "";
                item.isRight = null;
            }
        },
        setDropdownData() {
            localStorage.setItem(
                "english-dropdown-one",
                JSON.stringify(this.dropdownData)
            );
        },
        saveData() {
            const item = this.testData['check']
            const sortedArr1 = item.answer.slice().sort();
            const sortedArr2 = item.value.slice().sort();
            const isRight = sortedArr1.every(
                (value, index) => value === sortedArr2[index]
            );
            const inData = this.testData['in']
            let inString = []
            for (let key in inData) {
                const citem = inData[key];
                if (key != 'answer' && key !== 'isRight') {
                    console.log(key);
                    inString.push(citem)
        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 = ''
                }
            }
            const inRight = inData.answer == inString
            console.log('in', inData.answer, inString);
            this.$set(this.testData['in'], 'isRight', inRight)
            this.$set(this.testData['check'], 'isRight', isRight)
            this.setTestData()
            console.log(this.testData);
            localStorage.removeItem('english-chapter08-listenThree')
        },
        audioPlay() {
            this.$emit("closeMiniAudio");
        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>
@@ -1482,4 +3100,8 @@
        outline: none;
    }
}
.finish-box {
    border:2px dashed #d1d2d4;
    border-radius:3%;
}
</style>