From b6fc22b827b2e6bce94067f6934d835a58502e99 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期四, 23 一月 2025 15:46:07 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/toddlerGameImplementation/view/components/chapter001.vue | 397 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 324 insertions(+), 73 deletions(-)
diff --git a/src/books/toddlerGameImplementation/view/components/chapter001.vue b/src/books/toddlerGameImplementation/view/components/chapter001.vue
index ffd5a44..3184b7e 100644
--- a/src/books/toddlerGameImplementation/view/components/chapter001.vue
+++ b/src/books/toddlerGameImplementation/view/components/chapter001.vue
@@ -4,19 +4,18 @@
<div class="page-box" page="8">
<div v-if="showPageList.indexOf(8) > -1">
<div style="display: flex;">
- <div style="background-color: #c6eafa;">
- <p><br></p>
- <!-- <p><img class="rwmb-1" alt="" src="../../assets/images/xxdt.png" /></p> -->
+ <div class="img-0">
+ <img alt="" src="../../assets/images/mk.png" class="img-0" style="height: 100%;" />
</div>
- <div class="" style="padding: 15% 0;">
- <h1 id="a008">瀛︿範妯″潡涓�</h1>
+ <div class="" style="margin:0 10% 0 2%; padding: 10% 0 22% 0;">
+ <h1 id="a008" class="ta-l">瀛︿範妯″潡涓�</h1>
<p class="h1-zt">濠村辜鍎挎父鎴忔杩�</p>
<div class="bj1">
<p>娓告垙鏄┐骞煎効鐨勫伐浣滐紝鐞嗚В娓告垙瀵瑰┐骞煎効鍙戝睍鐨勬剰涔夎嚦鍏抽噸瑕併�傚湪鏁欏涓紝鎴戜滑搴斿綋灏嗕績杩涘┐骞煎効娓告垙涓庝繚闅滃┐骞煎効瀹夊叏鍜岃繘琛屾棩甯哥収鎶ゅ悓绛夎鐪熷寰呫�傚彧鏈夐噸瑙嗗苟鏀寔濠村辜鍎跨殑娓告垙锛屼粬浠墠鑳借寔澹垚闀裤�備粠杩欎釜瑙掑害鏉ヨ锛屾垜浠偐璐熺潃涓�椤归噸瑕佺殑璐ｄ换锛屽嵆鍩轰簬濠村辜鍎跨殑鍏磋叮銆佽兘鍔涘拰鍙戝睍杩涚▼鏉ヤ績杩涗粬浠殑娓告垙锛屽府鍔╀粬浠湪鍚勪釜棰嗗煙鑾峰緱鍏ㄩ潰鍙戝睍銆傚洜姝わ紝娣卞叆浜嗚В濠村辜鍎挎棭鏈熷彂灞曠殑鐩稿叧鐭ヨ瘑锛屽苟鍦ㄦ鍩虹涓婅瀵熻褰曞┐骞煎効鐨勫彂灞曟儏鍐靛氨鏄惧緱灏や负閲嶈銆�
</p>
</div>
<p><img class="rwmb-1" alt="" src="../../assets/images/xxdt.png" /></p>
- <p class="center"><img class="img-b" alt="" src="../../assets/images/0013-1.jpg" /></p>
+ <p class="center"><img class="w80" alt="" src="../../assets/images/0013-1.jpg" /></p>
<p><img class="rwmb-1" alt="" src="../../assets/images/xxcty.png" /></p>
<p>娓告垙鏄瀛愭暣涓殑鐢熸椿銆傚瀛愪袱涓変釜鏈堝ぇ鏃跺氨鍦ㄥ簥涓婁笉鍋滃湴鍔ㄦ墜韪㈣剼锛岀嫭鑷湴鐜┿�傚埌浜嗕簲鍏釜鏈堢殑鏃跺�欙紝鐪嬭涓滆タ灏辫鎶擄紱鍐嶅ぇ涓�鐐瑰氨杩欓噷鎺ㄦ帹銆侀偅閲屾媺鎷夛紝杩樹細涓嶅仠鍦扮埇鏉ョ埇鍘汇�佽蛋鏉ヨ蛋鍘伙紱鍒颁簡涓夊洓宀佺殑鏃跺�欙紝娓告垙鐨勭绫绘洿鍔犵箒澶氥�備綘璁や负娓告垙瀵瑰┐骞煎効鍙戝睍鐨勬剰涔夋槸浠�涔堬紵鐓ф姢鑰呭湪0锝�3宀佸┐骞煎効娓告垙涓殑浣滅敤鏄粈涔堬紵濠村辜鍎跨殑鍙戝睍涓庡叾娓告垙涔嬮棿鏈夋�庢牱鐨勫叧绯诲憿锛�
</p>
@@ -34,10 +33,12 @@
</li>
<li class="header-left-text">濠村辜鍎挎父鎴忔椿鍔ㄥ疄鏂�</li>
</ul>
- <div class="bj3">
- <div class="bj2">
- <h2 id="b001">瀛︿範浠诲姟涓�</h2>
- <p class="h2-zt">0锝�3宀佸┐骞煎効鍙戝睍姒傚喌</p>
+ <div class="rw-bg">
+ <div class="bj4">
+ <div class="bj5">
+ <h2 id="b001">瀛︿範浠诲姟涓�</h2>
+ <p class="h2-zt">鎵樿偛鏈烘瀯鐨勫彂灞曞強鐜扮姸</p>
+ </div>
</div>
</div>
<div class="bodystyle">
@@ -103,7 +104,10 @@
<ul class="fl al-c jc-fe pad-t-55 mb-45">
<li class="headerText-bc">瀛︿範妯″潡涓�</li>
<li class="headerText">濠村効娓告垙姒傝堪</li>
- <li class="headerNumber">3</li>
+ <li class="headerNumber">
+ <img class="img-0" src="../../assets/images/headerRight.png" alt="">
+ <span>3</span>
+ </li>
</ul>
<div class="bodystyle">
<p class="mb-10"><img class="rwmb-2" alt="" src="../../assets/images/aldr.png" /></p>
@@ -176,7 +180,10 @@
<ul class="fl al-c jc-fe pad-t-55 mb-45">
<li class="headerText-bc">瀛︿範妯″潡涓�</li>
<li class="headerText">濠村効娓告垙姒傝堪</li>
- <li class="headerNumber">5</li>
+ <li class="headerNumber">
+ <img class="img-0" src="../../assets/images/headerRight.png" alt="">
+ <span>5</span>
+ </li>
</ul>
<div class="bodystyle">
<p class="td-0">
@@ -235,12 +242,14 @@
<li>
{{ index + 1 }}.锛堝崟閫夛級{{ item.txt }}銆�
</li>
- <li v-for="(citem, cindex) in item.option" :key="cindex">
- <input type="radio" :disabled="unitQuestion.isComplete" :name="item.txt"
- :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" />
- {{ citem.value }} . {{ citem.txt }}
+ <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex">
+ <label>
+ <input type="radio" :disabled="unitQuestion.isComplete" :name="item.txt"
+ :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" />
+ <span>{{ citem.value }}.{{ citem.txt }}</span>
+ </label>
</li>
- <li v-if="unitQuestion.isComplete" class="event-header-text-bc pd-5 fl jc-sa">
+ <li v-if="unitQuestion.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa">
<span class="c-g"> 绛旀锛歿{ item.answer }}</span>
<span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{
item.userAnswer
@@ -272,19 +281,24 @@
<ul class="fl al-c jc-fe pad-t-55 mb-45">
<li class="headerText-bc">瀛︿範妯″潡涓�</li>
<li class="headerText">濠村効娓告垙姒傝堪</li>
- <li class="headerNumber">7</li>
+ <li class="headerNumber">
+ <img class="img-0" src="../../assets/images/headerRight.png" alt="">
+ <span>7</span>
+ </li>
</ul>
<div class="bodystyle">
<ul v-for="(item, index) in unitQuestion.unitOne.slice(2, 4)" :key="index">
<li>
{{ index + 3 }}.锛堝崟閫夛級{{ item.txt }}銆�
</li>
- <li v-for="(citem, cindex) in item.option" :key="cindex">
- <input type="radio" :disabled="unitQuestion.isComplete" :name="item.txt"
- :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" />
- {{ citem.value }} . {{ citem.txt }}
+ <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex">
+ <label>
+ <input type="radio" :disabled="unitQuestion.isComplete" :name="item.txt"
+ :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" />
+ <span>{{ citem.value }}.{{ citem.txt }}</span>
+ </label>
</li>
- <li v-if="unitQuestion.isComplete" class="event-header-text-bc pd-5 fl jc-sa">
+ <li v-if="unitQuestion.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa">
<span class="c-g"> 绛旀锛歿{ item.answer }}</span>
<span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{
item.userAnswer
@@ -329,7 +343,7 @@
</button>
</li>
<li>
- <button @click=" unitQuestion.isComplete = !unitQuestion.isComplete"
+ <button @click="unitQuestion.isShowAnswer = !unitQuestion.isShowAnswer"
class="parimary-btn">
鏌ョ湅绛旀
</button>
@@ -349,10 +363,12 @@
</li>
<li class="header-left-text">濠村辜鍎挎父鎴忔椿鍔ㄥ疄鏂�</li>
</ul>
- <div class="bj3">
- <div class="bj2">
- <h2 class="pt-10" id="b001">瀛︿範浠诲姟浜�</h2>
- <p class="h2-zt">濠村辜鍎挎父鎴忕悊璁哄強鍏跺惎绀�</p>
+ <div class="rw-bg">
+ <div class="bj4">
+ <div class="bj5">
+ <h2 id="b001">瀛︿範浠诲姟浜�</h2>
+ <p class="h2-zt">濠村辜鍎挎父鎴忕悊璁哄強鍏跺惎绀�</p>
+ </div>
</div>
</div>
<div class="bodystyle">
@@ -417,7 +433,10 @@
<ul class="fl al-c jc-fe pad-t-55 mb-45">
<li class="headerText-bc">瀛︿範妯″潡涓�</li>
<li class="headerText">濠村効娓告垙姒傝堪</li>
- <li class="headerNumber">9</li>
+ <li class="headerNumber">
+ <img class="img-0" src="../../assets/images/headerRight.png" alt="">
+ <span>9</span>
+ </li>
</ul>
<div class="bodystyle">
<p><img class="rwmb-2" alt="" src="../../assets/images/aldr.png" /></p>
@@ -482,7 +501,7 @@
</div>
<p>渚濇嵁鍓╀綑绮惧姏璇达紝濠村辜鍎挎父鎴忕殑鍔ㄥ姏鏉ユ簮浜庡摢閲岋紵濡備綍鐪嬪緟杩欑鍔ㄥ姏锛�</p>
<textarea v-model="questionData.unitOne.four" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
- style="max-width: 90%; min-width: 90%;" class="fz-16 textarea-main"
+ style="max-width: 90%; min-width: 90%; resize:none;" class="fz-16 textarea-main"
@change="setQuestionData"></textarea>
</div>
</div>
@@ -514,13 +533,62 @@
</div>
<div class="bk2">
<p><img class="rwmb-5" alt="" src="../../assets/images/bkzn.png" /></p>
- <p class="center"><span class="ls2">2021骞村垵绾ц偛濠村笀鐞嗚鐭ヨ瘑鑰冭瘯鐪熼</span></p>
- <p>锛堝崟閫夐锛変互涓嬭娉曠鍚堢敓娲诲噯澶囪瑙傜偣鐨勬槸锛堛��銆�锛夈��</p>
- <p>A.娓告垙鏄墿浣欑簿鍔涚殑鍙戞硠</p>
- <p>B.娓告垙鏄敤鏉ユ仮澶嶇簿鍔涚殑杞绘澗娲诲姩</p>
- <p>C.娓告垙鏄负鏈潵鐢熸椿鍋氬噯澶�</p>
- <p>D.娓告垙鏄汉绫荤敓鐗╅仐浼犵殑缁撴灉</p>
- <p>鍙傝�冪瓟妗堬細C銆�</p>
+ <ul v-for="(item, index) in exampleOne.unitOne" :key="index">
+ <li>
+ {{ index + 1 }}.锛堝崟閫夛級{{ item.txt }}銆�
+ </li>
+ <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex">
+ <label>
+ <input type="radio" :disabled="exampleOne.isComplete" :name="item.txt"
+ :value="citem.value" v-model="item.userAnswer" @change="saveExampleOne" />
+ <span>{{ citem.value }} . {{ citem.txt }}</span>
+ </label>
+ </li>
+ <li v-if="exampleOne.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa">
+ <span class="c-g"> 绛旀锛歿{ item.answer }}</span>
+ <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{
+ item.userAnswer
+ }}</span>
+ <span class="icon-box-big fl al-c">
+ <svg v-if="item.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.6044444 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="item.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>
+ </li>
+ </ul>
+ <!-- 鎻愪氦鎸夐挳 -->
+ <div class="w100 fl ju-cn">
+ <ul class="fl ju-ev w80 choice">
+ <li>
+ <button class="btn-border btn-w" @click="goExampleOne">
+ 鎻愪氦
+ </button>
+ </li>
+ <li>
+ <button @click="changeExampleOne" class="btn-border btn-w">
+ 閲嶅仛
+ </button>
+ </li>
+ <li>
+ <button @click="exampleOne.isShowAnswer = !exampleOne.isShowAnswer"
+ class="parimary-btn">
+ 鏌ョ湅绛旀
+ </button>
+ </li>
+ </ul>
+ </div>
</div>
<h3 id="c006">涓夈�佸婕旇</h3>
<p>澶嶆紨璇寸殑涓昏鍊″鑰呮槸缇庡浗蹇冪悊瀛﹀闇嶅皵銆傚湪浠栫湅鏉ワ紝鍎跨鐨勬父鎴忔槸瀵逛汉绫荤鍏堢敓娲荤殑鈥滃洖蹇嗏�濋噸瑙嗐�傞湇灏斿鏍奸瞾鏂殑娓告垙鐞嗚鏄笉璁ゅ悓鐨勶紝浠栬涓烘牸椴佹柉鍏充簬娓告垙鏄鏈潵鎴愪汉娲诲姩鐨勭粌涔犵殑瑙傜偣鏄潪甯哥墖闈㈢殑銆佽〃闈㈢殑鍜岄敊璇殑锛屽洜涓哄畠蹇借浜嗚繃鍘汇�傞湇灏旇涓猴紝鑳庡効鍦ㄨ儙鍐呯殑鍙戝睍閲嶆紨浜嗗姩鐗╄繘鍖栫殑杩囩▼锛堜粠鍘熺敓鐗╁埌浜猴級锛屽効绔ユ椂鏈熺殑鍙戝睍鍒欓噸婕斾簡浜虹被杩涘寲鐨勮繃绋嬶紙浠庣尶鍒颁汉锛夈�備粠鍎跨鐨勮韩涓婂彲浠ユ壘鍒颁笌涔嬬浉搴旂殑娓告垙琛屼负琛ㄧ幇锛岃繖鏄汉绫荤鍏堣涓虹殑鍙嶆槧銆傚効绔ョ殑娓告垙灏辨槸绁栧厛鐨勨�滃伐浣溾�濓紝鍘熷浜虹殑鎵撶寧銆佽拷閫愮瓑鏋勬垚浜嗙幇浠ｅ効绔ユ父鎴忕殑鍩烘湰鍐呭銆傜敱浜庤繖浜涙椿鍔ㄥ凡缁忔垚涓轰汉鐨勬湰鑳斤紝鍥犳鍎跨鍋氳捣鏉ヤ笉闇�瑕佽姳璐瑰姏姘旓紝骞朵笖娓告垙鐨勫揩涔愪篃鎬绘槸鐩存帴涓庨仐浼犺秼鍔跨殑鏂瑰悜鍜屽姏閲忔垚姣斾緥鐨勩�傜幇浠ｇ敓娲讳腑鏄壘涓嶅埌浠讳綍瀵逛簬娓告垙蹇箰鐨勮В
@@ -535,7 +603,10 @@
<ul class="fl al-c jc-fe pad-t-55 mb-45">
<li class="headerText-bc">瀛︿範妯″潡涓�</li>
<li class="headerText">濠村効娓告垙姒傝堪</li>
- <li class="headerNumber">11</li>
+ <li class="headerNumber">
+ <img class="img-0" src="../../assets/images/headerRight.png" alt="">
+ <span>11</span>
+ </li>
</ul>
<div class="bodystyle">
<p class="td-0">
@@ -646,7 +717,10 @@
<ul class="fl al-c jc-fe pad-t-55 mb-45">
<li class="headerText-bc">瀛︿範妯″潡涓�</li>
<li class="headerText">濠村効娓告垙姒傝堪</li>
- <li class="headerNumber">13</li>
+ <li class="headerNumber">
+ <img class="img-0" src="../../assets/images/headerRight.png" alt="">
+ <span>13</span>
+ </li>
</ul>
<div class="bodystyle">
<h3 id="c009">鍏�佽鐭ュ彂灞曞娲剧殑娓告垙鐞嗚</h3>
@@ -679,13 +753,61 @@
</p>
<div class="bk2">
<p><img class="rwmb-5" alt="" src="../../assets/images/bkzn.png" /></p>
- <p class="center"><span class="ls2">2019骞撮珮绾ц偛濠村笀鐞嗚鐭ヨ瘑鑰冭瘯鐪熼</span></p>
- <p>锛堝崟閫夐锛夋垜浠簲璇ユ姄浣忓┐骞煎効鎰熸儏鍩瑰吇鐨勶紙銆�銆�锛夛紝閫氳繃鏈夐拡瀵规�х殑娲诲姩涓庢父鎴忔縺鍙戝叾鍏磋叮銆�</p>
- <p>A.鏈轰細</p>
- <p>B.鏃舵満</p>
- <p>C.鏁忔劅鏈�</p>
- <p>D.鏃舵湡</p>
- <p>鍙傝�冪瓟妗堬細C銆�</p>
+ <ul v-for="(item, index) in exampleTwo.unitOne" :key="index">
+ <li>
+ {{ index + 1 }}.锛堝崟閫夛級{{ item.txt }}銆�
+ </li>
+ <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex">
+ <label>
+ <input type="radio" :disabled="exampleTwo.isComplete" :name="item.txt"
+ :value="citem.value" v-model="item.userAnswer" @change="saveExampleTwo" />
+ <span>{{ citem.value }}.{{ citem.txt }}</span>
+ </label>
+ </li>
+ <li v-if="exampleTwo.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa">
+ <span class="c-g"> 绛旀锛歿{ item.answer }}</span>
+ <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{
+ item.userAnswer
+ }}</span>
+ <span class="icon-box-big fl al-c">
+ <svg v-if="item.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.6044444 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="item.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>
+ </li>
+ </ul>
+ <!-- 鎻愪氦鎸夐挳 -->
+ <div class="w100 fl ju-cn">
+ <ul class="fl ju-ev w80 choice">
+ <li>
+ <button class="btn-border btn-w" @click="goExampleTwo">
+ 鎻愪氦
+ </button>
+ </li>
+ <li>
+ <button @click="changeExampleTwo" class="btn-border btn-w">
+ 閲嶅仛
+ </button>
+ </li>
+ <li>
+ <button @click="exampleTwo.isShowAnswer = !exampleTwo.isShowAnswer"
+ class="parimary-btn">
+ 鏌ョ湅绛旀
+ </button>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
@@ -753,12 +875,13 @@
<!-- 15椤� -->
<div class="page-box" page="22">
<div v-if="showPageList.indexOf(22) > -1">
- <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
- <li class="header-left-Number">
- <img class="img-0" src="../../assets/images/headerBj.png" alt="">
+ <ul class="fl al-c jc-fe pad-t-55 mb-45">
+ <li class="headerText-bc">瀛︿範妯″潡涓�</li>
+ <li class="headerText">濠村効娓告垙姒傝堪</li>
+ <li class="headerNumber">
+ <img class="img-0" src="../../assets/images/headerRight.png" alt="">
<span>15</span>
</li>
- <li class="header-left-text">濠村辜鍎挎父鎴忔椿鍔ㄥ疄鏂�</li>
</ul>
<div class="bodystyle">
<div class="img-rights w115">
@@ -768,7 +891,7 @@
</div>
<p>濡備綍甯姪缁存寔鍎跨鐨勫敜閱掑浜庝腑绛夋按骞筹紵</p>
<textarea v-model="questionData.unitOne.five" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
- style="max-width: 90%; min-width: 90%;" class="fz-16 textarea-main"
+ style="max-width: 90%; min-width: 90%; resize: none;" class="fz-16 textarea-main"
@change="setQuestionData"></textarea>
</div>
</div>
@@ -790,12 +913,14 @@
<li>
{{ index + 1 }}.锛堝崟閫夛級{{ item.txt }}銆�
</li>
- <li v-for="(citem, cindex) in item.option" :key="cindex">
- <input type="radio" :disabled="unitQuestionOne.isComplete" :name="item.txt"
- :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" />
- {{ citem.value }} . {{ citem.txt }}
+ <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex">
+ <label>
+ <input type="radio" :disabled="unitQuestionOne.isComplete" :name="item.txt"
+ :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" />
+ <span>{{ citem.value }}.{{ citem.txt }}</span>
+ </label>
</li>
- <li v-if="unitQuestionOne.isComplete" class="event-header-text-bc pd-5 fl jc-sa">
+ <li v-if="unitQuestionOne.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa">
<span class="c-g"> 绛旀锛歿{ item.answer }}</span>
<span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{
item.userAnswer
@@ -827,7 +952,7 @@
<ul class="fl al-c pad-t-55 pad-l-60 mb-45">
<li class="header-left-Number">
<img class="img-0" src="../../assets/images/headerBj.png" alt="">
- <span>16</span>
+ <span>16</span>
</li>
<li class="header-left-text">濠村辜鍎挎父鎴忔椿鍔ㄥ疄鏂�</li>
</ul>
@@ -836,12 +961,14 @@
<li>
{{ index + 4 }}.锛堝崟閫夛級{{ item.txt }}銆�
</li>
- <li v-for="(citem, cindex) in item.option" :key="cindex">
- <input type="radio" :disabled="unitQuestionOne.isComplete" :name="item.txt"
- :value="citem.value" v-model="item.userAnswer" @change="saveUnitTwo" />
- {{ citem.value }} . {{ citem.txt }}
+ <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex">
+ <label>
+ <input type="radio" :disabled="unitQuestionOne.isComplete" :name="item.txt"
+ :value="citem.value" v-model="item.userAnswer" @change="saveUnitTwo" />
+ <span>{{ citem.value }}.{{ citem.txt }}</span>
+ </label>
</li>
- <li v-if="unitQuestionOne.isComplete" class="event-header-text-bc pd-5 fl jc-sa">
+ <li v-if="unitQuestionOne.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa">
<span class="c-g"> 绛旀锛歿{ item.answer }}</span>
<span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{
item.userAnswer
@@ -868,18 +995,19 @@
<li>
{{ index + 6 }}.锛堝閫夛級{{ item.txt }}銆�
</li>
- <li v-for="(citem, cindex) in item.option" :key="cindex">
- <input type="checkbox" :disabled="unitQuestionOne.isComplete" :name="item.txt"
- :value="citem.value" v-model="item.userAnswer" @change="saveUnitTwo" />
- {{ citem.value }} . {{ citem.txt }}
+ <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex">
+ <label>
+ <input type="checkbox" :disabled="unitQuestionOne.isComplete" :name="item.txt"
+ :value="citem.value" v-model="item.userAnswer" @change="saveUnitTwo" />
+ <span>{{ citem.value }}.{{ citem.txt }}</span>
+ </label>
</li>
- <li v-if="unitQuestionOne.isComplete" class="event-header-text-bc pd-5 fl jc-sa">
+ <li v-if="unitQuestionOne.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa">
<span class="c-g"> 绛旀锛�<span v-for="(answer, index) in item.answer"
:key="'answer-' + index">{{ answer }}銆�</span></span>
-
<span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛�<span
v-for="(userAnswer, index) in item.userAnswer" :key="'userAnswer-' + index">{{
- userAnswer }}銆�</span></span>
+ userAnswer }}銆�</span></span>
<span class="icon-box-big fl al-c">
<svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
@@ -920,7 +1048,7 @@
</button>
</li>
<li>
- <button @click="unitQuestionOne.isComplete = !unitQuestionOne.isComplete"
+ <button @click="unitQuestionOne.isShowAnswer = !unitQuestionOne.isShowAnswer"
class="parimary-btn">
鏌ョ湅绛旀
</button>
@@ -984,6 +1112,7 @@
},
unitQuestion: {
isComplete: false,
+ isShowAnswer: false,
unitOne: [
{
txt: "鏂扮敓鍎跨殑瑙嗙▼澶ф鏄紙銆�銆�锛�",
@@ -1087,6 +1216,7 @@
},
unitQuestionOne: {
isComplete: false,
+ isShowAnswer: false,
unitTwo: [
{
txt: "璁や负娓告垙鏄敤鏉ユ仮澶嶇簿鍔涚殑杞绘澗娲诲姩鐨勬父鎴忕悊璁烘槸锛堛��銆�锛�",
@@ -1261,6 +1391,66 @@
],
textOne: "",
textTwo: "",
+ },
+ exampleOne: {
+ isComplete: false,
+ isShowAnswer: false,
+ unitOne: [
+ {
+ txt: "浠ヤ笅璇存硶绗﹀悎鐢熸椿鍑嗗璇磋鐐圭殑鏄紙銆�銆�锛�",
+ isRight: null,
+ answer: "C",
+ userAnswer: "",
+ option: [
+ {
+ txt: "娓告垙鏄墿浣欑簿鍔涚殑鍙戞硠",
+ value: "A"
+ },
+ {
+ txt: "娓告垙鏄敤鏉ユ仮澶嶇簿鍔涚殑杞绘澗娲诲姩",
+ value: "B"
+ },
+ {
+ txt: "娓告垙鏄负鏈潵鐢熸椿鍋氬噯澶�",
+ value: "C"
+ },
+ {
+ txt: "娓告垙鏄汉绫荤敓鐗╅仐浼犵殑缁撴灉",
+ value: "D"
+ },
+ ]
+ },
+ ],
+ },
+ exampleTwo: {
+ isComplete: false,
+ isShowAnswer: false,
+ unitOne: [
+ {
+ txt: "鎴戜滑搴旇鎶撲綇濠村辜鍎挎劅鎯呭煿鍏荤殑锛堛��銆�锛夛紝閫氳繃鏈夐拡瀵规�х殑娲诲姩涓庢父鎴忔縺鍙戝叾鍏磋叮",
+ isRight: null,
+ answer: "C",
+ userAnswer: "",
+ option: [
+ {
+ txt: "鏈轰細",
+ value: "A"
+ },
+ {
+ txt: "鏃舵満",
+ value: "B"
+ },
+ {
+ txt: "鏁忔劅鏈�",
+ value: "C"
+ },
+ {
+ txt: "鏃舵湡",
+ value: "D"
+ },
+ ]
+ },
+ ],
}
}
},
@@ -1283,6 +1473,16 @@
const unitTwo = localStorage.getItem("toddleGame-book-chapter01-UnitTwo");
if (unitTwo) {
this.unitQuestionOne = JSON.parse(unitTwo);
+ }
+
+ const exampleOne = localStorage.getItem("toddleGame-book-chapter01-exampleOne");
+ if (exampleOne) {
+ this.exampleOne = JSON.parse(exampleOne);
+ }
+
+ const exampleTwo = localStorage.getItem("toddleGame-book-chapter01-exampleTwo");
+ if (exampleTwo) {
+ this.exampleTwo = JSON.parse(exampleTwo);
}
this.getVidoePath()
@@ -1387,6 +1587,7 @@
}
}
this.unitQuestion.isComplete = true
+ this.unitQuestion.isShowAnswer = true
},
changeCheckData() {
localStorage.removeItem("toddleGame-book-chapter01-UnitOne")
@@ -1396,6 +1597,7 @@
item.isRight = null
}
this.unitQuestion.isComplete = false
+ this.unitQuestion.isShowAnswer = false
this.unitQuestion.textOne = ""
this.unitQuestion.textTwo = ""
},
@@ -1422,6 +1624,7 @@
}
}
this.unitQuestionOne.isComplete = true
+ this.unitQuestionOne.isShowAnswer = true
},
changeUnitTwo() {
localStorage.removeItem("toddleGame-book-chapter01-UnitTwo")
@@ -1436,12 +1639,60 @@
item.isRight = null
}
this.unitQuestionOne.isComplete = false
+ this.unitQuestionOne.isShowAnswer = false
this.unitQuestionOne.textOne = ""
this.unitQuestionOne.textTwo = ""
+ },
+ saveExampleOne() {
+ localStorage.setItem('toddleGame-book-chapter01-exampleOne', JSON.stringify(this.exampleOne))
+ },
+ goExampleOne() {
+ for (let index = 0; index < this.exampleOne.unitOne.length; index++) {
+ const item = this.exampleOne.unitOne[index];
+ if (item.userAnswer == item.answer) {
+ item.isRight = true
+ } else {
+ item.isRight = false
+ }
+ }
+ this.exampleOne.isComplete = true
+ this.exampleOne.isShowAnswer = true
+ },
+ changeExampleOne() {
+ localStorage.removeItem("toddleGame-book-chapter01-exampleOne")
+ for (let index = 0; index < this.exampleOne.unitOne.length; index++) {
+ const item = this.exampleOne.unitOne[index];
+ item.userAnswer = ""
+ item.isRight = null
+ }
+ this.exampleOne.isComplete = false
+ this.exampleOne.isShowAnswer = false
+ },
+ saveExampleTwo() {
+ localStorage.setItem('toddleGame-book-chapter01-exampleTwo', JSON.stringify(this.exampleTwo))
+ },
+ goExampleTwo() {
+ for (let index = 0; index < this.exampleTwo.unitOne.length; index++) {
+ const item = this.exampleTwo.unitOne[index];
+ if (item.userAnswer == item.answer) {
+ item.isRight = true
+ } else {
+ item.isRight = false
+ }
+ }
+ this.exampleTwo.isComplete = true
+ this.exampleTwo.isShowAnswer = true
+ },
+ changeExampleTwo() {
+ localStorage.removeItem("toddleGame-book-chapter01-exampleTwo")
+ for (let index = 0; index < this.exampleTwo.unitOne.length; index++) {
+ const item = this.exampleTwo.unitOne[index];
+ item.userAnswer = ""
+ item.isRight = null
+ }
+ this.exampleTwo.isComplete = false
+ this.exampleTwo.isShowAnswer = false
}
-
-
-
}
}
--
Gitblit v1.9.1