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. 413
      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>

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

@ -8,24 +8,28 @@
<!-- 左边按钮 --> <!-- 左边按钮 -->
<button class="submit-left" @click="SubLeft"></button> <button class="submit-left" @click="SubLeft"></button>
<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>
<!-- 遍历题目 --> <!-- 遍历题目 -->
<div v-if="currentQuestionIndex < questions.length" class="txt"> <div v-if="currentQuestionIndex < questions.length" class="txt">
<span>{{ currentQuestion }}</span> <span>{{ currentQuestion }}</span>
</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,11 +38,10 @@
</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>
</template> </template>
@ -46,160 +49,169 @@
<script lang="ts" setup> <script lang="ts" setup>
import resultsAnnounced from '@/views/resultsAnnounced/index.vue' import resultsAnnounced from '@/views/resultsAnnounced/index.vue'
import settingStore from "@/store/modules/setting"; import settingStore from "@/store/modules/setting";
import {subTestapi,checkapi} from '@/api/index.ts' import { subTestapi, checkapi } from '@/api/index.ts'
import { ref,computed,onMounted, onUnmounted} from "vue" import { ref, computed, onMounted, onUnmounted } from "vue"
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const setting = settingStore(); const setting = settingStore();
//左箭头 //左箭头
const SubLeft =()=>{ const SubLeft = () => {
console.log(currentQuestionIndex.value) console.log(currentQuestionIndex.value)
if(currentQuestionIndex.value >= 1){ if (currentQuestionIndex.value >= 1) {
currentQuestionIndex.value = currentQuestionIndex.value - 1 currentQuestionIndex.value = currentQuestionIndex.value - 1
}else{ } else {
ElMessage.warning('无法上翻') ElMessage.warning('无法上翻')
} }
} }
//右箭头 //右箭头
const SubRight = async()=>{ const SubRight = async () => {
console.log(complete.value,'11111111')
const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]); if(complete.value == false){
// answer.value = res.result; const res: any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
console.log(selectedOption.value); console.log(selectedOption.value);
console.log(res,'res') console.log(res, 'res')
// 如果答对了，进入下一题 // 如果答对了，进入下一题
if (res.result == "success") { if (res.result == "success") {
if(currentSum.value < questions.value.length){ if (currentSum.value < questions.value.length) {
currentQuestionIndex.value++; // 更新到下一题 currentQuestionIndex.value++; // 更新到下一题
} }
else{ else {
ElMessage.success('答题已完成，请提交') ElMessage.success('答题已完成，请提交')
} }
} }
else{ else {
if(selectedOption.value[currentQuestionIndex.value] == null){ if (selectedOption.value[currentQuestionIndex.value] == null) {
ElMessage.warning('请先答题') ElMessage.warning('请先答题')
}else{ } else {
ElMessage.error('回答错误') ElMessage.error('回答错误')
} }
} }
}else{
if (currentSum.value < questions.value.length) {
currentQuestionIndex.value++; // 更新到下一题
} }
const questions = ref<any[]>([]); else {
const currentList = async ()=>{ ElMessage.warning('无法下翻')
const res:any = await subTestapi(); }
}
}
const questions = ref<any[]>([]);
const currentList = async () => {
const res: any = await subTestapi();
questions.value = res.result questions.value = res.result
console.log(res.result) console.log(res.result)
// console.log(questions.value[0].xnOptionsList[0].id) // console.log(questions.value[0].xnOptionsList[0].id)
// console.log(questions.value,'questions1.value') // console.log(questions.value,'questions1.value')
} }
// 当前题目的索引 // 当前题目的索引
const currentQuestionIndex = ref(0); const currentQuestionIndex = ref(0);
//计算当前题目的序号（从1开始） //计算当前题目的序号（从1开始）
const currentSum = computed(() => currentQuestionIndex.value + 1); const currentSum = computed(() => currentQuestionIndex.value + 1);
// 当前题目 // 当前题目
const currentQuestion = computed(() => { const currentQuestion = computed(() => {
// 确保 questions.value 至少有一个元素 // 确保 questions.value 至少有一个元素
if (questions.value.length > 0) { if (questions.value.length > 0) {
return questions.value[currentQuestionIndex.value].questionText; return questions.value[currentQuestionIndex.value].questionText;
} }
return ''; return '';
}); });
const xnOptionsList =computed(() =>{ const xnOptionsList = computed(() => {
if (questions.value.length > 0) { if (questions.value.length > 0) {
return questions.value[currentQuestionIndex.value].xnOptionsList return questions.value[currentQuestionIndex.value].xnOptionsList
} }
console.log(selectedOption.value) console.log(selectedOption.value)
return []; return [];
}) })
// 当前选中的按钮索引 // 当前选中的按钮索引
// 初始化为一个数组，数组长度与 questions.value 的长度一致，每个元素初始值为 null // 初始化为一个数组，数组长度与 questions.value 的长度一致，每个元素初始值为 null
const selectedOption = ref<{ oid: any; qid: string }[]>(Array(questions.value.length).fill(null)); const selectedOption = ref<{ oid: any; qid: string }[]>(Array(questions.value.length).fill(null));
//选中逻辑
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,
qid: currentQuestion.id qid: currentQuestion.id
}; };
console.log(selectedOption.value[currentQuestionIndex.value].oid,option); console.log(selectedOption.value[currentQuestionIndex.value].oid, option);
} }
} }
const score = ref(0); // 初始化分数为0 }
const isVisible = ref (false) //成绩公布页的显示与否 const score = ref(0); // 初始化分数为0
// 提交成绩按钮 const isVisible = ref(false) //成绩公布页的显示与否
const submitAnswers = async() => { const complete = ref<boolean>(Boolean(localStorage.getItem("complete"))); //点击提交按钮后控制答题回显
// 提交成绩按钮
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) {
ElMessage.warning('请先完成答题') ElMessage.warning('请先完成答题')
}else{ }else {
const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]); const res: any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
if (res.result !== "success"){ if (res.result !== "success") {
ElMessage.error('回答错误') ElMessage.error('回答错误')
}else{ } else {
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
// }
// }
} }
} }
}; };
// 退出答题 // 退出答题
const router = useRouter() const router = useRouter()
const resetAnswers = () => { const resetAnswers = () => {
router.push('/studyPage') router.push('/studyPage')
}; };
// 计时器相关变量 // 计时器相关变量
const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值 const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值
const elapsedTime = ref(0); // 已经过去的时间（单位：秒） const elapsedTime = ref(0); // 已经过去的时间（单位：秒）
// 计算属性：将秒数转换为“分：秒”格式 // 计算属性：将秒数转换为“分：秒”格式
const formattedTime = computed(() => { const formattedTime = computed(() => {
const minutes = Math.floor(elapsedTime.value / 60); // 计算分钟数 const minutes = Math.floor(elapsedTime.value / 60); // 计算分钟数
const seconds = elapsedTime.value % 60; // 计算剩余秒数 const seconds = elapsedTime.value % 60; // 计算剩余秒数
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}); });
// 开始计时 // 开始计时
const startTimer = () => { const startTimer = () => {
timer.value = setInterval(() => { timer.value = setInterval(() => {
elapsedTime.value += 1; // 每秒增加 1 elapsedTime.value += 1; // 每秒增加 1
}, 1000); }, 1000);
}; };
// 停止计时 // 停止计时
const stopTimer = () => { const stopTimer = () => {
if (timer.value) { if (timer.value) {
clearInterval(timer.value); clearInterval(timer.value);
timer.value = null; timer.value = null;
} }
}; };
// 页面加载时开始计时 // 页面加载时开始计时
onMounted(() => {startTimer();currentList();}); onMounted(() => { startTimer(); currentList();});
// 页面卸载时停止计时（防止内存泄漏） // 页面卸载时停止计时（防止内存泄漏）
onUnmounted(() => {stopTimer();}); onUnmounted(() => { stopTimer(); });
// 处理子组件触发的重做事件 // 处理子组件触发的重做事件
const handleRecreate = () => { const handleRecreate = () => {
console.log(timer.value,"子组件触发了重做事件"); console.log(timer.value, "子组件触发了重做事件");
isVisible.value = false; // 隐藏子组件 isVisible.value = false; // 隐藏子组件
selectedOption.value = Array(questions.value.length).fill(null); // 重置所有选中结果 selectedOption.value = Array(questions.value.length).fill(null); // 重置所有选中结果
currentQuestionIndex.value = 0; // 重置到第一题 currentQuestionIndex.value = 0; // 重置到第一题
stopTimer()//计时器清零 stopTimer()//计时器清零
elapsedTime.value = 0 elapsedTime.value = 0
startTimer() startTimer()
}; localStorage.setItem("complete", "false");
};
</script> </script>
@ -213,27 +225,36 @@ import { useRouter } from 'vue-router';
background: url("@/assets/images/bg3.png") no-repeat; background: url("@/assets/images/bg3.png") no-repeat;
background-size: cover; background-size: cover;
.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;
@ -263,104 +288,162 @@ import { useRouter } from 'vue-router';
padding-right: 50px; padding-right: 50px;
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{
font-size: 18px; /* 字体大小 */ .timer {
letter-spacing: 3px; /* 字符间距 */ font-size: 18px;
/* 字体大小 */
letter-spacing: 3px;
/* 字符间距 */
text-align: right; text-align: right;
position: absolute; /* 使用绝对定位 */ position: absolute;
top: 25%; /* 距离顶部 */ /* 使用绝对定位 */
left: 71.3%; /* 距离左侧 */ top: 25%;
/* 距离顶部 */
left: 71.3%;
/* 距离左侧 */
} }
.questions{
font-size: 23px; /* 字体大小 */ .questions {
letter-spacing: 3px; /* 字符间距 */ font-size: 23px;
/* 字体大小 */
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{
color: #d4cb48; /* 按钮按下或获得焦点时的背景颜色 */ .option.selected {
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