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
};