【页面案例汇总】微信小程序题目详情页面

【页面案例汇总】微信小程序题目详情页面：

<template>
  <view class="container">
    <view class="title">{{ question.title }}</view>
    <view class="description">{{ question.description }}</view>
    <view class="options" v-for="(option, index) in question.options" :key="index">
      <view class="option" :class="{
          'selected': selectedOption === index,
          'correct': showAnswer && index === question.correctIndex,
          'incorrect': showAnswer && index !== question.correctIndex && selectedOption === index
        }" @click="selectOption(index)">
        <text class="option-index">{{ String.fromCharCode(65 + index) }}.</text>
        <text class="option-text">{{ option }}</text>
      </view>
    </view>
    <view class="actions">
      <button class="submit-button" :disabled="selectedOption === null || showAnswer" @click="checkAnswer()">Submit</button>
      <button class="next-button" :disabled="!showAnswer" @click="nextQuestion()">Next</button>
    </view>
    <view class="result" v-if="showAnswer">
      <text class="result-text">{{ question.correctIndex === selectedOption ? 'Correct!' : 'Incorrect!' }}</text>
      <text class="explanation">{{ question.explanation }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: null,
      showAnswer: false,
      question: {
        title: 'What is the capital of France?',
        description: 'Choose the correct answer from the following options:',
        options: ['Berlin', 'London', 'Paris', 'Madrid'],
        correctIndex: 2,
        explanation: 'Paris is the capital of France.'
      }
    }
  },
  methods: {
    selectOption(index) {
      if (!this.showAnswer) {
        this.selectedOption = index;
      }
    },
    checkAnswer() {
      if (this.selectedOption !== null) {
        this.showAnswer = true;
      }
    },
    nextQuestion() {
      this.selectedOption = null;
      this.showAnswer = false;
      this.question = {} // set the next question object
    }
  }
}
</script>

<style scoped>
.container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.description {
  margin-bottom: 20px;
}

.options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

.option {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.option:hover {
  background-color: #f5f5f5;
}

.option.selected {
  background-color: #007aff;
  color: #fff;
}

.option.correct {
  background-color: #4cd964;
  color: #fff;
}

.option.incorrect {
  background-color: #ff3b30;
  color: #fff;
}

.option-index {
  font-weight: bold;
  margin-right: 10px;
}

.actions {
  display: flex;
  justify-content: center;
}

.submit-button {
  margin-right: 10px;
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.submit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.submit-button:hover:enabled {
  opacity: 0.8;
}

.next-button {
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.next-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.next-button:hover:enabled {
  opacity: 0.8;
}

.result {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-text {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.explanation {
  margin-top: 10px;
}
</style>

这个页面假设有一个题目对象，包括题目的标题、描述、选项、正确答案的索引和答案解释。页面根据用户选择的答案显示不同的样式，维护了一些状态来跟踪用户的选择和是否显示答案。点击“Submit”按钮后，页面将检查选择是否正确，并在“Next”按钮下显示结果和解释。