Skip to content

yangchao / brains-h5

Go to a project
Commit ba242511 by yeran
Options

update

1 parent 332ab49a
Inline Side-by-side
Showing with 142 additions and 139 deletions
package-lock.json
This diff could not be displayed because it is too large.
package.json
......@@ -15,6 +15,7 @@
"less": "^3.9.0",
"less-loader": "^4.1.0",
"lib-flexible": "^0.3.2",
"v-viewer": "^1.5.1",
"vue": "^2.5.2",
"vue-navigation": "^1.1.4",
"vue-router": "^3.0.1",
......
src/framework/util/func.js
......@@ -366,3 +366,10 @@ export function cmp(x, y) {
}
return true;
}
export function isPunctuation(c) {
let punctuationArray = [',', '.', '?', '!', ';', ':', '*', '%', '@', '#', '&', '^', '$', '"', '<', '>', '/', '|', '\\'
, '、','，', '。', '？'];
return (punctuationArray.indexOf(c) > -1);
}
src/main.js
......@@ -21,6 +21,30 @@ Vue.prototype.$message = Message.install;
Vue.use(Navigation, {router, store});
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
Options: {
'inline': true, // 启用 inline 模式
'button': true, // 显示右上角关闭按钮
// 'navbar': true, // 显示缩略图导航
'title': true, // 显示当前图片的标题
// 'toolbar': true, // 显示工具栏
'tooltip': true, // 显示缩放百分比
'movable': true, // 图片是否可移动
'zoomable': true, // 图片是否可缩放
'rotatable': true, // 图片是否可旋转
'scalable': true, // 图片是否可翻转
'transition': true, // 使用 CSS3 过度
'fullscreen': true, // 播放时是否全屏
'keyboard': true, // 是否支持键盘
'url': 'data-source' // 设置大图片的 url
}
});
/* eslint-disable no-new */
new Vue({
......
src/utils/sysTrainData.js
let pics = {
A: {
img: 'http://static.ledouya.com/20200224/141319_1582524951911.jpg',
img: 'http://static.ledouya.com/Fv5aEzosPewxxfn1IUJ22hPO45QP',
dot: [
{x: 24, y: 180, label: 1},
{x: 100, y: 200, label: 1},
{x: 110, y: 120, label: 2},
{x: 122, y: 64, label: 3},
{x: 162, y: 24, label: 4},
......@@ -15,7 +15,7 @@ let pics = {
]
},
B: {
img: 'http://static.ledouya.com/20200224/141319_1582524951911.jpg',
img: 'http://static.ledouya.com/FmvjUHBqxS6zUon6AWycGRsMgNtl',
dot: [
{x: 24, y: 180, label: 1},
{x: 110, y: 120, label: 2},
......
src/views/pidRemember/sysTrain.vue
......@@ -4,23 +4,23 @@
记忆宫殿训练
</div>
<div class="title">
{{
gameState==='not' ? '请记住图中地点桩位置及其顺序' : '请依次点击复位图中的地点桩'
}}
{{'('+(tabIndex+1)+')'}}{{ gameState==='not' ? '请记住图中地点桩位置及其顺序' :'请依次点击复位图中的地点桩'}}
<div v-if="gameState === 'progress'" @click="next">结束训练</div>
</div>
<div class="box" @click="handleClick">
<div class="dot-area" v-if="gameState === 'not'">
<div
class="dot"
v-for="(item,index) in dotData.dot"
:key="index"
:style="{left:item.x+'px',top:item.y+'px'}"
<div class="dot"
v-for="(item,index) in dotData.dot"
:key="index"
:style="{left:(item.x-15)+'px',top:(item.y-15)+'px'}"
>{{item.label}}
</div>
</div>
<img class="img" :src="dotData.img"/>
</div>
<!-- <viewer :images="[dotData.img]">-->
<!-- <img :src="dotData.img">-->
<!-- </viewer>-->
<div class="tab-area" v-if="gameState === 'progress'">
<div :class="item.hit && 'active'" v-for="(item,index) in tabList" :key="index">{{item.value}}</div>
</div>
......@@ -44,65 +44,31 @@
tabSelectList: [],
tabIndex: 0,
dotData: {},
level: 0,
correct_num: 0,//正确数量
offset_num: 10,//偏移值6个像素
tabList: [
{value: 1, hit: false},
{value: 2, hit: false},
{value: 3, hit: false},
{value: 4, hit: false},
{value: 5, hit: false},
{value: 6, hit: false},
{value: 7, hit: false},
{value: 8, hit: false},
{value: 9, hit: false},
{value: 10, hit: false}
],
fillList: [],
offset_num: 10,//偏移值10个像素
tabList: [],
rightIndex: -1,
gameState: "not"
};
},
methods: {
backHome() {
this.$router.push("/");
},
result() {
this.fillList.map((num, index) => {
let dot = this.dotData.dot[index];
if (dot) {
console.log('x:--', dot.x - this.offset_num, num.x, dot.x + this.offset_num, '正确坐标：' + dot.x)
console.log('y:--', dot.y - this.offset_num, num.y, dot.y + this.offset_num, '正确坐标：' + dot.y)
if ((dot.x - this.offset_num < num.x && num.x < dot.x + this.offset_num) && (dot.y - this.offset_num < num.y && num.y < dot.y + this.offset_num)) {
this.correct_num += 1;
} else {
console.log("not--");
}
}
});
},
handleClick(e) {
if (this.gameState === "not") return;
if (this.fillList.length === 10) {
if (this.rightIndex >= this.dotData.dot.length - 1) {
this.next();
return;
}
this.fillList.push({
x: e.offsetX,
y: e.offsetY,
label: this.fillList.length + 1
});
this.tabList[this.fillList.length - 1].hit = true;
let top = e.offsetY + "px";
let left = e.offsetX + "px";
let box = document.querySelector(".box");
let dot = document.createElement("p");
let styleStr = `width:30px;height:30px;border: 2px solid red;border-radius: 50%;position: absolute;left:${left};top:${top};`;
dot.classList.add("circle");
dot.style.cssText = styleStr;
box.appendChild(dot);
let top = e.offsetY;
let left = e.offsetX;
let rightPoint = this.dotData.dot[this.rightIndex + 1];
console.log('rightPoint', rightPoint.x, rightPoint.y);
console.log('point', left, top);
if ((left <= rightPoint.x + this.offset_num && left >= rightPoint.x - this.offset_num) &&
(top <= rightPoint.y + this.offset_num && top >= rightPoint.y - this.offset_num)) {
this.rightIndex += 1;
this.tabList[this.rightIndex].hit = true;
console.log('----in---');
}
},
updateGameState(state) {
this.gameState = state;
......@@ -112,8 +78,16 @@
this.updateGameState("progress");
},
initTabData() {
this.rightIndex = -1;
this.tabList = [];
this.dotData = pics[this.tabSelectList[this.tabIndex]];
this.updateGameState('not');
for (let i = 0; i < this.dotData.dot.length; i++) {
this.tabList.push({
value: i + 1,
hit: false
})
}
},
next() {
this.$message({
......@@ -125,22 +99,25 @@
this.initTabData();
} else { // 结束训练
this.result();
let childList = document.querySelectorAll(".circle");
for (let i = 0, len = childList.length; i < len; i++) {
document.querySelector(".box").removeChild(childList[i]);
}
this.updateGameState("end");
this.over();
}
},
cancel: () => {
console.log('--cancel---')
}
});
}
},
over() {
this.tabSelectList = [];
this.tabIndex = 0;
this.tabList = [];
this.$router.push({
// path: '/pidRemember/sysTrainSelect',
path: '/',
query: {}
});
},
},
mounted() {
this.tabSelectList = JSON.parse(this.$route.query.labels);
......@@ -160,36 +137,14 @@
display: flex;
align-items: center;
justify-content: center;
border-bottom: solid 1px #d2d1cf;
}
.data-list {
margin-bottom: 60px;
display: flex;
justify-content: space-around;
}
.data-item {
text-align: center;
margin-top: 30px;
font-size: 26px;
color: #333;
}
.data-item span {
color: #1f72ff;
}
.dot {
width: 60px;
height: 60px;
line-height: 50px;
text-align: center;
border: 6px solid #db3b21;
border-radius: 50%;
position: absolute;
color: #fff;
font-size: 24px;
}
.title {
color: #333;
......@@ -256,10 +211,23 @@
}
.tab-area > div.active {
background: rgba(244, 172, 185);
background: #409EFF;
border: 0;
}
.dot {
width: 60px;
height: 60px;
line-height: 50px;
text-align: center;
border: 6px solid #db3b21;
border-radius: 50%;
position: absolute;
color: #fff;
font-size: 24px;
}
.dot-area {
width: 100%;
height: 100%;
......@@ -268,15 +236,4 @@
top: 0;
z-index: 10;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
}
.btn-ignore {
width: 300px;
height: 80px;
}
</style>
src/views/pidRemember/sysTrainSelect.vue
......@@ -6,7 +6,7 @@
<div :class="item.hit ? 'circle active':'circle'" @click="select(item)">{{item.label}}</div>
</div>
</div>
<el-button type="primary" class="start" @click="start">设置</el-button>
<el-button type="primary" class="start" @click="start">开始训练</el-button>
</div>
</template>
......@@ -94,13 +94,6 @@
font-size: 32px;
}
.submit-btn {
width: 500px;
height: 80px;
border-radius: 40px;
font-size: 32px;
margin: 20px 0 80px;
}
.tab-area {
display: flex;
......
src/views/studiesChina/answerStudies.vue
......@@ -9,42 +9,32 @@
<div class="item" v-for="(item,index) in article">
<div class="text" v-if="item.text">{{item.text}}</div>
<div class="text-2" v-else>
<input class="text-1" v-model="item.value" type="text" @input="input()">
<input class="text-1" v-model="item.value" type="text" @blur="blur($event,index)">
</div>
</div>
</div>
<div class="operation" v-if="article_ids && article_ids.length>1">
<div class="item item-3" v-if="subject_number<=1">上一题</div>
<div class="item item-1" v-if="subject_number>1" @click="pre">上一题</div>
<div class="item item-2" v-if="subject_number<questionList.length" @click="next()">下一题</div>
<div class="item item-4" v-if="subject_number>=questionList.length">下一题</div>
</div>
<!-- <div class="operation" v-if="article_ids && article_ids.length>1">-->
<!-- <div class="item item-3" v-if="subject_number<=1">上一题</div>-->
<!-- <div class="item item-1" v-if="subject_number>1" @click="pre">上一题</div>-->
<!-- <div class="item item-2" v-if="subject_number<questionList.length" @click="next()">下一题</div>-->
<!-- <div class="item item-4" v-if="subject_number>=questionList.length">下一题</div>-->
<!-- </div>-->
</div>
</template>
<script>
import StoreUtil from "../../store/stateStore";
import BaseConstant from "../../store/constants/baseConstant";
import {isPunctuation} from "../../framework/util/func";
export default {
name: "preLearn",
props: {
// article: {
// type: Array,
// default: () => []
// },
// correctAnswer: {
// type: String,
// default: ''
// },
},
props: {},
data() {
return {
article: [],
correctAnswer: '',
article_ids: [],
subject_number: 1,
questionList: [],
myAnswer: []
......@@ -57,7 +47,7 @@
if (!v.text) {
this.myAnswer.push({
'value': v.value,
'check' : false
'check': false
});
}
});
......@@ -87,10 +77,23 @@
},
input(e) {
},
blur(e, index) {
if (e.target.value && e.target.value.length > 1) { // 进行分拆
console.log(index, '--index--',e.target.value);
for (let i = 0; i < e.target.value.length; i++) {
let chaIndex = index + i;
if (!this.article[chaIndex].text) {
this.article[chaIndex].value = e.target.value.charAt(i);
}
}
this.$forceUpdate();
}
}
},
mounted() {
this.article_ids = StoreUtil.getState().train.currentCase.level_config.article_ids;
// this.article_ids = StoreUtil.getState().train.currentCase.level_config.article_ids;
this.article = JSON.parse(JSON.stringify(StoreUtil.getState().train.currentCase.data.article));
if (!this.article) {
this.$message({
......@@ -99,12 +102,28 @@
});
}
let q = '';
let startIndex = Math.round(this.article.length / 3);
let endIndex;
if (this.article.length % 3 === 0) {
endIndex = Math.round(this.article.length * 2 / 3 - 1);
} else if (this.article.length % 4 === 0) {
endIndex = Math.round(this.article.length * 3 / 4 - 1);
} else if (this.article.length % 5 === 0) {
endIndex = Math.round(this.article.length * 4 / 5 - 1);
} else {
endIndex = Math.round(this.article.length * 5 / 6 - 1);
}
console.log(this.article.length, '---', endIndex);
for (let i = 0; i < this.article.length; i++) {
if (i >= 20 && i <= 60) {
if (i >= startIndex && i <= endIndex) {
let needInput = !isPunctuation(this.article[i].text);
if (!needInput) continue;
this.correctAnswer = this.correctAnswer + this.article[i].text;
this.article[i] = {
text: '',
value: ''
value: '',
needInput: needInput
};
}
q = q + (this.article[i].text ? this.article[i].text : '_');
......
src/views/studiesChina/preLearn.vue
<template>
<div class="content">
<div class="title">
<div class="circle">国学经典默写</div>
<div class="circle">国学经典默写 （{{title}}）</div>
<div class="limit_time">{{count_time}} s</div>
</div>
......@@ -33,17 +33,19 @@
questionList: [],
article: [],
correctAnswer: '',
myAnswer: ''
myAnswer: '',
title: '',
}
},
methods: {
initArticle() {
getArticleDetails({
ids: [this.levelConfig.article_ids[0]]
level: this.levelConfig.level
}).then((articles) => {
this.article = [];
if (articles && articles.data) {
let content = articles.data[0].content;
this.title = articles.data[0].title;
for (let i = 0; i < content.length; i++) {
this.article.push({
text: content.charAt(i),
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!