闫增涛
2024-06-27 9d165d615e8a05937465a490d0cc7c05804a5f5e
src/books/English/view/components/chapter001.vue
@@ -501,15 +501,17 @@
            >
          </li>
        </ul>
        a
        <div class="padding-102">
          <div class="bodystyle">
            <h3 id="c002" class="fl al-cn">
              <span class="bjh3">Listening</span>
              <!--controlslist="noplaybackrate nodownload"后面的音频框加入这个-->
              <audio
                :src="resource.listenOne"
                controls
                controlslist="noplaybackrate nodownload"
                class="audio"
                @play="audioPlay"
              ></audio>
            </h3>
            <p>
@@ -523,20 +525,14 @@
              <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
            </p> -->
            <div>
              <ul class="fl ju-bt">
              <ul class="fl ju-bt matching-title-text">
                <li>Speakers Chinese Cultural Symbols</li>
                <li style="width: 40%; text-align: center">Descriptions</li>
              </ul>
              <matching :rawData="rawData" :item="question"></matching>
              <matching :rawData="rawData" :question="question"></matching>
            </div>
            <h3 id="c003" class="fl al-cn">
              <span class="bjh3">Reading</span>
              <audio
                :src="resource.readingOne"
                controls
                class="audio"
                @play="audioPlay"
              ></audio>
            </h3>
            <p>
              1.How was Chinese culture introduced to the world in ancient
@@ -620,6 +616,14 @@
              scenery
            </p>
            <p class="center"><b>My Experience in Wonderland</b></p>
            <p class="center">
              <audio
                :src="resource.readingOne"
                controls
                controlslist="noplaybackrate nodownload"
                class="audio"
              ></audio>
            </p>
            <p class="block">
              “So how was your journey to China?” asks Alexandra.“Highly
              enjoyable,” responds Alice.“You should visit it sometime.”
@@ -744,9 +748,9 @@
            <audio
              :src="resource.readingTwo"
              controls
              controlslist="noplaybackrate nodownload"
              style="margin-left: 10px"
              class="audio"
              @play="audioPlay"
            ></audio>
            <p>wonderland /ˈwʌndəlænd/ <i>n.</i> 有许多奇妙事物的地方</p>
            <div class="bkbj">
@@ -826,17 +830,19 @@
            </p>
            <div class="bkbj">
              <p>
                <i>making you feel more active and healthy</i> foodie /ˈfuːdi/
                <i>n.</i> 吃货;美食家
                <i>making you feel more active and healthy</i>
              </p>
            </div>
            <p>
              <i
                >a person who is very interested in cooking and eating different
                kinds of food</i
              >
              unique /ju<i>ˈ</i>niːk/ <i>adj.</i> 唯一的;独一无二的
            </p>
            <p>foodie /ˈfuːdi/<i>n.</i> 吃货;美食家</p>
            <div class="bkbj">
              <p>
                <i
                  >a person who is very interested in cooking and eating
                  different kinds of food</i
                >
              </p>
            </div>
            <p>unique /ju<i>ˈ</i>niːk/ <i>adj.</i> 唯一的;独一无二的</p>
            <div class="bkbj">
              <p><i>being the only one of its type</i></p>
            </div>
@@ -877,72 +883,450 @@
            <p>
              <input
                type="checkbox"
                name="ball"
                name="ball1"
                :disabled="testData.isComplete"
                value="Language"
                id="1"
                v-model="testData.check"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Language
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Language'
                    )
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Language'
                    ) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p>
              <input
                type="checkbox"
                name="ball"
                name="ball2"
                :disabled="testData.isComplete"
                value="People"
                id="2"
                v-model="testData.check"
                v-model="testData.check.value"
                @change="setTestData"
              />
              People
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'People'
                    )
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'People'
                    ) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p>
              <input
                type="checkbox"
                name="ball"
                name="ball3"
                :disabled="testData.isComplete"
                value="Culture"
                id="3"
                v-model="testData.check"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Culture
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Culture'
                    )
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Culture'
                    ) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p>
              <input
                type="checkbox"
                name="ball"
                name="ball4"
                :disabled="testData.isComplete"
                value="Cuisine"
                id="4"
                v-model="testData.check"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Cuisine
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Cuisine'
                    )
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Cuisine'
                    ) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p>
              <input
                type="checkbox"
                name="ball"
                value="Folk"
                name="ball5"
                :disabled="testData.isComplete"
                value="Folk art"
                id="5"
                v-model="testData.check"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Folk art
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Folk art'
                    )
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Folk art'
                    ) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p>
              <input
                type="checkbox"
                name="ball"
                name="ball6"
                :disabled="testData.isComplete"
                value="Landscapes"
                id="6"
                v-model="testData.check"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Landscapes
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Landscapes'
                    )
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Landscapes'
                    ) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p>
              <input
                type="checkbox"
                name="ball"
                name="ball7"
                :disabled="testData.isComplete"
                value="Transportation"
                id="7"
                v-model="testData.check"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Transportation
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Transportation'
                    )
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Transportation'
                    ) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p
              class="event-header-text-bc pd-5"
@@ -979,11 +1363,13 @@
            </p>
            <p>1.What’re the author’s comments about Chinese food?</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.tx.one"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
@@ -995,11 +1381,13 @@
            </p>
            <p>2.When and why did the author start her journey to China?</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.tx.two"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
@@ -1012,11 +1400,13 @@
            </p>
            <p>3.What are the author’s expectations of her stay in China?</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.tx.three"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
@@ -1027,11 +1417,13 @@
            </p>
            <p>4.What did the author think of Chinese people?</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.tx.four"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
@@ -1043,11 +1435,13 @@
            </p>
            <p>5.What’s the author’s impression of the cities in China?</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.tx.five"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
@@ -1068,35 +1462,270 @@
              In 2017,the author arrived in China.When she arrived,she was like
              Alice in <i>Alice in Wonderland</i>.She was curious about the
              people,the culture,the c<input
                :disabled="testData.isComplete"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                v-model="testData.in.one"
                @change="setTestData"
              />
              ,and of course the huge variety of l<input
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.one)
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.one) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
              ,and of course the huge variety of l
              <input
                :disabled="testData.isComplete"
                v-model="testData.in.two"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />.Chinese friends helped her a lot in understanding Chinese
              culture and c<input
                @change="setTestData"
              />
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.two)
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.two) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
              .Chinese friends helped her a lot in understanding Chinese culture
              and c<input
                :disabled="testData.isComplete"
                v-model="testData.in.three"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />.The author believes that one cannot e<input
                @change="setTestData"
              />
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.three)
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.three) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
              .The author believes that one cannot e<input
                :disabled="testData.isComplete"
                type="text"
                v-model="testData.in.four"
                class="input-bottom-border"
                style="width: 60px"
              />China properly if he/she does not try its delicious variety of
                @change="setTestData"
              />
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.four)
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.four) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
              China properly if he/she does not try its delicious variety of
              food.China has thousands of years of rich and beautiful
              culture.Each city has its u<input
                :disabled="testData.isComplete"
                v-model="testData.in.five"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />atmosphere that attracts people.
                @change="setTestData"
              />
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.five)
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.five) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
              atmosphere that attracts people.
            </p>
            <p
              class="event-header-text-bc pd-5"
@@ -1109,14 +1738,16 @@
              B.Underline the following expressions in the passage and make
              sentences with them.
            </p>
            <p>
              1.get selected as<input
                v-model="testData.line.one"
                type="text"
                class="input-bottom-border"
                style="width: 77%"
              />
            </p>
            <p>1.get selected as</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.line.one"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
@@ -1125,14 +1756,16 @@
              答案:She got selected as the cultural ambassador to show Chinese
              culture on campus.
            </p>
            <p>
              2.be curious about<input
                v-model="testData.line.two"
                type="text"
                class="input-bottom-border"
                style="width: 75%"
              />
            </p>
            <p>2.be curious about</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.line.two"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
@@ -1141,14 +1774,16 @@
              答案:Many foreigners are curious about the amazing Chinese
              martial arts.
            </p>
            <p>
              3.along the way<input
                v-model="testData.line.three"
                type="text"
                class="input-bottom-border"
                style="width: 77%"
              />
            </p>
            <p>3.along the way</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.line.three"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
@@ -1157,14 +1792,16 @@
              答案:I suggest that you go to Tibet by train so that you can
              enjoy the natural scenery along the way.
            </p>
            <p>
              4.come across<input
                v-model="testData.line.four"
                type="text"
                class="input-bottom-border"
                style="width: 79%"
              />
            </p>
            <p>4.come across</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.line.four"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
@@ -1173,14 +1810,16 @@
              答案:He came across the temple fair in Beijing during the Spring
              Festival.
            </p>
            <p>
              5.look forward to<input
                v-model="testData.line.five"
                type="text"
                class="input-bottom-border"
                style="width: 76%"
              />
            </p>
            <p>5.look forward to</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.line.five"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
@@ -1217,9 +1856,11 @@
            </p>
            <p>
              <input
                :disabled="testData.isComplete"
                v-model="testData.ts.one"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />
            </p>
            <p
@@ -1235,9 +1876,11 @@
            </p>
            <p>
              <input
                :disabled="testData.isComplete"
                v-model="testData.ts.two"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />
            </p>
            <p
@@ -1253,9 +1896,11 @@
            </p>
            <p>
              <input
                :disabled="testData.isComplete"
                v-model="testData.ts.three"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />
            </p>
            <p
@@ -1271,9 +1916,11 @@
            </p>
            <p>
              <input
                :disabled="testData.isComplete"
                v-model="testData.ts.four"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />
            </p>
            <p
@@ -1317,9 +1964,11 @@
            <p>
              <b>If</b
              ><input
                :disabled="testData.isComplete"
                v-model="testData.gr.one"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />.
            </p>
            <p
@@ -1337,9 +1986,11 @@
            <p>
              <b>If</b
              ><input
                :disabled="testData.isComplete"
                v-model="testData.gr.two"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />.
            </p>
            <p
@@ -1354,9 +2005,11 @@
            <p>
              <b>If</b
              ><input
                :disabled="testData.isComplete"
                type="text"
                v-model="testData.gr.three"
                class="input-bottom-border"
                @change="setTestData"
              />.
            </p>
            <p
@@ -1373,9 +2026,11 @@
            <p>
              <b>If</b
              ><input
                :disabled="testData.isComplete"
                v-model="testData.gr.four"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />.
            </p>
            <p
@@ -1393,9 +2048,11 @@
            <p>
              <b>If</b
              ><input
                :disabled="testData.isComplete"
                v-model="testData.gr.five"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />.
            </p>
            <p
@@ -1412,44 +2069,273 @@
            </p>
            <p>
              1.I was wondering<input
                :disabled="testData.isComplete"
                v-model="testData.cm.one"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />to go for a walk in the Summer Palace.
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.one)
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.one) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p>
              2.We can spend the afternoon on the beach<input
                :disabled="testData.isComplete"
                v-model="testData.cm.two"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />the weather is fine.
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.two)
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.two) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p>
              3.I called Wang to find out<input
                :disabled="testData.isComplete"
                v-model="testData.cm.three"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />or not he really went to see the Peking opera show.
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.three)
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.three) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p>
              4.We’re not interested in<input
                :disabled="testData.isComplete"
                v-model="testData.cm.four"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />we get great jobs and that kind of thing.
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.four)
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.four) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p>
              5.<input
                :disabled="testData.isComplete"
                v-model="testData.cm.five"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />I go to Sichuan,I will visit Chengdu Research Base of Giant
              Panda Breeding.
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.five)
                  "
                  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"
                >
                  <path
                    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                    fill="#1AFA29"
                    p-id="18768"
                  ></path>
                </svg>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.five) == 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"
                >
                  <path
                    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                    fill="#d81e06"
                    p-id="25746"
                  ></path>
                </svg>
              </span>
            </p>
            <p
              class="event-header-text-bc pd-5"
@@ -1459,16 +2345,11 @@
              答案: 1.whether &nbsp; 2.if &nbsp; 3.whether &nbsp; 4.whether
              &nbsp; 5.if
            </p>
            <div class="w100 fl ju-cn">
              <ul class="fl ju-ev" style="width: 80%">
            <div class="w100 fl">
              <ul class="fl ju-ar w100">
                <li>
                  <button class="btn-border btn-w" @click="saveData">
                    提交
                  </button>
                </li>
                <li>
                  <button @click="setTestData" class="btn-border btn-w">
                    保存
                  </button>
                </li>
                <li>
@@ -1885,7 +2766,12 @@
                    </p>
                    <p class="center">
                      1.
                      <select v-model="dropdownData.one.value">
                      <select
                        class="select-border"
                        v-model="dropdownData.one.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
@@ -1953,7 +2839,12 @@
                    </p>
                    <p class="center">
                      2.
                      <select v-model="dropdownData.two.value">
                      <select
                        class="select-border"
                        v-model="dropdownData.two.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
@@ -2024,7 +2915,12 @@
                    </p>
                    <p class="center">
                      3.
                      <select v-model="dropdownData.three.value">
                      <select
                        class="select-border"
                        v-model="dropdownData.three.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
@@ -2092,7 +2988,12 @@
                    </p>
                    <p class="center">
                      4.
                      <select v-model="dropdownData.four.value">
                      <select
                        class="select-border"
                        v-model="dropdownData.four.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
@@ -2163,7 +3064,12 @@
                    </p>
                    <p class="center">
                      5.
                      <select v-model="dropdownData.five.value">
                      <select
                        class="select-border"
                        v-model="dropdownData.five.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
@@ -2231,7 +3137,12 @@
                    </p>
                    <p class="center">
                      6.
                      <select v-model="dropdownData.six.value">
                      <select
                        class="select-border"
                        v-model="dropdownData.six.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
@@ -2298,9 +3209,6 @@
                >
                  提交
                </button>
                <button @click="setDropdownData" class="btn-border btn-w">
                  保存
                </button>
                <button class="btn-border btn-w" @click="changeDropdown">
                  重做
                </button>
@@ -2316,6 +3224,933 @@
        </div>
        <div class="preface-bottom">
          <span class="contet-num-box">9</span>
        </div>
      </div>
    </div>
    <!-- 10 -->
    <div class="page-box" page="16">
      <div v-if="showPageList.indexOf(16) > -1">
        <div class="w100 mb-20" style="padding-right: 20px">
          <div
            class="event-header-bc fl al-end"
            style="height: 100px; padding-left: 40px"
          >
            <div class="preface-header-box event-header-text-bc">
              <span class="l-text">新标准通用职场英语</span>
              <span class="g-text event-text-color">基础模块一</span>
            </div>
          </div>
        </div>
        <div class="padding-93">
          <div class="bodystyle">
            <h3 id="c006"><span class="bjh3">Reading</span></h3>
            <p class="center">
              <img class="img-g" alt="" src="../../assets/images/0020-1.jpg" />
            </p>
            <p class="img"></p>
            <p>
              1.We are witnessing the rapid development of modern society.What
              impresses you most?
            </p>
            <p>2.What will our life be like in ten or twenty years?</p>
            <p class="center"><b>The Great Progress in China</b></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
              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._______________ I looked around with curiosity,and
              everything seemed to move at a quick pace.
            </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
              boxes.I asked,“Hey,Alison.What are all these?” She
              replied,“Hello,Vanessa.I received my packages from the delivery
              man.I’ve 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’t 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
              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
              wallet.
            </p>
            <p>
              B._______________ I went through all the necessary procedures and
              couldn’t 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._______________ 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’ve been in China for several
              years and witnessed China’s potential.
            </p>
          </div>
        </div>
        <div class="preface-bottom">
          <span class="contet-num-box">10</span>
        </div>
      </div>
    </div>
    <!-- 11 -->
    <div class="page-box" page="17">
      <div v-if="showPageList.indexOf(17) > -1">
        <!-- 头部 -->
        <ul class="preface-odd-header w100 fl ju-bt">
          <li class=""></li>
          <li class="fz-18">
            <span class="chapter-left-bc">MODULE 1</span>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <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>
            <audio
              :src="resource.readingTwo"
              controls
              controlslist="noplaybackrate nodownload"
              style="margin-left: 10px"
              class="audio"
            ></audio>
            <p>breeze /briːz/ <i>n.</i> 微风;和风</p>
            <div class="bkbj">
              <p><i>a light wind</i></p>
            </div>
            <p>mausoleum /ˌmɔːsəˈliːəm/ <i>n.</i> (大而精致的) 陵墓</p>
            <div class="bkbj">
              <p><i>a large,finely built tomb</i></p>
            </div>
            <p>metro /ˈmetrəʊ/ <i>n.</i> 地铁</p>
            <div class="bkbj">
              <p><i>an underground train system</i></p>
            </div>
            <p>extraordinary /ɪkˈstrɔːdnri/ <i>adj.</i> 非凡的;不普通的</p>
            <div class="bkbj">
              <p><i>beyond what is ordinary; remarkable</i></p>
            </div>
            <p>pace /peɪs/ <i>n.</i> 速度</p>
            <div class="bkbj">
              <p><i>speed,esp.of walking or running</i></p>
            </div>
            <p>dormitory /ˈdɔːmətri/ <i>n.</i> 学生宿舍;集体宿舍</p>
            <div class="bkbj">
              <p>
                <i
                  >a room for several people to sleep in,esp.in a school or
                  other institution</i
                >
              </p>
            </div>
            <p>neighbour /ˈneɪbə(r)/ <i>n.</i> 邻居;邻人</p>
            <div class="bkbj">
              <p><i>a person who lives next to you or near you</i></p>
            </div>
            <p>overwhelm /ˌəʊvəˈwelm/ <i>v.</i> 淹没;漫过</p>
            <div class="bkbj">
              <p><i>to cover sb./sth.completely</i></p>
            </div>
            <p>via /ˈvaɪə/ <i>prep.</i> 经由;通过</p>
            <div class="bkbj">
              <p><i>by way of; through</i></p>
            </div>
            <p>laptop /ˈlæptɒp/ <i>n.</i> 便携式电脑;笔记本电脑</p>
            <div class="bkbj">
              <p>
                <i
                  >a small computer that can work with a battery and be easily
                  carried</i
                >
              </p>
            </div>
            <p>stun /stʌn/ <i>v.</i> 使震惊(或惊愕、目瞪口呆)</p>
            <div class="bkbj">
              <p>
                <i
                  >to surprise or shock sb.so much that he/she cannot think
                  clearly or speak</i
                >
              </p>
            </div>
            <p>trigger /ˈtrɪɡə(r)/ <i>v.</i> 引起;触发</p>
            <div class="bkbj">
              <p><i>to make sth.happen suddenly</i></p>
            </div>
            <p>gadget /ˈɡædʒɪt/<i> n.</i> 小器具;小装置</p>
            <div class="bkbj">
              <p><i>a small tool or device that does sth.useful</i></p>
            </div>
            <p>era /ˈɪərə/ <i>n.</i> 时代;年代</p>
            <div class="bkbj">
              <p>
                <i
                  >a period of time,usually in history,that is different from
                  other periods because of particular characteristics or
                  events</i
                >
              </p>
            </div>
            <p>economy /ɪˈkɒnəmi/ <i>n.</i> 经济;经济情况</p>
            <div class="bkbj">
              <p>
                <i
                  >the relationship between production,trade and the supply of
                  money in a particular country or region</i
                >
              </p>
            </div>
          </div>
        </div>
        <div class="preface-bottom">
          <span class="contet-num-box">11</span>
        </div>
      </div>
    </div>
    <!-- 12 -->
    <div class="page-box" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
        <!-- 头部 -->
        <div class="w100 mb-20" style="padding-right: 20px">
          <div
            class="event-header-bc fl al-end"
            style="height: 100px; padding-left: 40px"
          >
            <div class="preface-header-box event-header-text-bc">
              <span class="l-text">新标准通用职场英语</span>
              <span class="g-text event-text-color">基础模块一</span>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p>boom /buːm/ <i>v.</i> 迅速发展;繁荣昌盛</p>
            <div class="bkbj">
              <p>
                <i
                  >to have a period of rapid growth; to become bigger,more
                  successful,etc.</i
                >
              </p>
            </div>
            <p>potential /pəˈtenʃl/ <i>n.</i> 潜力;潜能</p>
            <div class="bkbj">
              <p><i>qualities that exist and can be developed</i></p>
            </div>
            <div style="display: flex">
              <div class="left" style="width: 48%">
                <p>a matter of days 仅仅几天</p>
                <p>go through 办理(手续);经历</p>
                <p>well off (尤指) 富裕</p>
              </div>
              <div class="right" style="width: 48%">
                <p>type in ...键入……</p>
                <p>last but not least 最后同样重要的是</p>
              </div>
            </div>
            <p><b>Ⅰ.Reading comprehension.</b></p>
            <p>
              A.Read the passage and put the following sentences in the proper
              blanks.
            </p>
            <p>
              1.It wasn’t 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
              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.
            </p>
            <p>
              B.Decide whether the following statements are true (T) or false
              (F).
            </p>
            <p>
              ( ) 1.Vanessa made a lot of friends as soon as she arrived in
              China.
            </p>
            <p>
              ( ) 2.Before Vanessa came to China,she knew a lot about the metro
              system.
            </p>
            <p>
              ( ) 3.Vanessa didn’t know about online shopping before she met
              her neighbour Alison.
            </p>
            <p>( ) 4.Vanessa got her own online payment account by herself.</p>
            <p>
              ( ) 5.Buying vegetables and fruits online makes Vanessa’s life
              easier.
            </p>
            <p><b>Ⅱ.Language focus.</b></p>
            <p>
              A.Replace the words in italics with the exact words in the passage
              and change the form if necessary.
            </p>
            <p>
              1.Tom was shocked by China’s progress that she had
              <i>noticed</i>.________
            </p>
            <p>
              2.China has made <i>amazing</i> progress in the manufacturing
              industry.________
            </p>
            <p>
              3.Ordering platforms supported <i>by</i> various Apps is very
              convenient.________
            </p>
            <p>
              4.The <i>age</i> of artificial intelligence was brought into being
              by the Internet.________
            </p>
            <p>
              5.The <i>rhythm</i> of ancient people’s lives is slower than that
              of modern people.________
            </p>
            <p>
              B.Fill in the blanks with the proper form of the expressions given
              below.
            </p>
            <div class="bk-wh">
              <p>
                a matter of go through last but not least well off type in
              </p>
            </div>
            <p>1.China has________great changes in the era of big data.</p>
          </div>
        </div>
        <div class="preface-bottom">
          <span class="contet-num-box">12</span>
        </div>
      </div>
    </div>
    <!-- 13 -->
    <div class="page-box" page="19">
      <div v-if="showPageList.indexOf(19) > -1">
        <!-- 头部 -->
        <ul class="preface-odd-header w100 fl ju-bt">
          <li class=""></li>
          <li class="fz-18">
            <span class="chapter-left-bc">MODULE 1</span>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p>
              2.________key words and you can search for the needed goods in
              online shops.
            </p>
            <p>
              3.A dispute over online shopping can be settled in________days.
            </p>
            <p>4.China has,in all respects,become very________.</p>
            <p>
              5.________,all the people committed to Shenzhou Spacecrafts
              deserve respect.
            </p>
            <p><b>Ⅲ.Grammar focus:The simple sentence.</b></p>
            <p>
              Read the examples and write down the sentence structure of the
              following sentences in the brackets.
            </p>
            <p><b>Examples:</b></p>
            <div class="fieldset">
              <p>1.My incredible journey to China started in 2017.(S+V)</p>
              <p>2.Vanessa made a lot of friends.(S+V+O)</p>
              <p>3.Local Chinese are very friendly.(S+V+P)</p>
              <p>
                4.China gives the author the impression of a
                wonderland.(S+V+O+O)
              </p>
              <p>
                5.I always saw my Chinese classmates paying with their
                phones.(S+V+O+C)
              </p>
            </div>
            <p>1.It is actually an online shopping website.(________)</p>
            <p>
              2.Vanessa finally got her own online payment account.(________)
            </p>
            <p>
              3.China offers researchers world-class advanced research
              facilities in the institutes. (________)
            </p>
            <p>
              4.These friends made Vanessa see China through the eyes of the
              locals.(________)
            </p>
            <p>5.The list of Chinese food never ends.(________)</p>
            <h3 id="c007"><span class="bjh3">Mini-project</span></h3>
            <p>
              Life today is much better than that of 10 years ago.Work in
              groups,and find out the major changes.Each group should list at
              least three items and offer suggestions on how to keep up with the
              changes,then report to the class.
            </p>
            <p class="left">
              <img
                class="img-gn"
                alt=""
                src="../../assets/images/dy1-worksheet.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">Items</td>
                <td class="wh-no tl-cn">A Decade Ago</td>
                <td class="tl-cn">Now</td>
              </tr>
              <tr class="table-tr-bc">
                <td class="tl-cn">Transportation</td>
                <td class="tl-cn">
                  We had our own bikes because they were major vehicles and most
                  families had bikes.
                </td>
                <td>
                  We needn't have our own bikes, butwe ride shared bikes because
                  they arevery convenient and cheap,
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="preface-bottom">
          <span class="contet-num-box">13</span>
        </div>
      </div>
    </div>
    <!-- 14 -->
    <div class="page-box" page="20">
      <div v-if="showPageList.indexOf(20) > -1">
        <!-- 头部 -->
        <div class="w100 mb-20" style="padding-right: 20px">
          <div
            class="event-header-bc fl al-end"
            style="height: 100px; padding-left: 40px"
          >
            <div class="preface-header-box event-header-text-bc">
              <span class="l-text">新标准通用职场英语</span>
              <span class="g-text event-text-color">基础模块一</span>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <table
              border="1"
              cellpadding="4"
              cellspacing="0"
              style="border-color: #fff"
              class="fz-14"
            >
              <tr class="table-th-bc">
                <td class="tl-cn">Items</td>
                <td class="wh-no tl-cn">A Decade Ago</td>
                <td class="tl-cn">Now</td>
              </tr>
              <tr class="table-tr-bc">
                <td class="tl-cn">Shopping</td>
                <td class="tl-cn">
                  We bought necessities mainly in brick-and-mortar stores.
                </td>
                <td>Online shopping is very common.</td>
              </tr>
              <tr class="table-tr-bc">
                <td>
                  <textarea
                    v-model="questionData.table.one"
                    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-box"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
                <td>
                  <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>
                  <textarea
                    v-model="questionData.table.four"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
                <td>
                  <textarea
                    v-model="questionData.table.five"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
                <td>
                  <textarea
                    v-model="questionData.table.six"
                    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"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
                <td>
                  <textarea
                    v-model="questionData.table.enight"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
                <td>
                  <textarea
                    v-model="questionData.table.nine"
                    class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td colspan="3">
                  Your suggestion:
                  <textarea
                    v-model="questionData.table.seven"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
              </tr>
            </table>
            <h2 id="b002">
              <img class="img-0" alt="" src="../../assets/images/dy1-le3.jpg" />
            </h2>
            <h3 id="c008"><span class="bjh3">Listening</span></h3>
            <p>
              <b
                >Ⅰ.Listen to Tom,an overseas student,talking about his journey
                to China and fill in the blanks with what you hear.</b
              >
            </p>
            <audio
              :src="resource.readingTwo"
              controls
              controlslist="noplaybackrate nodownload"
              style="margin-left: 10px"
              class="audio"
            ></audio>
            <p>
              After studying in China for almost three years by now,I call China
              my second homeland.I love the natural beauty,the 1.________,the
              people and the food.China is a large country with diverse
              landscapes awaiting adventurers to 2.________.There is a modern
              public transportation system including city
              buses,3.________,high-speed trains,and airports,as well as a large
              highway network.These make travel 4.________and efficient and
              allow me to go to many places to enjoy the scenery and
              culture.China’s natural beauty keeps on 5.________me,from the pure
              blue waterfalls in Jiuzhaigou to the snowcapped mountains of
              Shangri-la,from the sandy 6.________of Sanya to the rocky seaside
              of Laoshan… China is such a beautiful country!
            </p>
            <p>
              <b
                >Ⅱ.Listen to the conversation about planning for the upcoming
                Chinese Culture Week and circle the right expressions to
                complete the following sentences.</b
              >
            </p>
            <p>
              1.They would like to organize an activity for foreign students to
              experience Chinese handcrafts / learn Chinese calligraphy.
            </p>
          </div>
        </div>
        <div class="preface-bottom">
          <span class="contet-num-box">14</span>
        </div>
      </div>
    </div>
    <!-- 15 -->
    <div class="page-box" page="21">
      <div v-if="showPageList.indexOf(21) > -1">
        <!-- 头部 -->
        <ul class="preface-odd-header w100 fl ju-bt">
          <li class=""></li>
          <li class="fz-18">
            <span class="chapter-left-bc">MODULE 1</span>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p>
              2.They decide to hold a Chinese crafts show / paper-cutting
              contest.
            </p>
            <p>3.Linda is to design the posters / reserve rooms.</p>
            <p>
              4.Li Hong is to invite students to compete in the contest /
              handcraftsmen to show their talent.
            </p>
            <p>
              5.Zhang Ping is to arrange the room set-up / send out invitations.
            </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>
            <p>
              2.What information would you like to tell them about the event?
            </p>
            <p>
              <b
                >Ⅰ.Read the following tips for designing an event poster and
                mark the key elements in the following poster.</b
              >
            </p>
            <p>
              An event poster is a marketing tool designed to attract visitors
              to an upcoming gathering.With right design elements,a poster can
              successfully impress a wide audience.The following are some tips
              for creating an effective event poster.
            </p>
            <p>▲ Use a large and eye-catching font for the title.</p>
            <p>▲ Add the date,time and location of the event.</p>
            <p>▲ Add the logo or branding of the organizer.</p>
            <p>▲ Describe your event or why people should attend.</p>
            <p>▲ Include a relevant call to action.</p>
            <div class="horizontal" style="display: flex">
              <div class="left" style="width: 48%">
                <p class="center">
                  <img
                    class="img-e"
                    alt=""
                    src="../../assets/images/0025-1.jpg"
                  />
                </p>
              </div>
              <div class="right" style="width: 48%">
                <p>
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Name of the event
                </p>
                <p>
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Date and time
                </p>
                <p>
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Location
                </p>
                <p>
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Greetings
                </p>
                <p>
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Warnings
                </p>
                <p>
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Organizer
                </p>
                <p>
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Signature
                </p>
                <p>
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  A short description of the event
                </p>
                <p>
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Contact information
                </p>
                <p>
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Pictures of the event
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="preface-bottom">
          <span class="contet-num-box">15</span>
        </div>
      </div>
    </div>
    <!-- 16 -->
    <div class="page-box" page="22">
      <div v-if="showPageList.indexOf(22) > -1">
        <!-- 头部 -->
        <div class="w100 mb-20" style="padding-right: 20px">
          <div
            class="event-header-bc fl al-end"
            style="height: 100px; padding-left: 40px"
          >
            <div class="preface-header-box event-header-text-bc">
              <span class="l-text">新标准通用职场英语</span>
              <span class="g-text event-text-color">基础模块一</span>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p>
              <b
                >Ⅱ.DIY Crafts Club is planning a paper-cutting contest to
                promote Chinese handicrafts.The contest will be held in the
                lobby of Student Center at</b
              >6:00-8:00<b> November</b>16<b
                >.You're in charge of publicity in the club and are required to
                design a poster for the contest.Complete the necessary
                information in the following poster.</b
              >
            </p>
            <p class="center">
              <img class="img-a" alt="" src="../../assets/images/0026-1.jpg" />
            </p>
            <p>
              <b
                >Ⅲ.Your class has prepared a Chinese culture exhibition for
                foreign exchange students.Your group takes the responsibility of
                designing a poster for it.Discuss with your partner and try to
                answer the questions below to find out what information is
                needed.</b
              >
            </p>
            <div class="dy1-bj4">
              <p class="center"><b>Information to put into our poster</b></p>
            </div>
            <div class="dy1-bj5">
              <p>1.What can be the title of the exhibition?</p>
              <p>_________________________________________</p>
              <p>2.What should be included in the exhibition?</p>
              <p>_________________________________________</p>
              <p>3.Where will the exhibition be held?</p>
              <p>_________________________________________</p>
              <p>4.When will the exhibition be held?</p>
              <p>_________________________________________</p>
              <p>...</p>
            </div>
          </div>
        </div>
        <div class="preface-bottom">
          <span class="contet-num-box">16</span>
        </div>
      </div>
    </div>
    <!-- 17 -->
    <div class="page-box" page="23">
      <div v-if="showPageList.indexOf(23) > -1">
        <!-- 头部 -->
        <ul class="preface-odd-header w100 fl ju-bt">
          <li class=""></li>
          <li class="fz-18">
            <span class="chapter-left-bc">MODULE 1</span>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p>
              Ⅳ<b
                >.Design a poster for the exhibition according to the
                information in the table above.</b
              >
            </p>
            <p class="center">
              <img class="img-b" alt="" src="../../assets/images/0027-1.jpg" />
            </p>
            <div class="un-h2">
              <h2 id="b004">Unit Project</h2>
            </div>
            <p>
              The Youth League of your college is planning to organize an
              activity called Chinese Culture Conversation Circle for
              international students.This activity is to help them get a better
              understanding of China and integrate into Chinese culture and life
              faster.Work in groups and make a plan for this event.
            </p>
            <p>
              Step 1:Brainstorm some activities and topics to discuss.For
              example,Chinese cuisine,ethnic groups,handicrafts.
            </p>
            <p>
              Step 2:Create a poster with such information as the date,the
              time,the location,the contact information,etc.
            </p>
            <p>
              Step 3:Display your poster to the class and introduce the
              highlights of your activity.
            </p>
          </div>
        </div>
        <div class="preface-bottom">
          <span class="contet-num-box">17</span>
        </div>
      </div>
    </div>
    <!-- 18 -->
    <div class="page-box" page="24">
      <div v-if="showPageList.indexOf(24) > -1">
        <!-- 头部 -->
        <div class="w100 mb-20" style="padding-right: 20px">
          <div
            class="event-header-bc fl al-end"
            style="height: 100px; padding-left: 40px"
          >
            <div class="preface-header-box event-header-text-bc">
              <span class="l-text">新标准通用职场英语</span>
              <span class="g-text event-text-color">基础模块一</span>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <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-b" alt="" src="../../assets/images/0028-1.jpg" />
            </p>
            <div class="fieldset-1">
              <p class="center">
                <b>Questions You May Ask When Planning an Event</b>
              </p>
              <p>How many people do you need to make the event happen?</p>
              <p>What resources do you need?</p>
              <p>What does the audience need to know?</p>
              <p>What will hold the audience’s interest?</p>
              <p>What do you hope to achieve through this event?</p>
            </div>
          </div>
          <div class="preface-bottom">
            <span class="contet-num-box">18</span>
          </div>
        </div>
      </div>
    </div>
@@ -2512,7 +4347,12 @@
        },
      },
      testData: {
        check: [],
        isComplete: false,
        check: {
          isRight: null,
          answer: ["Culture", "Cuisine", "Landscapes"],
          value: [],
        },
        tx: {
          one: "",
          two: "",
@@ -2526,6 +4366,8 @@
          three: "",
          four: "",
          five: "",
          isRight: null,
          answer: ["uisine", "andscapes", "ivilization", "xplore", "nique"],
        },
        line: {
          one: "",
@@ -2553,6 +4395,7 @@
          three: "",
          four: "",
          five: "",
          answer: ["whether", "if", "whether", "whether", "if"],
        },
      },
      resource: {
@@ -2564,11 +4407,12 @@
        "online shopping",
        "facial recognition",
        "electronic payment",
        "intercity  train",
        "intercity train",
        "shared bike",
        "take-away service",
      ],
      dropdownData: {
        isComplete: false,
        one: {
          value: "",
          isRight: null,
@@ -2627,7 +4471,12 @@
    changeTestData() {
      localStorage.removeItem("english-testOne");
      this.testData = {
        check: [],
        isComplete: false,
        check: {
          isRight: null,
          answer: ["Culture", "Cuisine", "Landscapes"],
          value: [],
        },
        tx: {
          one: "",
          two: "",
@@ -2641,6 +4490,8 @@
          three: "",
          four: "",
          five: "",
          isRight: null,
          answer: ["uisine", "andscapes", "ivilization", "xplore", "nique"],
        },
        line: {
          one: "",
@@ -2668,11 +4519,11 @@
          three: "",
          four: "",
          five: "",
          answer: ["whether", "if", "whether", "whether", "if"],
        },
      };
    },
    setBookQuestion() {
      console.log('保存');
      localStorage.setItem(
        "english-book-question-one",
        JSON.stringify(this.questionData)
@@ -2730,22 +4581,29 @@
    handleDropdown(type) {
      const dropdownDatas = this.dropdownData;
      for (let key in dropdownDatas) {
        const item = dropdownDatas[key];
        let item = dropdownDatas[key];
        if (type == "judge") {
          item.value == item.answer
            ? (item.isRight = true)
            : (item.isRight = false);
          if (key != "isComplete") {
            item.value == item.answer
              ? (item.isRight = true)
              : (item.isRight = false);
          }
        }
      }
      this.dropdownData = dropdownDatas;
      this.$set(this.dropdownData,'isComplete',true)
      this.setDropdownData()
    },
    changeDropdown() {
      localStorage.removeItem("english-dropdown-one");
      for (let key in this.dropdownData) {
        const item = this.dropdownData[key];
        item.value = "";
        item.isRight = null;
        let item = this.dropdownData[key];
        if(key != 'isComplete') {
          item.value = "";
          item.isRight = null;
        }
      }
      this.$set(this.dropdownData,'isComplete',false)
    },
    setDropdownData() {
      localStorage.setItem(
@@ -2754,10 +4612,42 @@
      );
    },
    saveData() {
      console.log(this.testData);
      const item = this.testData["check"];
      const sortedArr1 = item.answer.slice().sort();
      const sortedArr2 = item.value.slice().sort();
      const isRight = sortedArr1.every(
        (value, index) => value === sortedArr2[index]
      );
      const inData = this.testData["in"];
      let inString = [];
      for (let key in inData) {
        const citem = inData[key];
        if (key != "answer" && key !== "isRight") {
          console.log(key);
          inString.push(citem);
        }
      }
      const inRight = inData.answer == inString;
      console.log("in", inData.answer, inString);
      this.$set(this.testData["in"], "isRight", inRight);
      this.$set(this.testData["check"], "isRight", isRight);
      this.$set(this.testData, "isComplete", true);
      this.setTestData();
      this.showQuestionAnswer = true;
    },
    audioPlay() {
      this.$emit("closeMiniAudio");
    isShowRight(answer, userAnswer, data) {
      let flag = null;
      if (userAnswer.indexOf(data) > -1) {
        flag = answer.indexOf(data) > -1 ? true : false;
      }
      return flag;
    },
    isTextRight(answer, data) {
      let flag = null;
      if (data) {
        flag = answer.indexOf(data) > -1 ? true : false;
      }
      return flag;
    },
  },
};
@@ -2767,9 +4657,11 @@
p {
  font-size: 16px !important;
}
.bodystyle {
  margin: 0 !important;
}
.line-border-box {
  margin-left: 10px;
  display: inline-block;
@@ -2777,12 +4669,15 @@
  height: 3px;
  background-color: #f9a71b;
}
.mr-20 {
  margin-right: 20px;
}
.dl-box {
  display: flex;
  flex-wrap: wrap;
  .dl-span {
    display: inline-block;
    text-indent: 0;
@@ -2791,17 +4686,20 @@
    line-height: 20px;
  }
}
.btn-w {
  font-size: 14px;
  border-width: 1px;
  min-width: 80px;
  height: 30px;
  background-color: #fff;
  &:hover {
    background-color: #0bab87;
    color: #fff;
  }
}
.banshi {
  position: relative;
  margin-top: 40px;
@@ -2809,6 +4707,7 @@
  height: 350px;
  margin: 0 auto;
}
.pageBox {
  z-index: 9999999999;
  color: #999;
@@ -2816,9 +4715,11 @@
  left: 48%;
  bottom: 0px;
}
select {
  height: 24px;
}
.mini-audio {
  width: 200px;
  height: 200px;
@@ -2826,4 +4727,11 @@
  right: 0;
  background-color: red;
}
.select-border {
  border: 0;
  border-bottom: 1px solid #767676;
  &:focus {
    outline: none;
  }
}
</style>