Uni App小白学习笔记——刷题App(五)

系统一直不pass,看图的去公众号吧


image.png

前言:

这篇文章是该系列文章的最后一篇了,当然我们的题库demo还有很多功能没有实现,但是不得不告一段落了。

实现案例题

json数据

json如下:

案例题的json和之前几种题型都不太一样,因为在一个大题中分了几小题。上图的json并不能直接由之前的网站生成。可能需要手动调成上图那样。当然若题库量很大考虑使用代码读取excel数据转换成json格式。
讲解下上图的json格式,在其中引入了sub表示小题。

实现逻辑

首先获取json数据,第一步默认渲染第一大题的题目,和第一大题下的第一小题,然后再左滑的时候切换到第一大题题目的第二小题。一直到第一大题的小题都切换完再切换到第二小题。到第二大题的时候又要回到第二大题的第一小题,所以要把小题的索引重置到0,重新开始。然后答题部份的逻辑的单选题一样。代码如下:

data() {
  return {
    question_data: question_data,
    count: 0,
    type: '案例题',
    question: {},
    sub_item: {},
    select_option: '',
    selected: false,
    startPoint: {},
    endPoint: {},
    page_index: 0,
    sub_page_index: 0,
    isActive: false,
    status: 0,
    select_a: false,
    select_b: false,
    select_c: false,
    select_d: false,
  }
},
onLoad() {
  this.question = this.question_data[this.page_index]
  this.sub_item = this.question.sub_item[this.sub_page_index]
  this.count = this.question_data.length
},
methods: {
  commit() {
    this.isActive = true
  },
  select(option) {
    switch (option) {
      case 'A':
        this.select_a = !this.select_a
        break
      case 'B':
        this.select_b = !this.select_b
        break
      case 'C':
        this.select_c = !this.select_c
        break
      case 'D':
        this.select_d = !this.select_d
        break
      default:
        break
    }
    this.selected = true
  },
  nextQuestion() {
    this.selected = false
    this.isActive = false
    this.status = 0
    if (this.sub_page_index < this.question.sub_item.length) {
      this.sub_page_index ++
      this.sub_item = this.question.sub_item[this.sub_page_index]
    } else {
      this.page_index ++
      this.sub_page_index = 0
      this.question = this.question_data[this.page_index]
      this.sub_item = this.question.sub_item[this.sub_page_index]
    }
    this.select_a = this.select_b = this.select_c = this.select_d = false
  },
  prevQuestion() {
    this.selected = false
    this.isActive = false
    this.page_index --
    this.question = this.question_data[this.page_index]
  },

可能会有些长,不过认真看应该能看懂哈233333,效果如下:

uniapp系列就到此为止啦,当然,除了判断题,还可以加上评分系统,错题集等等.....
开发好了可以打包发布了:

告一段落......

已发现BUG

  • 题库数组越界
  • 手机端图标不能自适应

推荐阅读更多精彩内容

  • 上篇文章我们已经初步搭建好了刷题App的第一个页面,这篇文章继续来开发后续一些功能。 这里就使用了navigato...
    hojun阅读 3,621评论 0 8
  • 作业帮、猿题库、作业盒子竞品分析 前言 目前,在线教育细分领域主要包括K12(幼儿园到高中)、外语考试、留学咨询...
    会飞的产品猪阅读 27,949评论 1 20
  • 算了 我再也不想他了 不可能的夜晚
    em李甜甜阅读 77评论 0 0
  • 参考书目:《诺贝尔奖获得者与儿童对话》 作者:西蒙·佩雷斯 虽然学了很多年政治,可我依然困惑:什么是政治?答案在此...
    仲夏夜之梦123阅读 124评论 0 3
  • 想成为想妮妮一样的人,漂亮 聪明 自信 她说:我希望自己不要红 我要變成很厲害但不需要紅。想成为想粒粒一样的人,美...
    植月阅读 67评论 0 0