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