vue实现手机端模拟考试练习做题试卷答卷代码
代码语言：html
所属分类：其他
代码描述：vue实现手机端模拟考试练习做题试卷答卷代码，倒计时做题，做完自动打分给出做错的题目，适合考试类h5网页。
代码标签： vue 手机端 模拟 考试 练习 做题 试卷 答卷 代码
下面为部分代码预览，完整代码请点击下载或在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: white;
}
.results { margin-top: 20px;text-align:center;}
.button { display: block; margin: 20px auto; padding: 10px 30px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; text-align:center;}
.examresult{
font-weight: bold;
height: 200px;
margin: 0 auto;
background:url(//repo.bfw.wiki/bfwrepo/icon/65eda9c4d9c4b.png) ;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.unpassimg{
height: 100px;
position: absolute;
right: 50px;
top: 100px;
}
.container {
}
.question-card {
background-color: #ffffff;
border-radius: 5px;
padding: 15px;
margin-bottom: 15px;
}
.question-title {
font-size: 16px;
color: #333333;
}
.option {
margin-top: 10px;
padding: 10px;
border-radius: 5px;
}
.option.correct {
border-color: green;
}
.option.incorrect {
border-color: red;
}
</style>
</head>
<body>
<div class="container" id="app">
<div style="display:flex;justify-content:space-between;width:100%; color:grey;" v-show="!finished">
<div style="line-height:40px;padding-left:10px;">
<img src='//repo.bfw.wiki/bfwrepo/icon/65eda9e7a7d48.png' style="width:30px;vertical-align:middle;" />
<span> {{ formatTime(countdown) }}
</span>
</div>
<span @click="submit" style="margin:10px;" v-show="!finished">交卷 ></span>
</div>
<div v-show="finished" class="question-over" style="padding:20px;">
<div class="results">
<img v-if="rightsco>=passedtimu" src='//repo.bfw.wiki/bfwrepo/icon/65eda9fd7e148.png' class="unpassimg" />
<img v-if="rightsco<passedtimu" src='//repo.bfw.wiki/bfwrepo/icon/65edaa3b59508.png' class="unpassimg" />
<div class="examresult">
<p style="padding-top:70px">得分</p>
<p><i style="font-size:30px;">{{rightsco*10}}</i></p>
</div>
<div style="display:flex;flex-direction:row;justify-content:space-between;width:100%;">
<div>
<p>考试总分</p>
<p>{{questions.length}} 题 </p>
</div>
<div>
<p>通过分数</p>
<p>{{passedtimu}} 题</p>
</div>
<div>
<p>用时</p>
<p>{{ formatTime(usedtime) }}</p>
</div>
</div>
</div>
<a class="button" oclick="history.back(-1)">返回</a>
<a class="button" @click="restart">再考一次</a>
</div>
<div class="question-card" style="padding:20px;">
<!-- 问题部分 -->
<div class="question-title"><span style="background-color:blue;height:22px;display:block;float:left;width:4px;margin-right:10px;"></span> <strong>第 {{ current }} 题: 单选题</strong> </div>
<div class="question-title" style="margin:20px 0;line-height:40px;">
{{ questions[current - 1].question }}
</div>
<!-- 选项A 正确 -->
<div class="option " v-for="(option,index) in questions[current - 1].options">
<span style="width:30px;">
<img v-show="finished&&questions[current - 1]['chooseans']===index&&questions[current - 1]['chooseans']!=questions[current - 1]['rightans']" src='//repo.bfw.wiki/bfwrepo/icon/65ed9403314fb.png' style="width:15px;" />
<img v-show="finished&&questions[current - 1]['chooseans']==index&&questions[current - 1]['chooseans']==questions[current - 1]['rightans']" src='//repo.bfw.wiki/bfwrepo/icon/5d834c0bc45e9.png' style="width:15px;" />
</span>
<input v-if="!finished" type="radio" name="chooseans" :id="'option'+timuarr[index]" @click="selectans(index)" :checked="questions[current - 1]['chooseans']===index">
<label :for="'option'+timuarr[index]">{{timuarr[index]}} {{ option }}</label>
</div>
<div v-show="finished">
<p style="color:green;" v-if="questions[current - 1]['rightans']==questions[current - 1]['chooseans']">
回答正确
</p>
<p style="color:red;" v-if="questions[current - 1]['rightans']!=questions[current - 1]['chooseans']">
正确答案：{{timuarr[questions[current - 1]['rightans']]}}
你的答案是：：{{timuarr[questions[current - 1]['chooseans']]}}
</p>
</div>
</div>
<div style="position:fixed;bottom:0;display:flex;justify-content:space-between;width:100%;height:30px;background:white;color:grey;">
<div>
<span style="margin:10px;" @click="prev" :disabled="current === 1" v-show="current > 1">< 上一题</span>
</div>
<div .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0