<template>
<div>
<div id="app">
<header>
<h1>{{ examTitle }}</h1>
</header>
<main>
<div class="student-info">
<p>考生:</p>
<p>【Student name: {{ studentName }}】</p>
<p>【Student ID: {{ studentId }}】</p>
</div>
<div class="green-border"></div>
<div class="single">
<div>单选题</div>
<div>得分: 总分:20</div>
</div>
<div v-for="(question, index) in questions" :key="question.id" class="questions">
<h2>Question {{ index + 1 }}</h2>
<p>{{ question.content }}</p>
<form>
<div class="radio-buttons">
<label v-for="option in question.options" :key="option.id">
<input type="radio" :value="option.id">
{{ option.content }}
</label>
</div>
</form>
<p>Score: {{ getQuestionScore(question.id) }}/{{ question.score }}</p>
</div>
<div class="green-border"></div>
</main>
<footer>
<button @click="submitExam">Submit</button>
</footer>
</div>
</div>
</template>
<script>
export default {
data () {
return {
examTitle: '2023年春季学期《web应用前端开发》测试',
studentName: '',
studentId: '',
questions: [],
exams: []
}
},
methods:{
getQuestionScore(questionId) {
const selectedOptionId = this.selectedAnswers[questionId];
const question = this.questions.find(q => q.id === questionId);
const selectedOption = question.options.find(o => o.id === selectedOptionId);
if (selectedOption && selectedOption.isCorrect) {
return question.score;
} else {
return 0;
}
},
submitExam() {
const answers = this.selectedAnswers;
// send answers to server using AJAX
},
},
mounted() {
axios.get('/api/exam')
.then(response => {
const examData = response.data;
this.examTitle = examData.title;
this.studentName = examData.studentName;
this.studentId = examData.studentId;
this.questions = examData.questions;
this.selectedAnswers = {};
this.questions.forEach(q => {
this.selectedAnswers[q.id] = null;
});
})
.catch(error => {
console.error(error);
});
},
created: function() {
axios.get('http://172.23.252.37:8080/exam/list')
.then(function(response) {
// 把相应数据赋值给exams
vm.exams = response.data;
})
.catch(function(error) {
console.error(error);
});
}
}
</script>
<style scoped>
.green-border {
border: 2px solid green;
}
.single{
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
test.vue
最新推荐文章于 2024-08-16 22:50:06 发布