转载

基于Vue实现在线测试

HTML部分:

<!doctype html>
<html lang="zh">

<head>
    <title>在线测试</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 内网Vue.js -->
    <script src="D:\WebCode\Vue.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <!-- view -->
    <div id="app">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-success mb-5">
            <a class="navbar-brand" href="#">{{title}}</a>
            <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse"
                data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <!-- <li class="nav-item active">
                    <a class="nav-link" href="#">Home</span></a>
                </li> -->
                    <!-- 菜单 -->
                    <li v-for="(menu, index) in  menus" :key="index" class="nav-item">
                        <a class="nav-link" :class="{active:index==0}" href="#">{{menu}}</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">关于</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownId">
                            <a v-for="(about, index) in abouts" :key="index" class="dropdown-item"
                                href="#">{{about}}</a>

                        </div>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="搜索题目.用户">
                    <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">搜索</button>
                </form>
            </div>
        </nav>
        <!-- 答题区域 -->

        <div v-if="!isFinish" class="container ">
            <!-- 进度条 -->
            <div class="progress mb-3">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar"
                    :style="progressStyle" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{progressBar}}
                </div>
            </div>
            <div class="jumbotron">

                <h1 class="display-4"><span class="badge badge-dark mr-3">{{question.id}}</span>{{question.title}}</h1>

                <hr class="my-2">
                <!-- 选项 -->
                <div v-for="(item, i) in question.items" :key="i" class="form-check my-3">
                    <label class="form-check-label">
                        <input @change="setAnswer(question.id)" v-model="answer" type="radio" class="form-check-input"
                            name="item" id="" value="checkedValue" :value="itemIndexs[i]">
                        <span class="badge badge-pill badge-danger mr-2">{{itemIndexs[i]}}</span>
                        {{item}}
                    </label>
                </div>

                <!-- 按钮 -->
                <!-- h行 -->
                <div class="row">
                    <div class="col-lg-6 col-sm-12">
                        <button v-if="progress==0" disabled type="button" class="btn btn-danger btn-block disabled">上一题
                        </button>
                        <button v-else @click="prev()" type="button" class="btn btn-danger btn-block">上一题</button>
                    </div>
                    <div class="col-lg-6 col-sm-12">
                        <button v-if="isLast"
                        @click="submit()"
                        type="button" class="btn btn-primary btn-block mt-sm-3 mt-lg-0 ">提交</button>
                        <button v-else @click="next()" type="button"
                            class="btn btn-success btn-block mt-sm-3 mt-lg-0">下一题</button>
                    </div>
                </div>



            </div>
            <!-- 题目的按钮 -->
           <span v-for="(item, index) in questionList" :key="index">
               <button @click="skip(index)" v-if="answers.has(index+1)" type="button" class="btn btn-primary">{{index+1}}</button>
               <button @click="skip(index)" v-else type="button" class="btn btn-danger">{{index+1}}</button>
           </span>
        </div>



        <!-- 显示答案 -->
        <div v-else class="container">
            <div class="jumbotron">
                <h1 class="display-3 text-center">答案与成绩</h1>
               
                <hr class="my-2">
                <table class="table table-bordered table-striped">
                    <thead class="thead-dark text-center">
                        <tr>
                            <th>序号</th>
                            <th>答案</th>
                            <th>正确答案</th>
                            <th>得分</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr  v-for="([k,v], index) in answers" :key="index">
                            <td>{{k}}</td>
                            <td><span v-if="v===correct(k)" class="badge badge-pill badge-danger">{{v}}</span>
                            <span v-else class="badge badge-pill badge-primary">{{v}}</span>
                            
                            
                            </td>
                            <!-- 根据id获取正确答案 -->
                            <td><span class="badge badge-pill badge-danger">{{correct(k)}}</span></td>

                            <!-- 根据索引获取正确答案 -->
                            <!-- <td><span class="badge badge-pill badge-danger">{{questionList[index].answer}}</span></td> -->
                            <td>
                                {{v===correct(k)?20:0}}
                            </td>
                        </tr>

                        <!-- 总计 -->
                        <tr
                        class="text-center h3 ">
                        <td colspan="3">总成绩</td>
                        <td > {{score}}</td>

                        </tr>
                       
                    </tbody>
                </table>
               
            </div>

        </div>




    </div>

Vue部分:

 <!-- viewModel -->

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                score:0,
                title: '在线测试',
                menus: ['首页', '单选题', '多选题', '模拟测试'],
                abouts: ['联系我们', '加入我们', '其他信息'],
                isFinish: false,
                progress: 0,
                size: 0,

                answer: '',
                answers: new Map(),

                itemIndexs: ['A', 'B', 'C', 'D', 'E', 'F'],

                questionList: [
                    {
                        id: 1,
                        title: '最好的编程语言?',
                        items: ['PHP', 'C', 'JS', 'Java', 'GO'],
                        answer: 'A'
                    },
                    {
                        id: 2,
                        title: '最高级的数据库?',
                        items: ['Redit', 'MySQL', 'postgreSQL', 'MongDB'],
                        answer: 'C'
                    },
                    {
                        id: 3,
                        title: '开源数据是?',
                        items: ['DB2', 'Oracle', 'SQL Server', 'MySQL'],
                        answer: 'A'
                    },
                    {
                        id: 4,
                        title: '市值最高的公司?',
                        items: ['微软', '亚马逊', '苹果', '中国建行'],
                        answer: 'C'
                    },
                    {
                        id: 5,
                        title: '最好的前端框架?',
                        items: ['Angular', 'Vue', 'React', 'Java'],
                        answer: 'B'
                    }
                ],

            },
            methods: {

                submit:function(){
                    // 答题完毕,提交答案
                   this.isFinish=true;
                   for (const q of this.questionList) {
                        if(q.answer===this.answers.get(q.id)){
                            this.score+=20;
                        }
                        
                    }

                },


                skip:function(i){
                    this.progress=i;
                    this.answer='';

                },

                setAnswer: function (id) {
                    //判断是否重复的一道题
                    if (!this.answers.has(id)) {
                        // 答题的数量
                        this.size++;
                    }

                    this.answers.set(id, this.answer);
                    // console.log(this.answers);


                },
                next: function () {
                    this.progress++;
                    if (this.answers.has(this.progress)) {
                        this.answer = this.answers.get(this.progress + 1);
                    } else {
                        this.answer = '';
                    }


                },
                prev: function () {
                    //获得上一题的答案并且复位
                    this.answer = this.answers.get(this.progress);
                    this.progress--;

                }

            },
            computed: {
                // 根据id去获取题目的正确答案
                correct(){
                    return function (id) {
                        for(const i of this.questionList){
                            if(i.id==id){
                                return i.answer;
                            }
                        }
                        
                    }
                },
                

                // isFinish:function(){
                //     return this.size===this.questionList.length;
                // },
                question: function () {
                    return this.questionList[this.progress];
                },
                isLast: function () {
                    return this.progress == this.questionList.length - 1;
                },
                // progressStyle: function () {
                //     return `width:${this.progressChange}%;`;
                // },

                progressBar: function () {
                    return Math.round(this.size / this.questionList.length * 100);
                },

                progressStyle: function () {
                    return `width:${this.progressBar}%;`;
                }



            },
            mounted() {

            },

        })
    </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

 

正文到此结束
本文目录