vue实现一个简洁的在线考试答题系统代码-html代码-BFW代码库

vue实现一个简洁的在线考试答题系统代码

代码语言：html

所属分类：其他

代码描述：vue实现一个简洁的在线考试答题系统代码，包含答题倒计时、上一题下一题、到点自动提交数据等操作。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>在线答题考试</h1>
      <p>
        <strong>倒计时:</strong> {{ formatTime(countdown) }}
      </p>
      <p>
        <strong>第 {{ current }} 题:</strong> {{ questions[current - 1].question }}
      </p>
      <p>
        <strong>选项:</strong>
        <label v-for="option in questions[current - 1].options">
          <input type="radio" v-model="answers[current - 1]" :value="option">
          {{ option }}
        </label>
      </p>
      <p>
        <button @click="prev" :disabled="current === 1">上一题</button>
        <button @click="next" :disabled="current === questions.length">下一题</button>
        <button @click="submit">交卷</button>
      </p>
    </div>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          countdown: 260,
          questions: [
            {
              question: '1 + 1 = ?',
              options: ['1', '2', '3', '4']
            },
            {
              question: '2 * 2 = ?',
              options: ['2', '4', '6', '8']
            }
          ],
          current: 1,
          answers: []
 .........完整代码请登录后点击上方下载按钮下载查看