vue实现手机端考试练习试卷答题效果代码
代码语言:html
所属分类:其他
代码描述:vue实现手机端考试练习试卷答题效果代码,包含倒计时、通过json数组生成一个个试题,可上下切换,最终交卷后显示结果和开始成绩。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <style> body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f7f7f7; } .container { padding: 20px; } .question-card { background-color: #ffffff; border: 1px solid #e1e1e1; border-radius: 5px; padding: 15px; margin-bottom: 15px; } .question-title { font-size: 16px; color: #333333; } .option { margin-top: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; } .option.correct { border-color: green; } .option.incorrect { border-color: red; } </style> </head> <body> <div class="container" id="app"> <div v-show="finished" class="question-over"> <p>您的成绩:{{rightsco*10}}分</p> <p>您答对了:{{rightsco}}题</p> <p>耗时:{{ formatTime(usedtime) }}</p> </div> <div class="question-card"> <p v-show="!finished"> <strong>倒计时:</strong> {{ formatTime(countdown) }} </p> <!-- 问题部分 --> <div class="question-title"> <strong>第 {{ current }} 题:</strong> {{ questions[current - 1].question }}</div> <!-- 选项A 正确 --> <div class="option " v-for="(option,index) in questions[current - 1].options"> <input type="radio" v-model="answers[current - 1]" :value="option" :id="'option'+timuarr[index]" @click="selectans(index)"> <label :for="'option'+timuarr[index]">{{timuarr[index]}} {{ option }}</label> </div> <div v-show="finished"> <p v-if="questions[current - 1]['rightans']==questions[current - 1]['chooseans']"> 回答正确 </p> <p v-if="questions[current - 1]['rightans']!=questions[current - 1]['chooseans']"> 正确答案:{{timuarr[questions[current - 1]['rightans']]}} </p> </div> </div> <p> <button @click="prev" :disabled="current === 1">上一题</button> <button @click="next" :disabled="current === questions.length">下一题</button> <button @click="submit" v-show="!finished">交卷</button> </p> </div> <script> var intval=null; var app = new Vue({ el: '#app', data: { finished:false, countdown:10, usedtime:0, timuarr:["A","B","C","D","E","F","G","H","I"], questions: [ { question: '1 + 1 = ?', options: ['1', '2', '3', '4'], chooseans:"", rightans:1, }, { question: '2 * 2 = ?', options: ['2', '4', '6', '8'], chooseans:"", rightans:1, }, { question: '2 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0