kaoshi_houduan/vue2/vue/src/views/Student/TestPaperDetail.vue

<template>
  <div class="exam-container">
    <div class="sidebar">
      <div class="back-button">
        <button @click="goBack">
          <span>返回</span>
        </button>
      </div>
      <h2>{{ examTitle }}</h2>
      <p>答题人：{{ sender }}</p>
      <p>得分：{{ currentScore }} &nbsp; 总分：{{ totalScore }}</p>
      <p>已答对：{{ correctQuestions }} &nbsp; 总题数：{{ totalQuestions }}</p>
      <div class="question-navigation">
        <div
            v-for="(question, index) in questions"
            :key="question.id"
            class="question-box"
            :class="{ answered: answers[question.id]?.length > 0, active: currentQuestionIndex === index, correct: question.tf === 'true', incorrect: question.tf === 'false' }"
            @click="scrollToQuestion(index)"
        >
          {{ index + 1 }}
        </div>
      </div>
    </div>

    <div class="main-content" v-if="!loading && questions.length">
      <div
          v-for="(question, index) in questions"
          :key="question.id"
          class="question"
          :ref="'question-' + question.id"
          :class="{ correct: question.tf === 'true', incorrect: question.tf === 'false', active: currentQuestionIndex === index }"
      >
        <p>{{ index + 1 }}. {{ question.content }}</p>

        <!-- Check and Display Options -->
        <div class="options">
          <!-- 单选题 (Single Choice) -->
          <template v-if="question.type === '单选题'">
            <div v-for="(option, optIndex) in question.chance" :key="optIndex"
                 class="option"
                 :class="{ selected: answers[question.id] === option.label }">
              {{ option.label }}: {{ option.text }}
            </div>
          </template>

          <!-- 多选题 (Multiple Choice) -->
          <template v-else-if="question.type === '多选题'">
            <div v-for="(option, optIndex) in question.chance" :key="optIndex" class="option">
              {{ option.label }}: {{ option.text }}
            </div>
          </template>

          <!-- 判断题 (True/False) -->
          <template v-else-if="question.type === '判断题'">
            <div>
              <input
                  type="radio"
                  :name="'question-' + question.id"
                  value="true"
                  :checked="answers[question.id] === 'true'"
                  disabled
              />
              T
            </div>
            <div>
              <input
                  type="radio"
                  :name="'question-' + question.id"
                  value="false"
                  :checked="answers[question.id] === 'false'"
                  disabled
              />
              F
            </div>
          </template>
        </div>
        <p>你的答案：<span>{{ question.answer }}</span></p>
        <p>正确答案：<span>{{ question.idanswer }}</span></p>
        <p>分数：{{ question.score }} 分</p>
        <p v-if="question.analysis">解析：{{ question.analysis }}</p>
      </div>
    </div>

    <div v-if="loading" class="loading">
      正在加载试题，请稍候...
    </div>

    <div v-if="!loading && !questions.length" class="empty">
      未找到试题，请联系管理员！
    </div>
  </div>
</template>


<script>
import axios from "axios";
import exam from "@/views/Student/Exam.vue";

export default {
  name: "TestPaperDetail",
  data() {
    return {
      examTitle: this.examname, // 试卷标题
      sender: "", // 发送人
      totalScore: 0, // 总分
      duration: "", // 时长
      questions: [], // 试题数据
      answers: {}, // 用户答案
      correctQuestions: 0, // 答对的题目数
      currentScore: 0, // 当前得分
      totalQuestions: 0, // 总题数
      loading: true, // 加载状态
      submitted: false, // 是否已提交
      currentQuestionIndex: 0, // 当前题目索引
    };
  },
  computed: {
    totalQuestions() {
      return this.questions.length;
    },
  },
  methods: {
    async fetchExamData() {
      try {
        const token = this.$store.state.tokens[this.userId];
        if (!token) {
          alert("用户未登录，请重新登录！");
          this.$router.push("/login");
          return;
        }

        const response = await axios.get(
            "http://localhost:8080/student/homepage/selectQuestionanswer",
            {
              params: { testid: this.id },
              headers: { Authorization: `Bearer ${token}` },
            }
        );
        const { sender, list, testid } = response.data.data;
        this.examTitle = this.examname;
        this.sender = sender;
        this.questions = list;
        console.log('list', list);
        this.totalScore = list.reduce((sum, q) => sum + q.score, 0);
        this.correctQuestions = list.filter((q) => q.tf === "true").length;
        this.loading = false;
      } catch (error) {
        console.error("获取试题失败", error);
        this.loading = false;
      }
    },
    async getTest() {
      try {
        const token = this.$store.state.tokens[this.userId];
        if (!token) {
          alert("用户未登录，请重新登录！");
          this.$router.push("/login");
          return;
        }

        const response = await axios.get(
            "http://localhost:8080/student/homepage/getScoreByTestId",
            {
              params: { testId: this.id },
              headers: { Authorization: `Bearer ${token}` },
            }
        );
        const data = response.data.data;
        this.sender = data.sender;
        this.currentScore = data.score;
        this.totalScore = data.totalscore;
        this.correctQuestions = data.tquestions;
        this.totalQuestions = data.totalquestions;
      } catch (error) {
        console.error("获取试卷信息失败", error);
        this.loading = false;
      }
    },
    scrollToQuestion(index) {
      this.$nextTick(() => {
        const questionRef = this.$refs[`question-${this.questions[index].id}`];
        if (questionRef && questionRef[0]) {
          questionRef[0].scrollIntoView({ behavior: "smooth", block: "start" });
          this.currentQuestionIndex = index;
        }
      });
    },
    // 返回上一页的方法
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
  },
  mounted() {
    this.fetchExamData();
  },
  created() {
    this.userId = this.$route.query.userId;
    this.examname = this.$route.query.name;
    this.id = this.$route.query.id;
    this.getTest();
  },
};
</script>

<style scoped>
.back-button {
  padding-bottom: 10px;
  text-align: center;
}

.back-button button {
  background-color: #1976d2;
  color: white;
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.back-button button:hover {
  background-color: #1565c0;
}

.exam-container {
  display: flex;
}

.sidebar {
  position: fixed; /* 固定左侧栏 */
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  padding: 20px;
  background-color: #f4f4f4;
  overflow-y: auto; /* 允许左侧栏滚动 */
  border-right: 1px solid #ddd;
}

.sidebar h2,
.sidebar p {
  margin-bottom: 10px;
}

.question-navigation {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Adjust number of columns */
  gap: 10px;
  margin-top: 20px;
}

.question-box {
  padding: 15px;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.question-box:hover {
  background-color: #e0e0e0;
}

.question-box.active {
  background-color: #bbdefb; /* Highlight active question */
  font-weight: bold;
}

.question-box.answered {
  background-color: #c8e6c9; /* Highlight answered question */
}

.question-box.correct {
  background-color: #e0f7fa; /* Correct answer color */
  color: #00796b; /* Text color for correct answers */
}

.question-box.incorrect {
  background-color: #ffebee; /* Incorrect answer color */
  color: #d32f2f; /* Text color for incorrect answers */
}

.main-content {
  margin-left: 20%; /* 右侧主内容的宽度根据左侧栏的宽度调整 */
  padding: 20px;
  width: 80%;
  overflow-y: auto; /* 使右侧内容可滚动 */
  height: 100vh;
}

.question {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.correct {
  background-color: #e0f7fa;
  color: #00796b;
}

.incorrect {
  background-color: #ffebee;
  color: #d32f2f;
}

.loading,
.empty {
  text-align: center;
  margin-top: 50px;
  font-size: 18px;
}

.empty {
  color: #888;
}
</style>