From 0a945a92ee0c133a6d7b71b35a705d9764d94f3b Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期四, 11 七月 2024 10:57:05 +0800
Subject: [PATCH] 英语（第一单元题集）
---
src/components/choice/choice.vue | 271 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 176 insertions(+), 95 deletions(-)
diff --git a/src/components/choice/choice.vue b/src/components/choice/choice.vue
index 6860268..711d7aa 100644
--- a/src/components/choice/choice.vue
+++ b/src/components/choice/choice.vue
@@ -1,99 +1,95 @@
<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; flex-direction: column;">
+ <div class="question-t">
+ <span style="display: flex; "><span class="hs1">鈼�</span>璇烽�夊嚭浣犺涓烘纭殑绛旀銆�</span>
+ <span>绗瑊{ currentQuestion.id }}棰� (鍏眥{ questions.length}}棰�)</span>
+ </div>
+ <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)">
+ <!-- 绌哄績浜戞湹 -->
+ <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="130" 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="130"
+ 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" @click="(e)=>{
+ e.preventDefault()
+ }"
+ :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 +308,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 +339,6 @@
},
submitQuestion() {
const isCorrectAnswer = this.isCorrectAnswer();
- console.log(isCorrectAnswer);
this.isCorrect = this.isCorrectAnswer();
this.showResult = true;
this.choiceData.isCorrect = this.isCorrect;
@@ -354,6 +349,7 @@
// 鎾斁鈥滅瓟閿欎簡锛屽姞娌瑰摝鈥濈殑闊抽
}
this.isSubmitted = true;
+ // this.handleQuestion(0);
},
isCorrectAnswer() {
// 妫�鏌ョ瓟妗堟槸鍚︽纭�
@@ -406,41 +402,116 @@
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%;
+ margin-top: 10px;
+}
+
+.all-options {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ min-height: 250px;
+ width: min-content;
+}
+
+/* 褰撳睆骞曞搴︽渶澶т负600px鏃跺簲鐢ㄦ鏍峰紡 */
+@media screen and (max-width: 430px) {
+ .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 +522,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 +538,7 @@
cursor: pointer;
}
-.btn-button > button:hover {
+.btn-button>button:hover {
// background-color: rgb(245, 130, 32);
// /* 榧犳爣鎮仠鏃惰儗鏅壊鍙樹负绾㈣壊 */
// color: white;
@@ -501,8 +572,18 @@
/* 閿欒绛旀鐨勫瓧浣撻鑹� */
}
+.smiling-face{
+ position: absolute;
+ z-index: 1;
+ bottom: -2% ;
+ right: 4%;
+}
.face {
- width: 15%;
+ width: 80%;
height: auto;
}
+
+.face-text {
+ text-wrap: nowrap;
+}
</style>
--
Gitblit v1.9.1