Skip to content

X
xzksxt
Commit 23171b4a by 宋珺琪
Options

答题-添加标识对错

parent dd4d937e
Showing with 226 additions and 47 deletions
src/components/student/answer.vue
...@@ -73,20 +73,18 @@ ...@@ -73,20 +73,18 @@
<transition name="slider-fade"> <transition name="slider-fade">
<div class="right"> <div class="right">
<div class="title"> <div class="title">
<!-- ({{optionValue}})--> <p>{{title}}({{optionValue}})</p>
<p>{{title}}</p>
<i class="iconfont icon-right auto-right"></i> <i class="iconfont icon-right auto-right"></i>
<span>全卷共{{topicCount[0] + topicCount[1] + topicCount[2]}}题 <i class="iconfont icon-time"></i><!--倒计时：<b>{{time}}</b>分钟--></span> <span>全卷共{{topicCount[0] + topicCount[1] + topicCount[2]}}题 <i class="iconfont icon-time"></i><!--倒计时：<b>{{time}}</b>分钟--></span>
</div> </div>
<div class="content"> <div class="content">
<p class="topic">{{showQuestion}}</p> <p class="topic">{{showQuestion}}</p>
<!-- && optionValue == '单选题'--> <div v-if=" optionValue == '单选题'">
<div v-if="currentType == 1 ">
<el-radio-group v-model="radio[index]" @change="getChangeLabel" > <el-radio-group v-model="radio[index]" @change="getChangeLabel" >
<el-radio :label="1" :disabled='radioFlag'>{{showAnswer.answerA}}</el-radio> <el-radio :label="1" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='A' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerA}}</el-radio>
<el-radio :label="2" :disabled='radioFlag'>{{showAnswer.answerB}}</el-radio> <el-radio :label="2" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='B' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerB}}</el-radio>
<el-radio :label="3" :disabled='radioFlag'>{{showAnswer.answerC}}</el-radio> <el-radio :label="3" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='C' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerC}}</el-radio>
<el-radio :label="4" :disabled='radioFlag'>{{showAnswer.answerD}}</el-radio> <el-radio :label="4" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='D' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerD}}</el-radio>
</el-radio-group> </el-radio-group>
<div class="analysis" id="topic1Right" style="display: none"> <div class="analysis" id="topic1Right" style="display: none">
<ul> <ul>
...@@ -98,14 +96,23 @@ ...@@ -98,14 +96,23 @@
</ul> </ul>
</div> </div>
</div> </div>
<!-- <div v-if="currentType == 1 && optionValue == '多选题'" > <div v-if=" optionValue == '多选题'" >
<el-checkbox-group v-model="checkList" @change="handleCheckboxChange" > <el-checkbox-group v-model="checkList" @change="handleCheckboxChange" >
<el-checkbox :label="1" :disabled='radioFlag'>{{showAnswer.answerA}}</el-checkbox > <el-checkbox :label="1" :disabled='radioFlag'
<el-checkbox :label="2" :disabled='radioFlag'>{{showAnswer.answerB}}</el-checkbox > :class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('A') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
<el-checkbox :label="3" :disabled='radioFlag'>{{showAnswer.answerC}}</el-checkbox > {{showAnswer.answerA}}
<el-checkbox :label="4" :disabled='radioFlag'>{{showAnswer.answerD}}</el-checkbox > </el-checkbox>
<el-checkbox :label="2" :disabled='radioFlag'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('B') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
{{showAnswer.answerB}}</el-checkbox >
<el-checkbox :label="3" :disabled='radioFlag'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('C') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
{{showAnswer.answerC}}</el-checkbox >
<el-checkbox :label="4" :disabled='radioFlag'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('D') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
{{showAnswer.answerD}}</el-checkbox >
</el-checkbox-group> </el-checkbox-group>
<button style="z-index: 50" v-show="isOptionSelected" @click="submitAnswer" >提交</button> <el-button class="submitAnswerClass" type="primary" plain v-show="isOptionSelected" @click="submitAnswer" >提交</el-button>
<div class="analysis" id="topic1Right" style="display: none"> <div class="analysis" id="topic1Right" style="display: none">
<ul> <ul>
...@@ -115,7 +122,7 @@ ...@@ -115,7 +122,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>--> </div>
<!-- <div class="fill" v-if="currentType == 2"> <!-- <div class="fill" v-if="currentType == 2">
<div v-for="(item,currentIndex) in part" :key="currentIndex"> <div v-for="(item,currentIndex) in part" :key="currentIndex">
...@@ -133,7 +140,7 @@ ...@@ -133,7 +140,7 @@
</ul> </ul>
</div> </div>
</div> --> </div> -->
<!-- <div class="judge" v-if="currentType == 3"> <!-- <div class="judge" v-if="currentType == 3">
<el-radio-group v-model="judgeAnswer[index]" @change="getJudgeLabel" v-if="currentType == 3"> <el-radio-group v-model="judgeAnswer[index]" @change="getJudgeLabel" v-if="currentType == 3">
<el-radio :label="1">正确</el-radio> <el-radio :label="1">正确</el-radio>
<el-radio :label="2">错误</el-radio> <el-radio :label="2">错误</el-radio>
...@@ -145,7 +152,7 @@ ...@@ -145,7 +152,7 @@
<li>{{topic[3][index].analysis == null ? '暂无解析': topic[3][index].analysis}}</li> <li>{{topic[3][index].analysis == null ? '暂无解析': topic[3][index].analysis}}</li>
</ul> </ul>
</div> </div>
</div> --> </div>-->
</div> </div>
<!-- <div class="operation"> <!-- <div class="operation">
<ul class="end"> <ul class="end">
...@@ -166,6 +173,8 @@ import {mapState} from 'vuex' ...@@ -166,6 +173,8 @@ import {mapState} from 'vuex'
export default { export default {
data() { data() {
return { return {
isradio:false, //默认为false 。。点击后改为true
ischeckBox:false, //默认为false 。。点击后改为true
startTime: null, //考试开始时间 startTime: null, //考试开始时间
endTime: null, //考试结束时间 endTime: null, //考试结束时间
time: null, //考试持续时间 time: null, //考试持续时间
...@@ -257,6 +266,7 @@ export default { ...@@ -257,6 +266,7 @@ export default {
this.topic = {...res.data} this.topic = {...res.data}
let reduceAnswer = this.topic[1][this.index] let reduceAnswer = this.topic[1][this.index]
this.reduceAnswer = reduceAnswer this.reduceAnswer = reduceAnswer
console.log(this.reduceAnswer)
let keys = Object.keys(this.topic) //对象转数组 let keys = Object.keys(this.topic) //对象转数组
// console.log(this.topic[1][0]) //获取第一个题干类型 // console.log(this.topic[1][0]) //获取第一个题干类型
this.optionValue = this.topic[1][0].oneOrMore this.optionValue = this.topic[1][0].oneOrMore
...@@ -283,7 +293,7 @@ export default { ...@@ -283,7 +293,7 @@ export default {
}) })
}) })
}, },
change(index) { //选择题 /* change(index) { //选择题
if(index == -1){ if(index == -1){
this.index = 1 this.index = 1
}else{ }else{
...@@ -381,7 +391,7 @@ export default { ...@@ -381,7 +391,7 @@ export default {
this.index = 0 this.index = 0
this.change(this.index) this.change(this.index)
} }
}, },*/
handleCheckboxChange(val) { handleCheckboxChange(val) {
console.log('多选中的值为：', val); console.log('多选中的值为：', val);
this.radio[this.index] = val //当前选择的序号 this.radio[this.index] = val //当前选择的序号
...@@ -403,8 +413,9 @@ export default { ...@@ -403,8 +413,9 @@ export default {
this.isOptionSelected = false this.isOptionSelected = false
//点击提交禁止选择 //点击提交禁止选择
this.radioFlag = true this.radioFlag = true
this.ischeckBox = true
this.commit()
// console.log(this.topic1Answer[this.index]) // console.log(this.topic1Answer[this.index])
this.checkList.push(this.topic1Answer[this.index])
// this.radio[this.index] = this.topic1Answer[this.index] // this.radio[this.index] = this.topic1Answer[this.index]
// const dasd = this.radio[this.index] // const dasd = this.radio[this.index]
/* 保存学生答题选项 */ /* 保存学生答题选项 */
...@@ -430,8 +441,9 @@ export default { ...@@ -430,8 +441,9 @@ export default {
} }
/* 保存学生答题选项 */ /* 保存学生答题选项 */
this.topic1Answer[this.index] = val this.topic1Answer[this.index] = val
this.commit()
}, },
getJudgeLabel(val) { //获取判断题作答选项 /* getJudgeLabel(val) { //获取判断题作答选项
this.judgeAnswer[this.index] = val this.judgeAnswer[this.index] = val
if(val) { if(val) {
let data = this.topic[3] let data = this.topic[3]
...@@ -480,34 +492,48 @@ export default { ...@@ -480,34 +492,48 @@ export default {
case 3: case 3:
this.topic[3][this.index]["isMark"] = true //判断题标记 this.topic[3][this.index]["isMark"] = true //判断题标记
} }
}, },*/
commit() { //答案提交计算分数 commit() { //答案提交计算分数
/* 计算选择题总分 */ /* 计算选择题总分 */
let topic1Answer = this.topic1Answer let finalScore = 0 //分数
let finalScore = 0 if (this.optionValue=="单选题"){
topic1Answer.forEach((element,index) => { //循环每道选择题根据选项计算分数 let topic1Answer = this.topic1Answer
let right = null topic1Answer.forEach((element,index) => { //循环每道选择题根据选项计算分数
if(element != null) { let right = null
switch(element) { //选项1,2,3,4 转换为 "A","B","C","D" if(element != null) {
case 1: switch(element) { //选项1,2,3,4 转换为 "A","B","C","D"
right = "A" case 1:
break right = "A"
case 2: break
right = "B" case 2:
break right = "B"
case 3: break
right = "C" case 3:
break right = "C"
case 4: break
right = "D" case 4:
} right = "D"
if(right == this.topic[1][index].rightAnswer) { // 当前选项与正确答案对比 }
finalScore += this.topic[1][index].score // 计算总分数 if(right == this.topic[1][index].rightAnswer) { // 当前选项与正确答案对比
finalScore += this.topic[1][index].score // 计算总分数
}
this.isradio = true
console.log(this.reduceAnswer.rightAnswer) //题的答案
console.log(right,this.topic[1][index].rightAnswer)
} }
console.log(right,this.topic[1][index].rightAnswer) })
} else if (this.optionValue == "多选题") {
//正确答案
const truwAnswer = this.reduceAnswer.rightAnswer.replace(/\s/g, "")
//选中的
const result = this.checkList.map(number => String.fromCharCode(64 + parseInt(number, 10))).join(",");
if (result == truwAnswer) {
console.log("回答正确")
finalScore = 1
} }
// console.log(topic1Answer) }
})
// /**计算判断题总分 */ // /**计算判断题总分 */
// // console.log(`this.fillAnswer${this.fillAnswer}`) // // console.log(`this.fillAnswer${this.fillAnswer}`)
// // console.log(this.topic[2][this.index]) // // console.log(this.topic[2][this.index])
...@@ -592,13 +618,166 @@ export default { ...@@ -592,13 +618,166 @@ export default {
} }
} }
},1000 * 60) },1000 * 60)
} },
/* MoreTrueOrFalse(boo){
if (boo){
//定位目标元素，并获取它的样式对象：
var myElement = document.querySelector(".is-checked");
var inputElement = myElement.querySelector('.el-checkbox__input');
var innerElement = inputElement.querySelector('.el-checkbox__inner');
console.log(innerElement)
// 创建一个<style>标签
var styleTag = document.createElement('style');
document.head.appendChild(styleTag);
// 动态生成的内联样式规则
styleTag.innerHTML = `
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::before {
content: "";
position: absolute;
top: -10px;
left: 3px;
width: 12px;
height: 25px;
border: 2px solid transparent;
border-bottom: 5px solid #f50808;
border-right: 5px solid #fa0909;
transform: rotate(45deg);
}`;
// 将样式规则应用到页面上的元素
innerElement.classList.add('styleTag');
}else {
}
},
//动态添加是否对错
OnetrueOrFalse(boo){
if (boo){
/!* var myElements = document.querySelectorAll(".el-radio__input");
var uncheckedElements = Array.from(myElements).filter(function(element) {
return !element.classList.contains('is-checked');
});
console.log(uncheckedElements)
var styleTag2 = document.createElement('style2');
document.head.appendChild(styleTag2);
// 动态生成的内联样式规则
styleTag2.innerHTML = `
.el-radio__input.is-disabled .el-radio__inner::before {
content: "×";
position: absolute;
top: -8px;
left: -5px;
color: #f50808;
font-size: 30px;
text-shadow:
-1px -1px 0 #f50808,
1px -1px 0 #f50808,
-1px 1px 0 #f50808,
1px 1px 0 #f50808;
}`;
uncheckedElements.forEach(e=>{
var innerElements = e.querySelectorAll(".el-radio__inner");
Array.from(innerElements).forEach(function(element) {
console.log(element)
element.classList.add("style2");
});
})*!/
//定位目标元素，并获取它的样式对象：
var myElement = document.querySelector(".is-checked");
var inputElement = myElement.querySelector('.el-radio__input');
var innerElement = inputElement.querySelector('.el-radio__inner');
// console.log(innerElement)
// 创建一个<style>标签
var styleTag = document.createElement('style');
document.head.appendChild(styleTag);
// 动态生成的内联样式规则
styleTag.innerHTML = `
.el-radio__input.is-disabled.is-checked .el-radio__inner::before {
content: "";
position: absolute;
top: -20px;
left: 3px;
width: 10px;
height: 25px;
border: 2px solid transparent;
border-bottom: 5px solid #f50808;
border-right: 5px solid #fa0909;
transform: rotate(45deg);
}`;
// 将样式规则应用到页面上的元素
console.log(innerElement)
innerElement.classList.add('style');
}else {
var myElement = document.querySelector(".is-checked");
var inputElement = myElement.querySelector('.el-radio__input');
var innerElement = inputElement.querySelector('.el-radio__inner');
console.log(innerElement)
// 创建一个<style>标签
var styleTag = document.createElement('style');
document.head.appendChild(styleTag);
// 动态生成的内联样式规则
styleTag.innerHTML = `
.el-radio__input.is-disabled.is-checked .el-radio__inner::before {
content: "×";
position: absolute;
top: -8px;
left: -5px;
color: #f50808;
font-size: 30px;
text-shadow:
-1px -1px 0 #f50808,
1px -1px 0 #f50808,
-1px 1px 0 #f50808,
1px 1px 0 #f50808;
}`;
// 将样式规则应用到页面上的元素
innerElement.classList.add('styleTag');
}
}*/
}, },
computed:mapState(["isPractice"]) computed:mapState(["isPractice"])
} }
</script> </script>
<style lang="less"> <style lang="less">
.submitAnswerClass{
/*background-color: red;*/
margin-top: 15px;
}
.noStyle{
}
//对号
.checkboxTrueStyle::before{
content: "";
position: absolute;
top: -10px;
left: 3px;
width: 12px;
height: 25px;
border: 2px solid transparent;
border-bottom: 5px solid #2776df;
border-right: 5px solid #2776df;
transform: rotate(45deg);
z-index: 2;
}
//错号
.checkboxFlaseStyle::before{
content: "×";
position: absolute;
top: -8px;
left: -5px;
color: #f50808;
font-size: 30px;
text-shadow:
-1px -1px 0 #f50808,
1px -1px 0 #f50808,
-1px 1px 0 #f50808,
1px 1px 0 #f50808;
z-index: 2;
}
.iconfont.icon-time { .iconfont.icon-time {
color: #2776df; color: #2776df;
...@@ -632,7 +811,7 @@ export default { ...@@ -632,7 +811,7 @@ export default {
} }
.second{ .second{
/*align-items: flex-end;*/ align-items: flex-end;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
margin-right: 10px; margin-right: 10px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment