MBTI答题应用小程序

源代码

calmthink/mbti小程序 (gitee.com)

实现方案

题目结构

 [
 {

    "options": [

      {

        "result": "I",

        "value": "独自工作",

        "key": "A"

      },

      {

        "result": "E",

        "value": "与他人合作",

        "key": "B"

      }

    ],

    "title": "你通常更喜欢"

  },
  ]

答案结构

[
{

    "resultProp": [

      "I",

      "S",

      "T",

      "J"

    ],

    "resultDesc": "忠诚可靠，被公认为务实，注重细节。",

    "resultPicture": "icon_url_istj",//其他信息

    "resultName": "ISTJ（物流师）"

  },
]

评分算法

用户每道题都必须选择,不能为null
本地存储用户的结果列表 anserList = [‘A’,‘B’,‘C’,‘B’,‘B’]
初始化对象{},记录IETPJNS每个的分数
通过遍历结果数组获取最大的分数确定人格类型

/**  
 * 获取最佳题目评分结果  
 * @param answerList  
 * @param questions  
 * @param question_results  
 */  
  
export function getBestQuestionResult(answerList, questions, question_results) {  
  // 初始化一个对象，用于存储每个选项的计数  
  const optionCount = {};  
  
// 假设 answerList 和 questions 的长度相同且顺序对应  
  for (let i = 0; i < answerList.length; i++) {  
    const answer = answerList[i];  
    const question = questions[i]; // 直接从对应的问题中获取选项  
    for (const option of question.options)      {  
      if (option.key === answer) {  
        const result = option.result;  
        if (!optionCount[result]) {  
          optionCount[result] = 1;  
        } else {  
          optionCount[result]++;  
        }  
        break; // 找到匹配项后跳出循环，因为我们已经找到了答案  
      }  
    }  
  }  
  
// 初始化最高分数和最高分数对应的评分结果  
  let maxScore = 0;  
  let maxScoreResult = null;  
  
// 遍历评分结果列表  
  for (const result of question_results) {  
    const score = result.resultProp.reduce((count, prop) => {  
      return count + (optionCount[prop] || 0);  
    }, 0);  
  
    if (score > maxScore) {  
      maxScore = score;  
      maxScoreResult = result;  
    }  
  }  
  
// 返回最高分数和最高分数对应的评分结果  
  return maxScoreResult;  
}

技术选型

• React
• Taro跨端框架
• TaroUI组件库

配置eslint prettier

在webstorm中打开自动读取

新增页面组件

1. 全局配置文件app.config.ts中新增页面路由
2. 复制已有页面文件,创造出新的页面
3. 根据自己的需求定制开发
4. 简单实现页面跳转

 render () {  
    return (  
      <View className='user'>  
        <AtButton type='primary' onClick={()=>{  
          Taro.navigateTo({  
              url:'/pages/index/index'  
          })  
        }}>  
          点击跳转  
        </AtButton>  
      </View>    )  
  }  
}