Skip to content

yangchao / brains-h5

Go to a project
Commit bb6b406a by yangchao
Options

update

1 parent 7b411f12
Inline Side-by-side
Showing with 752 additions and 32 deletions
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 0 → 100644
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() {
input(val) {
this.myAnswer = this.myAnswer + String(val);
},
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 0 → 100644
<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 0 → 100644
<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)
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!