|
|
|
|
@ -10,7 +10,7 @@ |
|
|
|
|
<div class="question-body"> |
|
|
|
|
<div class="question"> |
|
|
|
|
第<span class="question-count">{{ currentSum }}</span>题 |
|
|
|
|
<div class="timer">{{ formattedTime }} 秒</div> |
|
|
|
|
<!-- <div class="timer">{{ formattedTime }} 秒</div> --> |
|
|
|
|
</div> |
|
|
|
|
<p class="questions">共<span class="questions-count">{{ questions.length }}</span>题</p> |
|
|
|
|
<!-- 遍历题目 --> |
|
|
|
|
@ -19,13 +19,17 @@ |
|
|
|
|
</div> |
|
|
|
|
<!-- 遍历选项 --> |
|
|
|
|
<div class="options"> |
|
|
|
|
<button |
|
|
|
|
v-for="option in xnOptionsList" |
|
|
|
|
:key="option.id" |
|
|
|
|
:class="['option', { 'selected': selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid == option.id }]" |
|
|
|
|
@click="selectOption(option.id)" |
|
|
|
|
class="option" |
|
|
|
|
> |
|
|
|
|
<button v-for="option in xnOptionsList" :key="option.id" |
|
|
|
|
:class="['option', { |
|
|
|
|
// 'selected': option.hasOwnProperty('isChecked') ? option.isChecked : |
|
|
|
|
// selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid == option.id |
|
|
|
|
// 'selected': option.isChecked || (selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid === option.id) |
|
|
|
|
'selected': |
|
|
|
|
complete == true |
|
|
|
|
? option.isChecked |
|
|
|
|
: (selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid === option.id) |
|
|
|
|
}]" |
|
|
|
|
@click="selectOption(option.id)" class="option"> |
|
|
|
|
<span class="option-letter">{{ option.optionName }}</span> |
|
|
|
|
{{ option.optionText }} |
|
|
|
|
</button> |
|
|
|
|
@ -34,10 +38,9 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="submit-buttons"> |
|
|
|
|
<button class="submit-btn" @click="resetAnswers">退出答题</button> |
|
|
|
|
<button class="submit-btn" @click="submitAnswers">提交成绩</button> |
|
|
|
|
<button class="submit-btn" @click="submitAnswers" v-if="complete === false">提交成绩</button> |
|
|
|
|
</div> |
|
|
|
|
<el-dialog |
|
|
|
|
v-model="isVisible" :close-on-click-modal="false" :show-close="false"> |
|
|
|
|
<el-dialog v-model="isVisible" :close-on-click-modal="false" :show-close="false"> |
|
|
|
|
<resultsAnnounced :score="score" :formattedTime="formattedTime" @recreate="handleRecreate" /> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
@ -62,9 +65,9 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
} |
|
|
|
|
//右箭头 |
|
|
|
|
const SubRight = async () => { |
|
|
|
|
|
|
|
|
|
console.log(complete.value,'11111111') |
|
|
|
|
if(complete.value == false){ |
|
|
|
|
const res: any = await checkapi(selectedOption.value[currentQuestionIndex.value]); |
|
|
|
|
// answer.value = res.result; |
|
|
|
|
console.log(selectedOption.value); |
|
|
|
|
console.log(res, 'res') |
|
|
|
|
// 如果答对了，进入下一题 |
|
|
|
|
@ -83,6 +86,15 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
ElMessage.error('回答错误') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}else{ |
|
|
|
|
if (currentSum.value < questions.value.length) { |
|
|
|
|
currentQuestionIndex.value++; // 更新到下一题 |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
ElMessage.warning('无法下翻') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
const questions = ref<any[]>([]); |
|
|
|
|
const currentList = async () => { |
|
|
|
|
@ -117,9 +129,8 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
|
|
|
|
|
//选中逻辑 |
|
|
|
|
const selectOption = (option: any) => { |
|
|
|
|
|
|
|
|
|
if (complete.value == false) { |
|
|
|
|
if (questions.value.length > 0) { |
|
|
|
|
|
|
|
|
|
const currentQuestion = questions.value[currentQuestionIndex.value]; |
|
|
|
|
selectedOption.value[currentQuestionIndex.value] = { |
|
|
|
|
oid: option, |
|
|
|
|
@ -128,10 +139,15 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
console.log(selectedOption.value[currentQuestionIndex.value].oid, option); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const score = ref(0); // 初始化分数为0 |
|
|
|
|
const isVisible = ref(false) //成绩公布页的显示与否 |
|
|
|
|
const complete = ref<boolean>(Boolean(localStorage.getItem("complete"))); //点击提交按钮后控制答题回显 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 提交成绩按钮 |
|
|
|
|
const submitAnswers = async () => { |
|
|
|
|
|
|
|
|
|
console.log(selectedOption.value[currentQuestionIndex.value]) |
|
|
|
|
//答完全部题才能提交成绩 |
|
|
|
|
if (selectedOption.value[questions.value.length - 1] == null) { |
|
|
|
|
@ -144,13 +160,8 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
stopTimer(); // 停止计时 |
|
|
|
|
score.value = 100; // 重置分数 |
|
|
|
|
isVisible.value = true; |
|
|
|
|
// for (let i = 0; i < questions.value.length; i++) { |
|
|
|
|
// // 如果当前题目的选中选项与正确答案一致，则加10分 |
|
|
|
|
// if (res.result == "success") { |
|
|
|
|
// // score.value += 10; |
|
|
|
|
// score.value == 100 |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
localStorage.setItem("complete", "true");; |
|
|
|
|
// const display = complete.value |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
@ -199,6 +210,7 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
stopTimer()//计时器清零 |
|
|
|
|
elapsedTime.value = 0 |
|
|
|
|
startTimer() |
|
|
|
|
localStorage.setItem("complete", "false"); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
@ -216,24 +228,33 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
.submit-right { |
|
|
|
|
background: url("@/assets/images/right.png") no-repeat; |
|
|
|
|
background-size: contain; |
|
|
|
|
width: 60px; /* 按钮宽度 */ |
|
|
|
|
height: 60px; /* 按钮高度 */ |
|
|
|
|
width: 60px; |
|
|
|
|
/* 按钮宽度 */ |
|
|
|
|
height: 60px; |
|
|
|
|
/* 按钮高度 */ |
|
|
|
|
border: none; |
|
|
|
|
cursor: pointer; |
|
|
|
|
position: absolute; |
|
|
|
|
right: 0; /* 紧靠右部 */ |
|
|
|
|
top: 40%; /* 垂直居中*/ |
|
|
|
|
right: 0; |
|
|
|
|
/* 紧靠右部 */ |
|
|
|
|
top: 40%; |
|
|
|
|
/* 垂直居中*/ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.submit-left { |
|
|
|
|
background: url("@/assets/images/left.png") no-repeat; |
|
|
|
|
background-size: contain; |
|
|
|
|
width: 60px; /* 按钮宽度 */ |
|
|
|
|
height: 60px; /* 按钮高度 */ |
|
|
|
|
width: 60px; |
|
|
|
|
/* 按钮宽度 */ |
|
|
|
|
height: 60px; |
|
|
|
|
/* 按钮高度 */ |
|
|
|
|
border: none; |
|
|
|
|
cursor: pointer; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; /* 紧靠左部 */ |
|
|
|
|
top: 40%; /* 垂直居中*/ |
|
|
|
|
left: 0; |
|
|
|
|
/* 紧靠左部 */ |
|
|
|
|
top: 40%; |
|
|
|
|
/* 垂直居中*/ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.top { |
|
|
|
|
@ -252,10 +273,14 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.question-body { |
|
|
|
|
background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center; /* 添加 background-position */ |
|
|
|
|
background-size: contain; /* 确保背景图片覆盖整个元素 */ |
|
|
|
|
width: 1100px; /* 100% 宽度以确保背景图片完全显示 */ |
|
|
|
|
height: 500px; /* 固定高度 */ |
|
|
|
|
background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center; |
|
|
|
|
/* 添加 background-position */ |
|
|
|
|
background-size: contain; |
|
|
|
|
/* 确保背景图片覆盖整个元素 */ |
|
|
|
|
width: 1100px; |
|
|
|
|
/* 100% 宽度以确保背景图片完全显示 */ |
|
|
|
|
height: 500px; |
|
|
|
|
/* 固定高度 */ |
|
|
|
|
margin-top: 100px; |
|
|
|
|
margin-left: auto; |
|
|
|
|
margin-right: auto; |
|
|
|
|
@ -264,103 +289,161 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
padding-top: 30px; |
|
|
|
|
|
|
|
|
|
.question { |
|
|
|
|
font-size: 42px; /* 字体大小 */ |
|
|
|
|
text-align: center; /* 水平居中 */ |
|
|
|
|
letter-spacing: 3px; /* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
font-size: 42px; |
|
|
|
|
/* 字体大小 */ |
|
|
|
|
text-align: center; |
|
|
|
|
/* 水平居中 */ |
|
|
|
|
letter-spacing: 3px; |
|
|
|
|
/* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
// margin-top: 50px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.question-count { |
|
|
|
|
font-weight: bold; /* 数字加粗 */ |
|
|
|
|
color: rgb(165, 144, 95); /* 数字颜色为红色 */ |
|
|
|
|
font-size: 55px; /* 数字字体大小 */ |
|
|
|
|
font-weight: bold; |
|
|
|
|
/* 数字加粗 */ |
|
|
|
|
color: rgb(165, 144, 95); |
|
|
|
|
/* 数字颜色为红色 */ |
|
|
|
|
font-size: 55px; |
|
|
|
|
/* 数字字体大小 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.timer { |
|
|
|
|
font-size: 18px; /* 字体大小 */ |
|
|
|
|
letter-spacing: 3px; /* 字符间距 */ |
|
|
|
|
font-size: 18px; |
|
|
|
|
/* 字体大小 */ |
|
|
|
|
letter-spacing: 3px; |
|
|
|
|
/* 字符间距 */ |
|
|
|
|
text-align: right; |
|
|
|
|
position: absolute; /* 使用绝对定位 */ |
|
|
|
|
top: 25%; /* 距离顶部 */ |
|
|
|
|
left: 71.3%; /* 距离左侧 */ |
|
|
|
|
position: absolute; |
|
|
|
|
/* 使用绝对定位 */ |
|
|
|
|
top: 25%; |
|
|
|
|
/* 距离顶部 */ |
|
|
|
|
left: 71.3%; |
|
|
|
|
/* 距离左侧 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.questions { |
|
|
|
|
font-size: 23px; /* 字体大小 */ |
|
|
|
|
letter-spacing: 3px; /* 字符间距 */ |
|
|
|
|
font-size: 23px; |
|
|
|
|
/* 字体大小 */ |
|
|
|
|
letter-spacing: 3px; |
|
|
|
|
/* 字符间距 */ |
|
|
|
|
text-align: right; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.questions-count { |
|
|
|
|
font-weight: bold; /* 数字加粗 */ |
|
|
|
|
color: rgb(165, 144, 95); /* 数字颜色为红色 */ |
|
|
|
|
font-size: 25px; /* 数字字体大小 */ |
|
|
|
|
font-weight: bold; |
|
|
|
|
/* 数字加粗 */ |
|
|
|
|
color: rgb(165, 144, 95); |
|
|
|
|
/* 数字颜色为红色 */ |
|
|
|
|
font-size: 25px; |
|
|
|
|
/* 数字字体大小 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.txt { |
|
|
|
|
margin-top: 18px; |
|
|
|
|
font-size: 22px; /* 字体大小 */ |
|
|
|
|
font-family: Consolas, sans-serif; /* 字体样式 */ |
|
|
|
|
letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
line-height: 1.5; /* 行间距，1.5 表示字体大小的 1.5 倍 */ |
|
|
|
|
margin-top: 15px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
/* 字体大小 */ |
|
|
|
|
font-family: Consolas, sans-serif; |
|
|
|
|
/* 字体样式 */ |
|
|
|
|
letter-spacing: 1.5px; |
|
|
|
|
/* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
line-height: 1.5; |
|
|
|
|
/* 行间距，1.5 表示字体大小的 1.5 倍 */ |
|
|
|
|
color: #9b9a9a; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 选项容器样式 */ |
|
|
|
|
.options { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
color: #9b9a9a; |
|
|
|
|
display: flex; /* 使用 Flexbox 布局 */ |
|
|
|
|
flex-direction: column; /* 垂直排列按钮 */ |
|
|
|
|
display: flex; |
|
|
|
|
/* 使用 Flexbox 布局 */ |
|
|
|
|
flex-direction: column; |
|
|
|
|
/* 垂直排列按钮 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 单个选项样式 */ |
|
|
|
|
.option { |
|
|
|
|
padding: 5px 10px; /* 内边距，让按钮看起来更舒适 */ |
|
|
|
|
font-size: 20px; /* 字体大小 */ |
|
|
|
|
letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
text-align: left; /* 设置文字左对齐 */ |
|
|
|
|
padding: 5px 10px; |
|
|
|
|
/* 内边距，让按钮看起来更舒适 */ |
|
|
|
|
font-size: 19px; |
|
|
|
|
/* 字体大小 */ |
|
|
|
|
letter-spacing: 1.5px; |
|
|
|
|
/* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
text-align: left; |
|
|
|
|
/* 设置文字左对齐 */ |
|
|
|
|
margin-top: 5px; |
|
|
|
|
background-color: transparent; /* 背景颜色设置为透明 */ |
|
|
|
|
border: none; /* 移除边框 */ |
|
|
|
|
cursor: pointer; /* 鼠标悬停时显示手型 */ |
|
|
|
|
transition: background-color 0.3s ease; /* 平滑过渡效果 */ |
|
|
|
|
background-color: transparent; |
|
|
|
|
/* 背景颜色设置为透明 */ |
|
|
|
|
border: none; |
|
|
|
|
/* 移除边框 */ |
|
|
|
|
cursor: pointer; |
|
|
|
|
/* 鼠标悬停时显示手型 */ |
|
|
|
|
transition: background-color 0.3s ease; |
|
|
|
|
/* 平滑过渡效果 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.option:hover { |
|
|
|
|
color: #e7e2e2; /* 鼠标悬停时的字体颜色 */ |
|
|
|
|
color: #e7e2e2; |
|
|
|
|
/* 鼠标悬停时的字体颜色 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.option.selected { |
|
|
|
|
color: #d4cb48; /* 按钮按下或获得焦点时的背景颜色 */ |
|
|
|
|
color: #d4cb48; |
|
|
|
|
/* 按钮按下或获得焦点时的背景颜色 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.option-letter { |
|
|
|
|
font-size: 30px; |
|
|
|
|
font-weight: bold; /* 字母加粗 */ |
|
|
|
|
margin-right: 5px; /* 字母与后面文字的间距 */ |
|
|
|
|
font-weight: bold; |
|
|
|
|
/* 字母加粗 */ |
|
|
|
|
margin-right: 5px; |
|
|
|
|
/* 字母与后面文字的间距 */ |
|
|
|
|
color: rgb(165, 144, 95); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.submit-buttons { |
|
|
|
|
display: flex; /* 使用 Flexbox 布局 */ |
|
|
|
|
flex-direction: row; /* 水平排列按钮 */ |
|
|
|
|
justify-content: center; /* 水平居中 */ |
|
|
|
|
gap: 450px; /* 按钮之间的间距 */ |
|
|
|
|
display: flex; |
|
|
|
|
/* 使用 Flexbox 布局 */ |
|
|
|
|
flex-direction: row; |
|
|
|
|
/* 水平排列按钮 */ |
|
|
|
|
justify-content: center; |
|
|
|
|
/* 水平居中 */ |
|
|
|
|
gap: 450px; |
|
|
|
|
/* 按钮之间的间距 */ |
|
|
|
|
margin-top: 50px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.submit-btn { |
|
|
|
|
background: url("@/assets/images/Button.png") center; |
|
|
|
|
background-size: contain; /* 确保背景图片覆盖整个元素 */ |
|
|
|
|
background-color: transparent; /* 背景颜色设置为透明 */ |
|
|
|
|
border: none; /* 移除边框 */ |
|
|
|
|
cursor: pointer; /* 鼠标悬停时显示手型 */ |
|
|
|
|
background-size: contain; |
|
|
|
|
/* 确保背景图片覆盖整个元素 */ |
|
|
|
|
background-color: transparent; |
|
|
|
|
/* 背景颜色设置为透明 */ |
|
|
|
|
border: none; |
|
|
|
|
/* 移除边框 */ |
|
|
|
|
cursor: pointer; |
|
|
|
|
/* 鼠标悬停时显示手型 */ |
|
|
|
|
width: 300px; |
|
|
|
|
height: 41px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
font-weight: bold; /* 文字加粗 */ |
|
|
|
|
font-weight: bold; |
|
|
|
|
/* 文字加粗 */ |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 覆盖 el-dialog 的背景和边框样式 */ |
|
|
|
|
:deep(.el-dialog) { |
|
|
|
|
background: transparent !important; /* 设置背景为透明 */ |
|
|
|
|
border: none !important; /* 移除边框 */ |
|
|
|
|
box-shadow: none !important; /* 移除阴影 */ |
|
|
|
|
overflow: hidden; /* 防止内容溢出 */ |
|
|
|
|
background: transparent !important; |
|
|
|
|
/* 设置背景为透明 */ |
|
|
|
|
border: none !important; |
|
|
|
|
/* 移除边框 */ |
|
|
|
|
box-shadow: none !important; |
|
|
|
|
/* 移除阴影 */ |
|
|
|
|
overflow: hidden; |
|
|
|
|
/* 防止内容溢出 */ |
|
|
|
|
width: 640px; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
Ly