教育领域“知之”大模型--山东大学软件学院2024年项目实训（十二）

在前端显示题库，每次选择5道，当点击换一批时，会随机抽取5道。

QuestionList.vue

<template>
  <div>
    <div v-for="(q, index) in displayedQuestions" :key="index" class="question-container">
      <div class="question">{{ q.question }}</div>
      <el-button class="answer-button" @click="toggleAnswer(index)">{{ showAnswers[index] ? '隐藏答案' : '显示答案' }}</el-button>
      <div class="answer" v-if="showAnswers[index]">{{ q.answer }}</div>
    </div>
    <el-button @click="refreshQuestions">换一批</el-button>
  </div>
</template>

<script>
export default {
  props: {
    questions: Array
  },
  data() {
    return {
      displayedQuestions: [],
      showAnswers: []
    };
  },
  created() {
    this.refreshQuestions();
  },
  methods: {
    toggleAnswer(index) {
      this.showAnswers[index] = !this.showAnswers[index];
    },
    refreshQuestions() {
      const shuffledQuestions = this.questions.sort(() => 0.5 - Math.random());
      this.displayedQuestions = shuffledQuestions.slice(0, 5);
      this.showAnswers = Array(5).fill(false);
    }
  }
};
</script>

<style>
.question-container {
  margin-bottom: 20px;
}

.question {
  font-weight: bold;
}

.answer-button {
  margin-top: 10px;
}

.answer {
  margin-top: 10px;
  font-style: italic;
}
</style>

main.js

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

app.vue

<template>
  <div id="app">
    <QuestionList :questions="questions" />
  </div>
</template>

<script>
import QuestionList from './components/QuestionList.vue';
import questions from './questions.json';

export default {
  components: {
    QuestionList
  },
  data() {
    return {
      questions: questions
    };
  }
};
</script>

<style>
/* 你的全局样式 */
</style>