创新实训第七周

完成选择题界面的设计。

代码如下：

<template>
  <div style="min-height: 100%;display: flex;width: 100%">
    <el-container style="width: 100%;">
      <el-header style="background-color: rgb(255,255,255)">
        <testHeader />
      </el-header>

      <el-container style="display: flex;flex-direction: row" >
        <el-aside :width="sideWidth+'px'" style="height: 100%" >
          <testAside />
        </el-aside>

        <div id="app1">
        <el-main style="padding: 20px;">
          <h1>选择题测试</h1>
          <div v-if="currentIndex < questions.length">
            <p>{{ questions[currentIndex].question }}</p>
            <div>
              <button
                  v-for="(option, index) in questions[currentIndex].options"
                  :key="index"
                  :class="{ 'selected': selectedOption === index }"
                  @click="selectOption(index)"
                  :disabled="isSubmitted"
              >
                {{ String.fromCharCode(65 + index) }}. {{ option }}
              </button>
            </div>
            <button @click="submitAnswer" :disabled="selectedOption === null || isSubmitted">
              {{ isSubmitted ? '已提交' : '提交' }}
            </button>
            <p v-if="isSubmitted" :style="{ color: isCorrect ? 'green' : 'red' }">
              {{ isCorrect ? '恭喜您，回答正确！' : '很遗憾，回答错误！' }}
            </p>
            <p v-if="isSubmitted">
              解析：{{ questions[currentIndex].explanation }}
            </p>
            <button v-if="isSubmitted && currentIndex < questions.length - 1" @click="nextQuestion">
              下一题
            </button>
            <div v-if="isSubmitted && currentIndex === questions.length - 1">
              <h2>测试完成!</h2>
              <p>您总共答对 {{ correctAnswers }} 道题目。</p>
              <button @click="resetTest">重新开始测试</button>
            </div>
          </div>
        </el-main>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 引入所需的组件
import testAside from "@/components/learnAside.vue";
import testHeader from "@/components/learnHeader.vue";
import { Notebook } from '@element-plus/icons-vue'

export default {
  name: 'App1',
  components: {
    testAside,
    testHeader
  },
  data() {
    return {
      currentIndex: 0,
      correctAnswers: 0,
      isCorrect: false,
      selectedOption: null,
      isSubmitted: false,
      questions: [
      {
  question: 'HTML 是什么?',
  options: [
    '一种用于创建网页的标记语言',
    '一种编程语言',
    '一种脚本语言',
    '以上说法都不正确'
  ],
  answer: 0,
  explanation: 'HTML (Hypertext Markup Language) 是一种用于创建网页的标记语言。它定义了网页的结构和内容,包括文本、图像、链接等元素。HTML 是构建网页的基础,是 Web 开发的核心技术之一。'
},
{
  question: 'HTML 文档的基本结构包括哪些部分?',
  options: [
    '头部(head)和主体(body)',
    '只有主体(body)',
    '只有标题(title)',
    '以上说法都不正确'
  ],
  answer: 0,
  explanation: 'HTML 文档的基本结构包括头部(head)和主体(body)两个主要部分。头部用于定义文档的元数据,如网页标题、编码格式等;主体用于定义网页的内容和结构,如文本、图像、链接等。'
},
{
  question: 'HTML 中常用的标签有哪些?',
  options: [
    '标题标签(h1-h6)、段落标签(p)、链接标签(a)、图像标签(img)等',
    '只有基本的文本标签',
    '只有自定义的标签',
    '以上说法都不正确'
  ],
  answer: 0,
  explanation: 'HTML 中常用的标签包括标题标签(h1-h6)、段落标签(p)、链接标签(a)、图像标签(img)等。这些预定义的标签可以帮助开发者快速构建网页结构和内容。HTML 5还引入了更多语义化的标签,如header、nav、article等。'
}
      ]
    }
  },
  methods: {
    selectOption(index) {
      this.selectedOption = index
    },
    submitAnswer() {
      if (this.selectedOption !== null && !this.isSubmitted) {
        const question = this.questions[this.currentIndex]
        if (question.answer === this.selectedOption) {
          this.isCorrect = true
          this.correctAnswers++
        } else {
          this.isCorrect = false
        }
        this.isSubmitted = true
      }
    },
    nextQuestion() {
      this.currentIndex++
      this.selectedOption = null
      this.isSubmitted = false
      this.isCorrect = false
    },
    resetTest() {
      this.currentIndex = 0
      this.correctAnswers = 0
      this.isCorrect = false
      this.selectedOption = null
      this.isSubmitted = false
    }
  }
}
</script>
<style>
#app1 {
  display: flex;
  width: 950px;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
  top: 50%;
  left: 50%;
  transform: translate(25%, 15%);
}


button {
  margin: 10px; /* 控制按钮之间的间距 */
  padding: 10px 20px; /* 控制按钮内部的空间 */
  font-size: 16px; /* 控制按钮中文本的大小 */
  border: 1px solid #ccc; /* 控制按钮边框 */
  border-radius: 5px; /* 控制按钮边框的圆角 */
  /* 移除默认的vertical-align: baseline，以确保按钮底部对齐 */
  vertical-align: top;
  white-space: normal; /* 允许按钮内的文本换行 */
  width: 200px;
  height: 100px;
}

button.selected {
  background-color: #2196F3;
  color: #fff;
}

button:hover {
  background-color: #ccc;
  cursor: pointer;
}
</style>

效果图如下：

这里展示回答正确界面：

这里展示回答错误界面：

其中也包含了重新开始测试按钮。

​​​​​​​​​​​​​​