微信小程序答题功能

最新推荐文章于 2023-11-07 00:23:33 发布

kleinBlue.

最新推荐文章于 2023-11-07 00:23:33 发布

阅读量2k

点赞数 4

分类专栏：微信小程序 web前端文章标签：小程序微信

本文链接：https://blog.csdn.net/qq_43299703/article/details/120364284

版权

本文介绍了如何在微信小程序中开发答题功能，涵盖了view设计、js逻辑处理和css样式设置等关键步骤。

摘要由CSDN通过智能技术生成

view

<view class="topnav">
  <image src="../../image/top.jpg"></image>
  <view class="back" bindtap="back"><image src="../../image/left.png"></image></view>
  <view class="sousuo">
   科普答题
  </view>
</view>
<view class="ioioi"></view>
<!-- 问答 -->
<!--pages/wenda/wenda.wxml--> 
<view class="heat">
  <view class="heatengo">
    <text>共计{
  {nums}}道题</text>
    <text>第{
  {curret}}道题</text>
    <text>每道题{
  {scoreFen}}分，总计：{
  {nums*scoreFen}}分</text>
  </view>
</view>
<view class="jingdutiao"> 
    <progress class="jingdu" font-size="24rpx"   percent="{
  {percent}}"  color="#29aeef" show-info stroke-width="8" border-radius="5" ></progress>
  </view>
<view class="contd">
  <!-- <image src="../../image/cont.png"></image> -->
  <view class="oik">
     <view class="tixing">{
  {subject.type}}</view>
<view class="heads">
<view class="page-section-title">{
  {curret}}.{
  {subject.title}}</view>
<view class="page-section" wx:if="{
  {zongfen>-1}}">
  <!-- <text> 用户得分：{
  {zongfen}}分</text>
  <text>总计答对题：{
  {score}}道题</text> -->
</view>
</view> 
  </view>
</view>
<view class="bottdi">
  <checkbox-group class="raadl" bindchange="checkboxChange" >
          <view class="timu" wx:for="{
  {subject['answer-options']}}" wx:key="index">
            <checkbox value="{
  {item.code}}" checked="{
  {isSelect}}" disabled="{
  {isdisable}}" />
              <text>{
  {item.code}}.{
  {item.content}}</text>
          </view>
      </checkbox-group>  
      <button  bindtap="submit" disabled="{
  {btndis}}">提交答案</button>
</view>
<view class="cuowudemo" wx:if="{
  {zongfen>-1}}">
<!--button-->
<view class="btn" bindtap="powerDrawer" data-statu="open">查看结果</view>
<!--mask-->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{
  {showModalStatus}}"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{
  {animationData}}" class="drawer_box" wx:if="{
  {showModa