答完回显效果

main
Ly 6 days ago
parent 006a9997f1
commit 3eac6413da
  1. 4
      src/views/largeDataScreen/home.vue
  2. 575
      src/views/subjectTest/index.vue

@ -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>

@ -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;
}

Loading…
Cancel
Save