testbookLayout.git

			@@ -32,18 +32,244 @@
			<h2 id="b029"><img class="img-0" alt="" src="../../assets/images/dy8-le1.jpg" /></h2>
			<h3 id="c064"><span class="bjh3">Warm-up</span></h3>
			<p><b>Ⅰ.Figure out what the people in the following pictures do.</b></p>
			<p class="center"><img class="img-e" alt="" src="../../assets/images/0146-1.jpg" /></p>
			<p class="center">1._____________________</p>
			<p class="center"><img class="img-e" alt="" src="../../assets/images/0146-2.jpg" /></p>
			<p class="center">2._____________________</p>
			<p class="center"><img class="img-e" alt="" src="../../assets/images/0146-3.jpg" /></p>
			<p class="center">3._____________________</p>
			<p class="center"><img class="img-e" alt="" src="../../assets/images/0146-4.jpg" /></p>
			<p class="center">4._____________________</p>
			<p class="center"><img class="img-e" alt="" src="../../assets/images/0146-5.jpg" /></p>
			<p class="center">5._____________________</p>
			<p class="center"><img class="img-e" alt="" src="../../assets/images/0146-6.jpg" /></p>
			<p class="center">6._____________________</p>
			<div class="openImgBox">
			<div class="fl ju-bt">
			<div class="left" style="width: 48%">
			<div>
			<p class="center">
			<img src="../../assets/images/0146-1.jpg" alt="" class="w100" />
			</p>
			<p class="center">
			1.
			<select class="select-border" v-model="dropdownData.one.value"
			@change="setDropdownData" :disabled="dropdownData.isComplete">
			<option v-for="(item, index) in dropDownList" :key="index"
			:value="item">
			{{ item }}
			</option>
			</select>
			<span class="icon-box">
			<svg v-if="dropdownData.one.isRight" 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="dropdownData.one.isRight == 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>
			</div>
			<p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
			答案：intercity train
			</p>
			</div>
			<div class="right" style="width: 48%">
			<div>
			<p class="center">
			<img src="../../assets/images/0146-2.jpg" alt="" style="width: 98%" />
			</p>
			<p class="center">
			2.
			<select class="select-border" v-model="dropdownData.two.value"
			@change="setDropdownData" :disabled="dropdownData.isComplete">
			<option v-for="(item, index) in dropDownList" :key="index"
			:value="item">
			{{ item }}
			</option>
			</select>
			<span class="icon-box">
			<svg v-if="dropdownData.two.isRight" 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="dropdownData.two.isRight == 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>
			</div>
			<p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
			答案：online shopping
			</p>
			</div>
			</div>

			<div class="fl ju-bt">
			<div class="left" style="width: 48%">
			<div>
			<p class="center">
			<img src="../../assets/images/0146-3.jpg" alt="" style="width: 98%" />
			</p>
			<p class="center">
			3.
			<select class="select-border" v-model="dropdownData.three.value"
			@change="setDropdownData" :disabled="dropdownData.isComplete">
			<option v-for="(item, index) in dropDownList" :key="index"
			:value="item">
			{{ item }}
			</option>
			</select>
			<span class="icon-box">
			<svg v-if="dropdownData.three.isRight" 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="dropdownData.three.isRight == 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>
			</div>
			<p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
			答案：electronic payment
			</p>
			</div>
			<div class="right" style="width: 48%">
			<div>
			<p class="center">
			<img src="../../assets/images/0146-4.jpg" alt="" style="width: 94%" />
			</p>
			<p class="center">
			4.
			<select class="select-border" v-model="dropdownData.four.value"
			@change="setDropdownData" :disabled="dropdownData.isComplete">
			<option v-for="(item, index) in dropDownList" :key="index"
			:value="item">
			{{ item }}
			</option>
			</select>
			<span class="icon-box">
			<svg v-if="dropdownData.four.isRight" 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="dropdownData.four.isRight == 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>
			</div>
			<p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
			答案：shared bike
			</p>
			</div>
			</div>

			<div class="fl ju-bt">
			<div class="left" style="width: 48%">
			<div>
			<p class="center">
			<img src="../../assets/images/0146-5.jpg" alt="" class="w100" />
			</p>
			<p class="center">
			5.
			<select class="select-border" v-model="dropdownData.five.value"
			@change="setDropdownData" :disabled="dropdownData.isComplete">
			<option v-for="(item, index) in dropDownList" :key="index"
			:value="item">
			{{ item }}
			</option>
			</select>
			<span class="icon-box">
			<svg v-if="dropdownData.five.isRight" 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="dropdownData.five.isRight == 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>
			</div>
			<p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
			答案：take-away service
			</p>
			</div>
			<div class="right" style="width: 48%">
			<div>
			<p class="center">
			<img src="../../assets/images/0146-6.jpg" alt="" style="width: 98%" />
			</p>
			<p class="center">
			6.
			<select class="select-border" v-model="dropdownData.six.value"
			@change="setDropdownData" :disabled="dropdownData.isComplete">
			<option v-for="(item, index) in dropDownList" :key="index"
			:value="item">
			{{ item }}
			</option>
			</select>
			<span class="icon-box">
			<svg v-if="dropdownData.six.isRight" 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="dropdownData.six.isRight == 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>
			</div>
			<p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
			答案：facial recognition
			</p>
			</div>
			</div>
			</div>
			<p><b>Ⅱ.What other jobs can you list?</b></p>
			<p>____________________________________________</p>
			</div>
			@@ -70,16 +296,72 @@
			<div class="bodystyle">
			<h3 id="c065"><span class="bjh3">Listening</span></h3>
			<p class="center"> <audio :src="resource.listenOne" controls
			controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
			controlslist="noplaybackrate nodownload" class="audio" ></audio></p>
			<p><b>Watch the video and find out how the speakers describe their jobs.</b></p>
			<p class="center"><img class="img-a" alt="" src="../../assets/images/0147-2.jpg" /></p>
			<table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
			<tr class="table-th-bc">
			<td class="tl-cn">Who is he/she?</td>
			<td class="tl-cn">What's his/her job?</td>
			<td class="tl-cn" style="width: 65%;">How does he/she describe the job?</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			Duan Xinyue
			</td>
			<td class="tl-cn">
			Teacher
			</td>
			<td class="tl-cn">
			<textarea v-model="questionData.table.one"
			class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			Luo Xinya
			</td>
			<td class="tl-cn">
			Pet Doctor
			</td>
			<td class="tl-cn">
			<textarea v-model="questionData.table.two"
			class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			Sun Yijie
			</td>
			<td class="tl-cn">
			Taxi Driver
			</td>
			<td class="tl-cn">
			<textarea v-model="questionData.table.three"
			class="w100 table-tr-bc b0 table-textarea "
			@change="setBookQuestion"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			Wu Qi
			</td>
			<td class="tl-cn">
			Photographer
			</td>
			<td class="tl-cn">
			<textarea v-model="questionData.table.four"
			class="w100 table-tr-bc b0 table-textarea "
			@change="setBookQuestion"></textarea>
			</td>
			</tr>
			</table>
			<h3 id="c066"><span class="bjh3">Reading</span></h3>
			<p>1.There is a saying that a part-time job can be a way to gain the experience necessary for
			full-time employment.Do you agree? Why or why not?</p>
			<p>2.If you’re considering a part-time job,what’s your expectation of it?</p>
			<p class="center">__________________</p>
			<p class="center"> <audio :src="resource.listenOne" controls
			controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio></p>
			controlslist="noplaybackrate nodownload" class="audio" ></audio></p>
			<p>Everyone’s first job is special.There are a couple of reasons for this:the experience is
			burned into one’s memory; it gives you the practice needed to
			<span class="word-bc" @click="saveWord($event, 'fulfill')">fulfill</span>
			@@ -157,7 +439,7 @@
			</p>
			<p class="center"><audio :src="resource.readingTwo" controls
			controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
			@play="audioPlay"></audio></p>
			></audio></p>
			<p>fulfill /fʊlˈfɪl/ <i>v.</i> 符合；履行</p>
			<div class="bkbj">
			<p><i>to do or have what is required or necessary</i></p>
			@@ -360,7 +642,50 @@
			<p>（　　）6.I <span class="u">think</span> everyone should get down on one’s knees and pull weeds.
			</p>
			<p>B.Write the present or the past form of the following verbs.</p>
			<p class="center"><img class="img-a" alt="" src="../../assets/images/0151-1.jpg" /></p>
			<table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
			<tr class="table-tr-bc">
			<td class="tl-cn">give<input :disabled="testData.isComplete" type="text"
			class="input-bottom-border input-bc-t" style="width: 5em"
			v-model="testData.in.one" @change="setTestData" /></td>
			<td class="tl-cn">spend<input :disabled="testData.isComplete" type="text"
			class="input-bottom-border input-bc-t" style="width: 5em"
			v-model="testData.in.one" @change="setTestData" /></td>
			<td class="tl-cn"><input :disabled="testData.isComplete" type="text"
			class="input-bottom-border input-bc-t" style="width: 5em"
			v-model="testData.in.one" @change="setTestData" />had
			</td>
			</tr>
			<tr class="table-tr-bc ">
			<td class="tl-cn"><input :disabled="testData.isComplete" type="text"
			class="input-bottom-border input-bc-t" style="width: 5em"
			v-model="testData.in.one" @change="setTestData" />
			went
			</td>
			<td class="tl-cn"><input :disabled="testData.isComplete" type="text"
			class="input-bottom-border input-bc-t" style="width: 5em"
			v-model="testData.in.one" @change="setTestData" />
			began
			</td>
			<td class="tl-cn">say<input :disabled="testData.isComplete" type="text"
			class="input-bottom-border input-bc-t" style="width: 5em"
			v-model="testData.in.one" @change="setTestData" />
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">get<input :disabled="testData.isComplete" type="text"
			class="input-bottom-border input-bc-t" style="width: 5em"
			v-model="testData.in.one" @change="setTestData" />
			</td>
			<td class="tl-cn">think<input :disabled="testData.isComplete" type="text"
			class="input-bottom-border input-bc-t" style="width: 5em"
			v-model="testData.in.one" @change="setTestData" />
			</td>
			<td class="tl-cn">asy<input :disabled="testData.isComplete" type="text"
			class="input-bottom-border input-bc-t" style="width: 5em"
			v-model="testData.in.one" @change="setTestData" />chose
			</td>
			</tr>
			</table>
			<h3 id="c067"><span class="bjh3">Mini-project</span></h3>
			<p>People do different jobs and hold different ideas about their jobs.You are required to:</p>
			<p>1.Do a small survey among your family members or relatives and jot down their opinions;</p>
			@@ -394,11 +719,318 @@
			<p>　　　　3.How does he/she describe his/her job?</p>
			</div>
			<p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
			<p class="center"><img class="img-a" alt="" src="../../assets/images/0152-1.jpg" /></p>
			<table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
			<tr class="table-th-bc">
			<td class="tl-cn wh-no">The Respondent</td>
			<td class="tl-cn">The Job</td>
			<td class="tl-cn">The Description</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn wh-no">
			Zhang Wei's Mum
			</td>
			<td class="tl-cn">
			A Teacher
			</td>
			<td class="tl-lf">
			She teaches English in a high schpol. Her job is quite <span
			class="input-bottom-border">stressful </span> and <span
			class="input-bottom-border">challenging</span> , but she feels <span
			class="input-bottom-border">rewarding</span> rewarding when her students make
			progress.
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[0].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[1].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[2].userAnswer"
			class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[3].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[4].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[5].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[6].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[7].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[8].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[9].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[10].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[11].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[12].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box "
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[13].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[14].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[15].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[16].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[17].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[18].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[19].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[0].value[20].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			</table>
			<p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" /></p>
			<div class="bk-wh">
			<p>dangerous　demanding　dull　exciting　repetitive　risky　satisfying　stimulating　stressful　voluntary
			<p class="dl-box">
			<span class="word-bc mr-20 dl-span"
			@click="saveWord($event, 'dangerous')">dangerous</span>
			<span class="word-bc mr-20 dl-span"
			@click="saveWord($event, 'demanding')">demanding</span>
			<span class="word-bc mr-20 dl-span" @click="saveWord($event, 'dull')">dull</span>
			<span class="word-bc mr-20 dl-span"
			@click="saveWord($event, 'exciting')">exciting</span>
			<span class="word-bc mr-20 dl-span"
			@click="saveWord($event, 'repetitive')">repetitive</span>
			<span class="word-bc mr-20 dl-span" @click="saveWord($event, 'risky')">risky</span>
			<span class="word-bc mr-20 dl-span"
			@click="saveWord($event, 'satisfying')">satisfying</span>
			<span class="word-bc mr-20 dl-span"
			@click="saveWord($event, 'stimulating')">stimulating</span>
			<span class="word-bc mr-20 dl-span"
			@click="saveWord($event, 'stressful')">stressful</span>
			<span class="word-bc mr-20 dl-span"
			@click="saveWord($event, 'voluntary')">voluntary</span>
			</p>

			<p>
			</p>
			</div>
			<div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
			<div class="banshi openImgBox">
			<div class="swiper-container swiper_ppt">
			<div class="swiper-wrapper">
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_01.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_02.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_03.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_04.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_05.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_06.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_07.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_08.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_09.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_10.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_11.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_12.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_13.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_14.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_15.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_16.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_17.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_18.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_19.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_20.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_21.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_22.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_23.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_24.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_25.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_26.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_27.png" />
			</div>
			</div>
			</div>
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
			<div class="pageBox"></div>
			</div>
			<!-- 显示当前页和总页数的元素 -->
			</div>
			</div>
			</div>
			</div>
			@@ -424,12 +1056,45 @@
			<div class="bodystyle">
			<h2 id="b030"><img class="img-0" alt="" src="../../assets/images/dy8-le2.jpg" /></h2>
			<h3 id="c068"><span class="bjh3">Warm-up</span></h3>
			<p><b>Mostly,the first step to map out your career is to create a career road map for
			<p>
			<b>Mostly,the first step to map out your career is to create a career road map for
			yourself.Work with your partner and figure out what the pictures in the following road
			maps possibly mean,and then choose the proper expressions to fill in the blanks.</b></p>
			maps possibly mean,and then choose the proper expressions to fill in the blanks.
			</b>
			<span class="btn-box" @click="showDropTwo(0,0)">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<p><b>Road map</b>1：</p>
			<p><b>People often think that career path works like this:</b></p>
			<p class="center"><img class="img-a" alt="" src="../../assets/images/0153-1.jpg" /></p>
			<ul class="fl">
			<li>
			<img class="img-a" alt="" src="../../assets/images/job-1.jpg" />
			</li>
			<li class="fl de-cl">
			<div style="height:50%;padding-left:25px" class="fl de-cl ju-ev">
			<div v-for="(item,index) in dropTwo[0].value" :key="index">
			<select v-model="item.userAnswer" @change="handleDropTwo(0,index)" style="width:200px;height:35px"
			>
			<option v-for="(citem, cindex) in dropTwo[0].option" :key="'change' + cindex" :value="citem">
			{{ citem}}
			</option>
			</select>
			<img :src="item.isRight ? correctIcon : errorIcon" v-if="item.isRight == true \|\| item.isRight == false">
			</div>
			</div>
			<div>
			<img class="img-a" alt="" src="../../assets/images/job-2.jpg" />
			</div>
			</li>
			</ul>
			<!-- <p class="center">
			<img class="img-a" alt="" src="../../assets/images/0153-1.jpg" />
			</p> -->
			</div>
			</div>
			<div class="preface-bottom">
			@@ -454,16 +1119,67 @@
			<div class="bodystyle">
			<p><b>Road map</b>2：</p>
			<p><b>In reality,it looks more like:</b></p>
			<p class="center"><img class="img-a" alt="" src="../../assets/images/0154-1.jpg" /></p>
			<h3 id="c069"><span class="bjh3">Reading</span></h3>
			<p>1.Working hard is only the first part of success.Making good choices is the second part.It
			truly takes both to achieve success at whatever you do.What’s your interpretation of the
			sentence?</p>
			<p>2.What’s your suggestion for making the “right” career choice?</p>
			<div class="center po-re " >
			<img class="img-a" alt="" src="../../assets/images/0154-1.jpg" />
			<div class="reality-one">
			<select v-model="dropTwo[1].value[0].userAnswer" @change="handleDropTwo(1,0)"
			>
			<option v-for="(citem, cindex) in dropTwo[1].option" :key="'change' + cindex" :value="citem">
			{{ citem}}
			</option>
			</select>
			<img :src="dropTwo[1].value[0].isRight ? correctIcon : errorIcon" v-if="dropTwo[1].value[0].isRight == true \|\| dropTwo[1].value[0].isRight == false">
			</div>
			<div class="reality-two">
			<select v-model="dropTwo[1].value[1].userAnswer" @change="handleDropTwo(1,1)" style="width:120px;height:35px"
			>
			<option v-for="(citem, cindex) in dropTwo[1].option" :key="'change' + cindex" :value="citem">
			{{ citem}}
			</option>
			</select>
			<img :src="dropTwo[1].value[1].isRight ? correctIcon : errorIcon" v-if="dropTwo[1].value[1].isRight == true \|\| dropTwo[1].value[1].isRight == false">
			</div>
			<div class="reality-three">
			<select v-model="dropTwo[1].value[2].userAnswer" @change="handleDropTwo(1,2)" style="width:120px;height:35px"
			>
			<option v-for="(citem, cindex) in dropTwo[1].option" :key="'change' + cindex" :value="citem">
			{{ citem}}
			</option>
			</select>
			<img :src="dropTwo[1].value[2].isRight ? correctIcon : errorIcon" v-if="dropTwo[1].value[2].isRight == true \|\| dropTwo[1].value[2].isRight == false">
			</div>
			</div>

			<h3 id="c069" class="fl al-cn">
			<span class="bjh3">Reading</span>
			<audio :src="resource.listenTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
			</h3>
			<ul>
			<li v-for="(item,index) in noSubmitTwo[1].value" :key="index">
			<p>
			{{index + 1}}.{{item.stem}}
			<span class="btn-box" @click="showNoSubmitTWo(1,index)">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<textarea name="" id="" cols="30" rows="10" v-model="item.userAnswer" class="w100" @input="saveNoSubmitTWo"></textarea>
			<div class="event-header-text-bc pd-5 w100 mt-20"
			v-if="item.isShowAnswer">
			<span>答案：</span>
			<span v-for="(citem,cindex) in item.answer" :key="cindex" class="mr-20">
			{{ citem }}
			</span>
			</div>
			</li>
			</ul>
			<p class="center"><b>Choose a Career You Love</b></p>
			<p class="center"><audio :src="resource.readingTwo" controls
			controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
			@play="audioPlay"></audio></p>
			></audio></p>
			<p>We spend a large
			<span class="word-bc" @click="saveWord($event, 'portion')">portion</span>
			of our lives working,so how we spend those years matters.It is
			@@ -545,7 +1261,7 @@
			<span class="line-border-box"></span>
			</p>
			<audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
			style="margin-left: 10px" class="audio" @play="audioPlay"></audio>
			style="margin-left: 10px" class="audio" ></audio>
			<p>portion /ˈpɔːʃn/ <i>n.</i>部分</p>
			<div class="bkbj">
			<p><i>one part of sth.larger</i></p>
			@@ -647,38 +1363,42 @@
			<p><b>Ⅰ.Reading comprehension.</b></p>
			<p>A.Mark the suggestions given by the author when choosing a career.</p>
			<p>Deciding on a Career£Income</p>
			<p>□Education</p>
			<p>□Experience</p>
			<p>□Goals</p>
			<p>□Happiness</p>
			<p>□Interest</p>
			<p>□Satisfaction</p>
			<p>□Skills</p>
			<p>□Values</p>
			<p v-for="(item,index) in listenTwo[0].option" :key="index">
			<input type="checkbox" :value="item" name="what" v-model="listenTwo[0].value[0].userAnswer" :disabled="listenTwo[0].isComplete" :change="saveListenTwo">
			{{item}}
			<img :src="isShowRight(listenTwo[0].answer,listenTwo[0].value[0].userAnswer,item) ? correctIcon : errorIcon" v-if="listenTwo[0].isComplete">
			</p>
			<p>B.Decide whether the following statements are true (T) or false (F).</p>
			<p>(　) 1.When we decide on our future career,satisfaction and happiness matter a lot.</p>
			<p>(　) 2.Positive emotions make us more productive and satisfied in our jobs.</p>
			<p>(　) 3.Our past experiences have nothing to do with our jobs in the future.</p>
			<p>(　) 4.There is no need to worry about what career we are going to take.</p>
			<p>(　) 5.Luxuries will bring enjoyment to us,but that feeling cannot last forever.</p>
			<p v-for="(item,index) in listenTwo[1].value" :key=" 'dropdown' + index">
			(
			<select v-model="item.userAnswer" class="select-border" @change="saveListenTwo">
			<option v-for="(citem, cindex) in listenTwo[1].option" :key="cindex"
			:value="citem">
			{{ citem }}
			</option>
			</select>
			)
			{{index + 1}}.{{item.stem}}
			<img :src="item.isRight ? correctIcon : errorIcon" v-if="listenTwo[1].isComplete">
			</p>
			<p><b>Ⅱ.Language focus.</b></p>
			<p>A.Replace the words in italics with the exact words in the passage and change the form if
			necessary.</p>
			<p>1.Once you find a desired <i>occupation</i>,you’ll notice a change even in your daily
			life._____________</p>
			<p>2.Only a small <i>part</i> of the budget is spent on books._____________</p>
			<p>3.Happiness itself can help to shape job market <i>results</i> and even firm
			performance._____________</p>
			<p>4.Those who are <i>excited</i> about numbers can work in the accounting field._____________
			<p v-for="(item,index) in listenTwo[2].value" :key="'Language' + index">
			{{index + 1}}.{{item.stem}}
			<input type="text" :disabled="listenTwo[2].isComplete" v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px">
			<img :src="item.isRight ? correctIcon : errorIcon" v-if="listenTwo[2].isComplete">
			</p>
			<p>5.We need to leave our <i>pleasant</i> zone at work if we want growth
			opportunities._____________</p>
			<p>B.Fill in the blanks with the proper form of the expressions given below.</p>
			<div class="bk-wh">
			<p>a portion of　fall into place　be passionate about　later on be　comfortable with</p>
			</div>
			<p>1.Keep your options open and everything will___________.</p>
			<p>2.You’d better set a long-term goal that you can___________.</p>
			<p v-for="(item,index) in listenTwo[3].value.slice(0,2)" :key="'Languages' + index">
			{{index + 1}}.{{item.stemOne}}
			<input type="text" :disabled="listenTwo[3].isComplete" v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px">
			<img :src="item.isRight ? correctIcon : errorIcon" v-if="listenTwo[3].isComplete">
			{{item.stemTwo}}
			</p>
			</div>
			</div>
			<div class="preface-bottom">
			@@ -701,10 +1421,14 @@
			<!-- 内容 -->
			<div class="padding-93">
			<div class="bodystyle">
			<p>3.Anyone hired into the company must___________the system.</p>
			<p>4.You must accept___________the blame for this crisis.</p>
			<p>5.Many people plan to take one job of any kind and consider a new career path___________.</p>
			<p><b>Ⅲ.Grammar focus:Pronouns (it,one).</b><span class="btn-box" @click="showAnswer('showImgOne')">
			<p v-for="(item,index) in listenTwo[3].value.slice(2,5)" :key="'Languages' + index">
			{{index + 3}}.{{item.stemOne}}
			<input type="text" :disabled="listenTwo[3].isComplete" v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px">
			<img :src="item.isRight ? correctIcon : errorIcon" v-if="listenTwo[3].isComplete">
			{{item.stemTwo}}
			</p>
			<p><b>Ⅲ.Grammar focus:Pronouns (it,one).</b><span class="btn-box"
			@click="showAnswer('showImgOne')">
			<svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
			xmlns="http://www.w3.org/2000/svg" p-id="30864"
			xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
			@@ -725,16 +1449,31 @@
			<p>2.Having a career that we are passionate about,<i>one</i> that gives our life a sense of
			purpose,and one that we are comfortable with is important.</p>
			</div>
			<p>1.Although finding a new job might not be easy,there are many different methods to
			find_______effectively.</p>
			<p>2.As you make a decision about your career,_______is important to reflect on your
			interest,skills and career goals.</p>
			<p>3.People will usually set a milestone in their career path,_______that they will work for in
			the next five or ten years.</p>
			<p>4.A career aptitude test could be helpful,because_______will give you suggestions based on
			the test of your personal type.</p>
			<p>5.We all have to work,and for most of us,if you discount weekends and sleep,_______will take
			up at least half our available time.</p>
			<p v-for="(item,index) in listenTwo[4].value" :key="'Languagese' + index">
			{{index + 1}}.{{item.stemOne}}
			<input type="text" :disabled="listenTwo[4].isComplete" v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="saveListenTwo" style="width:80px">
			<img :src="item.isRight ? correctIcon : errorIcon" v-if="listenTwo[4].isComplete">
			{{item.stemTwo}}
			</p>
			<div class="w100 fl ju-cn">
			<ul class="fl ju-ev" style="width:80%">
			<li>
			<button class="btn-border btn-w" @click="handleListenTwo">
			提交
			</button>
			</li>
			<li>
			<button @click="recastListenTwo" class="btn-border btn-w">
			重做
			</button>
			</li>
			<li>
			<button @click="viewListenTwo" class="parimary-btn">
			查看答案
			</button>
			</li>
			</ul>
			</div>
			<h3 id="c070"><span class="bjh3">Mini-project</span></h3>
			<p>Work in groups.Every one of you will take a job in the future.Ask your group members what job
			he/she is going to choose and why he/she chooses this job.Jot down some notes,and prepare a
			@@ -762,20 +1501,263 @@
			<div class="padding-93">
			<div class="bodystyle">
			<p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
			<p class="center"><img class="img-a" alt="" src="../../assets/images/0159-1.jpg" /></p>
			<table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
			<tr class="table-th-bc">
			<td class="tl-cn wh-no">What job is he/she interested in?</td>
			<td class="tl-cn">Why does he'she choose this job?</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			Architeet
			</td>
			<td class="tl-lf">
			My fatnily is engaged in a construction business. And I have hada dream to build my
			own house ever since I was a kid.
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[2].value[0].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[2].value[1].userAnswer"
			class="w100 table-tr-bc b0 table-textarea" @input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[2].value[2].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[2].value[3].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[2].value[4].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[2].value[5].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[2].value[6].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@input="saveNoSubmitTWo"></textarea>
			</td>
			<td class="tl-cn">
			<textarea v-model="noSubmitTwo[2].value[7].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="saveNoSubmitTWo"></textarea>
			</td>
			</tr>
			</table>
			<div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
			<div class="banshi openImgBox">
			<div class="swiper-container swiper_ppt">
			<div class="swiper-wrapper">
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_01.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_02.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_03.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_04.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_05.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_06.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_07.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_08.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_09.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_10.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_11.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_12.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_13.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_14.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_15.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_16.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_17.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_18.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_19.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_20.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_21.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_22.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_23.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_24.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_25.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_26.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_27.png" />
			</div>
			</div>
			</div>
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
			<div class="pageBox"></div>
			</div>
			<!-- 显示当前页和总页数的元素 -->
			</div>
			</div>
			<h2 id="b031"><img class="img-0" alt="" src="../../assets/images/dy8-le3.jpg" /></h2>
			<h3 id="c071"><span class="bjh3">Listening</span></h3>
			<p class="center"> <audio :src="resource.readingTwo" controls
			controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
			@play="audioPlay"></audio></p>
			></audio></p>
			<p><b>Ⅰ.Derek is talking about his job interview.Listen to the recording and fill in the blanks
			with what you hear.</b></p>
			<p>Hi,everyone.I’m Derek Cruise.I landed a job interview the other day.It is a bank
			1._________that I’ve wanted for a long time.I’m excited you know.The job is quite
			2._________and I love to play with 3._________.I prepared my 4._________,and bought a
			suit.My friend reminded me that I should send a follow-up 5._________after the interview.But
			1.
			<input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px">
			<img :src="listenThree[0].value[0].isRight ? correctIcon : errorIcon" v-if="listenThree[0].isComplete">
			that I’ve wanted for a long time.I’m excited you know.The job is quite
			2.
			<input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px">
			<img :src="listenThree[0].value[1].isRight ? correctIcon : errorIcon" v-if="listenThree[0].isComplete">
			and I love to play with 3.
			<input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px">
			<img :src="listenThree[0].value[2].isRight ? correctIcon : errorIcon" v-if="listenThree[0].isComplete">
			.I prepared my 4.
			<input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px">
			<img :src="listenThree[0].value[3].isRight ? correctIcon : errorIcon" v-if="listenThree[0].isComplete">
			,and bought a
			suit.My friend reminded me that I should send a follow-up 5.
			<input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[4].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px">
			<img :src="listenThree[0].value[4].isRight ? correctIcon : errorIcon" v-if="listenThree[0].isComplete">
			after the interview.But
			I feel worried about writing the letter,for I know little about it.Anyway,I am
			well-prepared,I guess.Now all I’ve got to do is to take that job.Wish me good luck!</p>
			well-prepared,I guess.Now all I’ve got to do is to take that job.Wish me good luck!
			</p>
			<div class="w100 fl ju-cn">
			<ul class="fl ju-ev" style="width:80%">
			<li>
			<button class="btn-border btn-w" @click="handleListenThree">
			提交
			</button>
			</li>
			<li>
			<button @click="recastListenThree" class="btn-border btn-w">
			重做
			</button>
			</li>
			<li>
			<button @click="viewListenThree" class="parimary-btn">
			查看答案
			</button>
			</li>
			</ul>
			</div>
			</div>
			</div>
			<div class="preface-bottom">
			@@ -798,13 +1780,113 @@
			<!-- 内容 -->
			<div class="padding-93">
			<div class="bodystyle">
			<p><b>Ⅱ.Susan is interviewing the candidate Derek.Listen to the conversation and write down
			Susan's questions.</b></p>
			<p class="center"><img class="img-a" alt="" src="../../assets/images/0160-1.jpg" /></p>
			<p>
			<b>
			Ⅱ.Susan is interviewing the candidate Derek.Listen to the conversation and write down
			Susan's questions.
			</b>
			<span class="btn-box" @click="showNoSubmitThree(0,0)">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
			<tr class="table-th-bc">
			<td class="tl-cn wh-no">Susan's Questions</td>
			<td class="tl-cn">Derek's Responses</td>
			</tr>

			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitThree[0].value[0].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@change="saveNoSubmitThree"></textarea>
			</td>
			<td class="tl-cn">
			<p class="table-p">Studying Finance in East College</p>
			<p class="table-p">Having been working as an intemn in T&G Accounting Company for
			the last two years</p>
			<p class="table-p">Speaking fluent Chinese</p>
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitThree[0].value[0].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@change="saveNoSubmitThree"></textarea>
			</td>
			<td class="tl-lf">
			Analyzing financial data with ERP software
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitThree[0].value[0].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@change="saveNoSubmitThree"></textarea>
			</td>
			<td class="tl-lf">
			To put finance theories into practice
			</td>
			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<textarea v-model="noSubmitThree[0].value[0].userAnswer"
			class="w100 table-tr-bc b0 table-textarea textarea-box"
			@change="saveNoSubmitThree"></textarea>
			</td>
			<td class="tl-cn">
			<p class="table-p">A hard-working person</p>
			<p class="table-p">A fast learer</p>
			<p class="table-p">Getting along well with people</p>
			</td>
			</tr>
			</table>
			<div class="event-header-text-bc pd-5 w100 mt-20"
			v-if="noSubmitThree[0].value[0].isShowAnswer">
			<span>答案：</span>
			<span v-for="(item,index) in noSubmitThree[0].value" :key="index" class="mr-20">
			{{index + 1}}.{{ item.answer }}
			</span>
			</div>
			<h3 id="c072"><span class="bjh3">Practical Writing</span></h3>
			<p>Work with your partner to discuss the following questions.</p>
			<p>1.How do you follow up after a job interview?</p>
			<p>2.How do you write follow-up emails after an interview?</p>
			<p>
			1.How do you follow up after a job interview?
			<span class="btn-box" @click="showNoSubmitThree(1,0)">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<textarea name="" id="" cols="30" rows="10" v-model="noSubmitThree[1].value[0].userAnswer" class="w100" @input="saveNoSubmitThree"></textarea>
			<div class="event-header-text-bc pd-5 w100 mt-20"
			v-if="noSubmitThree[1].value[0].isShowAnswer">
			<span>答案：</span>
			<p v-for="(item,index) in noSubmitThree[1].value[0].answer" :key="index">
			{{index + 1}}) {{item}}
			</p>
			</div>
			<p>
			2.How do you write follow-up emails after an interview?
			<span class="btn-box" @click="showNoSubmitThree(1,1)">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<textarea name="" id="" cols="30" rows="10" v-model="noSubmitThree[1].value[1].userAnswer" class="w100" @input="saveNoSubmitThree"></textarea>
			<div class="event-header-text-bc pd-5 w100 mt-20"
			v-if="noSubmitThree[1].value[1].isShowAnswer">
			<span>答案：{{noSubmitThree[1].value[1].answer}}</span>
			</div>
			<p><b>Ⅰ.Read the following tips,and find out why a follow-up email is needed after an
			interview.</b></p>
			<p>A follow-up email is a good way to show your interest in the position and,most important of
			@@ -841,20 +1923,68 @@
			<!-- 内容 -->
			<div class="padding-93">
			<div class="bodystyle">
			<p><b>Ⅱ.Fill in the blanks with the right expressions from the labels to finish the following-up
			email.</b></p>
			<p class="center"><img class="img-a" alt="" src="../../assets/images/0161-1.jpg" /></p>
			<p><b>Ⅲ.Put the following words in right order to make sentences.</b></p>
			<p>1.thank　for　me　meet　taking　the　time　to　with　yesterday　you</p>
			<p>_______________________________________________</p>
			<p>2.I　appreciate　interview　me　the　time　to　took　you</p>
			<p>_______________________________________________</p>
			<p>3.I　about　am　excited　joining　of　possibility　the　very　you</p>
			<p>_______________________________________________</p>
			<p>4.I　about　enjoyed　position　speaking　the　today　with　you</p>
			<p>_______________________________________________</p>
			<p>5.I　am　and　for　forward　from　hearing　in　interested　look　to　very　working　you　you</p>
			<p>_______________________________________________</p>
			<p>
			<b>Ⅱ.Fill in the blanks with the right expressions from the labels to finish the following-up
			email.
			</b>
			<span class="btn-box" @click="showPracticalThree(0)">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<div class="finish-box">
			<p>From: Jack Thompson</p>
			<p>To: Mr. Jim</p>
			<p v-for="(item,index) in practicalThree[0].value" :key="index">
			{{item.stemOne}}
			<select class="select-border" v-model="item.userAnswer" @change="handlePracticalThree(0,index)">
			<option v-for="(citem, cindex) in item.option" :key="'change' + cindex" :value="citem">
			{{ citem}}
			</option>
			</select>
			<img :src="item.isRight ? correctIcon : errorIcon" v-if="item.isRight == true \|\| item.isRight == false">
			{{item.stemTwo}}
			</p>
			<p>Sincerely,</p>
			<p>Jack Thompson</p>
			<p>Jackthompson@email.com</p>
			<p>312-465-7981</p>
			</div>
			<div class="event-header-text-bc pd-5 w100 mt-20"
			v-if="practicalThree[0].isShowAnswer">
			<span>答案：</span>
			<span v-for="(item,index) in practicalThree[0].value" :key="index" class="mr-20">
			{{ item.answer }}
			</span>
			</div>
			<p>
			<b>Ⅲ.Put the following words in right order to make sentences.</b>
			<span class="btn-box" @click="showPracticalThree(1)">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<ul>
			<li v-for="(item,index) in practicalThree[1].value" :key="index">
			<p >
			{{index + 1}}.{{item.stem}}
			</p>
			<input type="text" v-model="item.userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</li>
			</ul>
			<div class="event-header-text-bc pd-5 w100 mt-20"
			v-if="practicalThree[1].isShowAnswer">
			<span>答案：</span>
			<p v-for="(item,index) in practicalThree[1].value" :key="index" class="mr-20">
			{{index + 1}}.{{ item.answer }}
			</p>
			</div>
			</div>
			</div>
			<div class="preface-bottom">
			@@ -880,23 +2010,39 @@
			<p><b>Ⅳ.After his interview Derek wants to send a follow-up email.Work with your partner and
			write one for him.</b></p>
			<div class="fieldset-4">
			<p class="left">From:</p>
			<p class="left">To:</p>
			<p class="left">Subject:</p>
			<p class="left">
			From:
			<input type="text" v-model="practicalThree[2].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p class="left">
			To:
			<input type="text" v-model="practicalThree[2].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p class="left">
			Subject:
			<input type="text" v-model="practicalThree[2].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p><br /></p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<textarea name="" id="" cols="30" rows="18" v-model="practicalThree[2].value[3].userAnswer" class="w100" @input="savePracticalThree"></textarea>
			<p class="left">derekcruise@email.com</p>
			<p class="left">521-764-8809</p>
			</div>
			<div class="un-h2">
			<h2 id="b032">Unit Project</h2>
			</div>
			<video
			:src="resource.videoPathOne"
			webkit-playsinline="true"
			x-webkit-airplay="true"
			playsinline="true"
			x5-video-orientation="h5"
			x5-video-player-fullscreen="true"
			x5-playsinline=""
			controls
			controlslist="nodownload"
			class="w100 video"
			style="margin-top: 40px;"
			></video>
			<p>In the following job ads,there are some job vacancies from different companies.Read carefully
			and make a decision about the one you are going to apply for.First tell your partner the
			reason why that job interests you.Then work in pairs,role-playing the interviewer and the
			@@ -907,7 +2053,6 @@
			<p>1.Work with your partner and decide what questions you will ask during the
			interview.2.Complete the worksheet for the interviewer.</p>
			<audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
			style="margin-left: 10px" class="audio" @play="audioPlay"></audio>
			<p class="center"></p>
			<p><b>Role 2:Interviewee</b></p>
			<p>1.Make a list of the information which might be useful in the interview.2.Finish the
			@@ -935,30 +2080,76 @@
			<div class="padding-93">
			<div class="bodystyle">
			<p class="center"><b>Worksheet for the Interviewer</b></p>
			<div class="fieldset-5">
			<p class="left">Name:</p>
			<p class="left">Phone:</p>
			<p class="left">Email:</p>
			<p class="left">Work experience</p>
			<p><br /></p>
			<p class="left">Education</p>
			<p><br /></p>
			<p class="left">Skills</p>
			<p><br /></p>
			<p class="left">Other related information</p>
			<p><br /></p>
			</div>
			<p><b>Follow-up Email for the Interviewee</b></p>
			<table border="1" cellpadding="4" cellspacing="0" class="fz-14 fieldset-5 w100">
			<tr class="table-tr-bc">
			<td class="tl-cn ">
			<p class="table-p">
			Name:
			<input type="text" v-model="practicalThree[3].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p class="table-p">
			Phone:
			<input type="text" v-model="practicalThree[3].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p class="table-p">
			Email:
			<input type="text" v-model="practicalThree[3].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			</td>
			</tr>

			<tr class="table-tr-bc">
			<td class="tl-cn">
			<p class="table-p">Work experience</p>
			<textarea v-model="practicalThree[3].value[3].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="savePracticalThree"></textarea>
			</td>

			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<p class="table-p">Education</p>
			<textarea v-model="practicalThree[3].value[4].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="savePracticalThree"></textarea>
			</td>

			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<p class="table-p">Skills</p>
			<textarea v-model="practicalThree[3].value[5].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@input="savePracticalThree"></textarea>
			</td>

			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<p class="table-p">Other related information</p>
			<textarea v-model="practicalThree[3].value[6].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@change="setBookQuestion"></textarea>
			</td>
			</tr>
			</table>
			<p class="center"><b>Follow-up Email for the Interviewee</b></p>
			<div class="fieldset-4">
			<p class="left">From:</p>
			<p class="left">To:</p>
			<p class="left">Subject:</p>
			<p class="left">
			From:
			<input type="text" v-model="practicalThree[4].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p class="left">
			To:
			<input type="text" v-model="practicalThree[4].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p class="left">
			Subject:
			<input type="text" v-model="practicalThree[4].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p><br /></p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<textarea name="" id="" cols="30" rows="18" v-model="practicalThree[4].value[3].userAnswer" class="w100" @input="savePracticalThree"></textarea>
			</div>
			</div>
			</div>
			@@ -991,6 +2182,153 @@
			<p>I’m sure you’re still in research mode right now ...</p>
			<p>Please feel free to contact me if I can provide you with any further information.</p>
			</div>
			<div class="resource-primary-border" style="padding: 8px; margin: 5% 0%">
			<div class="banshi openImgBox">
			<div class="swiper-container swiper_ppt">
			<div class="swiper-wrapper">
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_01.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_02.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_03.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_04.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_05.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_06.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_07.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_08.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_09.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_10.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_11.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_12.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_13.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_14.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_15.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_16.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_17.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_18.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_19.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_20.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_21.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_22.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_23.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_24.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_25.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_26.png" />
			</div>
			</div>
			<div class="swiper-slide">
			<div class="imgBox" style="width: 100%; height: 100%">
			<img src="../../assets/images/ppt/ppt_27.png" />
			</div>
			</div>
			</div>
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
			<div class="pageBox"></div>
			</div>
			<!-- 显示当前页和总页数的元素 -->
			</div>
			</div>
			</div>
			</div>
			<div class="preface-bottom">
			@@ -1013,16 +2351,20 @@
			},
			data() {
			return {
			warmUp:[
			{
			isComplete:false,
			isShowAnswer:false,


			}
			],
			imgThirteen: require("../../assets/images/grammar8-1.png"),
			imgThirteenOne: require("../../assets/images/grammar8-2.png"),
			showAnswerOne: false,
			showAnswerTwo: false,
			showAnswerThree: false,
			showAnswerFour: false,
			showAnswerFive: false,
			correctIcon:require('@/assets/images/correct.svg'),
			errorIcon:require('@/assets/images/error.svg'),
			showImg: false,
			showImgOne: false,
			showQuestionAnswer: false,
			rawData: {
			left: [
			{
			@@ -1187,8 +2529,40 @@
			five: "",
			six: "",
			seven: "",
			enight: "",
			eight: "",
			nine: "",
			ten: "",
			eleven: "",
			twelve: "",
			thirteen: "",
			fourteen: "",
			fifteen: "",
			sixteen: "",
			seventeen: "",
			eighteen: "",
			nineteen: "",
			twenty: "",
			twentyOne: "",
			twentyTwo: "",
			twentyThree: "",
			twentyFour: "",
			twentyFive: "",
			twentySix: "",
			twentySeven: "",
			twentyEight: "",
			twentyNine: "",
			thirty: "",
			thirtyOne: "",
			thirtyTwo: "",
			thirtyThree: "",
			thirtyFour: "",
			thirtyFive: "",
			thirtySix: "",
			thirtySeven: "",
			thirtyEight: "",
			thirtyNine: "",
			forty: "",
			fortyOne: "",
			},
			},
			testData: {
			@@ -1245,15 +2619,9 @@
			listenOne: "",
			readingOne: "",
			readingTwo: "",
			videoPathOne:'',
			listenTwo:''
			},
			dropDownList: [
			"online shopping",
			"facial recognition",
			"electronic payment",
			"intercity train",
			"shared bike",
			"take-away service",
			],
			dropdownData: {
			one: {
			value: "",
			@@ -1286,85 +2654,651 @@
			answer: "facial recognition",
			},
			},

			listenThree:[
			{
			type:"fill",
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			answer:'clerk',
			userAnswer:'',
			isRight:null
			},
			{
			answer:'challenging',
			userAnswer:'',
			isRight:null
			},
			{
			answer:'numbers',
			userAnswer:'',
			isRight:null
			},
			{
			answer:'resume',
			userAnswer:'',
			isRight:null
			},
			{
			answer:'letter',
			userAnswer:'',
			isRight:null
			},
			]
			}
			],
			noSubmitThree:[
			{
			type:'table',
			value:[
			{
			answer:'Could you tell me a little bit about yourself?',
			userAnswer:'',
			isShowAnswer:false,
			},
			{
			answer:'Can you tell me about that job in detail?',
			userAnswer:''
			},
			{
			answer:'Why are you applying for this job then?',
			userAnswer:''
			},
			{
			answer: 'What are your strengths?',
			userAnswer:''
			},
			]
			},
			{
			type:'shortAnswer',
			value:[
			{
			answer:[
			'Ask for next steps and contact information',
			'Assess your interview performance',
			'Write down anything you want to remember',
			'Send a thank you note to the hiring manager',
			'Reference a current industry event in the news or literature',
			'Connect on social media business networking sites',
			'Send any supporting documents',
			'Contact your references',
			'Get comfortable with waiting'
			],
			userAnswer:'',
			isShowAnswer:false
			},
			{
			answer:'A follow-up email is a good way to show your interest in the position and, most important of all, your good manners. ',
			userAnswer:'',
			isShowAnswer:false
			},
			]
			}
			],
			practicalThree:[
			{
			type:"dropdown",
			isShowAnswer:false,
			isComplete:false,
			value:[
			{
			stemOne:'Subject: 1.',
			stemTwo:'',
			answer:'1. Thanks for meeting with me',
			userAnswer:'',
			option:[
			'1. Thanks for meeting with me',
			'2. I wish I could get the job'
			]
			},
			{
			stemOne:'2.',
			stemTwo:'Mr. Jin,',
			answer:'2. Dear',
			userAnswer:'',
			option:[
			'1. Hello',
			'2. Dear'
			]
			},
			{
			stemOne:'3.',
			stemTwo:'the talk earlier today. Our conversation about the Marketing Manager position was inspiring,and it was fantastic to learn more about the position.',
			answer:'2. We had great fun in',
			userAnswer:'',
			option:[
			'1. Thanks so much for',
			'2. We had great fun in'
			]
			},
			{
			stemOne:"The job sounds exciting, and I think I would be an ideal candidate thanks to 4.",
			stemTwo:'in the field.',
			answer:'1. my years of experience',
			userAnswer:'',
			option:[
			'1. my years of experience',
			"2. my friends' help"
			]
			},
			{
			stemOne:'5.',
			stemTwo:'.Thanks again for the opportunity.',
			answer:'1. Please contact me if you want to discuss further',
			userAnswer:'',
			option:[
			'1. Please contact me if you want to discuss further',
			"2. I have great confidence that I will get the job"
			]
			},
			]
			},
			{
			type:'fill',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			stem:'thank　for　me　meet　taking　the　time　to　with　yesterday　you',
			answer:'Thank you for taking the time to meet with me yesterday.',
			userAnswer:'',
			},
			{
			stem:'I　appreciate　interview　me　the　time　to　took　you',
			answer:'I appreciate the time you took to interview me.',
			userAnswer:'',
			},
			{
			stem:'I　about　am　excited　joining　of　possibility　the　very　you',
			answer:'I am very excited about the possibility of joining you.',
			userAnswer:'',
			},
			{
			stem:'I　about　enjoyed　position　speaking　the　today　with　you',
			answer:'I enjoyed speaking with you today about the position.',
			userAnswer:'',
			},
			{
			stem:'I　am　and　for　forward　from　hearing　in　interested　look　to　very　working　you　you',
			answer:'I am very interested in working for you and look forward to hearing from you.',
			userAnswer:'',
			},
			]
			},
			{
			type:'emial',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			]
			},
			{
			type:'table',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			]
			},
			{
			type:'emial',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			]
			},
			],
			noSubmitTwo:[
			{
			type:'table',
			value:[
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			{
			userAnswer:'',
			},
			]
			},
			{
			type:'shortAnswer',
			value:[
			{
			stem:'.Working hard is only the first part of success.Making good choices is the second part.It truly takes both to achieve success at whatever you do.What’s your interpretation of the sentence?',
			answer:[
			'In order to be happy, you need to love what you are doing in life. Choosing a career, here, plays an important role in determining the level of your achievements. If you land down with a career that does not suit your qualification and potential, then you will only be wasting your time and energy into something which is neither good for your career nor your life. Selecting a wrong career will hold you in an inappropriate situation which will not only affect your professional life but will have an adverse impact on your personal life too.'
			],
			userAnswer:'',
			isShowAnswer:false
			},
			{
			stem:'What’s your suggestion for making the “right” career choice?',
			answer:[
			'1) Be aware of how other factors influence you',
			'2) Never forget your strengths',
			'3) Volunteer in your possible professions',
			'4) Consider how you want your career to support you financially ',
			'5) Take your time — don’t feel like you have to rush the process',
			'6) Be patient with yourself, and keep in mind this is a challenging task',
			'7) Reflect on what subjects in high school you enjoyed',
			'8) Think about your dreams in life but try to understand why'
			],
			userAnswer:'',
			isShowAnswer:false
			},
			]
			},
			{
			type:'table',
			value:[
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			]
			}
			],
			dropTwo:[
			{
			type:'dropdown',
			isShowAnswer:false,
			option:[
			'identify passion','go to school'
			],
			value:[
			{
			answer:'identify passion',
			userAnswer:''
			},
			{
			answer:'go to school',
			userAnswer:''
			},
			]
			},
			{
			type:'dropdown',
			isComplete:false,
			option:[
			'change your mind',
			'get another job',
			'focus on one'
			],
			value:[
			{
			answer:'focus on one',
			userAnswer:''
			},
			{
			answer:'change your mind',
			userAnswer:''
			},
			{
			answer:'get another job',
			userAnswer:''
			},
			]
			}
			],
			listenTwo:[
			{
			type:'checkbox',
			isComplete:false,
			isShowAnswer:false,
			answer:['Experience','Happiness','Income','Satisfaction'],
			option:[
			'Education','Experience','Goals','Happiness','Interest','Satisfaction','Skills','Values'
			],
			value:[
			{
			userAnswer:[]
			}
			]
			},
			{
			type:"dropdown",
			isComplete:false,
			isShowAnswer:false,
			option:['T','F'],
			value:[
			{
			stem:'When we decide on our future career,satisfaction and happiness matter a lot.',
			answer:'T',
			userAnswer:'',
			isRight:null,
			},
			{
			stem:'Positive emotions make us more productive and satisfied in our jobs.',
			answer:'T',
			userAnswer:'',
			isRight:null,
			},
			{
			stem:'Our past experiences have nothing to do with our jobs in the future.',
			answer:'F',
			userAnswer:'',
			isRight:null,
			},
			{
			stem:'Our past experiences have nothing to do with our jobs in the future.',
			answer:'F',
			userAnswer:'',
			isRight:null,
			},
			{
			stem:'Luxuries will bring enjoyment to us,but that feeling cannot last forever.',
			answer:'T',
			userAnswer:'',
			isRight:null,
			},
			]
			},
			{
			type:'fill',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			stem:'Once you find a desired occupation,you’ll notice a change even in your daily life.',
			answer:'career',
			userAnswer:'',
			isRight:null,
			},
			{
			stem:'Only a small part of the budget is spent on books.',
			answer:'beneficial',
			userAnswer:'',
			isRight:null,
			},
			{
			stem:'Happiness itself can help to shape job market results and even firm performance.',
			answer:'outcomes',
			userAnswer:'',
			isRight:null,
			},
			{
			stem:'Those who are excited about numbers can work in the accounting field.',
			answer:'passionate',
			userAnswer:'',
			isRight:null,
			},
			{
			stem:'We need to leave our pleasant zone at work if we want growth opportunities.',
			answer:'comfortable',
			userAnswer:'',
			isRight:null,
			},
			]
			},
			{
			type:'fill',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{

			stemOne:'Keep your options open and everything will',
			stemTwo:'.',
			answer:'fall into place',
			userAnswer:'',
			isRight:null
			},
			{

			stemOne:'You’d better set a long-term goal that you can',
			stemTwo:'.',
			answer:'be passionate about',
			userAnswer:'',
			isRight:null
			},
			{

			stemOne:'Anyone hired into the company must',
			stemTwo:'the system.',
			answer:'be comfortable with',
			userAnswer:'',
			isRight:null
			},
			{

			stemOne:'You must accept',
			stemTwo:'the blame for this crisis.',
			answer:'a portion of',
			userAnswer:'',
			isRight:null
			},
			{

			stemOne:'the blame for this crisis.',
			stemTwo:'.',
			answer:'later on',
			userAnswer:'',
			isRight:null
			},
			]
			},
			{
			type:'fill',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{

			stemOne:'Although finding a new job might not be easy,there are many different methods to find',
			stemTwo:'effectively.',
			answer:'one',
			userAnswer:'',
			isRight:null
			},
			{

			stemOne:'As you make a decision about your career,',
			stemTwo:'is important to reflect on your interest,skills and career goals.',
			answer:'it',
			userAnswer:'',
			isRight:null
			},
			{

			stemOne:'People will usually set a milestone in their career path,',
			stemTwo:'that they will work for in the next five or ten years.',
			answer:'one',
			userAnswer:'',
			isRight:null
			},
			{

			stemOne:'A career aptitude test could be helpful,because',
			stemTwo:'will give you suggestions based on the test of your personal type.',
			answer:'it',
			userAnswer:'',
			isRight:null
			},
			{

			stemOne:'We all have to work,and for most of us,if you discount weekends and sleep,',
			stemTwo:'will take up at least half our available time.',
			answer:'it',
			userAnswer:'',
			isRight:null
			},
			]
			},
			]
			};
			},
			mounted() {
			const testData = localStorage.getItem("english-testOne");
			if (testData) {
			this.testData = JSON.parse(testData);
			}
			const bookQuestion = localStorage.getItem("english-book-question-one");
			if (bookQuestion) {
			this.questionData = JSON.parse(bookQuestion);
			}
			const dropdownData = localStorage.getItem("english-dropdown-one");
			if (dropdownData) {
			this.dropdownData = JSON.parse(dropdownData);
			}
			this.getPath();
			},
			mounted() {
			this.getPath();
			const listenThree = localStorage.getItem('english-chapter08-listenThree')
			if(listenThree) this.listenThree = JSON.parse(listenThree)
			const noSubmitThree = localStorage.getItem('english-chapter08-noSubmitThree')
			if(noSubmitThree) this.noSubmitThree = JSON.parse(noSubmitThree)
			const practicalThree = localStorage.getItem('english-chapter08-practicalThree')
			if(practicalThree) this.practicalThree = JSON.parse(practicalThree)
			const noSubmitTwo = localStorage.getItem('english-chapter08-noSubmitTwo')
			if(noSubmitTwo) this.noSubmitTwo = JSON.parse(noSubmitTwo)
			const dropTwo = localStorage.getItem('english-chapter08-dropTwo')
			if(dropTwo) this.dropTwo = JSON.parse(dropTwo)
			const listenTwo = localStorage.getItem('english-chapter08-listenTwo')
			if(listenTwo) this.listenTwo = JSON.parse(listenTwo)
			},
			methods: {
			arrayToString(data) {
			if(Array.isArray(data)) {
			return data.toString()
			} else {
			return data
			}
			},
			isTextRight(answer, data, num) {
			let flag = null;
			if (data) {
			flag = answer[num] == data
			} else {
			flag = false
			}
			return flag;
			},
			isShowRight(answer, userAnswer, data) {
			let flag = null;
			if (userAnswer.indexOf(data) > -1) {
			flag = answer.indexOf(data) > -1 ? true : false;
			} else {
			flag = false
			}
			return flag;
			},
			saveWord(event, word) {
			this.$emit("saveCharacters", event, word);
			},
			setTestData() {
			localStorage.setItem("english-testOne", JSON.stringify(this.testData));
			},
			changeTestData() {
			localStorage.removeItem("english-testOne");
			this.testData = {
			check: {
			isRight: null,
			answer: ["Culture", "Cuisine", "Landscapes"],
			value: []
			},
			tx: {
			one: "",
			two: "",
			three: "",
			four: "",
			five: "",
			},
			in: {
			one: "",
			two: "",
			three: "",
			four: "",
			five: "",
			isRight: null,
			answer: ['uisine', 'andscapes', 'ivilization', 'xplore', 'nique']
			},
			line: {
			one: "",
			two: "",
			three: "",
			four: "",
			five: "",
			},
			ts: {
			one: "",
			two: "",
			three: "",
			four: "",
			},
			gr: {
			one: "",
			two: "",
			three: "",
			four: "",
			five: "",
			},
			cm: {
			one: "",
			two: "",
			three: "",
			four: "",
			five: "",
			},
			};
			},
			setBookQuestion() {
			console.log("保存");
			localStorage.setItem(
			"english-book-question-one",
			JSON.stringify(this.questionData)
			@@ -1380,6 +3314,13 @@
			this.resource.readingTwo = await getResourcePath(
			"E8719EC88026BCFB11D292AA999F6D3D"
			);
			this.resource.listenTwo = await getResourcePath(
			"ADAFFAB7BC7A868574889809AB1166A6"
			);
			this.resource.videoPathOne = await getResourcePath(
			"29A9C275EEF0BF71C52BE68D8842C0E4"
			);

			},
			showAnswer(type) {
			if (type == "showImg") {
			@@ -1389,95 +3330,107 @@
			}
			setTimeout(() => { this.$emit("initViewer", "") }, 500)
			},
			handleQuestion(type) {
			if (type == "one") {
			this.questionData.warnUp.one.value
			? (this.questionData.warnUp.one.isRight =
			this.questionData.warnUp.one.value == "Chinese knot")
			: (this.questionData.warnUp.one.isRight = null);
			} else if (type == "two") {
			this.questionData.warnUp.two.value
			? (this.questionData.warnUp.two.isRight =
			this.questionData.warnUp.two.value == "Chinese medicine")
			: (this.questionData.warnUp.two.isRight = null);
			} else if (type == "three") {
			this.questionData.warnUp.three.value
			? (this.questionData.warnUp.three.isRight =
			this.questionData.warnUp.three.value == "Chinese calligraphy")
			: (this.questionData.warnUp.three.isRight = null);
			} else if (type == "four") {
			this.questionData.warnUp.four.value
			? (this.questionData.warnUp.four.isRight =
			this.questionData.warnUp.four.value == "Taichi")
			: (this.questionData.warnUp.four.isRight = null);
			} else if (type == "five") {
			this.questionData.warnUp.five.value
			? (this.questionData.warnUp.five.isRight =
			this.questionData.warnUp.five.value == "sweet dumpling")
			: (this.questionData.warnUp.five.isRight = null);
			} else if (type == "six") {
			this.questionData.warnUp.six.value
			? (this.questionData.warnUp.six.isRight =
			this.questionData.warnUp.six.value == "Chinese chess")
			: (this.questionData.warnUp.six.isRight = null);
			}
			saveListenThree() {
			localStorage.setItem('english-chapter08-listenThree',JSON.stringify(this.listenThree))
			},
			handleDropdown(type) {
			const dropdownDatas = this.dropdownData;
			for (let key in dropdownDatas) {
			const item = dropdownDatas[key];
			if (type == "judge") {
			item.value == item.answer
			? (item.isRight = true)
			: (item.isRight = false);
			console.log(item.value, item.answer);
			handleListenThree() {
			for (let index = 0; index < this.listenThree.length; index++) {
			const item = this.listenThree[index];
			item.isComplete = true
			item.isShowAnswer = true
			for (let cindex = 0; cindex < item.value.length; cindex++) {
			const citem = item.value[cindex];
			citem.isRight = citem.userAnswer == citem.answer
			}
			}
			this.dropdownData = dropdownDatas;
			this.saveListenThree()
			},
			changeDropdown() {
			localStorage.removeItem("english-dropdown-one");
			for (let key in this.dropdownData) {
			const item = this.dropdownData[key];
			item.value = "";
			item.isRight = null;
			}
			},
			setDropdownData() {
			localStorage.setItem(
			"english-dropdown-one",
			JSON.stringify(this.dropdownData)
			);
			},
			saveData() {
			const item = this.testData['check']
			const sortedArr1 = item.answer.slice().sort();
			const sortedArr2 = item.value.slice().sort();
			const isRight = sortedArr1.every(
			(value, index) => value === sortedArr2[index]
			);
			const inData = this.testData['in']
			let inString = []
			for (let key in inData) {
			const citem = inData[key];
			if (key != 'answer' && key !== 'isRight') {
			console.log(key);
			inString.push(citem)
			recastListenThree() {
			for (let index = 0; index < this.listenThree.length; index++) {
			const item = this.listenThree[index];
			item.isComplete = false
			item.isShowAnswer = false
			for (let cindex = 0; cindex < item.value.length; cindex++) {
			const citem = item.value[cindex];
			citem.isRight = null
			citem.userAnswer = ''
			}


			}
			const inRight = inData.answer == inString
			console.log('in', inData.answer, inString);
			this.$set(this.testData['in'], 'isRight', inRight)
			this.$set(this.testData['check'], 'isRight', isRight)
			this.setTestData()
			console.log(this.testData);

			localStorage.removeItem('english-chapter08-listenThree')
			},
			audioPlay() {
			this.$emit("closeMiniAudio");
			viewListenThree() {
			for (let index = 0; index < this.listenThree.length; index++) {
			const item = this.listenThree[index];
			item.isShowAnswer = !item.isShowAnswer
			}
			},
			saveNoSubmitThree() {
			localStorage.setItem('english-chapter08-noSubmitThree',JSON.stringify(this.noSubmitThree))
			},
			showNoSubmitThree(index,num) {
			this.$set(this.noSubmitThree[index].value[num],'isShowAnswer',!this.noSubmitThree[index].value[num].isShowAnswer)
			},
			savePracticalThree() {
			localStorage.setItem('english-chapter08-practicalThree',JSON.stringify(this.practicalThree))
			},
			handlePracticalThree(index,num) {
			this.$set(this.practicalThree[index].value[num],'isRight',this.practicalThree[index].value[num].userAnswer == this.practicalThree[index].value[num].answer)
			this.savePracticalThree()
			},
			showPracticalThree(index) {
			this.$set(this.practicalThree[index],'isShowAnswer',!this.practicalThree[index].isShowAnswer)
			},
			saveNoSubmitTWo() {
			localStorage.setItem('english-chapter08-noSubmitTwo',JSON.stringify(this.noSubmitTwo))
			},
			showNoSubmitTWo(index,num) {
			this.$set(this.noSubmitTwo[index].value[num],'isShowAnswer',!this.noSubmitTwo[index].value[num].isShowAnswer)
			},
			saveDropTwo() {
			localStorage.setItem('english-chapter08-dropTwo',JSON.stringify(this.dropTwo))
			},
			handleDropTwo(index,num) {
			this.$set(this.dropTwo[index].value[num],'isRight',this.dropTwo[index].value[num].userAnswer == this.dropTwo[index].value[num].answer)
			this.saveDropTwo()
			},
			saveListenTwo() {
			localStorage.setItem('english-chapter08-listenTwo',JSON.stringify(this.listenTwo))
			},
			handleListenTwo() {
			for (let index = 0; index < this.listenTwo.length; index++) {
			const item = this.listenTwo[index];
			item.isComplete = true
			item.isShowAnswer = true
			if(item.type !== 'checkbox') {
			for (let cindex = 0; cindex < item.value.length; cindex++) {
			const citem = item.value[cindex];
			citem.isRight = citem.userAnswer == citem.answer
			}
			}
			}
			this.saveListenTwo()
			},
			recastListenTwo() {
			for (let index = 0; index < this.listenTwo.length; index++) {
			const item = this.listenTwo[index];
			item.isComplete = false
			item.isShowAnswer = false
			if(item.type !== 'checkbox') {
			for (let cindex = 0; cindex < item.value.length; cindex++) {
			const citem = item.value[cindex];
			citem.isRight = null
			citem.userAnswer = null
			}
			}
			}
			localStorage.removeItem('english-chapter08-listenTwo')
			},
			viewListenTwo() {
			for (let index = 0; index < this.listenTwo.length; index++) {
			const item = this.listenTwo[index];
			item.isShowAnswer = !item.isShowAnswer
			}
			}
			},
			};
			</script>
			@@ -1565,4 +3518,36 @@
			outline: none;
			}
			}
			.finish-box {
			border:2px dashed #d1d2d4;
			border-radius:3%;
			}
			.po-re {
			position: relative;
			}
			.reality-one,.reality-two,.reality-three {
			width:18%;
			height:7%;
			select {
			width:100%;
			height:100%;
			}
			}
			.reality-one {

			position:absolute;
			right: 30%;
			top: 30%;

			}
			.reality-two {
			position:absolute;
			right: 50%;
			top: 47%;
			}
			.reality-three {
			position:absolute;
			right: 44%;
			bottom: 6.5%;
			}
			</style>