Skip to content

yangchao / brains-h5

Go to a project
Commit 5681cda8 by yeran
Options

update

1 parent 42227668
Expand all
Inline Side-by-side
Showing with 502 additions and 166 deletions
src/views/fastReading/answerQuestion.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="question-item" v-for="(item,index) in questionList" v-if="(index+1) == subject_number"> <div class="question-item" v-for="(item,index) in questionList" v-if="(index+1) == subject_number">
<div class="question">{{index+1}}、{{item.question}}</div> <div class="question">{{index+1}}、{{item.question}}</div>
<div v-for="(i) in item.answer" class="answer"> <div v-for="(i) in item.answer" class="answer">
<input v-model="myAnswer" type="radio" :value="i" :name="i" />{{i}} <input v-model="myAnswer" type="radio" :value="i" :name="i"/>{{i}}
</div> </div>
</div> </div>
...@@ -28,6 +28,9 @@ ...@@ -28,6 +28,9 @@
<script> <script>
import {article} from "../../utils/article"; import {article} from "../../utils/article";
import StoreUtil from "../../store/stateStore";
import BaseConstant from "../../store/constants/baseConstant";
export default { export default {
name: "answerQuestion", name: "answerQuestion",
data() { data() {
...@@ -41,50 +44,70 @@ ...@@ -41,50 +44,70 @@
}, },
methods: { methods: {
pre() { pre() {
if(this.subject_number>1) { if (this.subject_number > 1) {
this.myAnswer = this.questionList[this.subject_number-2].myAnswer; this.myAnswer = this.questionList[this.subject_number - 2].myAnswer;
this.subject_number = this.subject_number - 1; this.subject_number = this.subject_number - 1;
} }
}, },
next() { next() {
if(this.subject_number<this.questionList.length) { if (this.subject_number < this.questionList.length) {
this.questionList[this.subject_number-1].myAnswer = this.myAnswer?this.myAnswer:'未作答'; this.questionList[this.subject_number - 1].myAnswer = this.myAnswer ? this.myAnswer : '未作答';
this.myAnswer = this.questionList[this.subject_number].myAnswer; this.myAnswer = this.questionList[this.subject_number].myAnswer;
this.subject_number = this.subject_number + 1; this.subject_number = this.subject_number + 1;
} }
}, },
submit() { submit() {
this.questionList[this.subject_number-1].myAnswer = this.myAnswer; this.questionList[this.subject_number - 1].myAnswer = this.myAnswer;
this.$store.state.articleAnswer = this.questionList; let answer_time_end = new Date().getTime();
StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_TRAIN_INFO_NOW, {
data: {
answer: this.questionList,
},
result: {
answer_time_end: answer_time_end,
}
});
this.$router.push({ this.$router.push({
path: '/fastReading/readResult', path: '/fastReading/readResult',
query: { query: {}
time: this.count_time
}
}) })
}, },
countDown() { countDown() {
this.timer = setInterval(()=>{ this.timer = setInterval(() => {
if(this.count_time > 0) { if (this.count_time > 0) {
this.count_time = this.count_time - 1; this.count_time = this.count_time - 1;
}else { } else {
clearInterval(this.timer); clearInterval(this.timer);
} }
},1000) }, 1000)
}, },
}, },
mounted() { mounted() {
this.count_time = this.$route.query.time; this.article_index = JSON.parse(JSON.stringify(StoreUtil.getState().train.currentCase.data.article_index));
this.countDown();
article[0].questionList.forEach((v,i)=>{ article[0].questionList.forEach((v, i) => {
this.questionList.push({ this.questionList.push({
question: v.question, question: v.question,
answer: v.answer, answer: v.answer,
myAnswer: '未作答', myAnswer: '未作答',
correctAnswer: v.correctAnswer correctAnswer: v.correctAnswer,
check: false,
}) })
}) });
StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_TRAIN_INFO_NOW, {
result: {
answer_time_start: new Date().getTime()
},
result_detail: {
q: []
}
});
this.count_time = this.$route.query.time;
this.countDown();
} }
} }
</script> </script>
...@@ -126,13 +149,16 @@ ...@@ -126,13 +149,16 @@
.question-list { .question-list {
margin-top: 30px; margin-top: 30px;
} }
.question-item { .question-item {
} }
.question { .question {
color: #333; color: #333;
font-size: 30px; font-size: 30px;
} }
.answer { .answer {
text-indent: 40px; text-indent: 40px;
font-size: 28px; font-size: 28px;
...@@ -142,6 +168,7 @@ ...@@ -142,6 +168,7 @@
align-items: center; align-items: center;
padding-left: 40px; padding-left: 40px;
} }
.operation { .operation {
width: 400px; width: 400px;
position: fixed; position: fixed;
...@@ -175,12 +202,14 @@ ...@@ -175,12 +202,14 @@
border-top-right-radius: 40px; border-top-right-radius: 40px;
background: #409eff; background: #409eff;
} }
.operation .item-3 { .operation .item-3 {
border-bottom-left-radius: 40px; border-bottom-left-radius: 40px;
border-top-left-radius: 40px; border-top-left-radius: 40px;
color: #999; color: #999;
border: 2px solid #999; border: 2px solid #999;
} }
.operation .item-4 { .operation .item-4 {
border-bottom-right-radius: 40px; border-bottom-right-radius: 40px;
border-top-right-radius: 40px; border-top-right-radius: 40px;
......
src/views/fastReading/index.vue
...@@ -16,13 +16,13 @@ ...@@ -16,13 +16,13 @@
<div>比赛规则</div> <div>比赛规则</div>
</div> </div>
<div class="explain"> <div class="explain">
1、选手在“国际脑力运动”线上平台报名参加脑力世界杯并选中本项比赛。 1、选手在“摩天轮脑力运动”线上平台报名参加脑力世界杯并选中本项比赛。
</div> </div>
<div class="explain"> <div class="explain">
1. Athlete register Intellectual World Cup on the "International Intellectual Sports" online platform and select this discipline. 1. Athlete register Intellectual World Cup on the "International Intellectual Sports" online platform and select this discipline.
</div> </div>
<div class="explain"> <div class="explain">
2、所有选手在“国际脑力运动”线上平台上点击进入本项目比赛倒计时页面，倒计时归零后立即开始比赛。 2、所有选手在“摩天轮脑力运动”线上平台上点击进入本项目比赛倒计时页面，倒计时归零后立即开始比赛。
</div> </div>
<div class="explain"> <div class="explain">
2. All athletes clicked into the countdown page on the "International Intellectual Sports" 2. All athletes clicked into the countdown page on the "International Intellectual Sports"
...@@ -87,20 +87,38 @@ ...@@ -87,20 +87,38 @@
<div class="explain"> <div class="explain">
3. The highest round score is the final score. 3. The highest round score is the final score.
</div> </div>
<div class="m-selector">
选择模式：
<div v-for="(item, index) in caseConfig" :key="index" :index="index" :item="item">
<div class="item" :class="{active: (level === index)}" @click="changLevel(index)">{{item.level_name}}
</div>
</div>
</div>
<div class="start" @click="start">开始训练</div> <div class="start" @click="start">开始训练</div>
</div> </div>
</template> </template>
<script> <script>
import BaseCasePage from "../../framework/core/baseCasePage"; import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
export default new BaseCasePage({ export default new BaseCasePage({
name: "index", name: "index",
data() {
return {
level: 0,
}
},
methods: { methods: {
changLevel(level) {
if (level !== this.level) {
this.level = level;
}
},
start() { start() {
this.$router.push({ CaseUtil.goToTrain('/fastReading/readArticle',this);
path: '/fastReading/readArticle'
})
} }
}, },
mounted() { mounted() {
...@@ -111,7 +129,7 @@ ...@@ -111,7 +129,7 @@
<style scoped> <style scoped>
.content { .content {
padding: 30px 24px 120px; padding: 30px 24px 156px;
} }
.title { .title {
display: flex; display: flex;
......
src/views/fastReading/readArticle.vue
<template> <template>
<div class="content"> <div class="content">
<div class="title">第1轮 <span>{{count_time}}s</span></div> <div class="title">
<div class="article" v-html="content"></div> <div class="circle">第{{article_index+1}}轮</div>
<div class="limit_time">{{count_time}} s</div>
</div>
<div v-if="articles && articles.length" class="article" v-html="articles[0].content"></div>
<div class="startAnswer" @click="start">阅读完成</div> <div class="startAnswer" @click="start">阅读完成</div>
</div> </div>
</template> </template>
<script> <script>
import {article} from "../../utils/article"; import BaseTrainPage from "../../framework/core/baseTrainPage";
import {getArticleDetails} from "../../api/article";
import StoreUtil from "../../store/stateStore";
import BaseConstant from "../../store/constants/baseConstant";
export default { export default new BaseTrainPage({
name: "readArticle", name: "readArticle",
data() { data() {
return { return {
content: article[0].text, article_index: 0,
count_time: 900, articles: [],
count_time: 0,
timer: '' timer: ''
} }
}, },
methods: { methods: {
start() { start() {
clearInterval(this.timer);
StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_TRAIN_INFO_NOW, {
data:{
articles: this.articles,
article_index: this.article_index,
questions: [],
},
result: {
learn_time_end: new Date().getTime()
}
});
this.$router.push({ this.$router.push({
path: '/fastReading/answerQuestion', path: '/fastReading/answerQuestion',
query: { query: {
level: this.level,
id: this.caseAlias,
model_id: this.modelAlias,
time: this.count_time time: this.count_time
} }
}) })
}, },
countDown() { countDown() {
this.timer = setInterval(()=>{ this.timer = setInterval(() => {
if(this.count_time > 0) { if (this.count_time > 0) {
this.count_time = this.count_time - 1; this.count_time = this.count_time - 1;
}else { } else {
clearInterval(this.timer); clearInterval(this.timer);
} }
},1000) }, 1000)
},
init() {
getArticleDetails({
ids: [this.levelConfig.article_ids[0]]
}).then((articles) => {
this.articles = [];
if (articles && articles.data) {
this.articles.push(...articles.data);
this.count_time = this.levelConfig.limit_remember_time;
this.countDown();
// 获取第一篇文章对应的问题
StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_TRAIN_INFO_NOW, {
result: {
learn_time_start: new Date().getTime()
}
});
} else {
this.$message({
type: 'error',
content: '文章不存在!'
});
}
})
}, },
}, },
mounted() { mounted() {
this.countDown() this.init()
} }
} })
</script> </script>
<style scoped> <style scoped>
.content { .content {
padding: 30px 24px; padding: 30px 24px;
} }
.title { .title {
display: flex;
align-items: center;
}
.circle {
font-size: 30px; font-size: 30px;
color: #333; color: #333;
} }
.limit_time {
width: 100px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: #017af7;
font-size: 28px;
margin-left: auto;
}
.title span { .title span {
color: #409eff; color: #409eff;
margin-left: 20px; margin-left: 20px;
} }
.article { .article {
margin-top: 30px; margin-top: 30px;
margin-bottom: 24px;
} }
</style> </style>
src/views/fastReading/readResult.vue
<template> <template>
<div class="content"> <div class="content">
<div class="title">正向速算答题记录</div> <div class="title">阅读理解答题记录</div>
<div class="data-list"> <div class="data-list">
<div class="data-item" style="width: 1000%">正向速算：<span>得分{{score}}</span></div> <div class="data-item" style="width: 1000%">阅读理解：<span>得分{{result.score}}</span></div>
</div> </div>
<div class="data-list"> <div class="data-list">
<div class="data-item">答题数量：<span>{{number}}</span></div> <div class="data-item">答题数量：<span>{{result.question_numb}}</span></div>
<div class="data-item">正确数量：<span>{{correctNumber}}</span></div> <div class="data-item">正确数量：<span>{{result.right_numb}}</span></div>
<div class="data-item">答题用时：<span>{{900-residue_time}}s</span></div> <div class="data-item">答题用时：<span>{{use_time_desc}}</span></div>
<div class="data-item">剩余时间：<span>{{residue_time}}s</span></div> <div class="data-item">剩余时间：<span>{{result.answer_time_left}}s</span></div>
<div class="data-item">正确率：<span>{{percentage}}%</span></div> <div class="data-item">正确率：<span>{{result.right_rate}}%</span></div>
</div> </div>
<div class="answer">答案对比</div> <div class="answer">答案对比</div>
<div class="answer-list"> <div class="answer-list">
<div class="answer-item" v-for="(item,index) in answerList"> <div class="answer-item" v-for="(item,index) in answerList">
<div class="subject">{{index+1}}、{{item.question}}</div> <div class="subject">{{index+1}}、{{item.question}}</div>
<div class="subject" style="text-indent: 20px">你的答案：<span>{{item.myAnswer}}</span></div> <div v-if="item.check" class="subject subject-success" style="text-indent: 20px">你的答案：{{item.myAnswer}}</div>
<div v-else class="subject subject-error" style="text-indent: 20px">你的答案：{{item.myAnswer}}</div>
<div class="subject" style="text-indent: 20px">正确答案：{{item.correctAnswer}}</div> <div class="subject" style="text-indent: 20px">正确答案：{{item.correctAnswer}}</div>
</div> </div>
</div> </div>
<div class="operation"> <div class="operation">
<div class="item item-1">再来一局</div> <div class="item item-1" @click="again()">再来一局</div>
<div class="item item-2" @click="goback()">返回列表</div> <div class="item item-2" @click="goback()">返回列表</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import StoreUtil from "../../store/stateStore";
import BaseConstant from "../../store/constants/baseConstant";
import {secSimpleText} from "../../framework/util/func";
export default { export default {
name: "readResult", name: "readResult",
data() { data() {
return { return {
score: 0, //分数
number: '100', //答题数量
correctNumber: 0, //正确数量
percentage: 0, //正确率
answerList: [], answerList: [],
residue_time: '', //剩余时间 residue_time: '', //剩余时间
use_time_desc: '',
result: {
score: 0,
question_numb: 0,
right_numb: 0,
right_rate: 0,
learn_time: 0,
learn_left_time: 0,
answer_time: 0,
answer_time_left: 0,
use_time: 0
},
result_detail: {
question: [],
answer: []
}
} }
}, },
methods: { methods: {
goback() { goback() {
StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_CASE_INFO_NOW_CLEAN);
this.$router.push({ this.$router.push({
path: '/' path: '/'
}) })
},
again() {
let url = '/fastReading/index';
let query = {
id: StoreUtil.getState().train.currentCase.case_id,
model_id: StoreUtil.getState().train.currentCase.model_id
};
StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_CASE_INFO_NOW_CLEAN);
this.$router.push({
path: url,
query
})
} }
}, },
created() { mounted() {
this.residue_time = this.$route.query.time;
this.answerList = this.$store.state.articleAnswer; let data = StoreUtil.getState().train.currentCase.data;
this.number = this.answerList.length; let result = StoreUtil.getState().train.currentCase.result;
this.answerList.forEach(v=>{ let levelConfig = StoreUtil.getState().train.currentCase.level_config;
if(v.myAnswer == v.correctAnswer) { this.answerList = data.answer;
this.correctNumber = this.correctNumber + 1;
this.result.question_numb = this.answerList.length;
this.result.answer_time = result.answer_time_end - result.learn_time_start;
this.result.answer_time_left = levelConfig.limit_remember_time - this.result.answer_time/1000;
this.use_time_desc = secSimpleText(this.result.answer_time);
for (let i = 0; i < this.answerList.length; i++) {
if (('' + this.answerList[i].correctAnswer) === ('' + this.answerList[i].myAnswer)) {
this.result.right_numb += 1;
this.answerList[i].check = true;
} }
}) }
this.score = this.correctNumber * 19; this.result.right_rate = (this.result.right_numb / this.result.question_numb * 100).toFixed(2);
this.percentage = (this.correctNumber/this.number*100).toFixed(2); this.result.score = this.result.right_numb * 19;
this.result_detail.question = [
{
q: this.answerList,
a: []
}
];
this.result_detail.answer = [];
console.log(this.result, this.result_detail);
} }
} }
</script> </script>
...@@ -115,10 +166,17 @@ ...@@ -115,10 +166,17 @@
.answer-item .subject span { .answer-item .subject span {
color: red; color: red;
} }
.answer-item .subject-error {
color: red;
}
.answer-item .subject-success {
color: blue;
}
.operation { .operation {
width: 400px; width: 400px;
position: fixed; position: fixed;
bottom: 120px; bottom: 24px;
display: flex; display: flex;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
......
src/views/forward/forwardResult.vue
...@@ -2,43 +2,58 @@ ...@@ -2,43 +2,58 @@
<div class="content"> <div class="content">
<div class="title">正向速算答题记录</div> <div class="title">正向速算答题记录</div>
<div class="data-list"> <div class="data-list">
<div class="data-item" style="width: 1000%">正向速算：<span>得分{{score}}</span></div> <div class="data-item" style="width: 1000%">正向速算：<span>得分{{result.score}}</span></div>
</div> </div>
<div class="data-list"> <div class="data-list">
<div class="data-item">答题数量：<span>{{number}}</span></div> <div class="data-item">答题数量：<span>{{result.question_numb}}</span></div>
<div class="data-item">正确数量：<span>{{correctNumber}}</span></div> <div class="data-item">正确数量：<span>{{result.right_numb}}</span></div>
<div class="data-item">答题用时：<span>{{540-residue_time}}s</span></div> <div class="data-item">答题用时：<span>{{use_time_desc}}</span></div>
<div class="data-item">剩余时间：<span>{{residue_time}}s</span></div> <div class="data-item">剩余时间：<span>{{result.answer_time_left}}s</span></div>
<div class="data-item">正确率：<span>{{percentage}}%</span></div> <div class="data-item">正确率：<span>{{result.right_rate}}%</span></div>
</div> </div>
<div class="answer">答案对比</div> <div class="answer">答案对比</div>
<div class="answer-list"> <div class="answer-list">
<div class="answer-item" v-for="(item,index) in answerList"> <div class="answer-item" v-for="(item,index) in answerList">
<div class="subject">{{index+1}}、{{item.subject}}</div> <div class="subject">{{index+1}}、{{item.subject}}</div>
<div class="subject" style="text-indent: 20px">你的答案：<span>{{item.myAnswer}}</span></div> <div v-if="item.check" class="subject subject-success" style="text-indent: 20px">你的答案：{{item.myAnswer}}</div>
<div v-else class="subject subject-error" style="text-indent: 20px">你的答案：{{item.myAnswer}}</div>
<div class="subject" style="text-indent: 20px">正确答案：{{item.correctAnswer}}</div> <div class="subject" style="text-indent: 20px">正确答案：{{item.correctAnswer}}</div>
</div> </div>
</div> </div>
<div class="operation"> <div class="operation">
<div class="item item-1">再来一局</div> <div class="item item-1" @click="again()">再来一局</div>
<div class="item item-2" @click="goback()">返回列表</div> <div class="item item-2" @click="goback()">返回列表</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import StoreUtil from "../../store/stateStore";
import BaseConstant from "../../store/constants/baseConstant";
import {secSimpleText} from "../../framework/util/func";
export default { export default {
name: "forwardResult", name: "forwardResult",
data() { data() {
return { return {
score: 0, //分数
number: '100', //答题数量
correctNumber: 0, //正确数量
percentage: 0, //正确率
answerList: [], answerList: [],
residue_time: '', //剩余时间 use_time_desc: '',
result: {
score: 0,
question_numb: 0,
right_numb: 0,
right_rate: 0,
learn_time: 0,
learn_left_time: 0,
answer_time: 0,
answer_time_left: 0,
use_time: 0
},
result_detail: {
question: [],
answer: []
}
} }
}, },
methods: { methods: {
...@@ -46,19 +61,54 @@ ...@@ -46,19 +61,54 @@
this.$router.push({ this.$router.push({
path: '/' path: '/'
}) })
},
again() {
let url = '/forward/index';
let query = {
id: StoreUtil.getState().train.currentCase.case_id,
model_id: StoreUtil.getState().train.currentCase.model_id,
};
console.log(this.type, '-type-');
StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_CASE_INFO_NOW_CLEAN);
this.$router.push({
path: url,
query
})
} }
}, },
created() { created() {
this.residue_time = this.$route.query.time; this.answerList = [];
this.answerList = this.$store.state.forwardAnswer; let data = StoreUtil.getState().train.currentCase.data;
let result = StoreUtil.getState().train.currentCase.result;
let levelConfig = StoreUtil.getState().train.currentCase.level_config;
this.answerList = data.answerList;
this.number = this.answerList.length; this.number = this.answerList.length;
this.answerList.forEach(v=>{
if(v.myAnswer == v.correctAnswer) { this.result.question_numb = this.answerList.length;
this.correctNumber = this.correctNumber + 1; this.result.answer_time = result.answer_time_end - result.answer_time_start;
this.result.answer_time_left = levelConfig.limit_remember_time - this.result.answer_time/1000;
this.use_time_desc = secSimpleText(this.result.answer_time);
for (let i = 0; i < this.answerList.length; i++) {
if (('' + this.answerList[i].correctAnswer) === ('' + this.answerList[i].myAnswer)) {
this.result.right_numb += 1;
this.answerList[i].check = true;
}
}
this.result.right_rate = (this.result.right_numb / this.result.question_numb * 100).toFixed(2);
this.result.score = this.result.right_numb * 19;
this.result_detail.question = [
{
q: this.answerList,
a: []
} }
}) ];
this.score = this.correctNumber * 19; this.result_detail.answer = [];
this.percentage = (this.correctNumber/this.number*100).toFixed(2);
console.log(this.result, this.result_detail);
} }
} }
</script> </script>
...@@ -67,6 +117,7 @@ ...@@ -67,6 +117,7 @@
.content { .content {
padding: 30px 24px 200px; padding: 30px 24px 200px;
} }
.title { .title {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -76,6 +127,7 @@ ...@@ -76,6 +127,7 @@
color: #000; color: #000;
margin-bottom: 20px; margin-bottom: 20px;
} }
.data-list { .data-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -91,6 +143,7 @@ ...@@ -91,6 +143,7 @@
.data-item span { .data-item span {
color: #1f72ff; color: #1f72ff;
} }
.answer { .answer {
background: #409eff; background: #409eff;
width: 150px; width: 150px;
...@@ -104,21 +157,31 @@ ...@@ -104,21 +157,31 @@
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 8px; border-radius: 8px;
} }
.answer-list { .answer-list {
} }
.answer-item .subject {
.answer-item .subject {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 28px; font-size: 28px;
color: #333; color: #333;
} }
.answer-item .subject span {
.answer-item .subject span {
color: red;
}
.answer-item .subject-error {
color: red; color: red;
} }
.answer-item .subject-success {
color: blue;
}
.operation { .operation {
width: 400px; width: 400px;
position: fixed; position: fixed;
bottom: 120px; bottom: 24px;
display: flex; display: flex;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
......
src/views/forward/index.vue
...@@ -16,13 +16,13 @@ ...@@ -16,13 +16,13 @@
<div>比赛规则</div> <div>比赛规则</div>
</div> </div>
<div class="explain"> <div class="explain">
1、选手在“国际脑力运动”线上平台报名参加脑力世界杯并选中本项比赛。 1、选手在“摩天轮脑力运动”线上平台报名参加脑力世界杯并选中本项比赛。
</div> </div>
<div class="explain"> <div class="explain">
1. Athlete register Intellectual World Cup on the "International Intellectual Sports" online platform and select this discipline. 1. Athlete register Intellectual World Cup on the "International Intellectual Sports" online platform and select this discipline.
</div> </div>
<div class="explain"> <div class="explain">
2、所有选手在“国际脑力运动”线上平台上点击进入本项目比赛倒计时页面，倒计时归零后立即开始比赛。 2、所有选手在“摩天轮脑力运动”线上平台上点击进入本项目比赛倒计时页面，倒计时归零后立即开始比赛。
</div> </div>
<div class="explain"> <div class="explain">
2. All athletes clicked into the countdown page on the "International Intellectual Sports" online platform, 2. All athletes clicked into the countdown page on the "International Intellectual Sports" online platform,
...@@ -79,20 +79,36 @@ ...@@ -79,20 +79,36 @@
2. The highest round score is the final score. 2. The highest round score is the final score.
</div> </div>
<div class="m-selector">
选择模式：
<div v-for="(item, index) in caseConfig" :key="index" :index="index" :item="item">
<div class="item" :class="{active: (level === index)}" @click="changLevel(index)">{{item.level_name}}
</div>
</div>
</div>
<div class="start" @click="start">开始训练</div> <div class="start" @click="start">开始训练</div>
</div> </div>
</template> </template>
<script> <script>
import BaseCasePage from "../../framework/core/baseCasePage"; import BaseCasePage from "../../framework/core/baseCasePage";
import CaseUtil from "../../framework/service/base/caseUtil";
export default new BaseCasePage({ export default new BaseCasePage({
name: "index", name: "index",
data() {
return {
level: 0,
}
},
methods: { methods: {
changLevel(level) {
if (level !== this.level) {
this.level = level;
}
},
start() { start() {
this.$router.push({ CaseUtil.goToTrain('/forward/forwardAnswer',this);
path: '/forward/forwardAnswer'
})
} }
}, },
mounted() { mounted() {
...@@ -103,7 +119,7 @@ ...@@ -103,7 +119,7 @@
<style scoped> <style scoped>
.content { .content {
padding: 30px 24px 120px; padding: 30px 24px 156px;
} }
.title { .title {
display: flex; display: flex;
......
src/views/home/index.vue
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
heartCount: [ heartCount: [
{ {
label: '正向训练', label: '正向训练',
path: '/forward/index' path: '/forward/index?id=9&model_id=8'
}, },
{ {
label: '逆向训练', label: '逆向训练',
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
}, },
{ {
label: '阅读理解', label: '阅读理解',
path: '/fastReading/index' path: '/fastReading/index?id=10&model_id=5'
}, },
] ]
} }
......
src/views/reserve/index.vue
...@@ -15,13 +15,13 @@ ...@@ -15,13 +15,13 @@
<div>比赛规则</div> <div>比赛规则</div>
</div> </div>
<div class="explain"> <div class="explain">
1、选手在“国际脑力运动”线上平台报名参加脑力世界杯并选中本项比赛。 1、选手在“摩天轮脑力运动”线上平台报名参加脑力世界杯并选中本项比赛。
</div> </div>
<div class="explain"> <div class="explain">
1. Athlete register Intellectual World Cup on the "International Intellectual Sports" online platform and select this discipline. 1. Athlete register Intellectual World Cup on the "International Intellectual Sports" online platform and select this discipline.
</div> </div>
<div class="explain"> <div class="explain">
2、所有选手在“国际脑力运动”线上平台上点击进入本项目比赛倒计时页面，倒计时归零后立即开始比赛。 2、所有选手在“摩天轮脑力运动”线上平台上点击进入本项目比赛倒计时页面，倒计时归零后立即开始比赛。
</div> </div>
<div class="explain"> <div class="explain">
2. All athletes clicked into the countdown page on the "International Intellectual Sports" online platform, 2. All athletes clicked into the countdown page on the "International Intellectual Sports" online platform,
......
src/views/zhiExercise/zhiAnswer.vue
...@@ -4,93 +4,139 @@ ...@@ -4,93 +4,139 @@
<div>请按顺序输入图上出现过的字符</div> <div>请按顺序输入图上出现过的字符</div>
</div> </div>
<div class="answer"> <div class="answer">
<div class="item" :class="{focus : focus == 1}">{{answer1}}</div> <div class="item" :class="{focus : focus == 0}">{{answer[0]}}</div>
<div class="item" :class="{focus : focus == 2}">{{answer2}}</div> <div class="item" :class="{focus : focus == 1}">{{answer[1]}}</div>
<div class="item" :class="{focus : focus == 3}">{{answer3}}</div> <div class="item" :class="{focus : focus == 2}">{{answer[2]}}</div>
</div> </div>
<div class="btn-list"> <div class="btn-list">
<div class="item" @click="input('a')">a</div> <div class="item" @click="input('A')">A</div>
<div class="item" @click="input('b')">b</div> <div class="item" @click="input('B')">B</div>
<div class="item" @click="input('c')">c</div> <div class="item" @click="input('C')">C</div>
<div class="item" @click="input('d')">d</div> <div class="item" @click="input('D')">D</div>
<div class="item" @click="input('e')">e</div> <div class="item" @click="input('E')">E</div>
<div class="item" @click="input('f')">f</div> <div class="item" @click="input('F')">F</div>
<div class="item" @click="input('g')">g</div> <div class="item" @click="input('G')">G</div>
<div class="item" @click="input('h')">h</div> <div class="item" @click="input('H')">H</div>
<div class="item" @click="input('i')">i</div> <div class="item" @click="input('I')">I</div>
<div class="item" @click="input('j')">j</div> <div class="item" @click="input('J')">J</div>
<div class="item" @click="input('k')">k</div> <div class="item" @click="input('K')">K</div>
<div class="item" @click="input('l')">l</div> <div class="item" @click="input('L')">L</div>
<div class="item" @click="input('m')">m</div> <div class="item" @click="input('M')">M</div>
<div class="item" @click="input('n')">n</div> <div class="item" @click="input('N')">N</div>
<div class="item" @click="input('o')">o</div> <div class="item" @click="input('O')">O</div>
<div class="item" @click="input('p')">p</div> <div class="item" @click="input('P')">P</div>
<div class="item" @click="input('q')">q</div> <div class="item" @click="input('Q')">Q</div>
<div class="item" @click="input('r')">r</div> <div class="item" @click="input('R')">R</div>
<div class="item" @click="input('s')">s</div> <div class="item" @click="input('S')">S</div>
<div class="item" @click="input('t')">t</div> <div class="item" @click="input('T')">T</div>
<div class="item" @click="input('u')">u</div> <div class="item" @click="input('U')">U</div>
<div class="item delete" @click="deleteA">删除</div> <div class="item delete" @click="deleteA">删除</div>
<div class="item" @click="input('v')">v</div> <div class="item" @click="input('V')">V</div>
<div class="item" @click="input('w')">w</div> <div class="item" @click="input('W')">W</div>
<div class="item" @click="input('x')">x</div> <div class="item" @click="input('X')">X</div>
<div class="item" @click="input('y')">y</div> <div class="item" @click="input('Y')">Y</div>
<div class="item" @click="input('z')">z</div> <div class="item" @click="input('Z')">Z</div>
</div> </div>
<div class="submit" @click="submit">确定</div> <div class="submit" @click="submit">确定</div>
<div class="operation">
<div class="item item-1" @click="again">再来一局</div>
<div class="item item-2" @click="goback()">返回列表</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import StoreUtil from "../../store/stateStore";
import BaseConstant from "../../store/constants/baseConstant";
export default { export default {
name: "zhiAnswer", name: "zhiAnswer",
data() { data() {
return { return {
focus: 1, focus: 0,
correctAnswer: [], correctAnswer: [],
answer1: '', answer: [],
answer2: '',
answer3: ''
} }
}, },
methods:{ methods: {
//提交 //提交
submit() { submit() {
let data = ''; let data = this.correctAnswer;
this.correctAnswer.forEach(v=>{ this.$message({
data = data + v type: 'success',
}) content: '正确答案为：' + data + " | 您的答案为："+this.answer.join('')
alert('正确答案为：'+ data) });
// let answer_time_end = new Date().getTime();
// StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_TRAIN_INFO_NOW, {
// data: {
// answer: this.answer,
// correctAnswer: this.correctAnswer
// },
// result: {
// answer_time_end: answer_time_end,
// }
// });
//
// this.$router.push({
// path: '/home/result',
// query: {
// type: 2,
// level: this.level,
// id: this.caseAlias,
// model_id: this.modelAlias
// }
// });
}, },
deleteA() { deleteA() {
if(this.focus == 1) { this.answer[this.focus] = '';
this.answer1 = ''; if(this.focus>0){
} else if(this.focus == 2) { this.focus--;
this.answer2 = '';
this.focus --
} else if(this.focus == 3) {
this.answer3 = '';
this.focus --
} }
this.$forceUpdate();
}, },
input(val) { input(val) {
if(this.focus == 1) { this.answer[this.focus] = val;
this.answer1 = val; console.log(this.answer,'----answer-');
this.focus ++ if(this.focus<2){
} else if(this.focus == 2) { this.focus++;
this.answer2 = val;
this.focus ++
} else if(this.focus == 3) {
this.answer3 = val;
} }
this.$forceUpdate();
},
goback() {
StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_CASE_INFO_NOW_CLEAN);
this.$router.push({
path: '/'
})
},
again() {
let url = '/zhiExercise/index';
let query = {
id: StoreUtil.getState().train.currentCase.case_id,
model_id: StoreUtil.getState().train.currentCase.model_id
};
StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_CASE_INFO_NOW_CLEAN);
this.$router.push({
path: url,
query
})
} }
}, },
mounted() { mounted() {
this.correctAnswer = this.$route.query.answer; this.answer = [];
console.log(this.correctAnswer); this.correctAnswer = this.$route.query.correctAnswer;
// this.correctAnswer = JSON.parse(JSON.stringify(StoreUtil.getState().train.currentCase.data.randomNumber));
// StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_TRAIN_INFO_NOW, {
// result: {
// answer_time_start: new Date().getTime()
// },
// result_detail: {
// q: this.correctAnswer.join('')
// }
// });
} }
} }
</script> </script>
...@@ -128,9 +174,11 @@ ...@@ -128,9 +174,11 @@
color: #333; color: #333;
margin-right: 20px; margin-right: 20px;
} }
.answer .focus { .answer .focus {
background: #65bbe6; background: #65bbe6;
} }
.btn-list { .btn-list {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -172,4 +220,36 @@ ...@@ -172,4 +220,36 @@
border-radius: 40px; border-radius: 40px;
margin: 50px auto; margin: 50px auto;
} }
.operation {
width: 400px;
position: fixed;
bottom: 24px;
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> </style>
src/views/zhiExercise/zhiDrill.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="content"> <div class="content">
<div class="title">{{(count_time/10).toFixed(1)}}s</div> <div class="title">{{(count_time/10).toFixed(1)}}s</div>
<div class="border"> <div class="border">
<div class="ball" :style="{left: ballX + 'px',top: ballY + 'px'}">{{letter}}</div> <div class="ball" :style="{left: ballX + '%',top: ballY + 'px'}">{{letter}}</div>
</div> </div>
<div class="start" @click="start" v-if="showBtn">开始训练</div> <div class="start" @click="start" v-if="showBtn">开始训练</div>
</div> </div>
...@@ -22,13 +22,14 @@ ...@@ -22,13 +22,14 @@
directY: 1, //y轴方向 1代表从上到下 -1代表从下到上 directY: 1, //y轴方向 1代表从上到下 -1代表从下到上
ballX: 0, //小球的x坐标 ballX: 0, //小球的x坐标
ballY: 0, //小球的y坐标 ballY: 0, //小球的y坐标
speedX: 10, //小球的运动速度 speedX: 4, //小球的运动速度
speedY: 2, speedY: 4,
timer: '', timer: '',
timer1: '', timer1: '',
count_time: 0, count_time: 0,
trainTime: 0, trainTime: 0,
showTime: [], showTime: [],
lastShowTime: 0,
showBtn: true, showBtn: true,
letter: '', letter: '',
answer: [] answer: []
...@@ -36,10 +37,10 @@ ...@@ -36,10 +37,10 @@
}, },
methods: { methods: {
ballMove() { ballMove() {
if (this.ballX >= 300 || this.ballX < 0) { if (this.ballX > 90 || this.ballX < 0) {
this.directX = -this.directX; this.directX = -this.directX;
} }
if (this.ballY > 600 || this.ballY < 0) { if (this.ballY >= 600 || this.ballY < 0) {
this.directY = -this.directY; this.directY = -this.directY;
} }
this.ballX = this.ballX + this.directX * this.speedX; this.ballX = this.ballX + this.directX * this.speedX;
...@@ -48,11 +49,16 @@ ...@@ -48,11 +49,16 @@
start() { start() {
this.showBtn = false; this.showBtn = false;
this.timer = setInterval(() => { // 小球运动计时器 this.timer = setInterval(() => { // 小球运动计时器
if (this.count_time > 0) { if (this.count_time > 580) {
this.ballMove(); this.ballMove();
this.letter = ''; if (this.letter && (this.count_time >= this.lastShowTime - 1)) {
} else {
this.letter = '';
}
let index = this.showTime.indexOf(this.count_time); let index = this.showTime.indexOf(this.count_time);
if (index > -1) { if (index > -1) {
console.log(this.count_time, this.lastShowTime);
this.lastShowTime = this.count_time;
console.log(this.count_time, index); console.log(this.count_time, index);
if (this.levelConfig.mode == 1) { if (this.levelConfig.mode == 1) {
let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
...@@ -96,9 +102,9 @@ ...@@ -96,9 +102,9 @@
this.speedX = this.speedX * (rate / 5); this.speedX = this.speedX * (rate / 5);
this.speedY = this.speedY * (rate / 5); this.speedY = this.speedY * (rate / 5);
let firstTime = Math.floor(random(this.trainTime / 6, this.trainTime / 3 + this.trainTime / 10) / 100); let firstTime = Math.floor(random(this.trainTime / 10, this.trainTime / 3) / 100);
let secTime = Math.floor(random(this.trainTime * 2 / 3 - this.trainTime / 10, this.trainTime * 2 / 3 + this.trainTime / 10) / 100); let secTime = Math.floor(random(this.trainTime / 3, this.trainTime * 2 / 3) / 100);
let thirdTime = Math.floor(random(this.trainTime - this.trainTime / 6, this.trainTime) / 100); let thirdTime = Math.floor(random(this.trainTime * 2 / 3, this.trainTime) / 100);
// let firstTime = random(this.trainTime / 6, this.trainTime / 3 + this.trainTime / 10); // let firstTime = random(this.trainTime / 6, this.trainTime / 3 + this.trainTime / 10);
// let secTime = random(this.trainTime * 2 / 3 - this.trainTime / 10, this.trainTime * 2 / 3 + this.trainTime / 10); // let secTime = random(this.trainTime * 2 / 3 - this.trainTime / 10, this.trainTime * 2 / 3 + this.trainTime / 10);
...@@ -107,6 +113,7 @@ ...@@ -107,6 +113,7 @@
this.showTime.push(firstTime); this.showTime.push(firstTime);
this.showTime.push(secTime); this.showTime.push(secTime);
this.showTime.push(thirdTime); this.showTime.push(thirdTime);
console.log(this.answer, this.showTime);
StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_TRAIN_INFO_NOW, { StoreUtil.stateSave(BaseConstant.BRAIN_TRAIN_TRAIN_INFO_NOW, {
result: { result: {
...@@ -130,7 +137,8 @@ ...@@ -130,7 +137,8 @@
query: { query: {
level: this.level, level: this.level,
id: this.caseAlias, id: this.caseAlias,
model_id: this.modelAlias model_id: this.modelAlias,
correctAnswer: this.answer.join('')
} }
}); });
}, },
...@@ -168,7 +176,7 @@ ...@@ -168,7 +176,7 @@
} }
.border { .border {
width: 700px; width: 96%;
height: 1200px; height: 1200px;
border: 10px solid #000; border: 10px solid #000;
margin-top: 20px; margin-top: 20px;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!