vue实现答题功能一页一题并最后得出分数_vue答题程序一页一题

1. 实现效果如图
   
   
   

每点下一题会切换题目，知道最后一题变为完成答题，然后进入答题完成页面显示分数
2.template代码

<template>
  <div class="second"> 
    <div class="back" style="padding-top:10px" @click="$router.back(-1)">
      <i class="iconfont icon-jiantou" style="margin-left: 10px; display: block; font-size: 23px;color:rgb(203, 204, 204)"></i>
    </div>
    <div class="dati">
    <!-- 问卷题 -->
    <div v-for="(item, index) in questionList" :key="item.id" >
      <!-- 测试 -->
      <div class="test-content" v-if="index == page">
      //这是根据每道题的id在头部显示第几题
        <div class="test-title" v-if="item.id == 1">第一题</div>
        <div class="test-title" v-if="item.id == 2">第二题</div>
        <div class="test-title" v-if="item.id == 3">第三题</div>
        <div class="test-title" v-if="item.id == 4">第四题</div>
        <div class="test-title" v-if="item.id == 5">第五题</div>
        <div class="test-title" v-if="item.id == 6">第六题</div>
       
		//题号+题目
        <div class="content-title">{{ index + 1 }}.{{ item.title }}</div>
		//四个选项，我这里item代表从后端获取到的所有题数组
        <van-radio-group v-model="radio">
          <van-radio :name="item.a " class="text-x">{{
            item.a
          }}</van-radio>
          <van-radio :name="item.b " class="text-x">{{
            item.b
          }}</van-radio>
          <van-radio :name="item.c " class="text-x">{{
            item.c
          }}</van-radio>
          <van-radio :name="item.d " class="text-x">{{
            item.d
          }}</van-radio>
         
        </van-radio-group>
		//进入下一题
        <div class="btn">
         
          <div
            class="next"
            @click="toNext(index, item.id)"
            v-if="isShow"
            :class="index == 0 ? 'next' : 'before-next'"
            
          >
            <span class="spa">下一题</span>
          </div>

          <!-- 提交 -->
          <div
            class="tijiao"
            v-if="!isShow"
            @click.prevent="getCode"
            :class="index == 0 ? 'next' : 'before-next'"
          >
           <span class="spa"> 完成答题</span>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

3.API接口内容

//pk答题（获取所有题）
export const getQuest = () => axios.get("/api/v1/pub/questionAll")
//答题（将所得分数score传给后端）
export const getScore = (score,token)=> axios.get("/api/v1/pri/user/putResult",{
    params:{//请求头，我这里后端需要携带token
        "token":token,
        score:score
    }
})
1
2
3
4
5
6
7
8
9

2.script代码

 <script>
 //访问后端接口，来得到所有题数组，以及将得到的最终得分传给后端保存起来
import { getQuest,getScore } from "@/api/getData.js";
export default {
//缓存，获取到vuex中保存的token，可以看
//https://blog.csdn.net/weixin_51935690/article/details/117167797?spm=1001.2014.3001.5502
//来如何保存token
    computed: {
    getToken() {
      return this.$store.state.token;
    }
  },
  name: "SecondQuestionnaire",
  data() {
    return {
         // 获取问卷数据
      questionList:[],
      // 当前页
      page: 0,
      // 选项
      radio: "",
      // 题目的id
      ids: [],
      // 分数
      score:0,
      // 存放每一题的id和num
      questionInfos: [],
      // 当前题目的序号等于当前题目的条数
      isShow: true,
    };
  },
  mounted(){
      //页面渲染完成调用方法获取数据
      this.getQuestion();
  },
  methods: {
    // 获取问卷数据
    async getQuestion() {
        try{
               const result =  await getQuest()
               console.log(result);
               if(result.data.code == 0){
                   this.questionList = result.data.data;
                   console.log(this.questionList);
               }

            }catch(error){
                console.log(error)
            }
    },

    // 点击下一题
    toNext(index, id) {
        console.log(this.page);
      // 2. 保存答题数据
      let question = { ids: this.radio.slice(0)};
      this.questionInfos[index] = question;
	//每一道题10分，得到选项后判断与后端传来的答案是否一致。一致+10分，不一致不加分
      if (this.questionInfos[index].ids==this.questionList[index].answer) {
        this.score=this.score+10;
        console.log(this.score);
      }else{
         this.score=this.score+0;
        console.log(this.score);
      }
      // 3. 索引+1；
      index++;
      // 5. page ++
      this.page++;
      console.log(this.page);
      // 6. 其他（如按钮隐藏）
      // 当前页等于最后一题 下一题按钮隐藏
      if (this.page == this.questionList.length - 1) {
        return (this.isShow = false);
      } else {
        return (this.isShow = true);
      }
    },

    // 点击提交
    async submit(n) {
      alert(this.score)
     async getCode () {
          // 发送ajax请求(携带token和score分数)
          const result = await getScore(this.score,this.getToken)
          console.log(result);
          // 根据结果数据处理
        if(result.data.code===0) {
          // 去分数界面
          this.$router.replace('/score')
        } else {
          // 显示警告提示
          console.log("答题失败");
        }
      },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98