微信小程序---趣味心理测试

        

Wxml：
<view class="a">
   <image src="/pages/image/1.png" mode=""/>
   <text class="text">趣味心理测试</text>
   <button class="button" bind:tap="ceshi">开始测试</button>
</view>

Js：
    ceshi:function(){
     wx.navigateTo({
       url: '/pages/quiz/quiz',
     })
    },

Wxss：
page{
   background-color: rgb(240, 240, 240);
}
.a{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 3%;
  margin: 50px 20px;
  padding-bottom: 30px;
}
.text{
  margin: 30px 0;
  font-size: 25px;
  font-weight:540;
}
.button{
  font-weight: 540;
  background-color: #F8CE3A;
  width: 200px;
}

Wxtml：
<form class="form" bindsubmit="submitForm">
<view class="a" wx:for="{{qBank}}" wx:key="id" wx:for-item="oneQuiz" >
    <!-- 4-1 题目编号区域 -->
    <view class="b">
    <view class="kg"> </view>
    <text>第{{index+1}}题</text>
    </view>
    <!-- 4-2 题干（问题描述） -->
    <text class="t"> {{oneQuiz.question}} </text>
    <!-- 4-3 单选题选项 -->
    <radio-group class="c" name="quiz{{index+1}}">
      <radio class="d" color="#F8CE3A" wx:for="{{oneQuiz.options}}" wx:key="value" value="{{item.value}}"> {{item.text}}
      </radio>
    </radio-group>
</view>
<button class="button" form-type="submit">查看解析</button>
</form>
<view class="dd"></view>

Js：
    data: {

    },

   submitForm: function(e) {
    console.log('表单数据：', e.detail.value);
    // 获得表单选项值
    const selectedOptions = e.detail.value;
    // 检查是否全部做完（示例代码，根据需要实现）

    // 构建结果数据数组
    let rs = [];
    this.data.qBank.forEach((quiz, index) => {
      const selectedOption = selectedOptions['quiz' + (index + 1)];
      const analysis = quiz.analysis[selectedOption];
      rs.push({ question: quiz.question, option: selectedOption, analysis: analysis });
    });

    // 传递参数rs给结果页使用
    wx.reLaunch({
      url: '../result/result?rs=' + encodeURIComponent(JSON.stringify(rs))
    });
  },

Wxss：
/* pages/quiz/quiz.wxss */
page{
  background-color: rgb(240, 240, 240);
}
.a{
  display: flex;
  flex-direction: column;
  margin: 20px;
  background-color: #fff;
  padding: 12px;
  border-radius: 5%;
}
.kg{
  background-color: #F8CE3A;
  width: 10px;
  height: 27px;
  margin-right: 5px;
  margin-bottom: 4px;
}
.b{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.t{
  line-height: 1.8;
}
.c{
  display: flex;
  flex-direction: column;
}
.d{
  margin: 5px 0;
}

.button{
  font-weight: 540;
  background-color: #F8CE3A;
  width: 200px;
  margin-bottom: 10px;
}
.dd{
  height: 20px;
}

Wxml：
<!--pages/result/result.wxml-->
<view class="a">
  <view class="b" wx:for="{{results}}" wx:key="id">
    <text class="t">{{index + 1}}：{{item.question}}</text>
    <text class="t">{{item.analysis}}</text>
  </view>
</view>
<button class="button" bindtap="goToHome" >返回首页</button>

Js：
    data: {
    
    },

    goToHome:function(){
      wx.navigateTo({
        url: '/pages/index/index',
      })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
      const app = getApp(); // 获取全局应用程序实例
      const rs = JSON.parse(decodeURIComponent(options.rs));
      this.setData({
        results: rs
      });
    },

Wxss：
/* pages/result/result.wxss */
page{
  background-color: rgb(240, 240, 240);
}
.b{
  margin: 10px;
  display: flex;
  flex-direction: column;
  margin: 20px;
  background-color: #fff;
  padding: 12px;
  border-radius: 5%;
}
.t{
  line-height: 1.8;
}
.button{
  font-weight: 540;
  background-color: #F8CE3A;
  width: 250px;
}
Utils/tool.js

    const xzt=[
      {
        id:1,
        question:'想象自己正处在一片大森林中，看到面前有一座很旧的小屋。请问这个小屋的门现在是什么状态?',
        options: [
          { value: 'A', text: '开着' },
          { value: 'B', text: '关着' }
        ],
        analysis: {
        'A':'门是开着的：你一个愿意与别人分享的人。',
        'B':'门是关着的：你是一个愿意把事情埋在心底的人。'
        } 
      },
      {
        id:2,
        question:'你走进屋子看到一张桌子，这个桌子的形状是怎样的?',
        options: [
          { value: 'A', text: '圆形/椭圆形' },
          { value: 'B', text: '正方形/长方形' },
          { value: 'C', text: '三角形' }
        ],
        analysis: {
        'A':'圆形/椭圆形：你是个很好的倾听者和调解者。',
        'B':'正方形/长方形：你在交朋友时有点挑剔。',
        'C':'三角形：你是个一旦决定了方向，就会坚定地追求。'
        }
      },
      {
        id:3,
        question:'桌子上有个花瓶，瓶子里的水有多少呢?',
        options: [
          { value: 'A', text: '空的' },
          { value: 'B', text: '满的' }
        ],
        analysis: {
        'A':'空的：对目前的生活不是满意。',
        'B':'满的：对目前的生活很满意。'
        }
      },
      {
        id:4,
        question:'瓶子的质地是？',
        options: [
          { value: 'A', text: '玻璃/泥土/陶瓷' },
          { value: 'B', text: '金属/塑料/木头' }
        ],
        analysis: {
        'A':'玻璃/泥土/陶瓷：你一个脆弱的人。',
        'B':'金属/塑料/木头：你是一个坚强的人。'
        }
      }
    ];

    module.exports = {
      xzt
    };