答题积分小程序云开发实战-界面交互篇：答题页布局样式与逻辑交互开发 - 服务器托管|北京服务器租用|机房托管租用|IDC托管租用|机房机柜带宽租用-价格及费用咨询

微信小程序云开发实战-答题积分赛小程序

界面交互篇：答题页布局样式与逻辑交互开发

答题页原型稿

实现思路分析：
1）答题未选中状态；
2）答题已选中状态，点击确定提交选中结果；
3）显示答案以及题目解析，如回答正确，自动进入下一题；如回答错误，停留在当前答题页面；
4）每次答完10题，答对分数才会计入积分；
5）最后系统自动判分，然后出成绩单。

答题页效果图

答题页布局与样式实现

使用 flex 布局即可快速实现各区域模块的排版布局：
1）页面布局主要使用flex布局；
2）个人信息展示区域采用flex-wrap；
3）答题详情展示区域采用flex-sub；
4）操作按钮组区域采用flex-direction；

个人信息展示区域

在test.wxml中，编写布局代码：

在test.wxss中，编写样式代码：

page {
  background-color: #fff;
}
.page-con {
  padding: 20rpx;
}
.page {
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
}

保存后，可以在模拟器预览效果或者手机微信扫码后预览。

答题进度展示区域

在test.wxml中，编写布局代码：


  当前第1题
  共10题

保存后，可以在模拟器预览效果或者手机微信扫码后预览。

题目信息展示区域

在test.wxml中，编写布局代码：


    
        【单选题】
        下列网络系统安全原则，错误的是：（）
    


  
    
      
      A、静态性
    
    
      
      B、严密性
    
    
      
      C、整体性
    
    
      
      D、专业性

在test.wxss中，编写样式代码：

.page-hd {
  padding: 30rpx 0;
}
.page-bd {
  padding: 20rpx;
}
.page .radio-group, .page .checkbox-group {
  display: block;
}
.my-choosebox {
  display: block;
  margin-bottom: 20rpx;
  border: 2rpx solid #ddd;
  padding: 20rpx;
  border-radius: 50rpx;
}

保存后，可以在模拟器预览效果或者手机微信扫码后预览。