You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
577 lines
17 KiB
Vue
577 lines
17 KiB
Vue
<template>
|
|
|
|
<div class="app-container">
|
|
<div class="tl_top">
|
|
<div class="eval_top">
|
|
<p>
|
|
<img
|
|
src="@/assets/icons/svg/color.svg"
|
|
style="width: 15px"
|
|
/>选择题 (共{{ mlistLength }}题), 合计100分
|
|
</p>
|
|
<el-button
|
|
style="margin-top: 10px;margin-left: 1212px;"
|
|
type="primary"
|
|
plain
|
|
@click="answerAgain"
|
|
>重新作答</el-button
|
|
>
|
|
<el-button
|
|
style="margin-top: 10px"
|
|
type="primary"
|
|
plain
|
|
@click="taskAnswer"
|
|
>提交</el-button
|
|
>
|
|
</div>
|
|
<hr />
|
|
</div>
|
|
<el-scrollbar height="800px" always>
|
|
<div
|
|
class="eval_main"
|
|
v-for="(item, index) in mlist"
|
|
:key="index"
|
|
:class="['eval_main' + index]"
|
|
>
|
|
<div class="eval_main_title">
|
|
<div class="eval_main_left">
|
|
<span>{{ index + 1 }}</span>
|
|
</div>
|
|
<div class="eval_main_right">
|
|
{{ item.topicName }} <span>({{ item.topicType }})</span>
|
|
</div>
|
|
</div>
|
|
<div class="eval_main_content">
|
|
<div class="eval_main_single">
|
|
<hr />
|
|
<el-radio-group
|
|
v-if="item.topicType === '单选题'"
|
|
v-model="item.studentAnswer"
|
|
@change="changeMultipleChoiceQuestions"
|
|
>
|
|
<el-radio
|
|
:class="getSingleChoiceStyle(item.rightOrWrong, item.answer, 'A',item.studentAnswer)" v-if="item.optionA !== null" label="A" border >A.{{ item.optionA}}<span class="stylingCorrectly" v-if="item.answer!=='A'&&item.studentAnswer==='A'&&item.rightOrWrong!==''&&item.rightOrWrong!==null">正确答案:{{item.answer}}</span>
|
|
</el-radio
|
|
>
|
|
<el-radio
|
|
:class=" getSingleChoiceStyle(item.rightOrWrong, item.answer, 'B',item.studentAnswer) "
|
|
v-if="item.optionB !== null"
|
|
label="B"
|
|
border
|
|
>B.{{ item.optionB }}<span class="stylingCorrectly" v-if="item.answer!=='B'&&item.studentAnswer==='B'&&item.rightOrWrong!==''&&item.rightOrWrong!==null">正确答案:{{item.answer}}</span>
|
|
</el-radio
|
|
>
|
|
<el-radio
|
|
:class="
|
|
getSingleChoiceStyle(item.rightOrWrong, item.answer, 'C',item.studentAnswer)
|
|
"
|
|
v-if="item.optionC !== null"
|
|
label="C"
|
|
border
|
|
>C.{{ item.optionC }}<span class="stylingCorrectly" v-if="item.answer!=='C'&&item.studentAnswer==='C'&&item.rightOrWrong!==''&&item.rightOrWrong!==null">正确答案:{{item.answer}}</span>
|
|
</el-radio
|
|
>
|
|
<el-radio
|
|
:class="
|
|
getSingleChoiceStyle(item.rightOrWrong, item.answer, 'D',item.studentAnswer)
|
|
"
|
|
v-if="item.optionD !== null"
|
|
label="D"
|
|
border
|
|
>D.{{ item.optionD }}<span class="stylingCorrectly" v-if="item.answer!=='D'&&item.studentAnswer==='D'&&item.rightOrWrong!==''&&item.rightOrWrong!==null">正确答案:{{item.answer}}</span></el-radio
|
|
>
|
|
<el-radio
|
|
:class="
|
|
getSingleChoiceStyle(item.rightOrWrong, item.answer, 'E',item.studentAnswer)
|
|
"
|
|
v-if="item.optionE !== null"
|
|
label="E"
|
|
border
|
|
>E.{{ item.optionE }}<span class="stylingCorrectly" v-if="item.answer!=='E'&&item.studentAnswer==='E'&&item.rightOrWrong!==''&&item.rightOrWrong!==null">正确答案:{{item.answer}}</span></el-radio
|
|
>
|
|
</el-radio-group>
|
|
<div class="eval_main_checkbox">
|
|
|
|
<el-checkbox-group
|
|
v-if="item.topicType === '多选题'"
|
|
v-model="item.studentAnswer"
|
|
>
|
|
<el-checkbox
|
|
v-if="item.optionA !== null"
|
|
v-model="item.state"
|
|
:label="item.optionA"
|
|
border
|
|
:class="showIcon(item, 'A')"
|
|
>
|
|
A.{{ item.optionA
|
|
}}<span class="stylingCorrectly2" v-if="ifShow(item,item.optionA)">正确答案:{{item.answer}}</span></el-checkbox
|
|
>
|
|
<el-checkbox
|
|
v-if="item.optionB !== null"
|
|
v-model="item.state"
|
|
:label="item.optionB"
|
|
border
|
|
:class="showIcon(item, 'B')"
|
|
>B.{{ item.optionB
|
|
}}<span class="stylingCorrectly2" v-if="ifShow(item,item.optionB)">正确答案:{{item.answer}}</span></el-checkbox
|
|
>
|
|
<el-checkbox
|
|
v-if="item.optionC !== null"
|
|
v-model="item.state"
|
|
:label="item.optionC"
|
|
border
|
|
:class="showIcon(item, 'C')"
|
|
>C.{{ item.optionC
|
|
}}<span class="stylingCorrectly2" v-if="ifShow(item,item.optionC)">正确答案:{{item.answer}}</span></el-checkbox
|
|
>
|
|
<el-checkbox
|
|
v-if="item.optionD !== null"
|
|
v-model="item.state"
|
|
:label="item.optionD"
|
|
border
|
|
:class="showIcon(item, 'D')"
|
|
>D.{{ item.optionD
|
|
}}<span class="stylingCorrectly2" v-if="ifShow(item,item.optionD)">正确答案:{{item.answer}}</span></el-checkbox
|
|
>
|
|
<el-checkbox
|
|
v-if="item.optionE !== null"
|
|
v-model="item.state"
|
|
:label="item.optionE"
|
|
border
|
|
:class="showIcon(item, 'E')"
|
|
>E.{{ item.optionE
|
|
}}<span class="stylingCorrectly2" v-if="ifShow(item,item.optionE)">正确答案:{{item.answer}}</span></el-checkbox
|
|
>
|
|
</el-checkbox-group>
|
|
</div>
|
|
<el-radio-group
|
|
v-if="item.topicType === '判断题'"
|
|
v-model="item.studentAnswer"
|
|
>
|
|
<el-radio label="A" border :class=" getSingleChoiceStyle(item.rightOrWrong, item.answer, 'A',item.studentAnswer)">正确</el-radio>
|
|
<el-radio label="B" border :class=" getSingleChoiceStyle(item.rightOrWrong, item.answer, 'B',item.studentAnswer)">错误</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
// import { useRouter } from "vue-router";
|
|
// import {Base64} from 'js-base64'
|
|
import * as API from "@/api/prtrait/prtrait.js"
|
|
import { getUserInfo } from "@/utils/auth";
|
|
import { ElMessage } from "element-plus";
|
|
import { onMounted } from "vue";
|
|
const data = ref({
|
|
module: "",
|
|
ascription:"",
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
});
|
|
const multipleChoiceAnswer = ref();
|
|
// const router = useRouter();
|
|
const mlist = ref({});
|
|
const mlistLength = ref(0);
|
|
const correctNot1 = ref(false);
|
|
const correctNot2 = ref(false);
|
|
const getSingleChoiceStyle = (item, answer, answer2,studentAnswer) => {
|
|
// console.log(item, answer, answer2);
|
|
// if (item === "正确" && answer === answer2) {
|
|
if(item===''||item===null){
|
|
return
|
|
}
|
|
if ( answer === answer2) {
|
|
correctNot1.value = true;
|
|
return "correctStyleSingleChoiceQuestions";
|
|
}
|
|
if (answer !== answer2) {
|
|
correctNot2.value = true;
|
|
return "singleChoiceErrorStyle";
|
|
}
|
|
return;
|
|
};
|
|
const showIcon = (item, answer) => {
|
|
if(item.rightOrWrong===''||item.rightOrWrong===null){
|
|
return
|
|
}
|
|
if(item.answer!==null){
|
|
const isFlag=ref(false)
|
|
item.answer.split(',').map((item2)=>{
|
|
if(item2===answer){
|
|
isFlag.value=true
|
|
}
|
|
return item2
|
|
})
|
|
if(isFlag.value){
|
|
return "Correct";
|
|
}else{
|
|
return "error"
|
|
}
|
|
}
|
|
};
|
|
// 单选题ico函数
|
|
|
|
//哈希函数学习测评
|
|
const answerData=ref([])
|
|
onMounted(()=>{
|
|
// data.value.module='数字营销'
|
|
submitDialogVisible1()
|
|
})
|
|
const submitDialogVisible1 = () => {
|
|
const newArray = [];
|
|
API.hashFunctionLearningReview(data.value).then((res)=>{
|
|
mlist.value = res.data;
|
|
mlist.value.forEach((item) => {
|
|
answerData.value.push(item.studentAnswer)
|
|
if (item.topicType === "多选题"&&item.rightOrWrong===null) {
|
|
item.studentAnswer = [];
|
|
}
|
|
if(item.topicType === "多选题"&&item.rightOrWrong!==null){
|
|
item.studentAnswer = item.studentAnswer.split(',').map((item2) => {
|
|
if (item2 === "A") {
|
|
return item.optionA;
|
|
}
|
|
if (item2 === "B") {
|
|
return item.optionB;
|
|
}
|
|
if (item2 === "C") {
|
|
return item.optionC;
|
|
}
|
|
if (item2 === "D") {
|
|
return item.optionD;
|
|
}
|
|
if (item2 === "E") {
|
|
return item.optionE;
|
|
}
|
|
return item2;
|
|
});
|
|
}
|
|
});
|
|
mlistLength.value = res.data.length;
|
|
|
|
})
|
|
|
|
};
|
|
const answer = ref([]);
|
|
// const checkboxGroup = ref([]);
|
|
|
|
const ifShow=(item,item2)=>{
|
|
if(item.rightOrWrong===''||item.rightOrWrong===null){
|
|
return false
|
|
}
|
|
const flag2=ref(false)
|
|
const item4=item.answer.split(',')
|
|
const arr=ref([])
|
|
item4.forEach(item5=>{
|
|
if(item5==='A'){
|
|
arr.value.push(item.optionA)
|
|
}
|
|
if(item5==='B'){
|
|
arr.value.push(item.optionB)
|
|
}
|
|
if(item5==='C'){
|
|
arr.value.push(item.optionC)
|
|
}if(item5==='D'){
|
|
arr.value.push(item.optionD)
|
|
}
|
|
if(item5==='E'){
|
|
arr.value.push(item.optionE)
|
|
}
|
|
})
|
|
item.studentAnswer.forEach(item3=>{
|
|
if(item3===item2){
|
|
flag2.value=true
|
|
}
|
|
})
|
|
// if(JSON.stringify(item.studentAnswer) === JSON.stringify(arr.value)){
|
|
if(arraysAreEqual(JSON.stringify(item.studentAnswer),JSON.stringify(arr.value))){
|
|
flag2.value=false
|
|
}
|
|
|
|
return flag2.value
|
|
}
|
|
function arraysAreEqual(arr1, arr2) {
|
|
const set1 = new Set(arr1);
|
|
const set2 = new Set(arr2);
|
|
return Array.from(set1).every(value => set2.has(value)) && Array.from(set2).every(value => set1.has(value));
|
|
}
|
|
//哈希函数提交
|
|
const isTask=ref(false)
|
|
let number=0
|
|
const TaskAssessment1 = async (TaskData) => {
|
|
TaskData.stuLearningAssessmentScoreDTO.stuLearningAssessmentDTOS.forEach(item => {
|
|
if(item.studentAnswer[0]===null||item.studentAnswer.length===0){
|
|
isTask.value=true
|
|
}
|
|
});
|
|
if(isTask.value&&number===0){
|
|
ElMessage({
|
|
message: "还有题目未完成",
|
|
type: "warning",
|
|
})
|
|
isTask.value=false
|
|
number++
|
|
return
|
|
}
|
|
try {
|
|
const res = await API.scoreLearningAssessment(TaskData);
|
|
ElMessage({
|
|
message: "提交成功",
|
|
type: "success",
|
|
});
|
|
setTimeout(()=>{
|
|
submitDialogVisible1()
|
|
},500)
|
|
} catch (error) {
|
|
// ElMessage({
|
|
// message: "请勿重复提交",
|
|
// type: "warning",
|
|
// });
|
|
}
|
|
};
|
|
const answerAgain=()=>{
|
|
mlist.value.forEach(item=>{
|
|
// item.answer=''
|
|
if(item.topicType==='多选题'){
|
|
item.studentAnswer=[]
|
|
}else{
|
|
item.studentAnswer=''
|
|
}
|
|
item.rightOrWrong=''
|
|
})
|
|
}
|
|
const taskAnswer = () => {
|
|
mlist.value.forEach((item) => {
|
|
if (item.studentAnswer === "" || item.studentAnswer === null) {
|
|
return;
|
|
}
|
|
});
|
|
const mlistArray = Object.values(mlist.value);
|
|
const transformedData = {
|
|
stuLearningAssessmentScoreDTO: {
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
module:'112',
|
|
learningProjects: "学习测评",
|
|
assessmentItems: "客观题测试",
|
|
stuLearningAssessmentDTOS: mlistArray.map((item) => {
|
|
return {
|
|
topicId: item.topicId,
|
|
topicName: item.topicName,
|
|
topicType: item.topicType,
|
|
topicDifficultyLevel: item.topicDifficultyLevel,
|
|
topicScore: item.topicScore,
|
|
topicNumber: item.topicNumber,
|
|
optionA: item.optionA,
|
|
optionB: item.optionB,
|
|
optionC: item.optionC,
|
|
optionD: item.optionD,
|
|
optionE: item.optionE,
|
|
optionF: item.optionF,
|
|
answer: item.answer,
|
|
studentAnswer: item.studentAnswer,
|
|
questionAnswer: item.questionAnswer,
|
|
module: item.module,
|
|
logic: item.logic,
|
|
};
|
|
}),
|
|
},
|
|
};
|
|
transformedData.stuLearningAssessmentScoreDTO.stuLearningAssessmentDTOS.forEach(
|
|
(item) => {
|
|
// console.log(item,"89465845");
|
|
if (item.topicType === "多选题") {
|
|
const newArray = [];
|
|
item.studentAnswer.forEach((item2) => {
|
|
if (item2 === item.optionA) {
|
|
newArray.push("A");
|
|
}
|
|
if (item2 === item.optionB) {
|
|
newArray.push("B");
|
|
}
|
|
if (item2 === item.optionC) {
|
|
newArray.push("C");
|
|
}
|
|
if (item2 === item.optionD) {
|
|
newArray.push("D");
|
|
}
|
|
if (item2 === item.optionE) {
|
|
newArray.push("E");
|
|
}
|
|
});
|
|
item.studentAnswer = newArray;
|
|
// item.studentAnswer.push(newArray)
|
|
}
|
|
if (item.topicType === "多选题") {
|
|
item.studentAnswer.sort(function (s1, s2) {
|
|
let x1 = s1.toUpperCase();
|
|
let x2 = s2.toUpperCase();
|
|
if (x1 < x2) {
|
|
return -1;
|
|
}
|
|
if (x1 > x2) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
});
|
|
}
|
|
if (item.topicType !== "多选题") {
|
|
let flag = item.studentAnswer;
|
|
item.studentAnswer = [];
|
|
item.studentAnswer.push(flag);
|
|
}
|
|
}
|
|
);
|
|
TaskAssessment1(transformedData);
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
background-color: #fff;
|
|
border-radius: 6px;
|
|
}
|
|
.tl_top {
|
|
position: fixed;
|
|
width: 82%;
|
|
height: 45px;
|
|
z-index: 999;
|
|
top: 80px;
|
|
right: 50px;
|
|
background-color: white;
|
|
}
|
|
.eval_top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
// position: fixed;
|
|
// z-index: 999;
|
|
p {
|
|
width: 210px;
|
|
height: 14px;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
}
|
|
.eval_main {
|
|
margin-top: 25px;
|
|
.eval_main_title {
|
|
width: 100%;
|
|
display: flex;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
align-items: center;
|
|
.eval_main_right {
|
|
margin-left: 23px;
|
|
span {
|
|
font-size: 14px;
|
|
color: #00b4f2;
|
|
}
|
|
// &::before{
|
|
// content: ' ';
|
|
// margin-right:80PX;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
.eval_main_single {
|
|
margin: 20px 0 10px 91px;
|
|
.el-radio-group {
|
|
width: 985px;
|
|
}
|
|
.el-radio {
|
|
margin-bottom: 5px;
|
|
width: 801px;
|
|
top: 5px;
|
|
}
|
|
.el-checkbox {
|
|
margin-bottom: 5px;
|
|
width: 801px;
|
|
top: 5px;
|
|
}
|
|
.el-checkbox-group {
|
|
font-size: 0;
|
|
line-height: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
width: 985px;
|
|
}
|
|
}
|
|
.eval_main_left {
|
|
position: relative;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: #00b4f2;
|
|
color: white;
|
|
border-radius: 50%;
|
|
font-size: 13px;
|
|
font-size: 15px;
|
|
font-weight: 100;
|
|
margin-left: 35px;
|
|
}
|
|
hr {
|
|
border: 1px solid #e5e5e5;
|
|
}
|
|
.eval_main0 {
|
|
margin-top: 53px !important;
|
|
}
|
|
.correctStyleSingleChoiceQuestions.el-radio.is-bordered.is-checked {
|
|
border-color: #00bb00 !important;
|
|
position: relative;
|
|
&::after{
|
|
content: '√';
|
|
position: absolute;
|
|
// margin-left: 94%;
|
|
left: 805px;
|
|
color: #00bb00;
|
|
}
|
|
}
|
|
.singleChoiceErrorStyle.el-radio.is-bordered.is-checked {
|
|
border-color: red !important;
|
|
// 尾部插入
|
|
position: relative;
|
|
&::after{
|
|
content: 'X';
|
|
position: absolute;
|
|
// margin-left: 93%;
|
|
left: 805px;
|
|
color: red;
|
|
}
|
|
}
|
|
.error.el-checkbox.is-bordered.is-checked {
|
|
position: relative;
|
|
border-color: red !important;
|
|
&::after{
|
|
content: 'X';
|
|
// margin-left: 96% !important;
|
|
position: absolute;
|
|
left: 805px;
|
|
color: red;
|
|
}
|
|
}
|
|
.Correct.el-checkbox.is-bordered.is-checked {
|
|
position: relative;
|
|
// right: -2%;
|
|
border-color: #00bb00 !important;
|
|
&::after{
|
|
content: '√';
|
|
// margin-left: 93%;
|
|
position: absolute;
|
|
color: #00bb00;
|
|
left: 805px;
|
|
}
|
|
}
|
|
.stylingCorrectly{
|
|
position: absolute;
|
|
right: -101px;
|
|
}
|
|
.stylingCorrectly2{
|
|
position: absolute;
|
|
left: 828px;
|
|
}
|
|
</style>
|
|
|