National Energy Conservation Publicity Week knowledge answering activity

If you want to disseminate safety production knowledge in a short period of time, then answering questions is undoubtedly one of the effective ways.

Mini-program v3.0 for answering questions, based on WeChat native mini-program + cloud development. It mainly includes six functional module pages, home page, event rules page, leaderboard page, answer page, result page, and answer record page.

It is suitable for application scenarios such as energy-saving knowledge publicity, law-learning education, fire safety knowledge publicity, traffic safety quizzes, network security knowledge contests, safety production knowledge learning, May 4th Youth Day quiz activities, and prize-winning quizzes.

activity theme

Energy saving and carbon reduction, green development

activity form

online quiz

contest content

Green environmental protection and energy saving knowledge, garbage classification knowledge

Activity Rules

1. This knowledge contest adopts the online answering mode of the mini program of the WeChat public account platform.

2. There are a total of 200 questions in the knowledge contest question bank, including 100 single-choice questions, 50 multiple-choice questions, and 50 judgment questions.

3. 10 questions are randomly selected from the question bank for each answer, and the answering time is 5 minutes. There are only 3 opportunities to answer questions per day. Each time you answer a question with 80 points, you can draw a prize.

4. The ranking rules are based on a single score, and those with the same score are ranked according to the time spent on answering the question.

prize settings

Prize setting: call charges ranging from 50 yuan, 30 yuan, 20 yuan, and 10 yuan;

way of participation

Click on the link in the event article to enter, and you can participate in answering the questions.

Software Architecture

WeChat native applet
Back-end cloud development (database, cloud function, storage)
CMS background management system

Functional structure

Leaderboard page
Event Rules Page
answer page
WeChat authorized login
Randomly selected questions from the question bank
Query historical results
Home page, answer page, result page, registration login page, question bank study, etc.
Realize the function of jumping between pages
Realize the function of forwarding and sharing answer results
Realize the function of querying the question bank with cloud development
Realize dynamic topic data binding
interactive logic
switch to next question
Submit the answer sheet and save it to the cloud database collection
System automatic scoring
The answer result page queries the answer results from the cloud database
Supports single-choice, multiple-choice, and judgment questions
wrong question set
View answer history of all users - Admin
View the user's answering scores and answering status-Administrator
Background data monitoring - administrator
Background management - administrator

v3.0 version upgrade:

1) Extended functions:

Register login page√
Question bank study√
Wrong question set√
View all users' answer records-Administrator√
View the user's answering results and answering status-Administrator√
Background question bank management system - administrator √
Topic Addition, Deletion, Check and Modification-Administrator√

2) Upgrade function:

The ranking mechanism of the leaderboard page is optimized to take personal best scores for ranking√
Answer page, result page interface, increase the display of WeChat avatar and nickname column √
Upgrade from only supporting single choice to supporting single choice, judgment, and multiple choice questions √
Minor optimizations of various interfaces and functions√

key code

1. Log in with WeChat authorization and get WeChat avatar nickname

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{
   
   {avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
 
Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

2. Forward and share function

Initiate forwarding within the page. By setting the attribute open-type="share" to the button component, the Page.onShareAppMessage event can be triggered after the user clicks the button. Related components: button.

onShareAppMessage: function () {
    // return custom share data when user share.
  },

3. The applet page stack can have up to ten layers

Question: Suppose there are 20 question pages in the applet. After answering the previous question, wx.navigateTo will go to the next question page. Then when you reach the tenth question, you will find that wx.navigateTo cannot jump to the next page.

Analysis: This is because using wx.navigateTo to jump will save the current page to the page stack, and the applet page stack has up to ten layers.

Solution: Use wx.redirectTo or wx.reLaunch instead.

4. Randomly select questions from the question bank

// 获取题库-函数定义
  getQuestionList() {
 
    // 数据库集合的聚合操作实例
    activityQuestion
    .aggregate()
    .match({       //类似于where，对记录进行筛选
      true: _.exists(true)
    })
    .sample({
      size: 20
    })
    .end()
    .then(res => {
      // 在控制台打印数据
      console.log(res.list)
 
      let data = res.list || [];
      
      // 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
      this.setData({
        questionList:data
      });
    })
  }

5. The results are ranked from high to low

getRankList() {
    // 数据库集合的聚合操作实例
    activityScore
    .where({
      _openid: _.exists(true)
    })
    .orderBy('totalScore', 'desc')
    .get()
    .then(res => {
      // 获取集合数据，或获取根据查询条件筛选后的集合数据。
      console.log('[云数据库] [排行榜] 查询成功')
      console.log(res.data)
      let data = res.data || [];
      
      // 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
      this.setData({
        rankList:data
      });
    })
  }