From d5997848e6c44537773781d92b6033e61730ea07 Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期三, 26 六月 2024 19:39:35 +0800
Subject: [PATCH] 艺术戏剧（选择题）
---
src/books/English/assets/images/0068-1.jpg | 0
src/books/English/assets/images/dy4.jpg | 0
src/books/artAndDrama/assets/main.less | 24 +
src/books/English/view/components/chapter004.vue | 44 +-
src/books/English/view/components/chapter001.vue | 1
src/books/artAndDrama/view/components/chapter002.vue | 193 ++++++++-----
src/books/English/view/components/chapter003.vue | 67 ----
src/books/artAndDrama/view/components/chapter001.vue | 185 ++++++++----
src/App.vue | 2
src/books/English/view/components/index.vue | 13
src/components/choice/choice.vue | 267 ++++++++++++------
src/books/artAndDrama/view/components/index.vue | 6
12 files changed, 461 insertions(+), 341 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index ef3b19b..77be6ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,7 +65,7 @@
process.env.VUE_APP_RESOURCE_CTX +
(process.env.VUE_APP_ENV == "product"
? process.env.VUE_APP_BOOK_ID
- : "english")
+ : "artAndDrama")
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/English/assets/images/0068-1.jpg b/src/books/English/assets/images/0068-1.jpg
new file mode 100644
index 0000000..8b31a2f
--- /dev/null
+++ b/src/books/English/assets/images/0068-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy4.jpg b/src/books/English/assets/images/dy4.jpg
new file mode 100644
index 0000000..9a672b3
--- /dev/null
+++ b/src/books/English/assets/images/dy4.jpg
Binary files differ
diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index 4723436..4b24f11 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -287,6 +287,7 @@
<div class="bodystyle">
<h3 id="c002" class="fl al-cn">
<span class="bjh3">Listening</span>
+ <!--controlslist="noplaybackrate nodownload"鍚庨潰鐨勯煶棰戞鍔犲叆杩欎釜-->
<audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
</h3>
<p>
diff --git a/src/books/English/view/components/chapter003.vue b/src/books/English/view/components/chapter003.vue
index 140d12d..0a5512c 100644
--- a/src/books/English/view/components/chapter003.vue
+++ b/src/books/English/view/components/chapter003.vue
@@ -1318,73 +1318,6 @@
</div>
</div>
</div>
-
- <!-- 绗洓鍗曞厓 -->
- <!-- 58 -->
- <div class="page-box" page="64">
- <div v-if="showPageList.indexOf(64) > -1">
- <!-- 澶撮儴 -->
- <div class="w100 mb-20" style="padding-right: 20px">
- <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
- <div class="preface-header-box event-header-text-bc-unit3">
- <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
- <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
- </div>
- </div>
- </div>
- <!-- 鍐呭 -->
- <div class="padding-93">
- <div class="bodystyle">
-
- </div>
- <div class="preface-bottom">
- <span class="contet-num-box">58</span>
- </div>
- </div>
- </div>
- </div>
- <!-- 59 -->
- <div class="page-box" page="65">
- <div v-if="showPageList.indexOf(65) > -1">
- <!-- 澶撮儴 -->
- <ul class="preface-odd-header w100 fl ju-bt">
- <li class=""></li>
- <li class="fz-18">
- <span class="chapter-left-bc-unit3">MODULE 3</span>
- <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
- VOLUNTEERS</span>
- </li>
- </ul>
- <!-- 鍐呭 -->
- <div class="padding-93">
- <div class="bodystyle"></div>
- </div>
- <div class="preface-bottom">
- <span class="contet-num-box">39</span>
- </div>
- </div>
- </div>
- <!-- 60 -->
- <div class="page-box" page="66">
- <div v-if="showPageList.indexOf(66) > -1">
- <!-- 澶撮儴 -->
- <div class="w100 mb-20" style="padding-right: 20px">
- <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
- <div class="preface-header-box event-header-text-bc-unit3">
- <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
- <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
- </div>
- </div>
- </div>
- <!-- 鍐呭 -->
- <div class="padding-93">
- <div class="bodystyle"></div>
- </div>
- <div class="preface-bottom">
- <span class="contet-num-box">12</span>
- </div>
- </div>
- </div>
</div>
</template>
diff --git a/src/books/English/view/components/chapter004.vue b/src/books/English/view/components/chapter004.vue
index 1007cd6..9db2f15 100644
--- a/src/books/English/view/components/chapter004.vue
+++ b/src/books/English/view/components/chapter004.vue
@@ -1,37 +1,33 @@
<template>
- <div class="chapter" num="5">
- <!-- 绗洓鍗曞厓 -->
+ <div class="chapter" num="5">
+ <!-- 绗洓鍗曞厓 -->
<!-- 58 -->
<div class="page-box" page="64">
- <div v-if="showPageList.indexOf(64) > -1">
- <!-- 澶撮儴 -->
- <div class="w100 mb-20" style="padding-right: 20px">
- <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
- <div class="preface-header-box event-header-text-bc-unit3">
- <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
- <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
- </div>
- </div>
- </div>
- <!-- 鍐呭 -->
- <div class="padding-93">
- <div class="bodystyle">
-
- </div>
- <div class="preface-bottom">
- <span class="contet-num-box">58</span>
- </div>
- </div>
+ <div class="bodystyle" v-if="showPageList.indexOf(64) > -1">
+ <h1 id="a005">
+ <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
+ </h1>
+ <p class="img"></p>
+ <p><b>This unit will help you to:</b></p>
+ <p>鉃� Learn words and expressions to describe hi-tech products</p>
+ <p>鉃� Review the rules for the comparative and superlative degree of adjectives and adverbs</p>
+ <p>鉃� Get knowledge of the impact of science and technology on the way of life</p>
+ <p>鉃� Be able to write a sales letter to introduce a new product</p>
+ <p>鉃� Get inspired by the spirit of scientists</p>
+ <p class="center">
+ <img class="img-0" alt="" src="../../assets/images/0068-1.jpg" />
+ </p>
+ <p class="img"></p>
</div>
</div>
- <!-- 59 -->
+ <!-- 59 -->
<div class="page-box" page="65">
<div v-if="showPageList.indexOf(65) > -1">
<!-- 澶撮儴 -->
<ul class="preface-odd-header w100 fl ju-bt">
<li class=""></li>
<li class="fz-18">
- <span class="chapter-left-bc-unit3">MODULE 3</span>
+ <span class="chapter-left-bc-unit3">MODULE 4</span>
<span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
VOLUNTEERS</span>
</li>
@@ -72,7 +68,7 @@
import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
- name: "chapter-three",
+ name: "chapter-Four",
components: { matching },
props: {
showPageList: {
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index d1f067d..321bc0b 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -12,6 +12,8 @@
v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo>
<chapterThree @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree>
+ <chapterFour @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
+ v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour>
</div>
<miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
</miniAudio>
@@ -23,6 +25,7 @@
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue"
import chapterThree from "./chapter003.vue"
+import chapterFour from "./chapter004.vue"
import miniAudio from "@/components/miniAudio/index.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
@@ -33,7 +36,7 @@
export default {
data() {
return {
- catalogLength: 4, // 鎬荤珷鑺傛暟
+ catalogLength: 5, // 鎬荤珷鑺傛暟
showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
throttleThreshold: 100, // 鑺傛祦闃堝��
@@ -152,8 +155,8 @@
}, 500);
// 娴嬭瘯椤甸潰璺宠浆
- // setTimeout(() => {
- // this.gotoPage(4,59);
+ setTimeout(() => {
+ this.gotoPage(5,64);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -181,7 +184,7 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- // }, 50);
+ }, 50);
},
methods: {
// setZoom1() {
@@ -714,6 +717,7 @@
chapterOne,
chapterTwo,
chapterThree,
+ chapterFour,
};
// 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
for (const key in pageData) {
@@ -884,6 +888,7 @@
chapterOne,
chapterTwo,
chapterThree,
+ chapterFour,
miniAudio,
},
};
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index 8f055c3..815d516 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/src/books/artAndDrama/assets/main.less
@@ -597,7 +597,29 @@
z-index: 1;
/* 纭繚椤电爜鏁板瓧鍦ㄥ浘鐗囦笂鏂� */
}
-
+ .ends{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ /* 褰撳睆骞曞搴﹁嚦灏戜负600px鏃跺簲鐢ㄦ鏍峰紡 */
+@media screen and (max-width: 420px) {
+ .ends{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ }
+}
+ .option {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ //flex-wrap: nowrap;
+ width: 170px;
+ height: 250px;
+ height: min-content;
+}
.page-footer-number-left {
color: black;
left: 15%;
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 581c9d6..deb3197 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -4,7 +4,8 @@
<div v-if="showPageList.indexOf(4) > -1">
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
- <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
+ <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -43,10 +44,11 @@
<span class="hs1">鈼�</span>澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
</p>
<h1>
- <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
+ <!-- <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio> -->
</h1>
<!-- 杩炵嚎棰� -->
- <matching :rawData="rawData" :question="question" class="macthing" :primaryColor="'transparent'"></matching>
+ <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color"></matching>
<p class="text">灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
</div>
<p><br /></p>
@@ -62,12 +64,10 @@
<img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
<div class="bodystyle">
<h3 class="lefth3" id="c001"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>璇烽�夊嚭浣犺涓烘纭殑绛旀銆�</p>
+ <choice class="choice" :questions="questions" :primaryColor="accentColor" hoverBackgroundColor="#F58200" hoverColor="white"></choice>
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-2铓傝殎涓惧ぇ鏍�.gif" />
- </p>
- <choice class="text" :questions="questions" :primaryColor="accentColor" hoverBackgroundColor="#F58200" hoverColor="white"></choice>
- <p class="center text">
+ </p><p class="center text">
<video :src="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 " @play="videoPlay"
@@ -103,7 +103,8 @@
<p class="text">
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
- <h1><audio :src="auidoPathThree" controls class="audio" @play="audioPlay"></audio></h1>
+ <h1><audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio></h1>
<div class="bj3">
<p class="center">
<span class="hs">鏄�<a id="w1"><sup>1</sup></a>锛堣妭閫夛級</span>
@@ -152,7 +153,8 @@
<h1 class="lefth3 openImgBox" id="c005">
<img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
</h1>
- <h1><audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio></h1>
+ <h1><audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio></h1>
<div class="bj3">
<p class="center">
<span class="hs">鏄�<a id="w1"></a><sup>1</sup>锛堣妭閫夛級</span>
@@ -227,7 +229,8 @@
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1>
- <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
+ <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio>
</h1>
<div class="bj3">
@@ -302,19 +305,38 @@
<h3 class="lefth3" id="c009">
<img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
</h3>
- <p class="text"><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</p>
+ <p class="text ends">
+ <span><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</span>
+ <span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio> </span>
+ </p>
<p class="text">
璇蜂綘浜ゆ浛鈥滄斁澶р�濆拰鈥滅缉灏忊�濅簲瀹樸�傚湪鈥滄斁澶р�濇椂锛屾兂璞′簲瀹樿椋炲埌澶栧お绌猴紱鍦ㄢ�滅缉灏忊�濇椂锛屾兂璞′簲瀹樺叏閮ㄧ缉灏忓埌浜嗛蓟灏栦笂銆�
</p>
- <p class="text"><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</p>
+
+ <p class="text ends">
+ <span><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</span>
+ <span><audio :src="auidoPathSeven" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio> </span>
+ </p>
<p class="text">
鎯宠薄浣犲湪涓�涓檶鐢熺殑鍦版柟锛岃皝閮戒笉璁よ瘑锛岀獊鐒堕亣瑙佷簡濂芥湅鍙嬶紝浣犲緢楂樺叴锛屼笂鍓嶅拰浠�/濂规墦鎷涘懠銆傚仛涓�鍋氫綘姝ゆ椂鐨勮〃鎯呭惂銆�
</p>
- <p class="text"><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</p>
+ <p class="text ends">
+ <span><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</span>
+ <span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio></span>
+ </p>
<p class="text">
璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚０闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
</p>
- <p class="text"><span class="hs1">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</p>
+
+ <p class="text ends">
+ <span style="text-wrap: nowrap"><span class="hs1">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</span>
+ <span style="margin-left: -4%;"><audio :src="auidoPathNine" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio></span>
+
+ </p>
<p class="text">
鎯宠薄鑷繁绔欏湪涓�搴ч珮灞变笂锛屽ソ鏈嬪弸鈥滈樋姣涒�濈珯鍦ㄥ闈㈢殑楂樺北涓婏紝浣犺濡備綍鍠婁粬鍛紵
</p>
@@ -395,12 +417,18 @@
videoPathOne: "",
auidoPathOne: "",
auidoPathTwo: "",
- auidoPathThree: "",
+ auidoPathFour: "",
+ auidoPathFive: "",
+ auidoPathSex: "",
+ auidoPathSeven: "",
+ auidoPathEight: "",
+ auidoPathNine: "",
+ color:"#fff",
chapterData: {
- isCollectImg: false,
- isCollectVideo: false,
- txtOne: "",
- txtTwo: "",
+ isCollectImg: false,
+ isCollectVideo: false,
+ txtOne: "",
+ txtTwo: "",
},
rawData: {
left: [
@@ -519,9 +547,9 @@
questions: [
{
analysisCon: "undefined",
- answer: ['A', 'B'],
+ answer: ['A','B'],
difficulty: 0,
- id: 47772,
+ id: 1,
isCollect: false,
isComplete: false,
isRight: null,
@@ -530,22 +558,22 @@
number: 1,
options: [
{
- "img": "",
- "index": "3CA6",
- "txt": "缇ゅ眳",
- "value": "A"
+ img: "",
+ index: "3CA6",
+ txt: "缇ゅ眳",
+ value: "A"
},
{
- "img": "",
- "index": "73EE",
- "txt": "绀句細鎬�",
- "value": "B"
+ img: "",
+ index: "73EE",
+ txt: "绀句細鎬�",
+ value: "B"
},
{
- "img": "",
- "index": "6AEF",
- "txt": "鐙眳",
- "value": "C"
+ img: "",
+ index: "6AEF",
+ txt: "鐙眳",
+ value: "C"
},
],
optionStyle: "Image",
@@ -563,7 +591,7 @@
analysisCon: "undefined",
answer: ['A', 'C'],
difficulty: 0,
- id: 47773,
+ id: 2,
isCollect: false,
isComplete: false,
isRight: null,
@@ -572,22 +600,22 @@
number: 1,
options: [
{
- "img": "",
- "index": "3CA6",
- "txt": "鏄庣‘鐨�",
- "value": "A"
+ img: "",
+ index: "3CA6",
+ txt: "鏄庣‘鐨�",
+ value: "A"
},
{
- "img": "",
- "index": "73EE",
- "txt": "濂囨�殑",
- "value": "B"
+ img: "",
+ index: "73EE",
+ txt: "濂囨�殑",
+ value: "B"
},
{
- "img": "",
- "index": "6AEF",
- "txt": "鏈夊簭鐨�",
- "value": "C"
+ img: "",
+ index: "6AEF",
+ txt: "鏈夊簭鐨�",
+ value: "C"
},
],
optionStyle: "Image",
@@ -605,7 +633,7 @@
analysisCon: "undefined",
answer: ['A', 'B'],
difficulty: 0,
- id: 47774,
+ id: 3,
isCollect: false,
isComplete: false,
isRight: null,
@@ -614,22 +642,22 @@
number: 1,
options: [
{
- "img": "",
- "index": "3CA6",
- "txt": "鍥㈢粨鐨�",
- "value": "A"
+ img: "",
+ index: "3CA6",
+ txt: "鍥㈢粨鐨�",
+ value: "A"
},
{
- "img": "",
- "index": "73EE",
- "txt": "浼樼鐨�",
- "value": "B"
+ img: "",
+ index: "73EE",
+ txt: "浼樼鐨�",
+ value: "B"
},
{
- "img": "",
- "index": "6AEF",
- "txt": "鏉炬暎鐨�",
- "value": "C"
+ img: "",
+ index: "6AEF",
+ txt: "鏉炬暎鐨�",
+ value: "C"
},
],
optionStyle: "Image",
@@ -679,15 +707,33 @@
this.videoPathOne = await getResourcePath(
"691cbd2c13198d04afc7800d0f2cafb0"
);
- // this.auidoPathOne = await getResourcePath(
- // "2c5f6c69b0f9f7a3c03e473cb8c977f5"
- // );
+ this.auidoPathOne = await getResourcePath(
+ "a8778fb480281170f6c421b57694d4ef"
+ );
// this.auidoPathTwo = await getResourcePath(
- // "e93c0fdde08be5a4386c8c863892a287"
+ // "1089676a40bedbe85a12db86199c3615"
// );
- // this.auidoPathThree = await getResourcePath(
- // "e93c0fdde08be5a4386c8c863892a287"
- // );
+ this.auidoPathThree = await getResourcePath(
+ "1089676a40bedbe85a12db86199c3615"
+ );
+ this.auidoPathFour = await getResourcePath(
+ "abbb24d6a0f1de8c08462c3d4b68f575"
+ );
+ this.auidoPathFive = await getResourcePath(
+ "abce7305a3e3c22b686af3a395575411"
+ );
+ this.auidoPathSex = await getResourcePath(
+ "66b8f2c7f953556400367a89e0af8321"
+ );
+ this.auidoPathSeven = await getResourcePath(
+ "27fcd83f77a10ecbf97970863e2653c3"
+ );
+ this.auidoPathEight = await getResourcePath(
+ "3d7f52cc80f8ed8994a046b418399116"
+ );
+ this.auidoPathNine = await getResourcePath(
+ "3729175530def1b0baca68e0bd344862"
+ );
},
setBookQuestion() {
console.log("淇濆瓨");
@@ -724,7 +770,12 @@
.w70 {
width: 78%;
}
-
+.choice{
+ border: 1px solid green;
+ border-radius: 10px;
+ padding: 0 10px;
+ box-sizing: border-box;
+}
.fw-400 {
font-weight: 400 !important;
}
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index 44e8754..b149deb 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -4,7 +4,8 @@
<div v-if="showPageList.indexOf(14) > -1">
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
- <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
+ <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -39,7 +40,7 @@
</h3>
<p class="text"><span class="hs1">鈼�</span>鎴戞槸灏忕敾瀹�</p>
<p class="text">淇濇寔澶撮儴涓嶅姩锛岃瘯鐫�鐢ㄧ溂绁炵敾鍑轰笅闈㈢殑鍥炬鍚э紒</p>
- <p class="center">
+ <p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
</p>
<p class="text"><span class="hs1">鈼�</span>鍡呰澶у啋闄�</p>
@@ -97,7 +98,7 @@
<h3 class="lefth3" id="c014" style="margin-top: 7%;"><img class="img-gn1" alt=""
src="../../assets/images/czysj.jpg" /></h3>
<p class="text"><span class="hs1">鈼�</span>闃呰涓嬮潰鐨勬枃瀛楋紝涓哄皬铓傝殎閫夋嫨涓�绉嶆�ф牸鍚с��</p>
- <drag :question="dragQuestion" :page="16" class="drag-text"/>
+ <drag :question="dragQuestion" :page="16" class="drag-text" />
<!-- <choice class="text" :questions="questions" :primaryColor="accentColor" hoverBackgroundColor="green" hoverColor="white"></choice> -->
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
</div>
@@ -194,13 +195,25 @@
<div class="bodystyle" style="margin-top: 3%">
<h2 id="b010" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
<h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>鍚圭焊缁冧範</p>
+ <p class="text ends">
+ <span><span class="hs1">鈼�</span>鍚圭焊缁冧範</span>
+ <span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio></span>
+ </p>
<p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" />
</p>
<p class="text">鎵句竴寮犵焊宸撅紝灏嗗畠鎸夊湪澧欎笂銆傜Щ寮�鍙屾墜锛屽姫鍔涚敤姘旀伅灏嗙焊鈥滈拤鈥濆湪澧欓潰涓婏紝涓嶈璁╁畠鍚戜笅婊戣惤銆�</p>
- <p class="text"><span class="hs1">鈼�</span>鍚圭瑪缁冧範</p>
+ <p class="text ends">
+ <span> <span class="hs1">鈼�</span>鍚圭瑪缁冧範</span>
+ <span> <audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio></span>
+ </p>
<p class="text">灏嗕竴鏀瑪绔嬩簬妗岄潰锛岀湅鐪嬩綘鑳戒笉鑳界敤涓�鍙ｆ皵灏嗗畠鍚瑰�掋��</p>
- <p class="text"><span class="hs1">鈼�</span>鍚硅瀛愮粌涔�</p>
+ <p class="text ends">
+ <span><span class="hs1">鈼�</span>鍚硅瀛愮粌涔�</span>
+ <span> <audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio></span>
+ </p>
<p class="text">灏嗕竴鍙鏂欒鎶涜嚦绌轰腑锛屽拰浣犵殑灏忎紮浼翠竴璧疯疆娴佸惞姘旓紝閬垮厤濉戞枡琚嬭惤鍦般��</p>
</div>
<!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -217,11 +230,17 @@
</h1>
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle" style="margin-top: 3%;">
- <p class="text"><span class="hs1">鈼�</span>鍚逛箳涔撶悆缁冧範</p>
+ <p class="text ends">
+ <span> <span class="hs1">鈼�</span>鍚逛箳涔撶悆缁冧範</span>
+ <span> <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"
+ @play="audioPlay"></audio></span>
+ </p>
<p class="text">鐢ㄦ皵鎭皢妗岄潰涓婄殑涔掍箵鐞冧粠鈥滆捣鐐光�濊繍閫佽嚦鈥滅粓鐐光�濓紝杩愰�佽繃绋嬩腑閬垮厤涔掍箵鐞冭Е纰伴殰纰嶇墿銆�</p>
<h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt=""
src="../../assets/images/tzyys.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>璇疯蛋杩涘墽鍦鸿鐪嬩笉鍚屽墽绉嶇殑鐜板満婕斿嚭锛屾劅鍙楁垙鍓х殑榄呭姏鍚э紒</p>
+ <p class="text">
+ <span class="hs1">鈼�</span>璇疯蛋杩涘墽鍦鸿鐪嬩笉鍚屽墽绉嶇殑鐜板満婕斿嚭锛屾劅鍙楁垙鍓х殑榄呭姏鍚э紒
+ </p>
<p class="center text">
<video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
@@ -250,10 +269,9 @@
<script>
import drag from "@/components/dragQuestion/index.vue"
import { getResourcePath } from "@/assets/methods/resources";
-import choice from "@/components/choice/choice.vue"
export default {
name: "chapterTwo",
- components: { choice,drag },
+ components: { drag },
props: {
showPageList: {
type: Array,
@@ -273,6 +291,10 @@
collectCheck: require("../../assets/images/icon/heart-check.png"),
videoPathOne: "",
auidoPathOne: "",
+ auidoPathTwo: "",
+ auidoPathThree: "",
+ auidoPathFour: "",
+ auidoPathFive: "",
chapterData: {
isCollectImg: false,
isCollectVideo: false,
@@ -312,10 +334,10 @@
nine: "",
},
},
- dragQuestion:[
- {
+ dragQuestion: [
+ {
analysisCon: null,
- answer: ['C','A','B'],
+ answer: ['C', 'A', 'B'],
difficulty: 0,
id: "7BC7B760",
isCollect: false,
@@ -330,21 +352,21 @@
index: "010311",
txt: "鑳嗗皬鐨�",
value: "A",
- isShow:true
+ isShow: true
},
{
img: "",
index: "010312",
txt: "鍠勮壇鐨�",
value: "B",
- isShow:true
+ isShow: true
},
{
img: "",
index: "010313",
txt: "娌夌ǔ鐨�",
value: "C",
- isShow:true
+ isShow: true
},
],
optionStyle: "Txt",
@@ -352,85 +374,85 @@
score: 2,
stem: {
0: "铓傝殎闃熼暱璧拌矾鏄傞鎸鸿兏銆佹浼愬潥瀹氾紝瀹冩槸涓�鍙�(",
- 1:{
+ 1: {
data: "span",
num: 0
},
2: ")铓傝殎;灏忚殏铓佽蛋璧疯矾鏉ュ皬蹇冪考缈硷紝鐪肩椋樺拷涓嶅畾锛屽畠鏄竴鍙�(",
- 3:{
- data:"span",
- num:1
+ 3: {
+ data: "span",
+ num: 1
},
- 4:")铓傝殎;铓傝殎灏忓闈㈠甫寰瑧锛屾椂鍒绘効鎰忓府鍔╁ぇ瀹讹紝瀹冩槸涓�鍙�(",
- 5:{
- data:"span",
- num:2,
+ 4: ")铓傝殎;铓傝殎灏忓闈㈠甫寰瑧锛屾椂鍒绘効鎰忓府鍔╁ぇ瀹讹紝瀹冩槸涓�鍙�(",
+ 5: {
+ data: "span",
+ num: 2,
},
- 6:" )铓傝殎"
+ 6: " )铓傝殎"
},
stemStyle: "RichTxt",
type: "鎷栨嫿棰�",
- userAnswer:[
+ userAnswer: [
{
- vlaue:'',
- txt:''
+ vlaue: '',
+ txt: ''
},
{
- vlaue:'',
- txt:''
+ vlaue: '',
+ txt: ''
},
{
- vlaue:'',
- txt:''
+ vlaue: '',
+ txt: ''
},
]
},
],
questions: [
- {
- analysisCon: "undefined",
- answer: ['C', 'A', 'B'],
- difficulty: 0,
- id: 47775,
- isCollect: false,
- isComplete: false,
- isRight: null,
- isUnfold: "",
- isUserAnswer: false,
- number: 1,
- options: [
- {
- "img": "",
- "index": "3CA6",
- "txt": "鑳嗗皬鐨�",
- "value": "A"
- },
- {
- "img": "",
- "index": "73EE",
- "txt": "鍠勮壇鐨�",
- "value": "B"
- },
- {
- "img": "",
- "index": "6AEF",
- "txt": "娌夌ǔ鐨�",
- "value": "C"
- },
- ],
- optionStyle: "Image",
- questionType: "singleChoice",
- score: 2,
- stem: {
- "stemTxt": "铓傝殎闃熼暱璧拌矾鏄傞鎸鸿兏銆佹浼愬潥瀹氾紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓侊紱灏忚殏铓佽蛋璧疯矾鏉ュ皬蹇冪考缈硷紝鐪肩椋樺拷涓嶅畾锛屽畠鏄竴鍙紙銆�銆�锛夎殏铓侊紱铓傝殎灏忓闈㈠甫寰瑧锛屾椂鍒绘効鎰忓府鍔╁ぇ瀹讹紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓併��"
- },
- stemStyle: "Txt",
- userAnswer: "",
- // 鍗曢�夐杩欓噷鐨勫瓧娈靛唴瀹瑰氨鏄�"鍗曢�夐"
- type: 'sort'
- },
- ],
- accentColor:'green',
+ {
+ analysisCon: "undefined",
+ answer: ['C', 'A', 'B'],
+ difficulty: 0,
+ id: 47775,
+ isCollect: false,
+ isComplete: false,
+ isRight: null,
+ isUnfold: "",
+ isUserAnswer: false,
+ number: 1,
+ options: [
+ {
+ "img": "",
+ "index": "3CA6",
+ "txt": "鑳嗗皬鐨�",
+ "value": "A"
+ },
+ {
+ "img": "",
+ "index": "73EE",
+ "txt": "鍠勮壇鐨�",
+ "value": "B"
+ },
+ {
+ "img": "",
+ "index": "6AEF",
+ "txt": "娌夌ǔ鐨�",
+ "value": "C"
+ },
+ ],
+ optionStyle: "Image",
+ questionType: "singleChoice",
+ score: 2,
+ stem: {
+ "stemTxt": "铓傝殎闃熼暱璧拌矾鏄傞鎸鸿兏銆佹浼愬潥瀹氾紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓侊紱灏忚殏铓佽蛋璧疯矾鏉ュ皬蹇冪考缈硷紝鐪肩椋樺拷涓嶅畾锛屽畠鏄竴鍙紙銆�銆�锛夎殏铓侊紱铓傝殎灏忓闈㈠甫寰瑧锛屾椂鍒绘効鎰忓府鍔╁ぇ瀹讹紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓併��"
+ },
+ stemStyle: "Txt",
+ userAnswer: "",
+ // 鍗曢�夐杩欓噷鐨勫瓧娈靛唴瀹瑰氨鏄�"鍗曢�夐"
+ type: 'sort'
+ },
+ ],
+ accentColor: 'green',
};
},
methods: {
@@ -439,9 +461,21 @@
this.videoPathOne = await getResourcePath(
"a3c9b55ac8227e4c885384ff2fc6c0e7"
);
- // this.auidoPathOne = await getResourcePath(
- // "2c5f6c69b0f9f7a3c03e473cb8c977f5"
- // );
+ this.auidoPathOne = await getResourcePath(
+ "0c147c73d67672d1538f76fa22793ff1"
+ );
+ this.auidoPathTwo = await getResourcePath(
+ "daf62713e056d875baa37283c6190a46"
+ );
+ this.auidoPathThree = await getResourcePath(
+ "126edb6a476971840e4c6abf0a3e9da5"
+ );
+ this.auidoPathFour = await getResourcePath(
+ "2485785e9a21a78bcfc58db132537ffd"
+ );
+ this.auidoPathFive = await getResourcePath(
+ "a37bb621b2591e3666e94d1a3bc23bc0"
+ );
},
setBookQuestion() {
console.log("淇濆瓨");
@@ -500,6 +534,7 @@
height: 100%;
background-color: red;
}
+
.drag-text {
margin: 0 6%;
font-family: "STKaiti";
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index 8d33fc0..49347fa 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -155,8 +155,8 @@
}, 500);
// 娴嬭瘯椤甸潰璺宠浆
- // setTimeout(() => {
- // this.gotoPage(3,16);
+ setTimeout(() => {
+ this.gotoPage(2,6);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -184,7 +184,7 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- // }, 500);
+ }, 500);
},
methods: {
// setZoom1() {
diff --git a/src/components/choice/choice.vue b/src/components/choice/choice.vue
index 6860268..0dd1afc 100644
--- a/src/components/choice/choice.vue
+++ b/src/components/choice/choice.vue
@@ -1,99 +1,91 @@
<template>
<div class="choice-question">
<!-- 棰樼洰鍐呭鍙婇�夐」閮ㄥ垎 -->
- <div class="question-content">
- <p>{{ currentQuestion.stem.stemTxt }}</p>
- <div class="all-options">
- <span
- v-for="(option, index) in currentQuestion.options"
- :key="index"
- class="option"
- :class="{ selected: selectedOptions.includes(index) }"
- @click="!isSubmitted && toggleOption(index)"
- >
- <svg
- v-if="selectedOptions.includes(index)"
- t="1718282810750"
- class="icon"
- viewBox="0 0 1355 1024"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- p-id="87382"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="170"
- height="170"
- >
- <path
- d="M1299.772238 471.021724a366.045786 366.045786 0 0 0-97.270943-99.189942 379.484778 379.484778 0 0 0-29.436982-123.509928 398.682766 398.682766 0 0 0-89.591948-127.986925 405.722762 405.722762 0 0 0-133.107922-91.511946A409.56176 409.56176 0 0 0 794.859534 0.026 401.242765 401.242765 0 0 0 568.319667 67.85896a411.481759 411.481759 0 0 0-97.909943 91.511947 261.735847 261.735847 0 0 0-63.994962-7.679996 247.656855 247.656855 0 0 0-176.623897 71.033958 245.736856 245.736856 0 0 0-72.312957 202.860882 325.729809 325.729809 0 0 0-84.471951 72.953957A309.731819 309.731819 0 0 0 0.053 703.959588a311.010818 311.010818 0 0 0 97.269943 229.099865 323.80981 323.80981 0 0 0 231.659864 90.871947h660.418613a360.926789 360.926789 0 0 0 255.97585-104.949938 360.926789 360.926789 0 0 0 81.272953-116.469932 355.166792 355.166792 0 0 0 27.516984-138.866919 345.567798 345.567798 0 0 0-54.394969-192.622887z"
- fill="rgb(245, 130, 32)"
- :style="{ fill: primaryColor }"
- p-id="87383"
- ></path>
- </svg>
- <svg
- v-else
- t="1718282816195"
- class="icon"
- viewBox="0 0 1024 1024"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- p-id="87529"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="170"
- height="170"
- >
- <path
- d="M829.248 420.576C815.264 274.56 693.696 160 544 160c-115.808 0-214.944 68.736-260.672 167.36A142.72 142.72 0 0 0 240.032 320a144.032 144.032 0 0 0-144 144c0 15.808 3.168 30.752 7.872 44.928C42.048 544.992 0.032 611.168 0.032 687.936a208 208 0 0 0 208 208V896H784v-0.064c132.576 0 240-107.424 240-240 0-116.992-83.872-214.176-194.752-235.36zM784 831.936V832H208.032a144.256 144.256 0 0 1-144-144.064c0-51.2 26.976-97.44 72.128-123.744 43.872-25.184 46.88-30.176 28.48-75.424a78.56 78.56 0 0 1-4.608-24.736c0-44.128 35.872-80 80-80 0 0 20.992-1.504 43.296 7.36 36.704 14.624 40.704 0.64 58.048-37.088C378.08 275.168 457.6 224 544 224c115.2 0 210.432 87.136 221.568 202.688 3.936 45.824 3.936 45.824 51.68 56.736A175.872 175.872 0 0 1 960 655.936c0 97.056-78.944 176-176 176z"
- fill="rgb(245, 130, 32)"
- :style="{ fill: primaryColor }"
- p-id="87530"
- ></path>
- </svg>
- <span class="option-text" :style="{color:formatAnswer(getSelectedOptions()).indexOf(option.value ) > -1 ? '#fff' : '#000'}">{{ option.value }}銆亄{ option.txt }}</span>
- </span>
- </div>
- </div>
- <!-- 绛旀閮ㄥ垎 -->
- <div v-if="showResult">
- <div style="display: flex; align-items: center; flex-direction: column">
- <img
- class="face"
- :src="choiceData.isCorrect ? correctImg : incorrectImg"
- alt="Result"
- />
- <div>
- <p class="center" v-if="choiceData.isCorrect">鎭枩鎮細绛斿浜�</p>
- <p class="center" v-else>绛旈敊浜嗭紝鍔犳补鍝�</p>
+ <div style="display: flex; justify-content: space-around;">
+ <div class="question-content">
+ <p class="question-t"> <span>
+ <span class="hs1">鈼�</span>璇烽�夊嚭浣犺涓烘纭殑绛旀銆�</span><span>绗瑊{ currentQuestion.id }}棰� (鍏眥{ questions.length}}棰�)</span></p>
+ <p>{{ currentQuestion.stem.stemTxt }}</p>
+ <div class="all-options">
+ <span v-for="(option, index) in currentQuestion.options" :key="index" class="option"
+ :class="{ selected: selectedOptions.includes(index) }" @click="!isSubmitted && toggleOption(index)">
+ <!-- 绌哄績浜戞湹 -->
+ <span>
+ <svg v-if="selectedOptions.includes(index)" t="1718282810750" class="icon" viewBox="0 0 1355 1024"
+ version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="87382" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="170" height="170">
+ <path
+ d="M1299.772238 471.021724a366.045786 366.045786 0 0 0-97.270943-99.189942 379.484778 379.484778 0 0 0-29.436982-123.509928 398.682766 398.682766 0 0 0-89.591948-127.986925 405.722762 405.722762 0 0 0-133.107922-91.511946A409.56176 409.56176 0 0 0 794.859534 0.026 401.242765 401.242765 0 0 0 568.319667 67.85896a411.481759 411.481759 0 0 0-97.909943 91.511947 261.735847 261.735847 0 0 0-63.994962-7.679996 247.656855 247.656855 0 0 0-176.623897 71.033958 245.736856 245.736856 0 0 0-72.312957 202.860882 325.729809 325.729809 0 0 0-84.471951 72.953957A309.731819 309.731819 0 0 0 0.053 703.959588a311.010818 311.010818 0 0 0 97.269943 229.099865 323.80981 323.80981 0 0 0 231.659864 90.871947h660.418613a360.926789 360.926789 0 0 0 255.97585-104.949938 360.926789 360.926789 0 0 0 81.272953-116.469932 355.166792 355.166792 0 0 0 27.516984-138.866919 345.567798 345.567798 0 0 0-54.394969-192.622887z"
+ fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87383"></path>
+ </svg>
+ <!-- 瀹炲績浜戞湹 -->
+ <svg v-else t="1718282816195" class="icon" viewBox="0 0 1024 1024" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" p-id="87529" xmlns:xlink="http://www.w3.org/1999/xlink" width="170"
+ height="170">
+ <path
+ d="M829.248 420.576C815.264 274.56 693.696 160 544 160c-115.808 0-214.944 68.736-260.672 167.36A142.72 142.72 0 0 0 240.032 320a144.032 144.032 0 0 0-144 144c0 15.808 3.168 30.752 7.872 44.928C42.048 544.992 0.032 611.168 0.032 687.936a208 208 0 0 0 208 208V896H784v-0.064c132.576 0 240-107.424 240-240 0-116.992-83.872-214.176-194.752-235.36zM784 831.936V832H208.032a144.256 144.256 0 0 1-144-144.064c0-51.2 26.976-97.44 72.128-123.744 43.872-25.184 46.88-30.176 28.48-75.424a78.56 78.56 0 0 1-4.608-24.736c0-44.128 35.872-80 80-80 0 0 20.992-1.504 43.296 7.36 36.704 14.624 40.704 0.64 58.048-37.088C378.08 275.168 457.6 224 544 224c115.2 0 210.432 87.136 221.568 202.688 3.936 45.824 3.936 45.824 51.68 56.736A175.872 175.872 0 0 1 960 655.936c0 97.056-78.944 176-176 176z"
+ fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87530"></path>
+ </svg>
+ </span>
+ <span class="symbol"> <!-- 瀵瑰彿 -->
+ <svg v-if="showResult && handleQuestion(option.value)" t="1716986419862" class="icon1"
+ 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="10" height="10">
+ <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="showResult && handleQuestion(option.value) == false" t="1716987085767" class="icon2"
+ 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="10" height="10">
+ <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>
+ <!-- 閫夐」 -->
+ <span class="option-text"
+ :style="{ color: formatAnswer(getSelectedOptions()).indexOf(option.value) > -1 ? '#fff' : '#000' }">
+ {{ option.value }}銆亄{ option.txt }}
+ </span>
+ </span>
+ <div v-if="showResult" class="smiling-face">
+ <div style="display: flex; align-items: center; flex-direction: column; width: 90px;">
+ <img class="face" :src="choiceData.isCorrect ? correctImg : incorrectImg" alt="Result" />
+ <div>
+ <p class="center face-text" style="color: green;" v-if="choiceData.isCorrect">鎭枩鎮細绛斿浜�</p>
+ <p class="center face-text" v-else :class="{
+ 'correct-answer': isCorrectAnswer(),
+ 'incorrect-answer': !isCorrectAnswer(),
+ }">绛旈敊浜嗭紝鍔犳补鍝�</p>
+ </div>
+ </div>
+ </div>
</div>
</div>
+
+ </div>
+ <div v-if="showResult">
<div class="key">
<p class="right-key">
姝ｇ‘绛旀锛歿{ formatAnswer(currentQuestion.answer) }}
</p>
- <p
- :class="{
- 'correct-answer': isCorrectAnswer(),
- 'incorrect-answer': !isCorrectAnswer(),
- }"
- >
+ <p :class="{
+ 'correct-answer': isCorrectAnswer(),
+ 'incorrect-answer': !isCorrectAnswer(),
+ }">
鎮ㄧ殑绛旀锛歿{ formatAnswer(getSelectedOptions()) }}
</p>
</div>
</div>
+ <!-- 绛旀閮ㄥ垎 -->
<!-- 棰樼洰鎸夐挳閮ㄥ垎 -->
<div class="btn-button">
- <button
- v-if="currentIndex > 0"
- @click="prevQuestion"
- :style="mergedStyles"
- >
+ <button v-if="currentIndex > 0" @click="prevQuestion" :style="mergedStyles">
涓婁竴棰�
</button>
- <button
- v-if="currentIndex < questions.length - 1"
- @click="nextQuestion"
- :style="mergedStyles"
- >
+ <button v-if="currentIndex < questions.length - 1" @click="nextQuestion" :style="mergedStyles">
涓嬩竴棰�
</button>
<button @click="resetQuestion" :style="mergedStyles">閲嶅仛</button>
@@ -312,7 +304,7 @@
return this.selectedOptions.map((index) => {
const selectedOption = this.currentQuestion.options[index];
// 杩斿洖閫夐」鐨勬枃鏈紙杩欓噷鍋囪姣忎釜閫夐」瀵硅薄鏈変竴涓� 'value' 灞炴�э級
- return selectedOption.value;
+ return selectedOption.value.replace(/\s/g, ',');
});
},
formatAnswer(answer) {
@@ -343,7 +335,6 @@
},
submitQuestion() {
const isCorrectAnswer = this.isCorrectAnswer();
- console.log(isCorrectAnswer);
this.isCorrect = this.isCorrectAnswer();
this.showResult = true;
this.choiceData.isCorrect = this.isCorrect;
@@ -354,6 +345,7 @@
// 鎾斁鈥滅瓟閿欎簡锛屽姞娌瑰摝鈥濈殑闊抽
}
this.isSubmitted = true;
+ // this.handleQuestion(0);
},
isCorrectAnswer() {
// 妫�鏌ョ瓟妗堟槸鍚︽纭�
@@ -406,41 +398,115 @@
return selectedValues.every((value) => correctSet.has(value));
}
},
+ handleQuestion(data) {
+ if (!this.showResult) return null;
+ let flag = null
+ const item = this.questions[this.currentIndex]
+ let select = this.getSelectedOptions()
+ select = Array.from(select)
+ if (select.indexOf(data) > -1) {
+ flag = item.answer.indexOf(data) > -1 ? true : false
+ }
+ // item.answer.some(citem =>{
+ // console.log(select.indexOf(citem)>-1 ? true: false)
+ // return select.indexOf(citem)>-1 ? true: false
+ // })
+ // console.log(select.indexOf(data)>-1 ? true: false )
+ // return select.indexOf(data)>-1 ? true: false
+ return flag
+ }
},
};
</script>
<style lang="less" scoped>
-.all-options {
+.question-t {
display: flex;
justify-content: space-between;
- margin-left: 10%;
+ width: 100%;
+}
+
+.all-options {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ min-height: 250px;
+ width: min-content;
+}
+
+/* 褰撳睆骞曞搴︽渶澶т负600px鏃跺簲鐢ㄦ鏍峰紡 */
+@media screen and (max-width: 420px) {
+ .all-options {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 100%;
+ }
+
+ .option {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ height: min-content;
+ }
}
.option {
position: relative;
- /* 璁剧疆涓虹浉瀵瑰畾浣嶅鍣� */
display: flex;
- flex-wrap: wrap;
- /* 浣跨敤 Flexbox 浠ヤ究鏇村ソ鍦版帶鍒跺竷灞�鍜屽榻� */
- align-items: center;
- /* 鍨傜洿灞呬腑瀵归綈 */
+ flex-direction: row;
+ //flex-wrap: nowrap;
+ width: 170px;
+ height: 250px;
+ height: min-content;
+}
+// 杩欓噷鏄敤鏉ラ�変腑寰幆鍑烘潵鐨勬煇涓洅瀛� 2灏变唬琛ㄧ浜屼釜鐩掑瓙
+.option:nth-child(2) {
+ //margin-top: 100px;
+ align-self: flex-end;
+ /* 浣胯鍏冪礌鍦ㄥ瀭鐩存柟鍚戜笂灞呬笅 */
}
.icon {
- width: 80%;
+ width: 130px;
height: auto;
min-width: 120px;
+}
+
+.icon1 {
+ position: absolute;
+ z-index: 1;
+ left: 60%;
+ top: 3%;
+ width: 50%;
+ height: auto;
+ min-width: 50px;
+}
+
+.icon2 {
+ position: absolute;
+ z-index: 1;
+ left: 68%;
+ top: 3%;
+ width:30%;
+ height: auto;
+ min-width: 30px;
}
.option-text {
position: absolute;
z-index: 1;
- left: 10%;
- top: 52%;
+ left: 14%;
+ top: 47%;
+}
+
+.option-text:nth-child(2) {
+ top: 50%;
}
.option-text.selected {
+ width: 180px;
/* 褰撹閫変腑鏃剁殑鏍峰紡 */
color: white;
}
@@ -451,13 +517,13 @@
.btn-button {
width: 70%;
- margin: 10px auto 0 auto;
+ margin: 10px auto 10px auto;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
-.btn-button > button {
+.btn-button>button {
width: 80px;
height: 30px;
margin-top: 10px;
@@ -467,7 +533,7 @@
cursor: pointer;
}
-.btn-button > button:hover {
+.btn-button>button:hover {
// background-color: rgb(245, 130, 32);
// /* 榧犳爣鎮仠鏃惰儗鏅壊鍙樹负绾㈣壊 */
// color: white;
@@ -501,8 +567,19 @@
/* 閿欒绛旀鐨勫瓧浣撻鑹� */
}
+.smiling-face{
+ position: absolute;
+ z-index: 1;
+ bottom: 2% ;
+ right: 0;
+}
.face {
- width: 15%;
+ width: 80%;
height: auto;
}
+
+.face-text {
+
+ text-wrap: wrap;
+}
</style>
--
Gitblit v1.9.1