SOURCE

add = function(a, b) {
    return a + b;
}

minus = function(a, b) {
    return a - b;
}

multiply = function(a, b) {
    return a * b;
}

divide = function(a, b) {
    if (b === 0) {
        return NaN;
    } else {
        return a / b;
    }
}

function randBetween(a, b) {
    return a + parseInt((b - a) * Math.random());
}

new Vue({
    el: "#app",
    data: {
        //类型
        lx: [
            {name: '加法', sign: '+', func: add, checked: true},
            {name: '减法', sign: '−', func: minus, checked: true},
            {name: '乘法', sign: '×', func: multiply, checked: true},
            {name: '除法', sign: '÷', func: divide, checked: true}
        ],
        qtCount: 20,//题量
        index: 0,//当前题
        questions: [],// a, b, c, lx, ans, st, et
        
        ans: '',
        allDone: false,
    },
    methods: {
        createQuestions() {
            this.questions = [];
            this.index = 0;
            var lxIndex = [];//选定的运算类型
            for (let i = 0; i < this.lx.length; i++) {
                if (this.lx[i].checked) {
                    lxIndex.push(i);
                }
            }
            for (let i = 0; i < this.qtCount; i++) {
                let lxd = parseInt(Math.random() * lxIndex.length);
                let a = 0;
                let b = 0;
                if (this.lx[lxIndex[lxd]].name === '加法') {
                    a = randBetween(1, 999);
                    b = randBetween(1, 999);
                } else if (this.lx[lxIndex[lxd]].name === '减法') {
                    b = randBetween(2, 99);
                    a = b + randBetween(10, 999);
                } else if (this.lx[lxIndex[lxd]].name === '乘法') {
                    a = randBetween(10, 999);
                    b = randBetween(2, 10) * Math.pow(10, randBetween(0, 3));
                } else if (this.lx[lxIndex[lxd]].name === '除法') {
                    b = randBetween(2, 10);
                    a = b * randBetween(2, 99);
                }
                this.questions.push({
                    a: a,//number a
                    b: b,//number b
                    c: 0,//your answer
                    lx: lxIndex[lxd],//lei xing index
                    ans: this.lx[lxIndex[lxd]].func(a, b).toString(),//correct answer
                    st: 0,//start time
                    et: 0,//elapsed time
                });
            }
        },
        reset() {
            this.allDone = false;
            this.ans = '';
            this.index = 0;
        },
        start() {
            this.createQuestions();
            this.next();
        },
        next() {
            this.ans = '';
            this.index ++;
            if (this.index <= this.qtCount) {
                this.questions[this.index - 1].st = new Date().getTime();
            }
        },
        answer(event) {
            this.ans += event.target.innerText;
        },
        clear() { 
            this.ans = "";
        },
        submit() {
            this.questions[this.index - 1].et = Math.floor((new Date().getTime() - this.questions[this.index - 1].st) / 100);
            this.questions[this.index - 1].c = this.ans;
            if (this.index >= this.qtCount) {
                this.allDone = true;
                this.questions.sort(
                    function(a, b) {
                        var ae = a.c === a.ans;
                        var be = b.c === b.ans;
                        if (ae === false && be === true) {
                            return -1;
                        } else if (ae === true && be === false) {
                            return 1;
                        } else if (ae === be) {
                            if (a.et > b.et) {
                                return -1;
                            } else if (a.et < b.et) {
                                return 1;
                            } else {
                                return 0;
                            }
                        }
                    }
                );
            } else {
                this.next();
            }
        }
    }
})

<!DOCTYPE html>
<html>

<head>
	<meta name="description" content="24-point game">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
	 crossorigin="anonymous">
	<script src="https://unpkg.com/vue"></script>

	<style>
		.question {
			font-size: 1.4rem;
		}

        .inputnumber {
            font-size: 1.5rem;
            width: 80px;
            height: 80px;
        }
	</style>
	<title>四则运算习题</title>
</head>

<body>
	<div id="app" class="container mt-2">
		<div class="jumbotron">
			<h4>四则运算练习题</h4>
			<hr>
			<p>说明文字，我还没想好写什么。--WDatou</p>
		</div>

		<div class="row align-items-center">
			<div class="col-md-6 col-12">
				<h5>习题类型（可多选）：</h5>
			</div>
			<div class="col-md-6 col-12">
                <div class="form-check form-check-inline" v-for="l in lx">
					<input class="form-check-input" type="checkbox" :id="l.name" v-model:checked="l.checked">
                    <label class="form-check-label" :for="l.name">{{ l.name }}</label>
                </div>
            </div>
        </div>
        <div class="row mt-4">
			<div class="col-md-6 col-12">
				<h5>习题数量：</h5>
			</div>
			<div class="col-md-6 col-12">
				<div v-for="n in 5" class="form-check form-check-inline">
					<input class="form-check-input" type="radio" name="qtCount" :id="'count'+n" :value="n*10" v-model="qtCount">
                    <label class="form-check-label" :for="'count'+n">{{ n * 10 }}</label>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col">
                <button class="btn btn-lg btn-success" @click="start" v-if="index===0">开始</button>
                <button class="btn btn-lg btn-warning" @click="reset" v-if="index>0">重来</button>
            </div>
        </div>
        <hr>

        <div v-if="index>0 && allDone===false">
            <div class="row align-items-center justify-content-center">
                <div class="col-3 question">{{questions[index - 1].a}}</div>
                <div class="col question" v-html="lx[questions[index - 1].lx].sign"></div>
                <div class="col-2 question">{{questions[index - 1].b}}</div>
                <div class="col question">=</div>
                <div class="col-3 question" v-text="ans==='' ? '?' : ans"></div>
            </div>
            <div class="progress">
                <div class="progress-bar" role="progressbar" :style="'width: ' + parseInt(index/qtCount*100).toString() + '%;'" :aria-valuenow="index" aria-valuemin="0" :aria-valuemax="qtCount"></div>
            </div>
            <hr>
        </div>

        <div class="keyboard">
            <div class="row">
                <div class="col-12 text-center">
                    <button class="badge badge-success inputnumber" @click="answer">1</button>
                    <button class="badge badge-success inputnumber" @click="answer">2</button>
                    <button class="badge badge-success inputnumber" @click="answer">3</button>
                </div>
                <div class="col-12 text-center">
                    <button class="badge badge-success inputnumber" @click="answer">4</button>
                    <button class="badge badge-success inputnumber" @click="answer">5</button>
                    <button class="badge badge-success inputnumber" @click="answer">6</button>
                </div>
                <div class="col-12 text-center">
                    <button class="badge badge-success inputnumber" @click="answer">7</button>
                    <button class="badge badge-success inputnumber" @click="answer">8</button>
                    <button class="badge badge-success inputnumber" @click="answer">9</button>
                </div>
                <div class="col-12 text-center">
                    <button class="badge badge-danger inputnumber" @click="clear">C</button>
                    <button class="badge badge-success inputnumber" @click="answer">0</button>
                    <button class="badge badge-primary inputnumber" @click="submit">提交</button>
                </div>
            </div>
        </div>
        <div class="row mt-4" v-if="allDone">
        <!--<div class="row mt-4">-->
            <table class="table table-striped text-center">
                <thead class="thead-light">
                    <tr>
                        <th>#</th>
                        <th>算式</th>
                        <th>作答</th>
                        <th>答案</th>
                        <th>用时</th>
                        <th>判题</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(q, index) in questions" :class="q.c === q.ans ? 'table-success' : 'table-danger'">
                        <td>{{ index + 1 }}</td>
                        <td>{{ q.a }} <span v-html="lx[q.lx].sign"></span> {{ q.b }}</td>
                        <td>{{ q.c }}</td>
                        <td>{{ q.ans }}</td>
                        <td>{{ q.et / 10 }}s</td>
                        <td v-if="q.c === q.ans">&check;</td>
                        <td v-else>&#10005;</td>
                    </tr>
                </tbody>
            </table>
        </div>
	</div>
</body>

</html>