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) }}
</sp.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0