dlsx
/
virtualSimulation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

答完回显效果

Browse Source
main
Ly 1 week ago
parent 006a9997f1
commit 3eac6413da
2 changed files with 331 additions and 248 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/views/largeDataScreen/home.vue
  2. 247
      src/views/subjectTest/index.vue

4
src/views/largeDataScreen/home.vue
Unescape View File

@ -509,7 +509,7 @@
<el-progress <el-progress
:text-inside="true" :text-inside="true"
:stroke-width="20" :stroke-width="20"
:percentage="80" :percentage="100"
style="margin-bottom: 25px" style="margin-bottom: 25px"
/> />
<p class="name">复制新文件</p> <p class="name">复制新文件</p>
@ -520,7 +520,7 @@
<el-progress <el-progress
:text-inside="true" :text-inside="true"
:stroke-width="20" :stroke-width="20"
:percentage="80" :percentage="100"
style="margin-bottom: 25px" style="margin-bottom: 25px"
/> />
<p class="name">复制新文件</p> <p class="name">复制新文件</p>

247
src/views/subjectTest/index.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save