直觉采访 | 设置 1(校内)

简介

直觉采访是一项互动式采访活动，旨在为用户提供一个灵活、创新、高效的采访方式。本次设置主题为校内，通过直觉采访，用户可以了解到该校的各种信息和资源，为校内生活提供帮助。

页面展示

• 首页

• 采访页面

• 结束页面

实现思路

本次直觉采访采用Vue.js框架开发，结合Element UI组件库实现页面布局和样式。数据存储在localStorage中，用户答题完成后可以查看答题结果。

• 首页

首页包括选取中文或英文语言和开始答题按钮。语言选项用VUEX存储，保证全局数据共享。

<template>
  <div class="home">
    <h1 class="title">直觉采访 | 设置 1(校内)</h1>
    <div class="lang">
      <el-radio-group v-model="lang" class="lang-group">
        <el-radio-button label="zh">中文</el-radio-button>
        <el-radio-button label="en">English</el-radio-button>
      </el-radio-group>
    </div>
    <div class="btn-group">
      <el-button type="primary" class="btn" @click="startInterview">开始答题</el-button>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      lang: 'zh', // 默认选择中文
    };
  },
  computed: {
    ...mapMutations({
      switchLang: 'global/switchLang',
    }),
  },
  methods: {
    startInterview() {
      // 跳转到采访页面
      this.$router.push('/interview');
      // 存储语言选项到VUEX
      this.switchLang(this.lang);
    },
  },
};
</script>

• 采访页面

采访页面包括题目、答案和提交按钮。题目数据存储在JSON文件中，通过axios获取并进行解析。答案存储在localStorage中，可以进行答题结果的展示和处理。提交按钮根据答案正确性进行样式以及相应提示信息。

<template>
  <div class="interview">
    <div class="question">
      <p class="id">{{ id }}.</p>
      <p class="text">{{ question }}</p>
    </div>
    <div class="answer">
      <el-radio-group v-model="answer" class="answer-group" @change="submitAnswer">
        <el-radio-button class="option" v-for="(option, index) in options" :key="index" :label="option.id">
          {{ option.text }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <el-button class="submit-btn" :type="submitType" :icon="submitIcon">{{ submitText }}</el-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      id: 0, // 当前题目号
      question: '', // 当前题目
      options: [], // 当前选项
      answer: '', // 答案
      correctAnswer: '', // 正确答案
      submitType: '', // 按钮样式
      submitText: '提交', // 提交按钮文字
      submitIcon: '', // 提交按钮Icon
    };
  },
  methods: {
    async getQuestion() {
      try {
        const response = await axios.get(`/static/question-${this.$store.state.global.lang}.json`);
        const data = response.data;
        // 根据当前题目id获取题目数据
        const questionData = data.questions.find((item) => item.id === this.$store.state.interview.questionId);
        this.id = questionData.id;
        this.question = questionData.question;
        this.options = questionData.options;
        this.correctAnswer = String(questionData.answer); // 保存正确答案
      } catch (error) {
        console.error(error);
      }
    },
    submitAnswer() {
      // 保存答案
      localStorage.setItem(`question-${this.$store.state.interview.questionId}`, this.answer);
      // 检查答案是否正确
      const answer = localStorage.getItem(`question-${this.$store.state.interview.questionId}`);
      if (answer === this.correctAnswer) {
        // 答案正确
        this.submitType = 'success';
        this.submitIcon = 'el-icon-circle-check';
        this.submitText = '正确';
      } else if (answer) {
        // 答案错误
        this.submitType = 'danger';
        this.submitIcon = 'el-icon-circle-close';
        this.submitText = '错误';
      }
    },
    nextQuestion() {
      // 跳转到下一题
      this.$store.commit('interview/nextQuestion');
      // 重置按钮样式
      this.submitType = '';
      this.submitIcon = '';
      this.submitText = '提交';
      // 获取新的题目
      this.getQuestion();
    },
  },
  mounted() {
    this.getQuestion();
  },
};
</script>

• 结束页面

结束页面展示用户答题结果和积分。根据答题正确性计算用户积分。

<template>
  <div class="finish">
    <h3 class="title">采访结束</h3>
    <div class="result">
      <div class="item" v-for="(item, index) in items" :key="index">
        <p class="id">{{ item.id }}.</p>
        <p class="text">{{ item.text }}</p>
        <p class="score">{{ item.score }}积分</p>
      </div>
    </div>
    <el-button type="primary" class="btn" @click="restartInterview">再次答题</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          id: 1,
          text: '你回答了正确的题目数',
          score: 10,
        },
        {
          id: 2,
          text: '你回答了错误的题目数',
          score: -5,
        },
      ],
    };
  },
  computed: {
    correctNum() {
      // 统计正确题目数
      let num = 0;
      for (let i = 1; i <= this.$store.state.interview.questionNum; i++) {
        const answer = localStorage.getItem(`question-${i}`);
        if (answer) {
          const questionData = this.$store.state.interview.questionData.find((item) => item.id === i);
          if (answer === String(questionData.answer)) {
            num++;
          }
        }
      }
      return num;
    },
    errorNum() {
      // 统计错误题目数
      let num = 0;
      for (let i = 1; i <= this.$store.state.interview.questionNum; i++) {
        const answer = localStorage.getItem(`question-${i}`);
        if (answer) {
          const questionData = this.$store.state.interview.questionData.find((item) => item.id === i);
          if (answer !== String(questionData.answer)) {
            num++;
          }
        }
      }
      return num;
    },
    score() {
      // 计算用户积分
      return this.correctNum * 10 + this.errorNum * -5;
    },
  },
  methods: {
    restartInterview() {
      // 重置采访状态
      this.$store.commit('interview/reset');
      // 跳转到首页
      this.$router.push('/');
    },
  },
};
</script>

结语

本篇介绍了直觉采访校内设置的具体实现，包括页面结构和样式以及数据处理的方法。采用Vue.js框架开发，结合Element UI组件库实现页面布局和样式。实现思路详细，代码片段清晰易懂，欢迎大家借鉴。