H5完整版问卷模板
//如圖，根據簡要需求擬寫一個簡單的問卷模板
1.頂部提示文案{根據需求跟換}
2.百分比進度條跟隨當前作答進度而改變
3.當前題數/總題數
4.根據索引顯示上一題下一題/提交資料
<html data-dpr="1" style="font-size: 37.52px;"><head><title>問卷調查</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta data-hid="description" name="description" content=""><meta name="wap-font-scale" content="no"><link rel="icon" href="./img/lw.ico" type="image/x-icon" /><link rel="stylesheet" href="css/question.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /><!-- 引入 Vue 和 Vant 的 JS 文件 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script></head><style>[v-clock] {display: none;}</style><body style="font-size: 24px;"><div id="app" v-clock><div class="main_html" v-clock><div class="main-content" style="background:#fff;margin-top:0px;"><div class="header-content"><div class="content" v-clock><div class="self_test_warp"><div class="self_test_title">答題期間終端回答，數據將不被保存本測評內容僅供參考，不作為診斷依據</div><!-- 進度條 --><div class="schedule_wrapbox"><div class="schedule_wrap"><!-- :style="{'width':(Qindex+1+'0'+'%')}" --><div class="cur_schedule" :style="{'width':(BFZ*(Qindex+1)+'%')}"></div></div><div class="Boxpress">100%</div></div><!-- end --><!-- 進度 --><div class="back_schedule_wrap" v-clock><span>{{Qindex+1}}</span>/{{quesList.length}}</div><div class="oboxtext" v-clock>已完成{{Qindex+1+'0'+'%'}}還剩{{quesList.length-(Qindex+1)}}道題</div></div><!-- --><div class="steepbox"> </div><div class="Qt-box"><!-- --><!-- 當前進度/總進度end --><div class="self_test_question" v-clock><span id="curQuestionTitle">{{Qindex+1}}.{{quesList[Qindex].title}}</span></div><!-- type:1 選項題 2填空題 --><ul class="self_test_main_wrap" v-if="quesList[Qindex].type==1"><li score="0" class="self_test_item self_test_normal" v-for="(item,index) in quesList[Qindex].answerList"@click="getRadio(index,index)" :class="[item.active?'self_test_select':'']"><div class="self_test_icon choose_normal" :class="[item.active?'choose_select':'']"></div><div class="self_test_option" :style="{'color':(item.active?'#fff':'#333'),'border':(item.active?'1rpx solid #5D91F6':'1rpx solid #999')}">{{item.name}}</div></li></ul><!-- 2填空題 --><div class="self_test_main_wrap" v-clock v-if="quesList[Qindex].type==2"><!-- 文本框 --><div class="" v-clock><textarea v-clock class="inputBox" rows="5" cols="5">{{quesList[Qindex].content}}</textarea></div><!-- end --></div><!-- end --><!-- 操作 --><div class="self_test_back_wrap " v-clock><span id="backTxt" v-if="Qindex>0" :class="[Qindex>0?'':'display_none']" @click="getBack">上一題</span><span id="nextbtn" :class="[Qindex>0?'':'display_none']" @click="getnext" v-if="quesList[Qindex].type==2">下一題</span><span id="backTxt" @click="getsubmit" v-if="Qend==1">提交測試</span></div></div><!-- end --></div></div></div><script>new Vue({el: '#app',data: {// 當前索引Qindex: 0,// 百分比進度BFZ:0,// 提交測試按鈕顯示狀態Qend: 0,// 標題title: "教你如何",// 題型數據quesList: [{title: "教你如何走出心理陰影,重鑄強大內心？",type: 1, //1 選項題 2填空題answerList: [{name: "選擇我"}, {name: "選擇我"}, {name: "選擇我"}, ]},{type: 2,title: "您是否有夜間睡眠打鼾及呼吸暫停的現象？",content: "jhhh"}, {type: 1,title: "您是否有如下癥狀：多飲、多尿、易饑，是否有餐前低血糖癥狀 ？",answerList: [{name: "選擇我"}, {name: "選擇我1項"}, {name: "選擇我2項"}}]},mounted() {var that=this;// 這里通過總題數計算百分比%that.BFZ=100/(that.quesList.length);},methods: {/*** 返回上一題*@param {Qindex}當前題目索引-1* **/getBack() {var that = this;if (that.Qindex > 0) {that.Qindex = that.Qindex - 1;that.Qend=0;}console.log("上一題長度", that.Qindex);},/*** 下一題* @param {Qindex}當前題目索引+1*/getnext() {var that = this;that.Qindex = that.Qindex + 1;console.log("下一題長度", that.Qindex);},/*** 選中列表* @param {index} 當前選中選項 */getRadio(item, index) {var that = this;// 獲取到選擇答案數據var list = that.quesList[that.Qindex].answerList;// 獲取總題數長度var Qlength = that.quesList.length;//循環數組數據，判斷是否選中for (var i in list) {if (index == i) {list[i].active = true;if (that.Qindex < Qlength - 1) {that.Qindex = that.Qindex + 1;}// 這里更新進度條console.log("獲取長度1", that.Qindex);console.log("獲取長度2", Qlength);} else {list[i].active = false;}}if (that.Qindex == Qlength - 1) {console.log("~~~~這里到達最后一題~~~~~~");// 設置顯示提交按鈕that.Qend = 1;} else {// 關閉提交按鈕that.Qend = 0;}// 避免頁面渲染無效that.$forceUpdate();},/**提交數據**/getsubmit() {// 獲取最終用戶選中的數據var that = this;// that.quesList此數據是問題跟選項數組數據,選項中參數active為true，標識用戶選中的數據console.log("用戶最終選中的數據====>", that.quesList);that.$toast({message:JSON.stringify(that.quesList),forbidClick: true,});}}})</script></body>
</html>
?
總結
- 上一篇： 增删改
- 下一篇： Fashion-MNIST数据集离线加载