update

src/router/index.js

@@ -108,6 +108,16 @@ const constantRouterMap = [
                 component : _import('reserve/index') ,
                 name : 'reserveIndex' ,
             },
+            {
+                path : '/reserve/reserveAnswer' ,
+                component : _import('reserve/reserveAnswer') ,
+                name : 'reserveAnswer' ,
+            },
+            {
+                path : '/reserve/reserveResult' ,
+                component : _import('reserve/reserveResult') ,
+                name : 'reserveResult' ,
+            },
 		]
 	},
 	{ path: '*', redirect: '/404' }

src/store/index.js

@@ -16,6 +16,8 @@ const store = new Vuex.Store({
         myNumberAnswer: [], //我的随机数字答案
         randomLetter: [], //随机字母正确答案
         myLetterAnswer: [], //我的随机字母答案
+        forwardAnswer: [],  //正向速算结果
+        reserveAnswer: [],  //逆向速算结果
 	},
 	state
 })

src/utils/fourPoint.js

+let fourPoint = [
+    {
+        number: [6,9,6,8],
+        correctAnswer: '(6-(9-6))*8'
+    },
+    {
+        number: [9,3,2,7],
+        correctAnswer: '9-(3*(2-7))'
+    },
+    {
+        number: [11,4,3,2],
+        correctAnswer: '((11+4)-3)*2'
+    },
+    {
+        number: [9,2,1,12],
+        correctAnswer: '((9+2)+1)+12'
+    },
+    {
+        number: [5,11,12,2],
+        correctAnswer: '((11-5)*2)+12'
+    },
+    {
+        number: [6,4,7,10],
+        correctAnswer: '((6-4)*7)+10'
+    },
+    {
+        number: [8,6,12,5],
+        correctAnswer: '((8+12)*6)/5'
+    },
+    {
+        number: [8,12,12,2],
+        correctAnswer: '8*((12/12)+2)'
+    },
+    {
+        number: [8,4,6,3],
+        correctAnswer: '((8+4)*6)/3'
+    },
+    {
+        number: [3,11,6,12],
+        correctAnswer: '(3-(11-12))*6'
+    },
+
+    {
+        number: [7,9,1,2],
+        correctAnswer: '7+((9*2)-1)'
+    },
+    {
+        number: [4,3,1,9],
+        correctAnswer: '((4+1)*3)+9'
+    },
+    {
+        number: [11,4,3,2],
+        correctAnswer: '((11+4)-3)*2'
+    },
+    {
+        number: [4,12,8,8],
+        correctAnswer: '(4*(12-8))+8'
+    },
+    {
+        number: [9,4,3,9],
+        correctAnswer: '((9-4)*3)+9'
+    },
+    {
+        number: [13,8,13,1],
+        correctAnswer: '本题无解'
+    },
+    {
+        number: [1,12,12,3],
+        correctAnswer: '((1*12)*3)-12'
+    },
+    {
+        number: [12,9,3,4],
+        correctAnswer: '(12-(9-3))*4'
+    },
+    {
+        number: [2,1,5,2],
+        correctAnswer: '2*((1+5)*2)'
+    },
+    {
+        number: [12,3,9,2],
+        correctAnswer: '12-((3-9)*2)'
+    },
+
+
+    {
+        number: [8,8,5,2],
+        correctAnswer: '(8+(8*5))/2'
+    },
+    {
+        number: [6,10,12,11],
+        correctAnswer: '10*(12/(11-6))'
+    },
+    {
+        number: [8,9,1,6],
+        correctAnswer: '((8+9)+1)+6'
+    },
+    {
+        number: [9,12,6,1],
+        correctAnswer: '((9-6)-1)*12'
+    },
+    {
+        number: [5,4,7,5],
+        correctAnswer: '4*(7-(5/5))'
+    },
+    {
+        number: [2,13,9,3],
+        correctAnswer: '2*((13-9)*3)'
+    },
+    {
+        number: [11,12,12,2],
+        correctAnswer: '(11+(12/12))*2'
+    },
+    {
+        number: [12,2,8,12],
+        correctAnswer: '((12-2)-8)*12'
+    },
+    {
+        number: [3,10,6,9],
+        correctAnswer: '((3+10)-9)*6'
+    },
+    {
+        number: [7,5,11,7],
+        correctAnswer: '7*(5-(11/7))'
+    },
+
+
+    {
+        number: [10,3,2,10],
+        correctAnswer: '((10-3)*2)+10'
+    },
+    {
+        number: [2,8,4,2],
+        correctAnswer: '((2*8)-4)*2'
+    },
+    {
+        number: [5,5,7,3],
+        correctAnswer: '((5/5)+7)*3'
+    },
+    {
+        number: [3,9,8,12],
+        correctAnswer: '(3-(9-8))*12'
+    },
+    {
+        number: [6,7,13,12],
+        correctAnswer: '6-((7-13)-12)'
+    },
+    {
+        number: [6,8,11,8],
+        correctAnswer: '((6+8)-11)*8'
+    },
+    {
+        number: [4,3,11,6],
+        correctAnswer: '((4+3)+11)+6'
+    },
+    {
+        number: [10,9,6,6],
+        correctAnswer: '(10*(9-6))-6'
+    },
+    {
+        number: [10,3,1,3],
+        correctAnswer: '(10-(3-1))*3'
+    },
+    {
+        number: [11,6,4,2],
+        correctAnswer: '(11*(6-4))+2'
+    },
+
+
+    {
+        number: [12,6,1,10],
+        correctAnswer: '12/((6-1)/10)'
+    },
+    {
+        number: [5,8,11,5],
+        correctAnswer: '((5*8)-11)-5'
+    },
+    {
+        number: [10,13,2,12],
+        correctAnswer: '10+((13*2)-12)'
+    },
+    {
+        number: [11,8,10,6],
+        correctAnswer: '((11-8)*10)-6'
+    },
+    {
+        number: [12,7,5,12],
+        correctAnswer: '(12*7)-(12*5)'
+    },
+    {
+        number: [12,2,10,4],
+        correctAnswer: '12-((2-10)-4)'
+    },
+    {
+        number: [8,1,8,2],
+        correctAnswer: '8+((1*8)*2)'
+    },
+    {
+        number: [13,5,8,6],
+        correctAnswer: '((5+13)*8)/6'
+    },
+    {
+        number: [12,3,4,5],
+        correctAnswer: '((3+12)+4)+5'
+    },
+    {
+        number: [5,7,6,6],
+        correctAnswer: '(5-(7-6))*6'
+    },
+
+
+    {
+        number: [3,4,3,9],
+        correctAnswer: '3+((4*3)+9)'
+    },
+    {
+        number: [12,11,11,8],
+        correctAnswer: '本题无解'
+    },
+    {
+        number: [12,7,6,8],
+        correctAnswer: '12/(7/(6+8))'
+    },
+    {
+        number: [12,6,11,11],
+        correctAnswer: '((12/6)+11)+11'
+    },
+    {
+        number: [11,4,12,9],
+        correctAnswer: '(11/(4/12))-9'
+    },
+    {
+        number: [3,10,3,5],
+        correctAnswer: '3*((10+3)-5)'
+    },
+    {
+        number: [10,13,3,11],
+        correctAnswer: '(10-13)*(3-11)'
+    },
+    {
+        number: [3,12,10,6],
+        correctAnswer: '3*(12-(10-6))'
+    },
+    {
+        number: [7,3,3,12],
+        correctAnswer: '((7-3)*3)+12'
+    },
+    {
+        number: [5,10,7,9],
+        correctAnswer: '(5*(10-7))+9'
+    },
+]
+
+export {fourPoint}

src/views/forward/forwardAnswer.vue

@@ -3,13 +3,13 @@
         <div class="title">
             <div class="circle">第{{circle}}轮</div>
             <div class="blue">第{{subject_number}}题</div>
-            <div class="blue">{{time}}</div>
+            <div class="blue">{{count_time}}s</div>
             <div class="submit-btn" @click="submit">提交</div>
         </div>
         <div class="answer">
-            <div class="time">连加运算 {{time}}</div>
+            <div class="time">连加运算 {{type_time}}s</div>
             <div class="subject input">{{subject}}</div>
-            <div class="my-answer input"></div>
+            <div class="my-answer input">{{myAnswer}}</div>
         </div>
         <div class="btn-list">
             <div class="item" @click="input(1)">1</div>
@@ -36,29 +36,131 @@
             return {
                 circle: 1,  //第几轮
                 subject_number: 1, //第几题
-                time: '00:03:08',  //倒计时
+                count_time: 540,  //倒计时
+                type_time: 180,
                 subject: '',  //题目
                 myAnswer: '',   //我的答案
                 correctAnswer: '',  //正确答案
                 grade: 1,     //运算等级 1级为两个两位数相加
+                type: 1,      //1连加  2加减  3乘除
+                answerList: [],
+                timer: '',
             }
         },
         methods: {
+            countDown() {
+                this.timer = setInterval(()=>{
+                    if(this.count_time > 0) {
+                        this.count_time = this.count_time - 1;
+                        this.type_time = this.type_time - 1;
+                        if(this.type_time == 0) {
+                            this.type_time = 180;
+                        }
+                    }else {
+                        clearInterval(this.timer);
+                    }
+                },1000)
+            },
             submit() {
+                clearInterval(this.timer);
+                this.answerList.push({
+                    subject: this.subject,
+                    myAnswer: this.myAnswer?this.myAnswer:'未作答',
+                    correctAnswer: this.correctAnswer
+                })
+                this.$store.state.forwardAnswer = this.answerList;
                 this.$router.push({
-                    path: '/forward/forwardResult'
+                    path: '/forward/forwardResult',
+                    query: {
+                        time: this.count_time
+                    }
                 })
             },
             deleteAnswer() {
-
+                this.myAnswer=this.myAnswer.substring(0,this.myAnswer.length-1);
+            },
+            input(val) {
+                this.myAnswer = this.myAnswer + String(val);
             },
-            input() {
+            randomNum(num) {
+                if(num == 1) {
+                    return Math.floor(Math.random() * 90) + 10
+                }else if(num == 2) {
+                    return Math.floor(Math.random() * 900) + 100
+                }else if(num == 3) {
+                    return Math.floor(Math.random() * 9000) + 1000
+                }
 
             },
             //生成题目
             createSubject() {
-
+                this.subject = '';
+                this.correctAnswer = '';
+                if(this.type=1) {
+                    let data = [],num;
+                    if(this.grade >=1 && this.grade <=4) {
+                        num = 1;
+                        for(let i=0;i<this.grade+1;i++) {
+                            data.push(this.randomNum(num))
+                        }
+                    }else if(this.grade >=5 && this.grade <=8) {
+                        num = 2;
+                        for(let i=0;i<this.grade-3;i++) {
+                            data.push(this.randomNum(num))
                         }
+                    }else if(this.grade >=9 && this.grade <=12) {
+                        num = 3;
+                        for(let i=0;i<this.grade-7;i++) {
+                            data.push(this.randomNum(num))
+                        }
+                    }
+                    data.forEach(v=>{
+                        this.correctAnswer = Number(this.correctAnswer) + Number(v);
+                        this.subject = this.subject?this.subject + '+' + v:this.subject + v;
+                    })
+                    this.subject = this.subject + '=?'
+                }
+            },
+            //下一题
+            next() {
+                if(this.subject_number<=3) {
+                    this.grade = 1;
+                }else if(this.subject_number>3 && this.subject_number<=6) {
+                    this.grade = 2;
+                }else if(this.subject_number>6 && this.subject_number<=9) {
+                    this.grade = 3;
+                }else if(this.subject_number>9 && this.subject_number<=12) {
+                    this.grade = 4;
+                }else if(this.subject_number>12 && this.subject_number<=15) {
+                    this.grade = 5;
+                }else if(this.subject_number>15 && this.subject_number<=18) {
+                    this.grade = 6;
+                }else if(this.subject_number>18 && this.subject_number<=21) {
+                    this.grade = 7;
+                }else if(this.subject_number>21 && this.subject_number<=24) {
+                    this.grade = 8;
+                }else if(this.subject_number>21 && this.subject_number<=24) {
+                    this.grade = 9;
+                }else if(this.subject_number>24 && this.subject_number<=27) {
+                    this.grade = 10;
+                }else if(this.subject_number>27 && this.subject_number<=30) {
+                    this.grade = 11;
+                }else if(this.subject_number>30) {
+                    this.grade = 12;
+                }
+                this.subject_number ++;
+                this.answerList.push({
+                    subject: this.subject,
+                    myAnswer: this.myAnswer?this.myAnswer:'未作答',
+                    correctAnswer: this.correctAnswer
+                })
+                this.myAnswer = '';
+                this.createSubject();
+            },
+        },
+        created() {
+            this.createSubject();
+            this.countDown();
         }
     }
 </script>

src/views/forward/forwardResult.vue

@@ -7,8 +7,8 @@
         <div class="data-list">
             <div class="data-item">答题数量：<span>{{number}}</span></div>
             <div class="data-item">正确数量：<span>{{correctNumber}}</span></div>
-            <div class="data-item">答题用时：<span>98s</span></div>
-            <div class="data-item">剩余时间：<span>98s</span></div>
+            <div class="data-item">答题用时：<span>{{540-residue_time}}s</span></div>
+            <div class="data-item">剩余时间：<span>{{residue_time}}s</span></div>
             <div class="data-item">正确率：<span>{{percentage}}%</span></div>
         </div>
         <div class="answer">答案对比</div>
@@ -32,17 +32,13 @@
         name: "forwardResult",
         data() {
             return {
-                score: '10', //分数
+                score: 0, //分数
                 number: '100', //答题数量
-                correctNumber: '10',  //正确数量
-                percentage: 10,   //正确率
-                answerList: [
-                    {
-                        subject: '44+14',
-                        myAnswer: '412',
-                        correctAnswer: '58'
-                    }
-                ]
+                correctNumber: 0,  //正确数量
+                percentage: 0,   //正确率
+                answerList: [],
+                residue_time: '', //剩余时间
+
             }
         },
         methods: {
@@ -52,6 +48,18 @@
                 })
             }
         },
+        created() {
+            this.residue_time = this.$route.query.time;
+            this.answerList = this.$store.state.forwardAnswer;
+            this.number = this.answerList.length;
+            this.answerList.forEach(v=>{
+                if(v.myAnswer == v.correctAnswer) {
+                    this.correctNumber = this.correctNumber + 1;
+                }
+            })
+            this.score = this.correctNumber * 19;
+            this.percentage = (this.correctNumber/this.number*100).toFixed(2);
+        }
     }
 </script>
 

src/views/reserve/index.vue

@@ -80,13 +80,20 @@
             2. The highest round score is the final score.
         </div>
 
-        <div class="start">开始训练</div>
+        <div class="start" @click="start">开始训练</div>
     </div>
 </template>
 
 <script>
     export default {
-        name: "index"
+        name: "index",
+        methods: {
+            start() {
+                this.$router.push({
+                    path: '/reserve/reserveAnswer'
+                })
+            }
+        }
     }
 </script>
 

src/views/reserve/reserveAnswer.vue

+<template>
+    <div class="content">
+        <div class="title">
+            <div class="circle">第{{circle}}轮</div>
+            <div class="blue">第{{subject_number}}题</div>
+            <div class="blue">{{count_time}}s</div>
+            <div class="submit-btn" @click="submit">提交</div>
+        </div>
+        <div class="rules">
+            <div class="label">请用完给出的4个数字，并利用运算符号使运算结果等于24！</div>
+            <div class="label">*若您跳过此题不作答，则扣掉2秒时间</div>
+            <div class="label">*连续作答"本题无解"不可超过5次，否则系统将强制提交本轮成绩</div>
+            <div class="input">{{myAnswer}}</div>
+        </div>
+        <div class="btn-list">
+            <div class="item" v-for="(item,index) in currentSubject.number" :key="index" @click="input(item)">{{item}}</div>
+            <div class="item" @click="input('(')">(</div>
+            <div class="item" @click="input('+')">+</div>
+            <div class="item" @click="input('-')">-</div>
+            <div class="item" @click="input('×')">×</div>
+            <div class="item" @click="input('÷')">÷</div>
+            <div class="item" @click="input(')')">)</div>
+            <div class="item delete" @click="deleteAnswer">删除</div>
+            <div class="item negative" @click="noSolution">本题无解</div>
+            <div class="item next" @click="next">下一题</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {fourPoint} from '@/utils/fourPoint'
+    export default {
+        name: "reserveAnswer",
+        data() {
+            return {
+                circle: 1,
+                subject_number: 1,
+                count_time: 600,
+                myAnswer: '',
+                timer: '',
+                subjectList: fourPoint,
+                currentSubject: {},
+                answerList: [],
+                no_answer: 0
+            }
+        },
+        methods: {
+            countDown() {
+                this.timer = setInterval(()=>{
+                    if(this.count_time > 0) {
+                        this.count_time = this.count_time - 1;
+                    }else {
+                        clearInterval(this.timer);
+                    }
+                },1000)
+            },
+            submit() {
+                clearInterval(this.timer);
+                this.answerList.push({
+                    number: this.currentSubject.number,
+                    myAnswer: this.myAnswer?this.myAnswer:'未作答',
+                    correctAnswer: this.currentSubject.correctAnswer
+                })
+                this.$store.state.reserveAnswer = this.answerList;
+                this.$router.push({
+                    path: '/reserve/reserveResult',
+                    query: {
+                        time: this.count_time
+                    }
+                })
+            },
+            noSolution() {
+                this.myAnswer = '本题无解';
+                this.count_time = this.count_time - 2;
+                this.no_answer = this.no_answer + 1;
+                if(this.no_answer > 5) {
+                    this.submit();
+                }else {
+                    this.next();
+                }
+            },
+            deleteAnswer() {
+                this.myAnswer=this.myAnswer.substring(0,this.myAnswer.length-1);
+            },
+            input(val) {
+                this.myAnswer = this.myAnswer + String(val);
+            },
+            next() {
+                this.subject_number ++;
+                this.answerList.push({
+                    number: this.currentSubject.number,
+                    myAnswer: this.myAnswer?this.myAnswer:'未作答',
+                    correctAnswer: this.currentSubject.correctAnswer
+                })
+                this.myAnswer = '';
+                this.createSubject();
+            },
+            createSubject() {
+                let random = Math.floor(Math.random()*60);
+                this.currentSubject = this.subjectList[random];
+            },
+
+        },
+        created() {
+            this.countDown();
+            this.createSubject();
+        }
+    }
+</script>
+
+<style scoped>
+    .content {
+        padding: 30px 24px;
+    }
+    .title {
+        display: flex;
+        align-items: center;
+    }
+    .circle {
+        font-size: 30px;
+        color: #333;
+    }
+    .blue {
+        font-size: 30px;
+        color: #017af7;
+        margin-left: 20px;
+    }
+    .submit-btn {
+        width: 100px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #017af7;
+        font-size: 28px;
+        border: 2px solid #017af7;
+        border-radius: 8px;
+        margin-left: auto;
+    }
+
+    .rules {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 50px;
+    }
+    .rules .label {
+        color: #333;
+        font-size: 18px;
+        margin-bottom: 20px;
+    }
+    .rules .input {
+        width: 90%;
+        height: 70px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 20px;
+        font-size: 28px;
+        color: #333;
+        border: 2px solid #333;
+    }
+    .btn-list {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin-top: 20px;
+    }
+
+    .btn-list .item {
+        width: 18%;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        background: #409eff;
+        border-radius: 10px;
+        font-size: 30px;
+        margin-bottom: 20px;
+    }
+
+    .btn-list .delete {
+        width: 30%;
+        background: #f56c6c;
+    }
+
+    .btn-list .negative {
+        width: 30%;
+    }
+    .btn-list .next {
+        background: #f56c6c;
+        width: 30%;
+    }
+</style>

src/views/reserve/reserveResult.vue

+<template>
+    <div class="content">
+        <div class="title">逆向速算答题记录</div>
+        <div class="data-list">
+            <div class="data-item" style="width: 1000%">正向速算：<span>得分{{score}}</span></div>
+        </div>
+        <div class="data-list">
+            <div class="data-item">答题数量：<span>{{number}}</span></div>
+            <div class="data-item">正确数量：<span>{{correctNumber}}</span></div>
+            <div class="data-item">答题用时：<span>{{600-residue_time}}s</span></div>
+            <div class="data-item">剩余时间：<span>{{residue_time}}s</span></div>
+            <div class="data-item">正确率：<span>{{percentage}}%</span></div>
+        </div>
+        <div class="answer">答案对比</div>
+        <div class="answer-list">
+            <div class="answer-item" v-for="(item,index) in answerList">
+                <div class="subject">{{index+1}}、运算数字：<span v-for="(v) in item.number" style="margin-right: 15px;color: #333">{{v}}</span></div>
+                <div class="subject" style="text-indent: 20px">你的答案：<span>{{item.myAnswer}}</span></div>
+                <div class="subject" style="text-indent: 20px">正确示例：{{item.correctAnswer}}</div>
+            </div>
+        </div>
+
+        <div class="operation">
+            <div class="item item-1">再来一局</div>
+            <div class="item item-2" @click="goback()">返回列表</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "reserveResult",
+        data() {
+            return {
+                score: 0, //分数
+                number: '100', //答题数量
+                correctNumber: 0,  //正确数量
+                percentage: 0,   //正确率
+                answerList: [],
+                residue_time: '', //剩余时间
+
+            }
+        },
+        methods: {
+            goback() {
+                this.$router.push({
+                    path: '/'
+                })
+            }
+        },
+        created() {
+            this.residue_time = this.$route.query.time;
+            this.answerList = this.$store.state.reserveAnswer;
+            this.number = this.answerList.length;
+            this.answerList.forEach(v=>{
+                if(v.myAnswer == v.correctAnswer) {
+                    this.correctNumber = this.correctNumber + 1;
+                }
+            })
+            this.score = this.correctNumber * 19;
+            this.percentage = (this.correctNumber/this.number*100).toFixed(2);
+        }
+    }
+</script>
+
+<style scoped>
+    .content {
+        padding: 30px 24px 200px;
+    }
+    .title {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 32px;
+        color: #000;
+        margin-bottom: 20px;
+    }
+    .data-list {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .data-item {
+        width: 50%;
+        margin-top: 20px;
+        font-size: 28px;
+        color: #333;
+    }
+
+    .data-item span {
+        color: #1f72ff;
+    }
+    .answer {
+        background: #409eff;
+        width: 150px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 26px;
+        margin-top: 30px;
+        margin-bottom: 15px;
+        border-radius: 8px;
+    }
+    .answer-list {
+
+    }
+    .answer-item  .subject {
+        margin-bottom: 10px;
+        font-size: 28px;
+        color: #333;
+    }
+    .answer-item  .subject span {
+        color: red;
+    }
+    .operation {
+        width: 400px;
+        position: fixed;
+        bottom: 120px;
+        display: flex;
+        left: 50%;
+        transform: translateX(-50%);
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .operation .item {
+        width: 196px;
+        height: 80px;
+        background: #409eff;
+        color: white;
+        font-size: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .operation .item-1 {
+        border-bottom-left-radius: 40px;
+        border-top-left-radius: 40px;
+    }
+
+    .operation .item-2 {
+        border-bottom-right-radius: 40px;
+        border-top-right-radius: 40px;
+    }
+</style>

src/views/stareOrigin/startOrigin.vue

@@ -25,15 +25,6 @@
                         this.maxtime = this.maxtime - 1;
                     } else{
                         clearInterval(this.timer);
-                        this.$alert('这是一段内容', '标题名称', {
-                            confirmButtonText: '确定',
-                            callback: action => {
-                                this.$message({
-                                    type: 'info',
-                                    message: ''
-                                });
-                            }
-                        });
                     }
                 },1000)