From 98672d35b55d82335c4bd05f6434f6a6cf83c733 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 08 七月 2024 11:54:03 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/books/English/view/components/chapter001.vue |  446 ++++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 292 insertions(+), 154 deletions(-)

diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index 74b839e..ed4c66c 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -892,7 +892,7 @@
               <span>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.in.answer, testData.in.one)
+                  isTextRight(testData.in.answer, testData.in.one, 0)
                 " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                   height="20">
@@ -902,7 +902,7 @@
                 </svg>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.in.answer, testData.in.one) == false
+                  isTextRight(testData.in.answer, testData.in.one, 0) == false
                 " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                   height="20">
@@ -917,7 +917,7 @@
               <span>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.in.answer, testData.in.two)
+                  isTextRight(testData.in.answer, testData.in.two, 1)
                 " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                   height="20">
@@ -927,7 +927,7 @@
                 </svg>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.in.answer, testData.in.two) == false
+                  isTextRight(testData.in.answer, testData.in.two, 1) == false
                 " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                   height="20">
@@ -942,7 +942,7 @@
               <span>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.in.answer, testData.in.three)
+                  isTextRight(testData.in.answer, testData.in.three, 2)
                 " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                   height="20">
@@ -952,7 +952,7 @@
                 </svg>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.in.answer, testData.in.three) == false
+                  isTextRight(testData.in.answer, testData.in.three, 2) == false
                 " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                   height="20">
@@ -966,7 +966,7 @@
               <span>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.in.answer, testData.in.four)
+                  isTextRight(testData.in.answer, testData.in.four, 3)
                 " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                   height="20">
@@ -976,7 +976,7 @@
                 </svg>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.in.answer, testData.in.four) == false
+                  isTextRight(testData.in.answer, testData.in.four, 3) == false
                 " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                   height="20">
@@ -992,7 +992,7 @@
               <span>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.in.answer, testData.in.five)
+                  isTextRight(testData.in.answer, testData.in.five, 4)
                 " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                   height="20">
@@ -1002,7 +1002,7 @@
                 </svg>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.in.answer, testData.in.five) == false
+                  isTextRight(testData.in.answer, testData.in.five, 4) == false
                 " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                   height="20">
@@ -1131,10 +1131,9 @@
                 </svg>
               </span>
             </p>
-            <div class="openImgBox">
-              <img src="../../assets/images/grammar.jpg" class="w100" />
+            <div class="openImgBox" v-if="showImg">
+              <img class="w100"  :src="imgThirteen"  />
             </div>
-            <!-- <el-image v-if="showImg" :src="imgThirteen" :preview-src-list="[imgThirteen]" /> -->
             <p>A.Combine the following sentences into if-clauses.</p>
             <p>
               1.Try using sticks.You can enjoy the fun of having a real Chinese
@@ -1203,7 +1202,7 @@
               <span>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.cm.answer, testData.cm.one)
+                  isTextRight(testData.cm.answer, testData.cm.one, 0)
                 " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                   height="20">
@@ -1213,7 +1212,7 @@
                 </svg>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.cm.answer, testData.cm.one) == false
+                  isTextRight(testData.cm.answer, testData.cm.one, 0) == false
                 " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                   height="20">
@@ -1229,7 +1228,7 @@
               <span>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.cm.answer, testData.cm.two)
+                  isTextRight(testData.cm.answer, testData.cm.two, 1)
                 " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                   height="20">
@@ -1239,7 +1238,7 @@
                 </svg>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.cm.answer, testData.cm.two) == false
+                  isTextRight(testData.cm.answer, testData.cm.two, 1) == false
                 " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                   height="20">
@@ -1256,7 +1255,7 @@
               <span>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.cm.answer, testData.cm.three)
+                  isTextRight(testData.cm.answer, testData.cm.three, 2)
                 " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                   height="20">
@@ -1266,7 +1265,7 @@
                 </svg>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.cm.answer, testData.cm.three) == false
+                  isTextRight(testData.cm.answer, testData.cm.three, 2) == false
                 " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                   height="20">
@@ -1283,7 +1282,7 @@
               <span>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.cm.answer, testData.cm.four)
+                  isTextRight(testData.cm.answer, testData.cm.four, 3)
                 " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                   height="20">
@@ -1293,7 +1292,7 @@
                 </svg>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.cm.answer, testData.cm.four) == false
+                  isTextRight(testData.cm.answer, testData.cm.four, 3) == false
                 " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                   height="20">
@@ -1311,7 +1310,7 @@
               <span>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.cm.answer, testData.cm.five)
+                  isTextRight(testData.cm.answer, testData.cm.five, 4)
                 " t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                   height="20">
@@ -1321,7 +1320,7 @@
                 </svg>
                 <svg v-if="
                   testData.isComplete &&
-                  isTextRight(testData.cm.answer, testData.cm.five) == false
+                  isTextRight(testData.cm.answer, testData.cm.five, 4) == false
                 " t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                   height="20">
@@ -1333,7 +1332,7 @@
             </p>
             <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛� 1.whether &nbsp; 2.if &nbsp; 3.whether &nbsp; 4.whether
-              &nbsp; 5.if
+              &nbsp; 5.If
             </p>
             <!-- 鎻愪氦鎸夐挳 -->
             <div class="w100 fl">
@@ -1909,9 +1908,7 @@
         <div class="padding-93">
           <div class="bodystyle">
             <h3 id="c006"><span class="bjh3">Reading</span></h3>
-            <p class="center">
-
-            </p>
+            <p class="center"></p>
             <p class="img"></p>
             <p>
               1.We are witnessing the rapid development of modern society.What
@@ -1929,13 +1926,15 @@
               style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
             <!-- 绛旀妗� -->
             <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFive">
-              绛旀锛�(1)intercitut rain(2)online shopping (3)electronic payment (4)shared bike (5)take-away service
-              (6)facial recognition
-              (7)2022 Beijing Winter Olympics (8)2023 World University Games (9)Hong Kong-Zhuhai-Macao Bridge
-              (10)Scenery spots, such as Jiuzhaigou, the Palace Museum, the Great Wall
+              绛旀锛�(1)intercitut rain(2)online shopping (3)electronic payment
+              (4)shared bike (5)take-away service (6)facial recognition (7)2022
+              Beijing Winter Olympics (8)2023 World University Games (9)Hong
+              Kong-Zhuhai-Macao Bridge (10)Scenery spots, such as Jiuzhaigou,
+              the Palace Museum, the Great Wall
             </p>
-            <p>2.What will our life be like in ten or twenty years?
-              <span class="btn-box" @click="showAnswerSex = !showAnswerSex">
+            <p>
+              2.What will our life be like in ten or twenty years?
+              <span class="btn-box" @click="showAnswerSix = !showAnswerSix">
                 <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"
@@ -1947,9 +1946,9 @@
             <textarea v-model="questionData.reading.four" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
               style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
             <!-- 绛旀妗� -->
-            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerSex">
-              绛旀锛�(1)population aging (2)worsening climate change
-              (3)more automation and Al,such as flying cars, driverless
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerSix">
+              绛旀锛�(1)population aging (2)worsening climate change (3)more
+              automation and Al,such as flying cars, driverless
             </p>
             <p class="center"><b>The Great Progress in China</b></p>
             <p class="center">
@@ -1958,54 +1957,77 @@
             </p>
             <p>
               On August 31st,2012,as I landed my feet on Chinese ground,I
-              started to breathe in the air coming from the breeze.It was
+              started to breathe in the air coming from the
+              <span class="word-bc" @click="saveWord($event, 'breeze')">breeze</span>
+              .It was
               familiar.I felt so excited to be back in China,though that time
               was for my studies.In a matter of days,I made a lot of friends
               from different countries and one afternoon,my friends and I
               planned to visit the world-famous Sun Yat-sen
-              Mausoleum.A.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                style="width: 120px" v-model="testData.in.one" @change="setTestData" /> I looked around with
-              curiosity,and
-              everything seemed to move at a quick pace.
+              <span class="word-bc" @click="saveWord($event, 'Mausoleum')">Mausoleum</span>
+              .A.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 120px"
+                v-model="testData.in.one" @change="setTestData" />
+              I looked around with curiosity,and everything seemed to move at a
+              quick
+              <span class="word-bc" @click="saveWord($event, 'pace')">pace</span>.
             </p>
             <p>
-              Six months later,as I walked down the hall of my dormitory,I met
-              my neighbour who was overwhelmed by big and small packages and
+              Six months later,as I walked down the hall of my
+              <span class="word-bc" @click="saveWord($event, 'dormitory')">dormitory</span>
+              ,I met
+              my
+              <span class="word-bc" @click="saveWord($event, 'neighbour')">neighbour</span>
+              who was overwhelmed by big and small packages and
               boxes.I asked,鈥淗ey,Alison.What are all these?鈥� She
               replied,鈥淗ello,Vanessa.I received my packages from the delivery
-              man.I鈥檝e been buying a lot of stuff via an online shop.鈥� I went to
-              my room to turn on my laptop and typed in the key words.I was
-              stunned; I couldn鈥檛 believe my eyes.It is actually an online
+              man.I鈥檝e been buying a lot of stuff
+              <span class="word-bc" @click="saveWord($event, 'via')">via</span>
+              an online shop.鈥� I went to
+              my room to turn on my
+              <span class="word-bc" @click="saveWord($event, 'laptop')">laptop</span>
+              and typed in the key words.I was
+              <span class="word-bc" @click="saveWord($event, 'stunned')">stunned</span>
+              ; I couldn鈥檛 believe my eyes.It is actually an online
               shopping website where you can buy anything you can think of.
             </p>
             <p>
               After my graduation in 2015,I joined another university in
               Shanghai for further studies.I always saw my Chinese classmates
-              paying with their phones; this triggered my attention.With the
+              paying with their phones; this
+              <span class="word-bc" @click="saveWord($event, 'triggered')">triggered</span>
+              my attention.With the
               help of my classmates,I finally got my own online payment
-              account.This is an absolute gadget,very convenient and easy to
-              use.With the start of this new era,I always go out without my
+              account.This is an absolute
+              <span class="word-bc" @click="saveWord($event, 'gadget')">gadget</span>
+              ,very convenient and easy to
+              use.With the start of this new
+              <span class="word-bc" @click="saveWord($event, 'era')">era</span>
+              ,I always go out without my
               wallet.
             </p>
             <p>
               B.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 120px"
-                v-model="testData.in.one" @change="setTestData" /> I went through all the necessary procedures and
-              couldn鈥檛 wait to ride my first shared bike.
+                v-model="testData.in.one" @change="setTestData" />
+              I went through all the necessary procedures and couldn鈥檛 wait to
+              ride my first shared bike.
             </p>
             <p>
               Last but not least,nearly at the end of 2016,the ordering
-              platforms made their appearance on all Chinese
-              phones.C.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                style="width: 120px" v-model="testData.in.one" @change="setTestData" /> What makes my life easier is
-              that I can
-              buy vegetables and fruits online and get them delivered to my
-              door.
+              platforms made their appearance on all Chinese phones.C.<input :disabled="testData.isComplete" type="text"
+                class="input-bottom-border" style="width: 120px" v-model="testData.in.one" @change="setTestData" />
+              What makes my life easier is that I can buy vegetables and fruits
+              online and get them delivered to my door.
             </p>
             <p>
               The five aspects that I mentioned above changed the life of
-              millions of people around China.The Chinese economy is
-              booming,which makes people well off.I鈥檝e been in China for several
-              years and witnessed China鈥檚 potential.
+              millions of people around China.The Chinese 
+              <span class="word-bc" @click="saveWord($event, 'economy')">economy</span>
+              is
+              <span class="word-bc" @click="saveWord($event, 'booming')">booming</span>
+              ,which makes people well off.I鈥檝e been in China for several
+              years and witnessed China鈥檚 
+              <span class="word-bc" @click="saveWord($event, 'potential')">potential</span>
+              .
             </p>
           </div>
         </div>
@@ -2160,16 +2182,28 @@
               blanks.
             </p>
             <p>
-              1.It wasn鈥檛 long until I discovered the shared bikes in
+              ( <select v-model="dropdownData.one.value" style="width: 8%">
+                <option v-for="(item, index) in dropDownListOne" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> ) 1.It wasn鈥檛 long until I discovered the shared bikes in
               2016,serving people in several cities.
             </p>
             <p>
-              2.People can order their desired food,from soup to noodles,from
+              ( <select v-model="dropdownData.one.value" style="width: 8%">
+                <option v-for="(item, index) in dropDownListOne" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> ) 2.People can order their desired food,from soup to noodles,from
               barbecue to hot pot.
             </p>
             <p>
-              3.It was at that moment that I knew about the metro system.It was
-              new,fast,and extraordinary.
+              ( <select v-model="dropdownData.one.value" style="width: 8%">
+                <option v-for="(item, index) in dropDownListOne" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> ) 3.It was at that moment that I knew about the metro system.It
+              was new,fast,and extraordinary.
             </p>
             <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
               v-if="showlessonTwoQuestionAnswer">
@@ -2180,29 +2214,44 @@
               (F).
             </p>
             <p>
-              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
-                v-model="testData.in.one" @change="setTestData" /> ) 1.Vanessa made a lot of friends as soon as she
-              arrived in
-              China.
+              ( <select v-model="dropdownData.one.value" style="width: 8%">
+                <option v-for="(item, index) in dropDownListTwo" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> ) 1.Vanessa made a lot of friends as soon as she arrived in China.
             </p>
             <p>
-              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
-                v-model="testData.in.one" @change="setTestData" />) 2.Before Vanessa came to China,she knew a lot about
+              ( <select v-model="dropdownData.one.value" style="width: 8%">
+                <option v-for="(item, index) in dropDownListTwo" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> ) 2.Before Vanessa came to China,she knew a lot about
               the metro
               system.
             </p>
             <p>
-              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
-                v-model="testData.in.one" @change="setTestData" />) 3.Vanessa didn鈥檛 know about online shopping before
-              she met
-              her neighbour Alison.
+              ( <select v-model="dropdownData.one.value" style="width: 8%">
+                <option v-for="(item, index) in dropDownListTwo" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> ) 3.Vanessa didn鈥檛 know about online shopping before
+              she met her
+              neighbour Alison.
             </p>
-            <p>(<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
-                v-model="testData.in.one" @change="setTestData" />) 4.Vanessa got her own online payment account by
-              herself.</p>
             <p>
-              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
-                v-model="testData.in.one" @change="setTestData" />) 5.Buying vegetables and fruits online makes
+              ( <select v-model="dropdownData.one.value" style="width: 8%">
+                <option v-for="(item, index) in dropDownListTwo" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> ) 4.Vanessa got her own online payment account by
+              herself.
+            </p>
+            <p>
+              ( <select v-model="dropdownData.one.value" style="width: 8%">
+                <option v-for="(item, index) in dropDownListTwo" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> ) 5.Buying vegetables and fruits online makes
               Vanessa鈥檚 life
               easier.
             </p>
@@ -2242,7 +2291,8 @@
             </p>
             <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
               v-if="showlessonTwoQuestionAnswer">
-              绛旀锛� 1.witnessed &nbsp; 2.extraordinary &nbsp; 3.via &nbsp; 4.era &nbsp; 5.pace
+              绛旀锛� 1.witnessed &nbsp; 2.extraordinary &nbsp; 3.via &nbsp;
+              4.era &nbsp; 5.pace
             </p>
             <p>
               B.Fill in the blanks with the proper form of the expressions given
@@ -2253,9 +2303,11 @@
                 a matter of銆�go through銆�last but not least銆�well off銆�type in
               </p>
             </div>
-            <p>1.China has<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
+            <p>
+              1.China has<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                 style="width: 60px" v-model="testData.in.one" @change="setTestData" />great changes in the era of big
-              data.</p>
+              data.
+            </p>
           </div>
         </div>
         <div class="preface-bottom">
@@ -2280,24 +2332,42 @@
             <p>
               2.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 60px"
                 v-model="testData.in.one" @change="setTestData" />key words and you can search for the needed goods in
-              online shops.
+              online
+              shops.
             </p>
             <p>
               3.A dispute over online shopping can be settled in<input :disabled="testData.isComplete" type="text"
                 class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />days.
             </p>
-            <p>4.China has,in all respects,become very<input :disabled="testData.isComplete" type="text"
-                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />.</p>
+            <p>
+              4.China has,in all respects,become very<input :disabled="testData.isComplete" type="text"
+                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />.
+            </p>
             <p>
               5.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 60px"
                 v-model="testData.in.one" @change="setTestData" />,all the people committed to Shenzhou Spacecrafts
-              deserve respect.
+              deserve
+              respect.
             </p>
             <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
               v-if="showlessonTwoQuestionAnswer">
-              绛旀锛� 1.went through &nbsp; 2.Type in &nbsp; 3.a matter of &nbsp; 4.well Off &nbsp; 5.Last but not least
+              绛旀锛� 1.went through &nbsp; 2.Type in &nbsp; 3.a matter of &nbsp;
+              4.well Off &nbsp; 5.Last but not least
             </p>
-            <p><b>鈪�.Grammar focus:The simple sentence.</b></p>
+            <p><b>鈪�.Grammar focus:The simple sentence.</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 write down the sentence structure of the
               following sentences in the brackets.
@@ -2316,27 +2386,48 @@
                 phones.(S+V+O+C)
               </p>
             </div>
-            <p>1.It is actually an online shopping website.锛�<input :disabled="testData.isComplete" type="text"
-                class="input-bottom-border" style="width: 80px" v-model="testData.in.one" @change="setTestData" />锛�</p>
             <p>
-              2.Vanessa finally got her own online payment account.锛�<input :disabled="testData.isComplete" type="text"
-                class="input-bottom-border" style="width: 80px" v-model="testData.in.one" @change="setTestData" />锛�
+              1.It is actually an online shopping website.( <select v-model="dropdownData.one.value" style="width: 15%">
+                <option v-for="(item, index) in dropDownListThree" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> )
+            </p>
+            <p>
+              2.Vanessa finally got her own online payment account. ( <select v-model="dropdownData.one.value"
+                style="width: 15%">
+                <option v-for="(item, index) in dropDownListThree" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> )
             </p>
             <p>
               3.China offers researchers world-class advanced research
-              facilities in the institutes. 锛�<input :disabled="testData.isComplete" type="text"
-                class="input-bottom-border" style="width: 80px" v-model="testData.in.one" @change="setTestData" />锛�
+              facilities in the institutes. ( <select v-model="dropdownData.one.value" style="width: 15%">
+                <option v-for="(item, index) in dropDownListThree" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> )
             </p>
             <p>
               4.These friends made Vanessa see China through the eyes of the
-              locals.锛�<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 80px"
-                v-model="testData.in.one" @change="setTestData" />锛�
+              locals. ( <select v-model="dropdownData.one.value" style="width: 15%">
+                <option v-for="(item, index) in dropDownListThree" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> )
             </p>
-            <p>5.The list of Chinese food never ends.锛�<input :disabled="testData.isComplete" type="text"
-                class="input-bottom-border" style="width: 80px" v-model="testData.in.one" @change="setTestData" />锛�</p>
+            <p>
+              5.The list of Chinese food never ends. ( <select v-model="dropdownData.one.value" style="width: 15%">
+                <option v-for="(item, index) in dropDownListThree" :key="index" :value="item">
+                  {{ item }}
+                </option>
+              </select> )
+            </p>
             <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
               v-if="showlessonTwoQuestionAnswer">
-              绛旀锛� 1.S+V+C &nbsp; 2.S+V+O &nbsp; 3.S+V+O+O &nbsp; 4.S+V+O+C &nbsp; 5.S+V
+              绛旀锛� 1.S+V+C &nbsp; 2.S+V+O &nbsp; 3.S+V+O+O &nbsp; 4.S+V+O+C
+              &nbsp; 5.S+V
             </p>
             <!-- 鎻愪氦鎸夐挳 -->
             <div class="w100 fl">
@@ -2352,7 +2443,9 @@
                   </button>
                 </li>
                 <li>
-                  <button @click="showlessonTwoQuestionAnswer = !showlessonTwoQuestionAnswer" class="parimary-btn">
+                  <button @click="
+                    showlessonTwoQuestionAnswer = !showlessonTwoQuestionAnswer
+                    " class="parimary-btn">
                     鏌ョ湅绛旀
                   </button>
                 </li>
@@ -2424,50 +2517,50 @@
               </tr>
               <tr class="table-tr-bc">
                 <td>
-                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                  <textarea v-model="questionData.table.ten" class="w100 table-tr-bc b0 table-textarea textarea-box"
                     @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea"
+                  <textarea v-model="questionData.table.eleven" class="w100 table-tr-bc b0 table-textarea"
                     @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea"
+                  <textarea v-model="questionData.table.twelve" class="w100 table-tr-bc b0 table-textarea"
                     @change="setBookQuestion"></textarea>
                 </td>
               </tr>
               <tr class="table-tr-bc">
                 <td>
-                  <textarea v-model="questionData.table.four" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                  <textarea v-model="questionData.table.thirteen"
+                    class="w100 table-tr-bc b0 table-textarea textarea-box" @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.fourteen" class="w100 table-tr-bc b0 table-textarea"
                     @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea"
-                    @change="setBookQuestion"></textarea>
-                </td>
-                <td>
-                  <textarea v-model="questionData.table.six" class="w100 table-tr-bc b0 table-textarea"
+                  <textarea v-model="questionData.table.fifteen" class="w100 table-tr-bc b0 table-textarea"
                     @change="setBookQuestion"></textarea>
                 </td>
               </tr>
               <tr class="table-tr-bc">
                 <td>
-                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                  <textarea v-model="questionData.table.sixteen" class="w100 table-tr-bc b0 table-textarea textarea-box"
                     @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea"
+                  <textarea v-model="questionData.table.seventeen" class="w100 table-tr-bc b0 table-textarea"
                     @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                  <textarea v-model="questionData.table.eighteen" class="w100 table-tr-bc b0 table-textarea"
                     @change="setBookQuestion"></textarea>
                 </td>
               </tr>
               <tr class="table-tr-bc">
-                <td colspan="3" style="text-align: left;">
+                <td colspan="3" style="text-align: left">
                   Your suggestion:
-                  <textarea v-model="questionData.table.ten" class="w100 table-tr-bc b0 table-textarea "
+                  <textarea v-model="questionData.table.nineteen" class="w100 table-tr-bc b0 table-textarea"
                     @change="setBookQuestion"></textarea>
                 </td>
               </tr>
@@ -2492,24 +2585,25 @@
               people and the food.China is a large country with diverse
               landscapes awaiting adventurers to 2.<input :disabled="testData.isComplete" type="text"
                 class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />.There
-              is a modern
-              public transportation system including city
+              is a modern public transportation system including city
               buses,3.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 60px"
                 v-model="testData.in.one" @change="setTestData" />,high-speed trains,and airports,as well as a large
-              highway network.These make travel 4.<input :disabled="testData.isComplete" type="text"
-                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />and
-              efficient and
-              allow me to go to many places to enjoy the scenery and
-              culture.China鈥檚 natural beauty keeps on 5.<input :disabled="testData.isComplete" type="text"
+              highway
+              network.These make travel 4.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
+                style="width: 60px" v-model="testData.in.one" @change="setTestData" />and efficient and allow me to go
+              to many places to enjoy the
+              scenery and culture.China鈥檚 natural beauty keeps on 5.<input :disabled="testData.isComplete" type="text"
                 class="input-bottom-border" style="width: 60px" v-model="testData.in.one"
-                @change="setTestData" />me,from the pure
-              blue waterfalls in Jiuzhaigou to the snowcapped mountains of
-              Shangri-la,from the sandy 6.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
-                style="width: 60px" v-model="testData.in.one" @change="setTestData" />of Sanya to the rocky seaside
-              of Laoshan鈥� China is such a beautiful country!
+                @change="setTestData" />me,from the pure blue waterfalls in Jiuzhaigou to the snowcapped
+              mountains of Shangri-la,from the sandy 6.<input :disabled="testData.isComplete" type="text"
+                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />of
+              Sanya to the rocky seaside of Laoshan鈥� China is such a
+              beautiful country!
             </p>
-            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showlessonThreeQuestionAnswer">
-              绛旀锛� 1.culture &nbsp; 2.explore &nbsp; 3.subways &nbsp; 4.convenient &nbsp; 5.surprising &nbsp; 6.beach
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
+              v-if="showlessonThreeQuestionAnswer">
+              绛旀锛� 1.culture &nbsp; 2.explore &nbsp; 3.subways &nbsp;
+              4.convenient &nbsp; 5.surprising &nbsp; 6.beach
             </p>
             <p>
               <b>鈪�.Listen to the conversation about planning for the upcoming
@@ -2557,7 +2651,8 @@
             </p>
             <h3 id="c009"><span class="bjh3">Practical Writing</span></h3>
             <p>Work with your partner to discuss the following questions.</p>
-            <p>1.How do you let others know about an upcoming event?
+            <p>
+              1.How do you let others know about an upcoming event?
               <span class="btn-box" @click="showAnswerSeven = !showAnswerSeven">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                   <path class="a"
@@ -2571,8 +2666,8 @@
               style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
             <!-- 绛旀妗� -->
             <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerSeven">
-              绛旀锛� (1)posters &nbsp; (2)Wechat public account &nbsp; (3)Campus radio &nbsp; (4)Campus TV station &nbsp;
-              (5)Notice
+              绛旀锛� (1)posters &nbsp; (2)Wechat public account &nbsp; (3)Campus
+              radio &nbsp; (4)Campus TV station &nbsp; (5)Notice
             </p>
             <p>
               2.What information would you like to tell them about the event?
@@ -2585,7 +2680,7 @@
               </span>
             </p>
             <!-- 鏂囨湰妗� -->
-            <textarea v-model="questionData.reading.sex" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+            <textarea v-model="questionData.reading.six" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
               style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
             <!-- 绛旀妗� -->
             <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerEight">
@@ -2705,21 +2800,30 @@
                   v-model="testData.in.one" @change="setTestData" />
               </p>
               <p>2.What should be included in the exhibition?</p>
-              <p><input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
-                  v-model="testData.in.one" @change="setTestData" /></p>
+              <p>
+                <input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
+                  v-model="testData.in.one" @change="setTestData" />
+              </p>
               <p>3.Where will the exhibition be held?</p>
-              <p><input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
-                  v-model="testData.in.one" @change="setTestData" /></p>
+              <p>
+                <input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
+                  v-model="testData.in.one" @change="setTestData" />
+              </p>
               <p>4.When will the exhibition be held?</p>
-              <p><input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
-                  v-model="testData.in.one" @change="setTestData" /></p>
+              <p>
+                <input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
+                  v-model="testData.in.one" @change="setTestData" />
+              </p>
               <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
                 v-if="showlessonThreeQuestionAnswer">
-              <span>绛旀锛�</span>
-              <p>1銆� Traditional handicraft show</p>
-              <p>2銆� Various handicrafts made by Chinese students in theirtraditional Chinese culture courses</p>
-              <p>3銆� Students activity center.</p>
-              <p>4銆� November 13th -- 19th</p> 
+                <span>绛旀锛�</span>
+                <p>1銆� Traditional handicraft show</p>
+                <p>
+                  2銆� Various handicrafts made by Chinese students in
+                  theirtraditional Chinese culture courses
+                </p>
+                <p>3銆� Students activity center.</p>
+                <p>4銆� November 13th -- 19th</p>
               </div>
               <p>...</p>
             </div>
@@ -2825,7 +2929,10 @@
                   </button>
                 </li>
                 <li>
-                  <button @click="showlessonThreeQuestionAnswer = !showlessonThreeQuestionAnswer" class="parimary-btn">
+                  <button @click="
+                    showlessonThreeQuestionAnswer =
+                    !showlessonThreeQuestionAnswer
+                    " class="parimary-btn">
                     鏌ョ湅绛旀
                   </button>
                 </li>
@@ -2855,16 +2962,18 @@
   data() {
     return {
       imgThirteen: require("../../assets/images/grammar.jpg"),
+      imgThirteenOne: require("../../assets/images/grammar1-2.png"),
       showAnswerOne: false,
       showAnswerTwo: false,
       showAnswerThree: false,
       showAnswerFour: false,
       showAnswerFive: false,
-      showAnswerSex: false,
+      showAnsweSix: false,
       showAnswerSeven: false,
       showAnswerEight: false,
       showAnswerNine: false,
       showImg: false,
+      showImgOne: false,
       showQuestionAnswer: false,
       showlessonTwoQuestionAnswer: false,
       showlessonThreeQuestionAnswer: false,
@@ -3026,7 +3135,7 @@
           three: "",
           four: "",
           five: "",
-          sex: "",
+          six: "",
         },
         table: {
           one: "",
@@ -3038,6 +3147,16 @@
           seven: "",
           enight: "",
           nine: "",
+          ten: "",
+          eleven: "",
+          twelve: "",
+          thirteen: "",
+          fourteen: "",
+          fifteen: "",
+          sixteen: "",
+          seventeen: "",
+          eighteen: "",
+          nineteen: "",
         },
       },
       testData: {
@@ -3089,7 +3208,7 @@
           three: "",
           four: "",
           five: "",
-          answer: ["whether", "if", "whether", "whether", "if"],
+          answer: ["whether", "if", "whether", "whether", "If"],
         },
       },
       resource: {
@@ -3108,6 +3227,22 @@
         "intercity train",
         "shared bike",
         "take-away service",
+      ],
+      dropDownListOne: [
+        "A",
+        "B",
+        "C",
+      ],
+      dropDownListTwo: [
+        "T",
+        "F",
+      ],
+      dropDownListThree: [
+        "S+V",
+        "S+V+O",
+        "S+V+P",
+        "S+V+O+O",
+        "S+V+O+C",
       ],
       dropdownData: {
         isComplete: false,
@@ -3217,7 +3352,7 @@
           three: "",
           four: "",
           five: "",
-          answer: ["whether", "if", "whether", "whether", "if"],
+          answer: ["whether", "if", "whether", "whether", "If"],
         },
       };
     },
@@ -3253,7 +3388,10 @@
     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") {
@@ -3301,19 +3439,19 @@
         }
       }
       this.dropdownData = dropdownDatas;
-      this.$set(this.dropdownData, 'isComplete', true)
-      this.setDropdownData()
+      this.$set(this.dropdownData, "isComplete", true);
+      this.setDropdownData();
     },
     changeDropdown() {
       localStorage.removeItem("english-dropdown-one");
       for (let key in this.dropdownData) {
         let item = this.dropdownData[key];
-        if (key != 'isComplete') {
+        if (key != "isComplete") {
           item.value = "";
           item.isRight = null;
         }
       }
-      this.$set(this.dropdownData, 'isComplete', false)
+      this.$set(this.dropdownData, "isComplete", false);
     },
     setDropdownData() {
       localStorage.setItem(
@@ -3352,10 +3490,10 @@
       }
       return flag;
     },
-    isTextRight(answer, data) {
+    isTextRight(answer, data, num) {
       let flag = null;
       if (data) {
-        flag = answer.indexOf(data) > -1 ? true : false;
+        flag = answer[num] == data
       }
       return flag;
     },

--
Gitblit v1.9.1