cfc/cfc-frontend/pages/cognitive-test/language-test.vue

<template>
  <view class="test-container">

    <!-- 步骤一：测试说明 -->
    <view class="step-panel" v-if="step === 'instruction'">
      <view class="title-icon">🗣️</view>
      <text class="test-title">语言表达测试</text>
      <text class="test-desc">观察每组词语，找出与其它三个不同类的那一个。</text>
      <text class="test-desc">考验你的词汇理解和分类归纳能力！</text>
      <text class="test-meta">共 6 题 · 每题限时 12 秒 · 超时自动进入下一题</text>
      <button class="btn-primary" @click="startTest">开始测试</button>
    </view>

    <!-- 步骤二：答题中 -->
    <view class="step-panel" v-else-if="step === 'playing'">
      <view class="progress-row">
        <text class="progress-text">第 {{ currentIndex + 1 }}/6 题</text>
        <text class="progress-text">答对 {{ correctCount }} 题</text>
      </view>

      <view class="timer-bar">
        <view class="timer-fill" :style="timerBarStyle"></view>
      </view>
      <text class="timer-text">{{ timerLeft }}秒</text>

      <text class="question-hint" v-if="currentQuestion">{{ currentQuestion.prompt }}</text>

      <view class="option-wrap">
        <view
          class="option-cell"
          v-for="(opt, index) in currentQuestionOptions"
          :key="index"
          :class="{
            'cell-correct': lockInput && index === currentQuestion.answerIndex,
            'cell-wrong': tappedIndex === index && index !== currentQuestion.answerIndex
          }"
          @click="handleTap(index)"
        >
          <text class="option-text">{{ opt }}</text>
        </view>
      </view>
    </view>

    <!-- 步骤三：结果 -->
    <view class="step-panel" v-else>
      <text class="result-title">测试完成</text>
      <view class="score-circle">
        <text class="score-num">{{ score }}</text>
      </view>
      <view class="score-row">
        <text class="score-label">答对 {{ correctCount }}/6 题</text>
        <text class="dimension-tag">语言表达</text>
      </view>
      <view class="result-tip" v-if="score >= 75">
        <text class="result-tip-text">词汇丰富，语言表达能力强！</text>
      </view>
      <view class="result-tip" v-else-if="score >= 50">
        <text class="result-tip-text">表现不错，多阅读会更好！</text>
      </view>
      <view class="result-tip" v-else>
        <text class="result-tip-text">别灰心，平时多积累词汇！</text>
      </view>
      <button class="btn-primary" @click="submitResult">提交成绩</button>
      <button class="btn-secondary" @click="retryTest">再测一次</button>
    </view>

  </view>
</template>

<script>
import { submitCognitiveSelfTest } from '../../utils/api.js'

// 题库：4 个词语，其中一个是"不同类"的
var QUESTION_BANK = [
  { prompt: '找出不同类的一项', options: ['苹果', '香蕉', '胡萝卜', '橘子'], answerIndex: 2 },
  { prompt: '找出不同类的一项', options: ['狗', '猫', '马', '鱼'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['红色', '蓝色', '绿色', '桌子'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['钢琴', '小提琴', '吉他', '足球'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['春天', '夏天', '秋天', '月亮'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['跑步', '游泳', '跳跃', '思考'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['父亲', '母亲', '姐姐', '老师'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['火车', '飞机', '轮船', '自行车'], answerIndex: 2 },
  { prompt: '找出不同类的一项', options: ['黄金', '白银', '铜', '铁'], answerIndex: 0 },
  { prompt: '找出不同类的一项', options: ['广州', '深圳', '香港', '北京'], answerIndex: 2 },
  { prompt: '找出不同类的一项', options: ['三角形', '圆形', '方形', '菱形'], answerIndex: 1 },
  { prompt: '找出不同类的一项', options: ['莎士比亚', '李白', '杜甫', '爱因斯坦'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['幸福', '快乐', '悲伤', '满足'], answerIndex: 2 },
  { prompt: '找出不同类的一项', options: ['书本', '报纸', '杂志', '电脑'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['太阳', '月亮', '星星', '云朵'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['钢笔', '铅笔', '毛笔', '画笔'], answerIndex: 0 },
  { prompt: '找出不同类的一项', options: ['苹果', '芒果', '榴莲', '土豆'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['大海', '河流', '湖泊', '雨水'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['红色', '橙色', '黄色', '白色'], answerIndex: 3 },
  { prompt: '找出不同类的一项', options: ['钢琴', '鼓', '喇叭', '篮球'], answerIndex: 3 }
]

var ROUND_COUNT = 6
var TIMER_SECONDS = 12

export default {
  data() {
    return {
      step: 'instruction',
      memberId: '',
      roundQuestions: [],
      currentIndex: 0,
      currentQuestion: null,
      correctCount: 0,
      timerLeft: TIMER_SECONDS,
      timer: null,
      nextTimer: null,
      lockInput: false,
      tappedIndex: -1,
      score: 0
    }
  },
  computed: {
    timerPercent: function() {
      return Math.round(this.timerLeft / TIMER_SECONDS * 100)
    },
    timerBarStyle: function() {
      return 'width:' + this.timerPercent + '%'
    },
    currentQuestionOptions: function() {
      if (!this.currentQuestion) return []
      return this.currentQuestion.options
    }
  },
  onLoad: function(options) {
    if (options && options.memberId) {
      this.memberId = options.memberId
    }
  },
  onUnload: function() {
    this.stopTimer()
    if (this.nextTimer) {
      clearTimeout(this.nextTimer)
      this.nextTimer = null
    }
  },
  methods: {
    startTest: function() {
      this.correctCount = 0
      this.currentIndex = 0
      this.score = 0
      this.lockInput = false
      this.tappedIndex = -1
      // 洗牌后取前 6 题
      var bank = QUESTION_BANK.slice()
      for (var i = bank.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1))
        var tmp = bank[i]
        bank[i] = bank[j]
        bank[j] = tmp
      }
      this.roundQuestions = bank.slice(0, ROUND_COUNT)
      this.step = 'playing'
      this.loadQuestion(0)
    },
    loadQuestion: function(index) {
      this.currentIndex = index
      this.currentQuestion = this.roundQuestions[index]
      this.tappedIndex = -1
      this.lockInput = false
      this.timerLeft = TIMER_SECONDS
      this.startTimer()
    },
    startTimer: function() {
      this.stopTimer()
      this.timer = setInterval(() => {
        this.timerLeft--
        if (this.timerLeft <= 0) {
          this.timerLeft = 0
          this.onTimeout()
        }
      }, 1000)
    },
    stopTimer: function() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    handleTap: function(index) {
      if (this.lockInput || !this.currentQuestion) return
      this.lockInput = true
      this.stopTimer()
      this.tappedIndex = index
      if (index === this.currentQuestion.answerIndex) {
        this.correctCount++
      }
      this.scheduleNext()
    },
    onTimeout: function() {
      if (this.lockInput) return
      this.lockInput = true
      this.stopTimer()
      this.tappedIndex = -1
      this.scheduleNext()
    },
    scheduleNext: function() {
      if (this.nextTimer) clearTimeout(this.nextTimer)
      this.nextTimer = setTimeout(() => {
        this.nextTimer = null
        this.advance()
      }, 700)
    },
    advance: function() {
      if (this.currentIndex + 1 >= this.roundQuestions.length) {
        this.finishTest()
      } else {
        this.loadQuestion(this.currentIndex + 1)
      }
    },
    finishTest: function() {
      this.stopTimer()
      this.score = Math.round(this.correctCount / this.roundQuestions.length * 100)
      this.step = 'result'
    },
    submitResult: function() {
      var memberId = this.memberId || uni.getStorageSync('currentChildId') || ''
      if (!memberId) {
        uni.showToast({ title: '请先选择孩子', icon: 'none' })
        return
      }
      submitCognitiveSelfTest(memberId, 'languageScore', this.score)
        .then((res) => {
          uni.showToast({ title: '提交成功', icon: 'success' })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        })
        .catch((err) => {
          console.error('提交语言表达测试成绩失败', err)
          uni.showToast({ title: '提交失败，请重试', icon: 'none' })
        })
    },
    retryTest: function() {
      this.startTest()
    }
  }
}
</script>

<style scoped>
.test-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 60rpx 40rpx;
  box-sizing: border-box;
}

.step-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== 说明页 ===== */
.title-icon {
  font-size: 88rpx;
  margin-bottom: 24rpx;
}

.test-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 32rpx;
}

.test-desc {
  font-size: 30rpx;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  text-align: center;
}

.test-meta {
  font-size: 24rpx;
  color: rgba(255,255,255,0.45);
  margin-top: 24rpx;
  margin-bottom: 80rpx;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  color: #1a1a2e;
  font-size: 34rpx;
  font-weight: bold;
  width: 480rpx;
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 46rpx;
  border: none;
  margin-top: 60rpx;
  padding: 0;
}

.btn-primary::after {
  border: none;
}

.btn-secondary {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  font-size: 32rpx;
  width: 480rpx;
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 46rpx;
  border: 2rpx solid rgba(255,255,255,0.25);
  margin-top: 32rpx;
  padding: 0;
}

.btn-secondary::after {
  border: none;
}

/* ===== 答题页 ===== */
.progress-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24rpx;
}

.progress-text {
  font-size: 28rpx;
  color: rgba(255,255,255,0.7);
}

.timer-bar {
  width: 100%;
  height: 16rpx;
  background: rgba(255,255,255,0.12);
  border-radius: 8rpx;
  overflow: hidden;
}

.timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
  border-radius: 8rpx;
  transition: width 0.9s linear;
}

.timer-text {
  display: block;
  font-size: 26rpx;
  color: #F59E0B;
  margin-top: 12rpx;
  text-align: center;
}

.question-hint {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  margin: 40rpx 0 32rpx;
  text-align: center;
}

.option-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.option-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47%;
  min-height: 120rpx;
  background: #2a2a4a;
  border-radius: 24rpx;
  border: 4rpx solid transparent;
  margin-bottom: 24rpx;
  padding: 24rpx;
  box-sizing: border-box;
}

.option-cell:active {
  background: #35406b;
}

.option-text {
  font-size: 34rpx;
  color: #fff;
  font-weight: 500;
}

.cell-correct {
  background: #3d4a2f;
  border-color: #4ECDC4;
}

.cell-wrong {
  background: #4a2f35;
  border-color: #ff6b6b;
}

/* ===== 结果页 ===== */
.result-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 48rpx;
}

.score-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260rpx;
  height: 260rpx;
  border-radius: 50%;
  border: 10rpx solid #F59E0B;
  background: rgba(245,158,11,0.1);
  margin-bottom: 36rpx;
}

.score-num {
  font-size: 88rpx;
  font-weight: bold;
  color: #F59E0B;
}

.score-row {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.score-label {
  font-size: 30rpx;
  color: rgba(255,255,255,0.7);
  margin-right: 20rpx;
}

.dimension-tag {
  font-size: 24rpx;
  color: #F59E0B;
  border: 2rpx solid #F59E0B;
  border-radius: 24rpx;
  padding: 6rpx 24rpx;
}

.result-tip {
  margin-bottom: 20rpx;
}

.result-tip-text {
  font-size: 28rpx;
  color: rgba(255,255,255,0.6);
}
</style>