testbookLayout.git

			@@ -41,36 +41,13 @@
			</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>
			<input type="text" class="input-bottom-border w50"
			v-model="warmUp[0].value[0].userAnswer" @input="setWarmUp"
			@blur="handleWarmUp(0)" />
			<img :src="warmUp[0].value[0].isRight ? correctIcon : errorIcon"
			v-if="warmUp[0].value[0].isRight == true \|\| warmUp[0].value[0].isRight == false">
			</p>
			</div>
			<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>
			@@ -79,36 +56,13 @@
			</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>
			<input type="text" class="input-bottom-border w50"
			v-model="warmUp[0].value[1].userAnswer" @input="setWarmUp"
			@blur="handleWarmUp(1)" />
			<img :src="warmUp[0].value[1].isRight ? correctIcon : errorIcon"
			v-if="warmUp[0].value[1].isRight == true \|\| warmUp[0].value[1].isRight == false">
			</p>
			</div>
			<p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
			答案：online shopping
			</p>
			</div>
			</div>

			@@ -120,36 +74,14 @@
			</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>
			<input type="text" class="input-bottom-border w50"
			v-model="warmUp[0].value[2].userAnswer" @input="setWarmUp"
			@blur="handleWarmUp(2)" />
			<img :src="warmUp[0].value[2].isRight ? correctIcon : errorIcon"
			v-if="warmUp[0].value[2].isRight == true \|\| warmUp[0].value[2].isRight == false">
			</p>
			</div>
			<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>
			@@ -158,36 +90,14 @@
			</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>
			<input type="text" class="input-bottom-border w50"
			v-model="warmUp[0].value[3].userAnswer" @input="setWarmUp"
			@blur="handleWarmUp(3)" />
			<img :src="warmUp[0].value[3].isRight ? correctIcon : errorIcon"
			v-if="warmUp[0].value[3].isRight == true \|\| warmUp[0].value[3].isRight == false">
			</p>
			</div>
			<p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
			答案：shared bike
			</p>

			</div>
			</div>

			@@ -199,36 +109,14 @@
			</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>
			<input type="text" class="input-bottom-border w50"
			v-model="warmUp[0].value[4].userAnswer" @input="setWarmUp"
			@blur="handleWarmUp(4)" />
			<img :src="warmUp[0].value[4].isRight ? correctIcon : errorIcon"
			v-if="warmUp[0].value[4].isRight == true \|\| warmUp[0].value[4].isRight == false">
			</p>
			</div>
			<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>
			@@ -237,42 +125,40 @@
			</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>
			<input type="text" class="input-bottom-border w50"
			v-model="warmUp[0].value[5].userAnswer" @input="setWarmUp"
			@blur="handleWarmUp(5)" />
			<img :src="warmUp[0].value[5].isRight ? correctIcon : errorIcon"
			v-if="warmUp[0].value[5].isRight == true \|\| warmUp[0].value[5].isRight == false">
			</p>
			</div>
			<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>
			<p><b>Ⅱ.What other jobs can you list?</b>
			<span class="btn-box" @click="showAnswerOne = !showAnswerOne">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
			viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<p>
			<textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
			style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
			</textarea>
			</p>
			<div class="show-answer-box" v-if="showAnswerOne">
			<div>答案:</div>
			<div>
			<img src="../../assets/images/M8WarmUp.png" alt="" class="w100" />
			</div>
			</div>
			</div>

			</div>
			<div class="preface-bottom">
			<span class="contet-num-box">136</span>
			@@ -294,10 +180,22 @@
			<!-- 内容 -->
			<div class="padding-93">
			<div class="bodystyle">
			<h3 id="c065"><span class="bjh3">Listening</span></h3>
			<p class="center"> <audio :src="resource.listenOne" controls
			controlslist="noplaybackrate nodownload" class="audio" ></audio></p>
			<p><b>Watch the video and find out how the speakers describe their jobs.</b></p>
			<h3 id="c065" class="fl al-cn">
			<span class="bjh3">Listening</span>
			<!--controlslist="noplaybackrate nodownload"后面的音频框加入这个-->
			<audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
			class="audio"></audio>
			</h3>
			<p><b>Watch the video and find out how the speakers describe their jobs.</b>
			<span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
			viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
			<tr class="table-th-bc">
			<td class="tl-cn">Who is he/she?</td>
			@@ -355,13 +253,60 @@
			</td>
			</tr>
			</table>
			<div class="show-answer-box" v-if="showAnswerTwo">
			<div>答案:</div>
			<div>
			<img src="../../assets/images/M8ListeningOne.png" alt="" class="w100" />
			</div>
			</div>
			<h3 id="c066"><span class="bjh3">Reading</span></h3>
			<p>1.There is a saying that a part-time job can be a way to gain the experience necessary for
			full-time employment.Do you agree? Why or why not?</p>
			<p>2.If you’re considering a part-time job,what’s your expectation of it?</p>
			<p class="center">__________________</p>
			full-time employment.Do you agree? Why or why not?
			<span class="btn-box" @click="showAnswerThree = !showAnswerThree">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
			viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<p>
			<textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
			style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
			</textarea>
			</p>
			<p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
			答案：(1).Gain confidence and responsibility   (2).Explore alternate career options   (3).Strengthen resume
			(4).Develop work ethic skills   (5).Create opportunities for socializing   (6).Enhance communication skills
			(7).Build networking opportunities   (8).Gain independence   (9).Get a stable cash flow   (10).Learn money management skills
			</p>
			<p>2.If you’re considering a part-time job,what’s your expectation of it?
			<span class="btn-box" @click="showAnswerFour = !showAnswerFour">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501"
			viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<p>
			<textarea v-model="questionData.reading.three" placeholder="请输入内容" rows="6"
			style=" width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
			</textarea>
			</p>
			<p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
			答案：(1).a good salary   (2).a regular working time   (3).a friendly working team
			(4).comfortable working environment

			</p>
			<p class="center">
			<input type="text" class="input-bottom-border input-bc-t " style="width: 30%;"
			v-model="questionData.reading.four" @change="setBookQuestion" />
			</p>
			<p class="center"> <audio :src="resource.listenOne" controls
			controlslist="noplaybackrate nodownload" class="audio" ></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>
			@@ -437,9 +382,9 @@
			<span class="zt-cs" style="font-size: 20px">Words & Expressions</span>
			<span class="line-border-box"></span>
			</p>
			<p class="center"><audio :src="resource.readingTwo" controls
			controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
			></audio></p>
			<p><audio :src="resource.readingTwo" controls
			controlslist="noplaybackrate nodownload" style="margin-left: 10px"
			class="audio"></audio></p>
			<p>fulfill /fʊlˈfɪl/ <i>v.</i> 符合；履行</p>
			<div class="bkbj">
			<p><i>to do or have what is required or necessary</i></p>
			@@ -1094,8 +1039,8 @@
			<p>2.What’s your suggestion for making the “right” career choice?</p>
			<p class="center"><b>Choose a Career You Love</b></p>
			<p class="center"><audio :src="resource.readingTwo" controls
			controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
			></audio></p>
			controlslist="noplaybackrate nodownload" style="margin-left: 10px"
			class="audio"></audio></p>
			<p>We spend a large
			<span class="word-bc" @click="saveWord($event, 'portion')">portion</span>
			of our lives working,so how we spend those years matters.It is
			@@ -1177,7 +1122,7 @@
			<span class="line-border-box"></span>
			</p>
			<audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
			style="margin-left: 10px" class="audio" ></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>
			@@ -1607,16 +1552,51 @@
			<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"
			></audio></p>
			controlslist="noplaybackrate nodownload" style="margin-left: 10px"
			class="audio"></audio></p>
			<p><b>Ⅰ.Derek is talking about his job interview.Listen to the recording and fill in the blanks
			with what you hear.</b></p>
			<p>Hi,everyone.I’m Derek Cruise.I landed a job interview the other day.It is a bank
			1._________that I’ve wanted for a long time.I’m excited you know.The job is quite
			2._________and I love to play with 3._________.I prepared my 4._________,and bought a
			suit.My friend reminded me that I should send a follow-up 5._________after the interview.But
			1.
			<input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px">
			<img :src="listenThree[0].value[0].isRight ? correctIcon : errorIcon" v-if="listenThree[0].isComplete">
			that I’ve wanted for a long time.I’m excited you know.The job is quite
			2.
			<input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px">
			<img :src="listenThree[0].value[1].isRight ? correctIcon : errorIcon" v-if="listenThree[0].isComplete">
			and I love to play with 3.
			<input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px">
			<img :src="listenThree[0].value[2].isRight ? correctIcon : errorIcon" v-if="listenThree[0].isComplete">
			.I prepared my 4.
			<input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[3].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px">
			<img :src="listenThree[0].value[3].isRight ? correctIcon : errorIcon" v-if="listenThree[0].isComplete">
			,and bought a
			suit.My friend reminded me that I should send a follow-up 5.
			<input type="text" :disabled="listenThree[0].isComplete" v-model="listenThree[0].value[4].userAnswer" class="input-bottom-border input-bc-t" @input="saveListenThree" style="width:80px">
			<img :src="listenThree[0].value[4].isRight ? correctIcon : errorIcon" v-if="listenThree[0].isComplete">
			after the interview.But
			I feel worried about writing the letter,for I know little about it.Anyway,I am
			well-prepared,I guess.Now all I’ve got to do is to take that job.Wish me good luck!</p>
			well-prepared,I guess.Now all I’ve got to do is to take that job.Wish me good luck!
			</p>
			<div class="w100 fl ju-cn">
			<ul class="fl ju-ev" style="width:80%">
			<li>
			<button class="btn-border btn-w" @click="handleListenThree">
			提交
			</button>
			</li>
			<li>
			<button @click="recastListenThree" class="btn-border btn-w">
			重做
			</button>
			</li>
			<li>
			<button @click="viewListenThree" class="parimary-btn">
			查看答案
			</button>
			</li>
			</ul>
			</div>
			</div>
			</div>
			<div class="preface-bottom">
			@@ -1639,8 +1619,19 @@
			<!-- 内容 -->
			<div class="padding-93">
			<div class="bodystyle">
			<p><b>Ⅱ.Susan is interviewing the candidate Derek.Listen to the conversation and write down
			Susan's questions.</b></p>
			<p>
			<b>
			Ⅱ.Susan is interviewing the candidate Derek.Listen to the conversation and write down
			Susan's questions.
			</b>
			<span class="btn-box" @click="showNoSubmitThree(0,0)">
			<svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
			<path class="a"
			d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
			transform="translate(-3327.144 15329)" />
			</svg>
			</span>
			</p>
			<table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
			<tr class="table-th-bc">
			<td class="tl-cn wh-no">Susan's Questions</td>
			@@ -1649,9 +1640,9 @@

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

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

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

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

			</tr>
			<tr class="table-tr-bc">
			<td class="tl-cn">
			<p class="table-p">Other related information</p>
			<textarea v-model="questionData.table.fortyOne"
			<textarea v-model="practicalThree[3].value[6].userAnswer"
			class="w100 table-tr-bc b0 table-textarea "
			@change="setBookQuestion"></textarea>
			</td>
			@@ -1879,15 +1975,20 @@
			</table>
			<p class="center"><b>Follow-up Email for the Interviewee</b></p>
			<div class="fieldset-4">
			<p class="left">From:</p>
			<p class="left">To:</p>
			<p class="left">Subject:</p>
			<p class="left">
			From:
			<input type="text" v-model="practicalThree[4].value[0].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p class="left">
			To:
			<input type="text" v-model="practicalThree[4].value[1].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p class="left">
			Subject:
			<input type="text" v-model="practicalThree[4].value[2].userAnswer" class="input-bottom-border input-bc-t" @input="savePracticalThree" >
			</p>
			<p><br /></p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<p class="left">____________________________________________</p>
			<textarea name="" id="" cols="30" rows="18" v-model="practicalThree[4].value[3].userAnswer" class="w100" @input="savePracticalThree"></textarea>
			</div>
			</div>
			</div>
			@@ -2089,16 +2190,187 @@
			},
			data() {
			return {
			warmUp:[
			warmUp: [
			{
			type: "fill",
			isShowAnswer: false,
			value: [
			{
			answer: 'fitness coach',
			userAnswer: '',
			isRight: null
			},
			{
			answer: 'courier',
			userAnswer: '',
			isRight: null
			},
			{
			answer: 'flight attendant',
			userAnswer: '',
			isRight: null
			},
			{
			answer: 'sales representative',
			userAnswer: '',
			isRight: null
			},
			{
			answer: 'cyberathlete',
			userAnswer: '',
			isRight: null
			},
			{
			answer: 'machinist',
			userAnswer: '',
			isRight: null
			},
			]
			},
			],
			questionDataOn:[
			{
			type:"fill",
			isComplete:false,
			isShowAnswer:false,


			}
			value:[
			{
			stem:"What job did the author take?",
			answer:"Pulling out weeds",
			userAnswer:"",
			},
			{
			stem:"How did he describe his job?",
			answer:"Tedious",
			userAnswer:"",
			},
			{
			stem:"What can be a proper title for this passage?",
			answer:"My first job",
			userAnswer:"",
			},
			]
			},
			{
			type:"fill",
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			userAnswer:"",
			},
			{
			userAnswer:"",
			},
			{
			userAnswer:"",
			},
			{
			userAnswer:"",
			},
			{
			userAnswer:"",
			},
			]
			},
			{
			type:"fill",
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			answer:"I wanted to buy a new speed cube, but I did not have any money, and my parents would not give me the money.",
			userAnswer:"",
			},
			{
			answer:"The experience is burned in one's memory, it gives you the practice needed to fulfill other positions, and it teaches you about the value of money.",
			userAnswer:"",
			},
			{
			answer:"The experience hardened my spirits and resolve and supplied me with the value of money.",
			userAnswer:"",
			},
			{
			answer:"I went to Mrs. Hudson, and asked her for the work to tend her garden.",
			userAnswer:"",
			},
			{
			answer:"My first job was to pull out weeds.",
			userAnswer:"",
			},
			]
			},
			{
			type:"fill",
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			answer:"couple",
			userAnswer:"",
			},
			{
			answer:"elderly",
			userAnswer:"",
			},
			{
			answer:"neighborhood",
			userAnswer:"",
			},
			{
			answer:"tedious",
			userAnswer:"",
			},
			{
			answer:"value",
			userAnswer:"",
			},
			{
			answer:"sweat",
			userAnswer:"",
			},
			]
			},
			{
			type:"fill",
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			answer:"couple",
			userAnswer:"",
			},
			{
			answer:"elderly",
			userAnswer:"",
			},
			{
			answer:"neighborhood",
			userAnswer:"",
			},
			{
			answer:"tedious",
			userAnswer:"",
			},
			{
			answer:"value",
			userAnswer:"",
			},
			{
			answer:"sweat",
			userAnswer:"",
			},
			]
			},
			],
			showAnswerOne: false,
			showAnswerTwo: false,
			showAnswerThree: false,
			showAnswerFour: false,
			imgThirteen: require("../../assets/images/grammar8-1.png"),
			imgThirteenOne: require("../../assets/images/grammar8-2.png"),
			correctIcon: require('@/assets/images/correct.svg'),
			errorIcon: require('@/assets/images/error.svg'),
			showImg: false,
			showImgOne: false,
			rawData: {
			@@ -2220,42 +2492,17 @@
			answerImg: require("../../assets/images/matching-one.png"),
			},
			questionData: {
			warnUp: {
			one: {
			value: "",
			isRight: null,
			answer: "Chinese knot",
			},
			two: {
			value: "",
			isRight: null,
			answer: "Chinese medicine",
			},
			three: {
			value: "",
			isRight: null,
			answer: "Chinese calligraphy",
			},
			four: {
			value: "",
			isRight: null,
			answer: "Taichi",
			},
			five: {
			value: "",
			isRight: null,
			answer: "sweet dumpling",
			},
			six: {
			value: "",
			isRight: null,
			answer: "Chinese chess",
			},
			seven: "",
			},
			reading: {
			one: "",
			two: "",
			three: "",
			four: "",
			five: "",
			six: "",
			seven: "",
			eight: "",
			nine: "",
			ten: "",
			},
			table: {
			one: "",
			@@ -2355,6 +2602,7 @@
			listenOne: "",
			readingOne: "",
			readingTwo: "",
			videoPathOne:''
			},
			dropdownData: {
			one: {
			@@ -2388,15 +2636,282 @@
			answer: "facial recognition",
			},
			},

			listenThree:[
			{
			type: "fill",
			isComplete: false,
			isShowAnswer: false,
			value: [
			{
			answer:'clerk',
			userAnswer:'',
			isRight:null
			},
			{
			answer:'challenging',
			userAnswer:'',
			isRight:null
			},
			{
			answer:'numbers',
			userAnswer:'',
			isRight:null
			},
			{
			answer:'resume',
			userAnswer:'',
			isRight:null
			},
			{
			answer:'letter',
			userAnswer:'',
			isRight:null
			},
			]
			}
			],
			noSubmitThree:[
			{
			type:'table',
			value:[
			{
			answer:'Could you tell me a little bit about yourself?',
			userAnswer:'',
			isShowAnswer:false,
			},
			{
			answer:'Can you tell me about that job in detail?',
			userAnswer:''
			},
			{
			answer:'Why are you applying for this job then?',
			userAnswer:''
			},
			{
			answer: 'What are your strengths?',
			userAnswer:''
			},
			]
			},
			{
			type:'shortAnswer',
			value:[
			{
			answer:[
			'Ask for next steps and contact information',
			'Assess your interview performance',
			'Write down anything you want to remember',
			'Send a thank you note to the hiring manager',
			'Reference a current industry event in the news or literature',
			'Connect on social media business networking sites',
			'Send any supporting documents',
			'Contact your references',
			'Get comfortable with waiting'
			],
			userAnswer:'',
			isShowAnswer:false
			},
			{
			answer:'A follow-up email is a good way to show your interest in the position and, most important of all, your good manners. ',
			userAnswer:'',
			isShowAnswer:false
			},
			]
			}
			],
			practicalThree:[
			{
			type:"dropdown",
			isShowAnswer:false,
			isComplete:false,
			value:[
			{
			stemOne:'Subject: 1.',
			stemTwo:'',
			answer:'1. Thanks for meeting with me',
			userAnswer:'',
			option:[
			'1. Thanks for meeting with me',
			'2. I wish I could get the job'
			]
			},
			{
			stemOne:'2.',
			stemTwo:'Mr. Jin,',
			answer:'2. Dear',
			userAnswer:'',
			option:[
			'1. Hello',
			'2. Dear'
			]
			},
			{
			stemOne:'3.',
			stemTwo:'the talk earlier today. Our conversation about the Marketing Manager position was inspiring,and it was fantastic to learn more about the position.',
			answer:'2. We had great fun in',
			userAnswer:'',
			option:[
			'1. Thanks so much for',
			'2. We had great fun in'
			]
			},
			{
			stemOne:"The job sounds exciting, and I think I would be an ideal candidate thanks to 4.",
			stemTwo:'in the field.',
			answer:'1. my years of experience',
			userAnswer:'',
			option:[
			'1. my years of experience',
			"2. my friends' help"
			]
			},
			{
			stemOne:'5.',
			stemTwo:'.Thanks again for the opportunity.',
			answer:'1. Please contact me if you want to discuss further',
			userAnswer:'',
			option:[
			'1. Please contact me if you want to discuss further',
			"2. I have great confidence that I will get the job"
			]
			},
			]
			},
			{
			type:'fill',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			stem:'thank　for　me　meet　taking　the　time　to　with　yesterday　you',
			answer:'Thank you for taking the time to meet with me yesterday.',
			userAnswer:'',
			},
			{
			stem:'I　appreciate　interview　me　the　time　to　took　you',
			answer:'I appreciate the time you took to interview me.',
			userAnswer:'',
			},
			{
			stem:'I　about　am　excited　joining　of　possibility　the　very　you',
			answer:'I am very excited about the possibility of joining you.',
			userAnswer:'',
			},
			{
			stem:'I　about　enjoyed　position　speaking　the　today　with　you',
			answer:'I enjoyed speaking with you today about the position.',
			userAnswer:'',
			},
			{
			stem:'I　am　and　for　forward　from　hearing　in　interested　look　to　very　working　you　you',
			answer:'I am very interested in working for you and look forward to hearing from you.',
			userAnswer:'',
			},
			]
			},
			{
			type:'emial',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			]
			},
			{
			type:'table',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			]
			},
			{
			type:'emial',
			isComplete:false,
			isShowAnswer:false,
			value:[
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			{
			userAnswer:''
			},
			]
			},
			],

			};
			},
			mounted() {
			const warmUp = localStorage.getItem("english-chapter-8-warmUp");
			if (warmUp) {
			this.warmUp = JSON.parse(warmUp);
			}
			const bookQuestion = localStorage.getItem("english-book-chapter08-question-one");
			if (bookQuestion) {
			this.questionData = JSON.parse(bookQuestion);
			}
			this.getPath();
			},
			methods: {
			handleWarmUp(type) {
			if (this.warmUp[0].value[type].userAnswer.trim()) {
			this.warmUp[0].value[type].isRight = this.warmUp[0].value[type].userAnswer.trim() == this.warmUp[0].value[type].answer
			} else {
			this.warmUp[0].value[type].isRight = null
			}
			this.setWarmUp();
			},
			setWarmUp() {
			localStorage.setItem("english-chapter-8-warmUp", JSON.stringify(this.warmUp));
			},
			setBookQuestion() {
			localStorage.setItem(
			"english-book-chapter08-question-one",
			JSON.stringify(this.questionData)
			);
			},
			arrayToString(data) {
			if(Array.isArray(data)) {
			return data.toString()
			if (Array.isArray(data)) {
			return data.toString()
			} else {
			return data
			}
			@@ -2425,12 +2940,6 @@
			setTestData() {
			localStorage.setItem("english-testOne", JSON.stringify(this.testData));
			},
			setBookQuestion() {
			localStorage.setItem(
			"english-book-question-one",
			JSON.stringify(this.questionData)
			);
			},
			async getPath() {
			this.resource.listenOne = await getResourcePath(
			"422139A2EF66EA888C5ED1D550AE23E0"
			@@ -2441,6 +2950,10 @@
			this.resource.readingTwo = await getResourcePath(
			"E8719EC88026BCFB11D292AA999F6D3D"
			);
			this.resource.videoPathOne = await getResourcePath(
			"29A9C275EEF0BF71C52BE68D8842C0E4"
			);

			},
			showAnswer(type) {
			if (type == "showImg") {
			@@ -2450,6 +2963,56 @@
			}
			setTimeout(() => { this.$emit("initViewer", "") }, 500)
			},
			saveListenThree() {
			localStorage.setItem('english-chapter08-listenThree',JSON.stringify(this.listenThree))
			},
			handleListenThree() {
			for (let index = 0; index < this.listenThree.length; index++) {
			const item = this.listenThree[index];
			item.isComplete = true
			item.isShowAnswer = true
			for (let cindex = 0; cindex < item.value.length; cindex++) {
			const citem = item.value[cindex];
			citem.isRight = citem.userAnswer == citem.answer
			}
			}
			this.saveListenThree()
			},
			recastListenThree() {
			for (let index = 0; index < this.listenThree.length; index++) {
			const item = this.listenThree[index];
			item.isComplete = false
			item.isShowAnswer = false
			for (let cindex = 0; cindex < item.value.length; cindex++) {
			const citem = item.value[cindex];
			citem.isRight = null
			citem.userAnswer = ''
			}
			}
			localStorage.removeItem('english-chapter08-listenThree')
			},
			viewListenThree() {
			for (let index = 0; index < this.listenThree.length; index++) {
			const item = this.listenThree[index];
			item.isShowAnswer = !item.isShowAnswer
			}
			},
			saveNoSubmitThree() {
			localStorage.setItem('english-chapter08-noSubmitThree',JSON.stringify(this.noSubmitThree))
			},
			showNoSubmitThree(index,num) {
			this.$set(this.noSubmitThree[index].value[num],'isShowAnswer',!this.noSubmitThree[index].value[num].isShowAnswer)
			},
			savePracticalThree() {
			localStorage.setItem('english-chapter08-practicalThree',JSON.stringify(this.practicalThree))
			},
			handlePracticalThree(index,num) {
			this.$set(this.practicalThree[index].value[num],'isRight',this.practicalThree[index].value[num].userAnswer == this.practicalThree[index].value[num].answer)
			this.savePracticalThree()
			},
			showPracticalThree(index) {
			this.$set(this.practicalThree[index],'isShowAnswer',!this.practicalThree[index].isShowAnswer)
			}
			},
			};
			</script>
			@@ -2537,4 +3100,8 @@
			outline: none;
			}
			}
			.finish-box {
			border:2px dashed #d1d2d4;
			border-radius:3%;
			}
			</style>