转载

利用BootStrap+Vue实现在线测试基本功能

完整代码如下:

 

 

 

<!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>

 

    <!-- 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>

</body>

</html>

 

 

效果如下:

正文到此结束
本文目录