test.vue

chat8

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