先提前祝jym ,心有嫦娥月,祝福满满中秋!
猜题卡片灵感来自于王者荣耀的夫子的试炼,收集了一些关于中秋节的题目做成了卡片,以选择题的形式答题。
码上掘金的体验版已更新(上传不了图片资源),体验版为无图版本 效果图:
第一步先画一个div
<header class="header">
<div>
<img style="height: 143px;width: 189px;margin-top: 30px;margin-bottom: 10px;" src="./img/tuzi.png" alt="">
<p class="text1">答对{{ 0 }}题</p>
</div>
</div>
先画一个div里面放一张图片,下面显示答对题目数量,题目的数量为响应式的,记录答对的题数
<div class="container">
<header class="header">
<div>
<img style="height: 143px;width: 189px;margin-top: 30px;margin-bottom: 10px;" src="./img/tuzi.png" alt="">
<p class="text1">答对{{ 0 }}题</p>
</div>
</div>
<div class="">
<p class="text2 timu2" style="margin-top: 30px;">第{{ timusl }}/10题</p>
<p class="text2 timu2" style="width: 290px;word-wrap: break-word;">{{ "题目内容" }}</p>
<div class="timu">
<div :class="[isCorrectA?'text4':aaa? 'text5' :'text1', 'timu1']" @click="onclickA">A:{{ "木兰辞" }}</div>
<div :class="[isCorrectB?'text4':bbb? 'text5' :'text1', 'timu1']" @click="onclickB">B:{{ "九歌" }}</div>
</div>
<div class="timu">
<div :class="[isCorrectC?'text4':ccc? 'text5' :'text1', 'timu1']" @click="onclickC">C:{{ "八阵图" }}</div>
<div :class="[isCorrectD?'text4':ddd? 'text5' :'text1', 'timu1']" @click="onclickD">D:{{ "兰陵王破阵曲" }}</div>
</div>
再加上一个div,里面放选择题的题目和答案以及是第几题,给4个选项都加上点击事件,主要是判断选项和答案是否一致,回答错误就会跳出提示回答错误,并且选项变成红色字体;如果回答正确就会跳出回答正确,选项变成绿色字体;不论对错,选择完后都会有一个下一题的按钮来选择跳到下一题。至此为html部分的全部思路,下面的js部分
<header class="header">
<div>
<img style="height: 143px;width: 189px;margin-top: 30px;margin-bottom: 10px;" src="./img/tuzi.png" alt="">
<p class="text1">答对{{ 0 }}题</p>
<p class="text1">累计奖励</p>
</div>
<div class="">
<p class="text2 timu2" style="margin-top: 30px;">第{{ timusl }}/10题</p>
<p class="text2 timu2" style="width: 290px;word-wrap: break-word;">{{ "题目内容" }}</p>
<div class="timu">
<div :class="[isCorrectA?'text4':aaa? 'text5' :'text1', 'timu1']" @click="onclickA">A:{{ "木兰辞" }}</div>
<div :class="[isCorrectB?'text4':bbb? 'text5' :'text1', 'timu1']" @click="onclickB">B:{{ "九歌" }}</div>
</div>
<div class="timu">
<div :class="[isCorrectC?'text4':ccc? 'text5' :'text1', 'timu1']" @click="onclickC">C:{{ "八阵图" }}</div>
<div :class="[isCorrectD?'text4':ddd? 'text5' :'text1', 'timu1']" @click="onclickD">D:{{ "兰陵王破阵曲" }}</div>
</div>
</div>
</header>
<div class="result">
<p v-if="isAnswered && isCorrectA||isCorrectB||isCorrectC||isCorrectD" class="text1">回答正确!</p>
<p v-if="isAnswered && !isCorrectA&!isCorrectB&!isCorrectC&!isCorrectD" class="text1">回答错误!</p>
</div>
<p class="text1" @click="xyt"> {{ "下一题" }}</p>
</div>
第二步写js 我们先给每一个选项设置一个点击事件,点击时切换class的样式,回答正确渲染成绿色,回答渲染成红色,未答题则全是白色字体。 判断用户选择的答案是否为正确答案,来渲染答错和答对
// 0未选,1选对,2选错
let aaa = ref(0)
let bbb = ref(0)
let ccc = ref(0)
let ddd = ref(0)
let isAnswered = ref(false)// 是否已回答
let isCorrectA = ref(false) // 是否回答正确
let isCorrectB = ref(false) // 是否回答正确
let isCorrectC = ref(false) // 是否回答正确
let isCorrectD = ref(false) // 是否回答正确
let correctAnswer = 'A' // 正确答案(假设正确答案为 A)
let selectedAnswer = '' // 用户选择的答案(假设用户选择的答案为空)
let timusl=ref(1)
let onclickA = () => {
selectedAnswer='A'
isAnswered.value = true; // 设置已回答状态
if (selectedAnswer === correctAnswer) {
isCorrectA.value = true; // 答案正确
} else {
isCorrectA.value = false; // 答案错误
}
if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
aaa.value = 1
}
}
let onclickB = () => {
selectedAnswer='B'
isAnswered.value = true; // 设置已回答状态
if (selectedAnswer === correctAnswer) {
isCorrectB.value = true; // 答案正确
} else {
isCorrectB.value = false; // 答案错误
}
if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
bbb.value = 1
}
}
let onclickC = () => {
selectedAnswer='C'
isAnswered.value = true; // 设置已回答状态
if (selectedAnswer=== correctAnswer) {
isCorrectC.value = true; // 答案正确
} else {
isCorrectC.value = false; // 答案错误
}
if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
ccc.value = 1
}
}
let onclickD = () => {
selectedAnswer='D'
isAnswered.value = true; // 设置已回答状态
if (selectedAnswer === correctAnswer) {
isCorrectD.value = true; // 答案正确
} else {
isCorrectD.value = false; // 答案错误
}
if (aaa.value == 0 & bbb.value == 0 & ccc.value == 0 & ddd.value == 0) {
ddd.value = 1
}
}
let xyt=()=>{
if( timusl.value<=10){
timusl.value++
}
}
最后稍微加一点点css
.container {
width: 700px;
height: 350px;
background-color: #21314A;
}
.text1 {
color: #fff;
font-size: small;
text-align: center;
cursor: pointer;
}
.text3 {
color: #000;
font-size: small;
text-align: center;
cursor: pointer;
}
.text4 {
color: green;
font-size: small;
text-align: center;
cursor: pointer;
}
.text5 {
color: red;
font-size: small;
text-align: center;
cursor: pointer;
}
.text2 {
color: #fff;
font-size: small;
/* text-align: center; */
}
.header {
display: flex;
margin-left: 80px;
margin-top: 20px;
}
.timu {
display: flex;
width: 300px;
text-align: center;
}
.timu1 {
width: 150px;
margin: 10px;
padding: 10px;
border-width: 2px;
border-style: solid;
border-radius: 10px;
border-color: #000000;
}
.timu2 {
margin-left: 10px;
}
</style>
就可以达到一个卡片答题的效果了,但是代码又重又呆,我们再优化一点点代码,把题目循环进去最后的代码如下
<template>
<div class="container">
<header class="header">
<div>
<img style="height: 143px;width: 189px;margin-top: 30px;margin-bottom: 10px;" src="./img/tuzi.png" alt="">
<p class="text1">答对{{ correctCount }}题</p>
<p class="text1">累计奖励</p>
</div>
<div>
<p class="text2 timu2" style="margin-top: 30px;">第{{ currentQuestionIndex }}/10题</p>
<p class="text2 timu2" style="width: 290px;word-wrap: break-word;">{{ currentQuestion.content }}</p>
<div class="timu">
<div :class="[isCorrect('A') ? 'text4' : selectedAnswer === 'A' ? 'text5' : 'text1', 'timu1']"
@click="selectAnswer('A')">A:{{ currentQuestion.options[0] }}</div>
<div :class="[isCorrect('B') ? 'text4' : selectedAnswer === 'B' ? 'text5' : 'text1', 'timu1']"
@click="selectAnswer('B')">B:{{ currentQuestion.options[1] }}</div>
</div>
<div class="timu">
<div :class="[isCorrect('C') ? 'text4' : selectedAnswer === 'C' ? 'text5' : 'text1', 'timu1']"
@click="selectAnswer('C')">C:{{ currentQuestion.options[2] }}</div>
<div :class="[isCorrect('D') ? 'text4' : selectedAnswer === 'D' ? 'text5' : 'text1', 'timu1']"
@click="selectAnswer('D')">D:{{ currentQuestion.options[3] }}</div>
</div>
</div>
</header>
<div class="result">
<p v-if="isAnswered && isCorrect(selectedAnswer)" class="text1">回答正确!</p>
<p v-else-if="isAnswered" class="text1">回答错误!</p>
</div>
<div v-if="currentQuestionIndex >= 10">
<p class="text1">恭喜回答完所有题目,您一共答对{{ correctCount }}题!</p>
</div>
<p class="text1" @click="nextQuestion" v-if="isAnswered && currentQuestionIndex < 10">下一题</p>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const questions = [
{
content: "中秋节是从哪个朝代开始成为固定的节日?",
options: ["唐", "宋", "元", "明"],
correctAnswer: "A"
},
{
content: "月饼最初是用来做什么的?",
options: ["祭奉月神的贡品", "馈赠亲友的礼物", "节日食品", "地方小吃"],
correctAnswer: "A"
},
{
content: "在古代月圆和月缺一般形容什么?",
options: ["天气好坏", "凶吉象征", "身体是否健康", "悲欢离合"],
correctAnswer: "D"
},
{
content: "传说中嫦娥是谁的妻子?",
options: ["黄帝", "后裔", "大禹", "吴刚"],
correctAnswer: "B"
},
{
content: "嫦娥下凡(打一花名)?",
options: ["月季", "玫瑰", "牡丹", "百合"],
correctAnswer: "A"
},
{
content: "中秋过后又重阳(打一诗句)?",
options: ["月上柳梢头", "明月几时有", "一节复一节", "抬头望明月"],
correctAnswer: "C"
},
{
content: "“解落三秋叶,能开二月花”描写的是哪一种自然现象?",
options: ["雪", "月", "风", "霜"],
correctAnswer: "C"
},
{
content: "以下哪个不是跟中秋节有关的传说?",
options: ["精卫填海", "吴刚伐桂", "玉兔捣药", "嫦娥奔月"],
correctAnswer: "A"
},
{
content: "八月十五又称什么节?",
options: ["月饼节", "团圆节", "故乡节", "诗人节"],
correctAnswer: "B"
},
{
content: "在传说中,哪位皇帝曾在中秋梦游月宫?",
options: ["秦始皇嬴政", "唐玄宗李隆基", "宋徽宗赵佶", "明成祖朱棣"],
correctAnswer: "B"
},
// 其他题目...
];
let currentQuestionIndex = ref(1); // 当前题目的索引
let currentQuestion = ref(questions[currentQuestionIndex.value - 1]); // 当前题目的内容
let selectedAnswer = ref(''); // 用户选择的答案
let isAnswered = ref(false); // 是否已回答
let correctCount = ref(0); // 答对的题目数量
const isCorrect = (option) => {
return isAnswered.value && selectedAnswer.value === option && selectedAnswer.value === currentQuestion.value.correctAnswer;
};
const selectAnswer = (option) => {
selectedAnswer.value = option;
isAnswered.value = true;
if (isCorrect(option)) {
correctCount.value++;
}
};
const nextQuestion = () => {
if (currentQuestionIndex.value < 10) {
currentQuestionIndex.value++;
currentQuestion.value = questions[currentQuestionIndex.value - 1];
selectedAnswer.value = '';
isAnswered.value = false;
}
};
</script>
<style scoped>
.container {
width: 700px;
height: 350px;
background-color: #21314A;
}
.text1 {
color: #fff;
font-size: small;
text-align: center;
cursor: pointer;
}
.text3 {
color: #000;
font-size: small;
text-align: center;
cursor: pointer;
}
.text4 {
color: green;
font-size: small;
text-align: center;
cursor: pointer;
}
.text5 {
color: red;
font-size: small;
text-align: center;
cursor: pointer;
}
.text2 {
color: #fff;
font-size: small;
/* text-align: center; */
}
.header {
display: flex;
margin-left: 80px;
margin-top: 20px;
}
.timu {
display: flex;
width: 300px;
text-align: center;
}
.timu1 {
width: 150px;
margin: 10px;
padding: 10px;
border-width: 2px;
border-style: solid;
border-radius: 10px;
border-color: #000000;
}
.timu2 {
margin-left: 10px;
}
</style>