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

答完回显效果

Browse Source
main
Ly 1 month 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/views/largeDataScreen/home.vue
  2. 575
      src/views/subjectTest/index.vue

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

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

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

@ -8,37 +8,40 @@
<!-- 左边按钮 -->
<button class="submit-left" @click="SubLeft"></button>
<div class="question-body">
<div class="question" >
第<span class="question-count" >{{ currentSum }}</span>题
<div class="timer">{{ formattedTime }} 秒</div>
<div class="question">
第<span class="question-count">{{ currentSum }}</span>题
<!-- <div class="timer">{{ formattedTime }} 秒</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">
<span>{{ currentQuestion }}</span>
</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 }}
{{ option.optionText }}
</button>
</div>
</div>
<div class="submit-buttons">
<button class="submit-btn" @click="resetAnswers">退出答题</button>
<button class="submit-btn" @click="submitAnswers">提交成绩</button>
<button class="submit-btn" @click="resetAnswers">退出答题</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">
<resultsAnnounced :score = "score" :formattedTime ="formattedTime "@recreate="handleRecreate"/>
<el-dialog v-model="isVisible" :close-on-click-modal="false" :show-close="false">
<resultsAnnounced :score="score" :formattedTime="formattedTime" @recreate="handleRecreate" />
</el-dialog>
</div>
</template>
@ -46,161 +49,170 @@
<script lang="ts" setup>
import resultsAnnounced from '@/views/resultsAnnounced/index.vue'
import settingStore from "@/store/modules/setting";
import {subTestapi,checkapi} from '@/api/index.ts'
import { ref,computed,onMounted, onUnmounted} from "vue"
import { subTestapi, checkapi } from '@/api/index.ts'
import { ref, computed, onMounted, onUnmounted } from "vue"
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
const setting = settingStore();
//左箭头
const SubLeft =()=>{
console.log(currentQuestionIndex.value)
if(currentQuestionIndex.value >= 1){
currentQuestionIndex.value = currentQuestionIndex.value - 1
}else{
ElMessage.warning('无法上翻')
}
import { useRouter } from 'vue-router';
const setting = settingStore();
//左箭头
const SubLeft = () => {
console.log(currentQuestionIndex.value)
if (currentQuestionIndex.value >= 1) {
currentQuestionIndex.value = currentQuestionIndex.value - 1
} else {
ElMessage.warning('无法上翻')
}
//右箭头
const SubRight = async()=>{
const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
// answer.value = res.result;
}
//右箭头
const SubRight = async () => {
console.log(complete.value,'11111111')
if(complete.value == false){
const res: any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
console.log(selectedOption.value);
console.log(res,'res')
console.log(res, 'res')
// 如果答对了，进入下一题
if (res.result == "success") {
if(currentSum.value < questions.value.length){
if (currentSum.value < questions.value.length) {
currentQuestionIndex.value++; // 更新到下一题
}
else{
else {
ElMessage.success('答题已完成，请提交')
}
}
else{
if(selectedOption.value[currentQuestionIndex.value] == null){
else {
if (selectedOption.value[currentQuestionIndex.value] == null) {
ElMessage.warning('请先答题')
}else{
} else {
ElMessage.error('回答错误')
}
}
}else{
if (currentSum.value < questions.value.length) {
currentQuestionIndex.value++; // 更新到下一题
}
else {
ElMessage.warning('无法下翻')
}
}
const questions = ref<any[]>([]);
const currentList = async ()=>{
const res:any = await subTestapi();
questions.value = res.result
console.log(res.result)
// console.log(questions.value[0].xnOptionsList[0].id)
// console.log(questions.value,'questions1.value')
}
const questions = ref<any[]>([]);
const currentList = async () => {
const res: any = await subTestapi();
questions.value = res.result
console.log(res.result)
// console.log(questions.value[0].xnOptionsList[0].id)
// console.log(questions.value,'questions1.value')
}
// 当前题目的索引
const currentQuestionIndex = ref(0);
//计算当前题目的序号（从1开始）
const currentSum = computed(() => currentQuestionIndex.value + 1);
// 当前题目
const currentQuestion = computed(() => {
// 确保 questions.value 至少有一个元素
if (questions.value.length > 0) {
return questions.value[currentQuestionIndex.value].questionText;
}
// 当前题目的索引
const currentQuestionIndex = ref(0);
//计算当前题目的序号（从1开始）
const currentSum = computed(() => currentQuestionIndex.value + 1);
// 当前题目
const currentQuestion = computed(() => {
// 确保 questions.value 至少有一个元素
if (questions.value.length > 0) {
return questions.value[currentQuestionIndex.value].questionText;
}
return '';
});
const xnOptionsList =computed(() =>{
if (questions.value.length > 0) {
return questions.value[currentQuestionIndex.value].xnOptionsList
}
console.log(selectedOption.value)
return [];
})
// 当前选中的按钮索引
// 初始化为一个数组，数组长度与 questions.value 的长度一致，每个元素初始值为 null
const selectedOption = ref<{ oid: any; qid: string }[]>(Array(questions.value.length).fill(null));
//选中逻辑
const selectOption = (option:any) => {
if (questions.value.length > 0) {
return '';
});
const xnOptionsList = computed(() => {
if (questions.value.length > 0) {
return questions.value[currentQuestionIndex.value].xnOptionsList
}
console.log(selectedOption.value)
return [];
})
// 当前选中的按钮索引
// 初始化为一个数组，数组长度与 questions.value 的长度一致，每个元素初始值为 null
const selectedOption = ref<{ oid: any; qid: string }[]>(Array(questions.value.length).fill(null));
//选中逻辑
const selectOption = (option: any) => {
if (complete.value == false) {
if (questions.value.length > 0) {
const currentQuestion = questions.value[currentQuestionIndex.value];
selectedOption.value[currentQuestionIndex.value]= {
selectedOption.value[currentQuestionIndex.value] = {
oid: option,
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 submitAnswers = async() => {
console.log(selectedOption.value[currentQuestionIndex.value])
//答完全部题才能提交成绩
if(selectedOption.value[questions.value.length - 1] == null){
ElMessage.warning('请先完成答题')
}else{
const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
if (res.result !== "success"){
ElMessage.error('回答错误')
}else{
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
// }
// }
}
}
};
// 退出答题
const router = useRouter()
const resetAnswers = () => {
router.push('/studyPage')
};
// 计时器相关变量
const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值
const elapsedTime = ref(0); // 已经过去的时间（单位：秒）
// 计算属性：将秒数转换为“分：秒”格式
const formattedTime = computed(() => {
const minutes = Math.floor(elapsedTime.value / 60); // 计算分钟数
const seconds = elapsedTime.value % 60; // 计算剩余秒数
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
});
// 开始计时
const startTimer = () => {
timer.value = setInterval(() => {
elapsedTime.value += 1; // 每秒增加 1
}, 1000);
};
// 停止计时
const stopTimer = () => {
if (timer.value) {
clearInterval(timer.value);
timer.value = null;
}
};
// 页面加载时开始计时
onMounted(() => {startTimer();currentList();});
// 页面卸载时停止计时（防止内存泄漏）
onUnmounted(() => {stopTimer();});
// 处理子组件触发的重做事件
const handleRecreate = () => {
console.log(timer.value,"子组件触发了重做事件");
isVisible.value = false; // 隐藏子组件
selectedOption.value = Array(questions.value.length).fill(null); // 重置所有选中结果
currentQuestionIndex.value = 0; // 重置到第一题
stopTimer()//计时器清零
elapsedTime.value = 0
startTimer()
};
}
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) {
ElMessage.warning('请先完成答题')
}else {
const res: any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
if (res.result !== "success") {
ElMessage.error('回答错误')
} else {
stopTimer(); // 停止计时
score.value = 100; // 重置分数
isVisible.value = true;
localStorage.setItem("complete", "true");;
// const display = complete.value
}
}
};
// 退出答题
const router = useRouter()
const resetAnswers = () => {
router.push('/studyPage')
};
// 计时器相关变量
const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值
const elapsedTime = ref(0); // 已经过去的时间（单位：秒）
// 计算属性：将秒数转换为“分：秒”格式
const formattedTime = computed(() => {
const minutes = Math.floor(elapsedTime.value / 60); // 计算分钟数
const seconds = elapsedTime.value % 60; // 计算剩余秒数
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
});
// 开始计时
const startTimer = () => {
timer.value = setInterval(() => {
elapsedTime.value += 1; // 每秒增加 1
}, 1000);
};
// 停止计时
const stopTimer = () => {
if (timer.value) {
clearInterval(timer.value);
timer.value = null;
}
};
// 页面加载时开始计时
onMounted(() => { startTimer(); currentList();});
// 页面卸载时停止计时（防止内存泄漏）
onUnmounted(() => { stopTimer(); });
// 处理子组件触发的重做事件
const handleRecreate = () => {
console.log(timer.value, "子组件触发了重做事件");
isVisible.value = false; // 隐藏子组件
selectedOption.value = Array(questions.value.length).fill(null); // 重置所有选中结果
currentQuestionIndex.value = 0; // 重置到第一题
stopTimer()//计时器清零
elapsedTime.value = 0
startTimer()
localStorage.setItem("complete", "false");
};
</script>
<style lang="scss" scoped>
@ -213,27 +225,36 @@ import { useRouter } from 'vue-router';
background: url("@/assets/images/bg3.png") no-repeat;
background-size: cover;
.submit-right{
.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{
.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;
@ -263,104 +288,162 @@ import { useRouter } from 'vue-router';
padding-right: 50px;
padding-top: 30px;
.question{
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; /* 数字字体大小 */
}
.timer{
font-size: 18px; /* 字体大小 */
letter-spacing: 3px; /* 字符间距 */
text-align: right;
position: absolute; /* 使用绝对定位 */
top: 25%; /* 距离顶部 */
left: 71.3%; /* 距离左侧 */
}
.questions{
font-size: 23px; /* 字体大小 */
letter-spacing: 3px; /* 字符间距 */
text-align: right;
color: #fff;
}
.questions-count {
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 倍 */
.question {
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;
/* 数字字体大小 */
}
.timer {
font-size: 18px;
/* 字体大小 */
letter-spacing: 3px;
/* 字符间距 */
text-align: right;
position: absolute;
/* 使用绝对定位 */
top: 25%;
/* 距离顶部 */
left: 71.3%;
/* 距离左侧 */
}
.questions {
font-size: 23px;
/* 字体大小 */
letter-spacing: 3px;
/* 字符间距 */
text-align: right;
color: #fff;
}
.questions-count {
font-weight: bold;
/* 数字加粗 */
color: rgb(165, 144, 95);
/* 数字颜色为红色 */
font-size: 25px;
/* 数字字体大小 */
}
.txt {
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; /* 垂直排列按钮 */
}
/* 单个选项样式 */
.option {
padding: 5px 10px; /* 内边距，让按钮看起来更舒适 */
font-size: 20px; /* 字体大小 */
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; /* 平滑过渡效果 */
}
.option:hover {
color: #e7e2e2; /* 鼠标悬停时的字体颜色 */
}
.option.selected{
color: #d4cb48; /* 按钮按下或获得焦点时的背景颜色 */
}
.option-letter{
font-size: 30px;
font-weight: bold; /* 字母加粗 */
margin-right: 5px; /* 字母与后面文字的间距 */
color: rgb(165, 144, 95);
}
/* 选项容器样式 */
.options {
margin-top: 10px;
color: #9b9a9a;
display: flex;
/* 使用 Flexbox 布局 */
flex-direction: column;
/* 垂直排列按钮 */
}
/* 单个选项样式 */
.option {
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;
/* 平滑过渡效果 */
}
.option:hover {
color: #e7e2e2;
/* 鼠标悬停时的字体颜色 */
}
.option.selected {
color: #d4cb48;
/* 按钮按下或获得焦点时的背景颜色 */
}
.option-letter {
font-size: 30px;
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;
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; /* 防止内容溢出 */
:deep(.el-dialog) {
background: transparent !important;
/* 设置背景为透明 */
border: none !important;
/* 移除边框 */
box-shadow: none !important;
/* 移除阴影 */
overflow: hidden;
/* 防止内容溢出 */
width: 640px;
}

Write Preview
Loading…
Cancel
Save