forked from Open-CT/Sampling
update
This commit is contained in:
陆文俊
parent
705726661f
commit
7d7630618d
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
package-lock.json
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
# teethBrush
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
页面结构主要分为页数显示，上下页，展示模块，题干模块，基于pagenum进行控制变化
|
||||
题干模块
|
||||
<div class="rightcxt">
|
||||
<div class="title flexbox"></div>标题
|
||||
<div class="text flexbox"></div>问题
|
||||
<div class="answer flexbox"></div>答案
|
||||
</div>
|
||||
拖拽库用的是vuedraggable
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
{
|
||||
"name": "teethBrush",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"dat.gui": "^0.7.9",
|
||||
"element-ui": "^2.15.6",
|
||||
"interactjs": "^1.10.27",
|
||||
"scss": "^0.2.4",
|
||||
"three": "^0.165.0",
|
||||
"vue": "^2.6.11",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"sass": "^1.77.4",
|
||||
"sass-loader": "^10.5.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {
|
||||
"no-unused-vars": "off"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,93 @@
|
|||
.titleBox {
|
||||
background-color: #ffc000;
|
||||
border: 5px solid #111;
|
||||
width: 99%;
|
||||
height:85%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.problemTitle {
|
||||
background-color: #deebf7;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
width: 99%;
|
||||
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.lightBlue{
|
||||
background-color: #deebf7;
|
||||
}
|
||||
.DarkGreen{
|
||||
background-color: #80C48A;
|
||||
}
|
||||
.lightGreen{
|
||||
background-color: #E2F0D9 !important;
|
||||
}
|
||||
|
||||
.FlexAutoTable {
|
||||
.el-table__header-wrapper table,
|
||||
.el-table__body-wrapper table {
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-table__body,
|
||||
.el-table__footer,
|
||||
.el-table__header {
|
||||
table-layout: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.BlackTableBorder {
|
||||
.el-table__cell {
|
||||
border: 1px solid #111;
|
||||
border-bottom: 2px solid #111 !important;
|
||||
border-right: 1px solid #111 !important;
|
||||
}
|
||||
.el-table--border::after{
|
||||
background-color: #111 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.draggable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.FlexBox{
|
||||
margin-top:15px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.FlexCenter{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fullHeight{
|
||||
height: 100%;
|
||||
}
|
||||
.fullWidth{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.lightPink{
|
||||
background-color: #FFF2CC;
|
||||
}
|
||||
.pink{
|
||||
background-color: #FBE5D6;
|
||||
}
|
||||
|
||||
.overFlow{
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.w300 {
|
||||
width: 280px;
|
||||
}
|
||||
.fontsize30{
|
||||
font-size: 30px;
|
||||
}
|
||||
.bigbtn{
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
.flexbox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin: 10px 0;
|
||||
color: #000000 !important;
|
||||
background-color: #99CC99;
|
||||
}
|
||||
|
||||
.optionbox {
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
|
||||
.optionbox label {
|
||||
border: 3px solid #000000;
|
||||
}
|
||||
|
||||
.optionbox span {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 10px;
|
||||
font-size: 23px;
|
||||
font-weight: 1000;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.optionbox .el-radio__inner {
|
||||
left: -20px !important;
|
||||
top: 10px !important;
|
||||
}
|
||||
|
||||
|
||||
.optionbox1 label {
|
||||
border: 3px solid #000000;
|
||||
margin: 5px;
|
||||
width: 500px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.optionbox1 span {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 1000;
|
||||
line-height: 30px;
|
||||
margin: -10px;
|
||||
}
|
||||
|
||||
.optionbox1 .el-radio__inner {
|
||||
left: -10px !important;
|
||||
top: 15px !important;
|
||||
}
|
||||
|
||||
.cxt {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.horizontalline {
|
||||
background-color: #000000;
|
||||
height: 10px;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.verticalline {
|
||||
background-color: #000000;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
transform: rotate(0deg);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nav {
|
||||
float: left;
|
||||
margin: 30px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
.pagebtn {
|
||||
float: right;
|
||||
margin: 30px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
.leftcxt {
|
||||
position: absolute;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.rightcxt {
|
||||
position: absolute;
|
||||
margin: 10px;
|
||||
margin-left: 610px;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
background-color: #FF9900;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 550px;
|
||||
height: 180px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 0px;
|
||||
background-color: #409EFF;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.answer {
|
||||
width: 550px;
|
||||
height: 180px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
background-color: #99CC99;
|
||||
}
|
||||
|
||||
.answerimg img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
white-space: normal;
|
||||
;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
font-size: 20px;
|
||||
height: 100%;
|
||||
color: #000000;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.expression {
|
||||
margin-top: 10px;
|
||||
background-color: #99CC99;
|
||||
width: 570px;
|
||||
height: 100px;
|
||||
overflow: auto;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 969 B |
Binary file not shown.
|
After Width: | Height: | Size: 909 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<div class="CBoard">
|
||||
<el-row class="CRow ">
|
||||
<el-col :span="24" class="Ctitle">虚拟键盘</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="Ckeyboard CRow CFullHight">
|
||||
|
||||
<template v-if="type === 'Math'">
|
||||
<el-col v-for="(item, index) in keyBoard" :key="index" :span="4" class="Ckey">
|
||||
<el-button
|
||||
@click="handleKeyboardClick(item.value, item.label, item.type)"
|
||||
class="Cbutton"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<template v-if="type === 'NumBoard'" >
|
||||
<el-col v-for="(item, index) in keyBoard2" :key="index" :span="8" class="Ckey">
|
||||
<el-button
|
||||
@click="handleKeyboardClick(item.value, item.label, item.type)"
|
||||
class="Cbutton" :style="{'font-size':size}"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<template v-if="type === 'select'">
|
||||
<el-col v-for="(item, index) in keyBoard1" :key="index" :span="8" class="Ckey">
|
||||
<el-button
|
||||
@click="handleKeyboardClick(item.value, item.label, item.type)"
|
||||
class="Cbutton"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
default: "Math",
|
||||
},
|
||||
size:{
|
||||
default:"33px",
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
keyBoard: [
|
||||
{ value: "1", label: 1, type: "number" },
|
||||
{ value: "2", label: 2, type: "number" },
|
||||
{ value: "3", label: 3, type: "number" },
|
||||
{ value: "+", label: "+", type: "symbol" },
|
||||
{ value: "-", label: "-", type: "symbol" },
|
||||
{ value: "×", label: "×", type: "symbol" },
|
||||
{ value: "4", label: 4, type: "number" },
|
||||
{ value: "5", label: 5, type: "number" },
|
||||
{ value: "6", label: 6, type: "number" },
|
||||
{ value: "÷", label: "÷", type: "symbol" },
|
||||
{ value: "(", label: "(", type: "symbol" },
|
||||
{ value: ")", label: ")", type: "symbol" },
|
||||
{ value: "7", label: 7, type: "number" },
|
||||
{ value: "8", label: 8, type: "number" },
|
||||
{ value: "9", label: 9, type: "number" },
|
||||
{ value: "DELETE", label: "删除", type: "functions" },
|
||||
{ value: "0", label: "0", type: "number" },
|
||||
{ value: ".", label: ".", type: "decimal" },
|
||||
],
|
||||
keyBoard1: [
|
||||
{ value: "A", label: "这只巨型蚂蚁", type: "string" },
|
||||
{ value: "B", label: "每秒钟消耗氧气量", type: "string" },
|
||||
{ value: "C", label: "每秒钟吸收氧气量", type: "string" },
|
||||
{ value: "D", label: "大于", type: "string" },
|
||||
{ value: "E", label: "小于", type: "string" },
|
||||
{ value: "F", label: "基本等于", type: "string" },
|
||||
{ value: "G", label: "很大", type: "string" },
|
||||
{ value: "H", label: "很小", type: "string" },
|
||||
{ value: "I", label: "不知道", type: "string" },
|
||||
{ value: "J", label: "所占的空间", type: "string" },
|
||||
{ value: "K", label: "比人还要大", type: "string" },
|
||||
{ value: "L", label: "", type: "string" },
|
||||
],
|
||||
keyBoard2:[
|
||||
{ value: "1", label: 1, type: "number" },
|
||||
{ value: "2", label: 2, type: "number" },
|
||||
{ value: "3", label: 3, type: "number" },
|
||||
{ value: "4", label: 4, type: "number" },
|
||||
{ value: "5", label: 5, type: "number" },
|
||||
{ value: "6", label: 6, type: "number" },
|
||||
{ value: "7", label: 7, type: "number" },
|
||||
{ value: "8", label: 8, type: "number" },
|
||||
{ value: "9", label: 9, type: "number" },
|
||||
{ value: "DELETE", label: "删除", type: "functions" },
|
||||
{ value: "0", label: "0", type: "number" },
|
||||
{ value: ".", label: ".", type: "decimal" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleKeyboardClick(value, label, type) {
|
||||
if (type === "string") {
|
||||
const data = {
|
||||
label: label,
|
||||
value: value,
|
||||
};
|
||||
this.$emit("PushString", data);
|
||||
} else if (type !== "functions") {
|
||||
this.$emit("PushChar", value);
|
||||
} else {
|
||||
if (value === "DELETE") {
|
||||
this.$emit("DeleteChar", 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.CBoard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.CRow {
|
||||
width: 100%;
|
||||
}
|
||||
.CFullHight{
|
||||
|
||||
}
|
||||
.Ctitle {
|
||||
background-color: #92d050;
|
||||
border: 2px solid #111;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.Ckeyboard {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.Ckey {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #e2f0d9;
|
||||
height: auto;
|
||||
border:1px solid #111;
|
||||
}
|
||||
.Cbutton {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e2f0d9;
|
||||
font-size:18px;
|
||||
color:#111;
|
||||
font-weight: 900;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div class="fullHeight fullWidth">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
class="TableStyle FlexAutoTable BlackTableBorder"
|
||||
:max-height="height"
|
||||
>
|
||||
<el-table-column prop="shape" label="形状" align="center"></el-table-column>
|
||||
<el-table-column
|
||||
prop="size"
|
||||
label="尺寸"
|
||||
align="center"
|
||||
min-width="170%"
|
||||
></el-table-column>
|
||||
<el-table-column prop="num" label="数量" align="center"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
height: {
|
||||
default: "200px",
|
||||
},
|
||||
Data: {
|
||||
default: [
|
||||
{ shape: "正方形", size: "长=800厘米，宽=100厘米", num: "5" },
|
||||
{ shape: "正方形", size: "长=800厘米，宽=100厘米", num: "5" },
|
||||
{ shape: "正方形", size: "长=800厘米，宽=100厘米", num: "5" },
|
||||
{ shape: "正方形", size: "长=800厘米，宽=100厘米", num: "5" },
|
||||
{ shape: "正方形", size: "长=800厘米，宽=100厘米", num: "5" },
|
||||
{ shape: "正方形", size: "长=800厘米，宽=100厘米", num: "5" },
|
||||
],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.tableData = this.Data;
|
||||
},
|
||||
watch:{
|
||||
height:{
|
||||
handler(val){
|
||||
this.height = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.TableStyle {
|
||||
.is-leaf {
|
||||
background-color: #00b0f0 !important;
|
||||
color: #111;
|
||||
font-size: 20px;
|
||||
}
|
||||
.el-table__cell {
|
||||
background-color: #deebf7;
|
||||
color: #111;
|
||||
font-size: 19px;
|
||||
}
|
||||
.gutter{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import Vue from "vue";
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import App from "./App.vue";
|
||||
import store from './store';
|
||||
import './assets/css/global.css'
|
||||
|
||||
Vue.use(ElementUI);
|
||||
|
||||
Vue.prototype.updata = function (data,isAnswered) {
|
||||
console.log(data)
|
||||
parent.postMessage(
|
||||
{
|
||||
data,
|
||||
isAnswered
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}
|
||||
new Vue({
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
beforeCreate() {
|
||||
Vue.prototype.$bus = this
|
||||
}
|
||||
|
||||
}).$mount("#app");
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
count: 0 // 示例状态，计数器
|
||||
},
|
||||
mutations: {
|
||||
// 增加计数器的值的 mutation
|
||||
increment(state) {
|
||||
state.count++;
|
||||
},
|
||||
// 减少计数器的值的 mutation
|
||||
decrement(state) {
|
||||
state.count--;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
// 示例 action，触发增加计数器的值的 mutation
|
||||
incrementAsync(context) {
|
||||
setTimeout(() => {
|
||||
context.commit('increment');
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
// 示例 getter，获取计数器的值
|
||||
getCount(state) {
|
||||
return state.count;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default store;
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row class="EndFlexRow">
|
||||
|
||||
<img src="../../assets/img/end.png" alt="" class="customImg1"/>
|
||||
<img src="../../assets/img/teacher.png" alt="" class="customImg2" />
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row class="FlexRow">
|
||||
<el-button class="creamButton" @click="BackPage">返回上一页</el-button>
|
||||
<el-button class="creamButton" @click="submitAnswer">提交全部答案</el-button>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods:{
|
||||
BackPage(){
|
||||
this.$emit('GoBack');
|
||||
},
|
||||
submitAnswer(){
|
||||
this.$emit('SubmitData');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.LightGreenButton{
|
||||
background-color: #E2F0D9;
|
||||
border:2px solid #111;
|
||||
font-size:20px;
|
||||
color:#111;
|
||||
}
|
||||
.creamButton{
|
||||
background-color: #FFF2CC;
|
||||
border:2px solid #111;
|
||||
color:#111;
|
||||
font-size:20px;
|
||||
}
|
||||
|
||||
.FlexRow{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.EndFlexRow{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
.customImg1{
|
||||
|
||||
}
|
||||
.customImg2{
|
||||
max-width: 115px;
|
||||
max-height: 144px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row class="FlexCenter" style="height:75%">
|
||||
<el-col :span="8" class="FlexCenter">
|
||||
<img src="../../assets/img/ant.png" alt="" class="AntBox"/>
|
||||
|
||||
</el-col>
|
||||
|
||||
<el-col :span="3"> </el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-row class="FlexEnd" style="height:50%;">
|
||||
<img src="../../assets/img/end1.png" alt="" class="ChatBox" />
|
||||
</el-row>
|
||||
<el-row class="FlexStart" style="height:50%;">
|
||||
<img src="../../assets/img/teacher.png" alt="" class="ChatStudent"/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
|
||||
<el-row class="row" style="height:20%;">
|
||||
<div class="textBox">
|
||||
<span class="text"> 请先点击下方的【提交答案】，再点击【进入下一题】。</span>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.AntBox{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.ChatBox{
|
||||
margin-top:5px;
|
||||
|
||||
}
|
||||
|
||||
.ChatStudent{
|
||||
max-width:200px;
|
||||
max-height:140px;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
||||
margin-top:5px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
background-color: #fff2cc;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
.textBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height:100%;
|
||||
|
||||
|
||||
.text{
|
||||
color:#111;
|
||||
font-size:36px;
|
||||
}
|
||||
}
|
||||
|
||||
.RowText{
|
||||
width: 230px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
margin-top:-335px;
|
||||
margin-left:23%;
|
||||
}
|
||||
|
||||
.FlexStart{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
|
||||
<el-row style="height:10%;">
|
||||
<div class="titleBox FlexCenter">评价</div>
|
||||
</el-row>
|
||||
|
||||
<el-row class="FlexCenter lightBlue">
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
请你对自己在这个题目上的表现进行自我评价。
|
||||
<br /> 其中：5颗星最高，1颗星最低。 <br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row style="height:50%;" class="FlexCenter" >
|
||||
<el-table :data="tableData" border class="PTable RateTable FlexAutoTable BlackTableBorder">
|
||||
<el-table-column prop="step" label="表现" min-width="230" align="center"> </el-table-column>
|
||||
<el-table-column label="自我评价得分" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-rate v-model="scope.row.rating" :colors="colors"> </el-rate>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] ,
|
||||
tableData: [
|
||||
{
|
||||
id: "1",
|
||||
step: "使用了合适的立体图形",
|
||||
rating: null
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
step: "列出了正确的表达式",
|
||||
rating: null
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
step: "数学运算得到正确的结果",
|
||||
rating: null
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
step: "能够利用结果做出合理的判断",
|
||||
rating: null
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
step: "总体表现",
|
||||
rating: null
|
||||
},
|
||||
],
|
||||
init:false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
tableData:{
|
||||
handler(val) {
|
||||
this.tableData = val;
|
||||
|
||||
if(this.init){
|
||||
this.model.question.q8=val;
|
||||
}
|
||||
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
if(this.model.question.q8.length >0){
|
||||
this.tableData = this.model.question.q8;
|
||||
}
|
||||
this.init =true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.radioItem {
|
||||
background-color: #e2f0d9 !important;
|
||||
border: 1px solid #111;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row style="height: 10%" class="FlexCenter">
|
||||
<div class="titleBox">反思</div>
|
||||
</el-row>
|
||||
|
||||
<el-row class="FlexCenter lightBlue">
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
为了更准确地判断现实世界中是否存在巨型蚂蚁，你认为下列哪种改进是合理的？
|
||||
|
||||
<br />
|
||||
|
||||
【你可以点击选择正确选项，如果需要请使用键盘输入作答。完成后点击“下一页”】
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 50%" class="FlexCenter">
|
||||
<el-radio-group v-model="answer">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in problems"
|
||||
:key="index"
|
||||
:label="item.selection"
|
||||
border
|
||||
class="Q1radioItem"
|
||||
>
|
||||
<span class="radioText"> {{ item.selection }}. {{ item.text }} </span>
|
||||
<el-input
|
||||
v-if="answer === 'E' && index === 4"
|
||||
type="textarea"
|
||||
style="margin-left: 5px"
|
||||
:autosize="{ minRows: 1, maxRows: 1 }"
|
||||
placeholder="请输入你的答案"
|
||||
v-model="Texts"
|
||||
>
|
||||
</el-input>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
problems: [
|
||||
{ selection: "A", text: "假设巨型蚂蚁是可以飞行的。" },
|
||||
{ selection: "B", text: "使用更像巨型蚂蚁的立体图形。" },
|
||||
{ selection: "C", text: "使用计算器进行计算。" },
|
||||
{ selection: "D", text: "用字母表示表面积和体积的公式。" },
|
||||
{ selection: "E", text: "其他" },
|
||||
],
|
||||
answer: '',
|
||||
Texts: "",
|
||||
init: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
answer: {
|
||||
handler(val) {
|
||||
if (this.init) {
|
||||
if (val !== "E") {
|
||||
|
||||
for(let i = 0 ; i< this.problems.length ; i++) {
|
||||
if(this.problems[i].selection === val) {
|
||||
this.model.question.q9.answer = this.problems[i].text;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
|
||||
this.model.question.q9.answer = this.Texts
|
||||
|
||||
}
|
||||
this.model.question.q9.select = val;
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
Texts: {
|
||||
handler(val) {
|
||||
this.model.question.q9.answer = val;
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.model.question.q9) {
|
||||
// for(let i = 0 ; i< this.problems.length ; i++){
|
||||
// if(this.problems[i].text === this.model.question.q10){
|
||||
|
||||
// }
|
||||
// }
|
||||
this.answer = this.model.question.q9.select;
|
||||
|
||||
if (this.answer === "E") {
|
||||
this.Texts = this.model.question.q9.answer;
|
||||
}
|
||||
}
|
||||
this.init = true;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row style="height:50%" class="FlexCenter">
|
||||
<img src="../../assets/img/ant.png" class="Img" alt=""/>
|
||||
</el-row>
|
||||
<el-row style="height:40%;">
|
||||
<div class="FlexCenter fullHeight textBox lightPink" style="font-size:1.6vw;line-height: 50px;">
|
||||
在一部电影中，出现了一只体型巨大的蚂蚁。这只巨型蚂蚁的长度（从头到尾的距离）为800厘米，高度有200厘米。
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Img{
|
||||
width: 50%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.textBox{
|
||||
font-size:22px;
|
||||
color:#000;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div style="height:100%;">
|
||||
|
||||
|
||||
|
||||
<div class="row FlexCenter lightBlue" style="margin-top: 5px;height: 50%;">
|
||||
<div class="textBox" style="font-size: 1.6vw;line-height: 50px;">
|
||||
请你来判断一下，现实中是否有可能存在这样的巨型蚂蚁呢？
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row class="row">
|
||||
<el-button class="button" @click="handleClick">开始答题 </el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit("nextPage");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.textBox {
|
||||
background-color: #deebf7;
|
||||
|
||||
margin-top: 35px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
font-size: 50px;
|
||||
font-weight: 500;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
margin-top: 55px;
|
||||
|
||||
|
||||
|
||||
.button {
|
||||
background-color: #fff2cc;
|
||||
border: 2px solid #111;
|
||||
font-size: 1.6vw;
|
||||
width: 200px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
|
||||
<el-row style="height:10%" class="FlexCenter">
|
||||
<div class="titleBox">计划【单选题】</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:40%" class="FlexCenter lightBlue">
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
请你通过和美美的对话来讨论一下解决问题的思路吧！
|
||||
<br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:50%" class="FlexCenter">
|
||||
<el-radio-group v-model="model.plan.p1">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in problems"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
border
|
||||
class="P1radioItem"
|
||||
>
|
||||
<span class="radioText">
|
||||
{{ item.selection }}. {{ item.text }}
|
||||
</span>
|
||||
</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
problems: [
|
||||
{ selection: "A", text: "解决巨型蚂蚁比普通蚂蚁大多少的问题。",label:'A解决巨型蚂蚁比普通蚂蚁大多少的问题。' },
|
||||
{ selection: "B", text: "解决巨型蚂蚁的重量是多少的问题。",label:'B解决巨型蚂蚁的重量是多少的问题。' },
|
||||
{ selection: "C", text: "解决是否有人看到过巨型蚂蚁的问题。",label:'C解决是否有人看到过巨型蚂蚁的问题。' },
|
||||
{ selection: "D", text: "解决巨型蚂蚁在现实中是否可能存活的问题。",label:'D解决巨型蚂蚁在现实中是否可能存活的问题。' },
|
||||
{ selection: "E", text: "我没有任何想法。" ,label:'E我没有任何想法。' },
|
||||
// { selection: "F", text: "我没有任何想法。" },
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
|
||||
|
||||
.chat {
|
||||
margin: 10px 5px;
|
||||
.row {
|
||||
margin: 10px 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Box {
|
||||
background-color: #fbe5d6;
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
border: 3px solid #111;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
font-size: 30px;
|
||||
}
|
||||
.talkBox{
|
||||
background-size: cover;
|
||||
height: 50px;
|
||||
margin-left:5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
line-height: 43px;
|
||||
font-size:22px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.P1radioItem {
|
||||
background-color: #e2f0d9 ;
|
||||
border: 1px solid #111;
|
||||
width: 100%;
|
||||
.el-radio-button__inner{
|
||||
background-color:transparent;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
.radioText{
|
||||
font-size:22px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row style="height:10%" class="FlexCenter">
|
||||
<div class="titleBox">计划【单选题】</div>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
<el-row style="height:40%" class="FlexCenter lightBlue">
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
请你通过和美美的对话来讨论一下解决问题的思路吧！<br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:50%" class="FlexCenter">
|
||||
<el-radio-group v-model="model.plan.p2">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in problems"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
border
|
||||
class="P2radioItem"
|
||||
>
|
||||
<span class="radioText">
|
||||
{{ item.selection }}. {{ item.text }}
|
||||
</span>
|
||||
</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
problems: [
|
||||
{ selection: "A", text: "我们需要考虑如何正确地刷牙。" ,label:'A我们需要考虑如何正确地刷牙。'},
|
||||
{ selection: "B", text: "我们需要直接做出判断了。" ,label:'B我们需要直接做出判断了。'},
|
||||
{ selection: "C", text: "我们需要根据信息进行列式计算。" ,label:'C我们需要根据信息进行列式计算。'},
|
||||
{ selection: "D", text: "我们需要计划一下解决问题的步骤。" ,label:'D我们需要计划一下解决问题的步骤。'},
|
||||
{ selection: "E", text: "我没有任何想法。" ,label:'E我没有任何想法。'},
|
||||
// { selection: "F", text: "我没有任何想法。" },
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
|
||||
|
||||
|
||||
|
||||
.P2radioItem {
|
||||
background-color: #e2f0d9 ;
|
||||
border: 1px solid #111;
|
||||
width: 100%;
|
||||
.el-radio-button__inner{
|
||||
background-color:transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.radioText{
|
||||
font-size:22px;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
|
||||
<el-row style="height:10%" class="FlexCenter">
|
||||
<div class="titleBox">计划</div>
|
||||
</el-row>
|
||||
|
||||
|
||||
<div class="chat">
|
||||
<el-row class="row">
|
||||
<div class="Box"><span>奇思</span></div>
|
||||
<span class="talkBox">或许我们可以先计划一下解决问题的步骤，你觉得呢？ </span>
|
||||
</el-row>
|
||||
|
||||
<el-row class="row">
|
||||
<div class="Box"><span>你</span></div>
|
||||
<span class="talkBox">？</span>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-radio-group v-model="model.plan.p3">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in problems"
|
||||
:key="index"
|
||||
:label="item.selection"
|
||||
border
|
||||
class="P3radioItem"
|
||||
>
|
||||
<span class="radioText">
|
||||
{{ item.selection }}.{{ item.text }}
|
||||
</span>
|
||||
</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
problems: [
|
||||
{ selection: "A", text: "好的，我觉得我们可以计划一下。" },
|
||||
{ selection: "B", text: "不好，我觉得我们不需要计划。" },
|
||||
{ selection: "C", text: "我没有任何想法。" },
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
|
||||
|
||||
|
||||
.chat {
|
||||
margin: 10px 5px;
|
||||
.row {
|
||||
margin: 10px 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Box {
|
||||
background-color: #fbe5d6;
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
border: 3px solid #111;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
font-size: 30px;
|
||||
}
|
||||
.talkBox {
|
||||
background-image: url("../../assets/img/talk.png");
|
||||
background-size: cover;
|
||||
height: 50px;
|
||||
margin-left: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
line-height: 43px;
|
||||
font-size: 22px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.P3radioItem {
|
||||
background-color: #e2f0d9 ;
|
||||
border: 1px solid #111;
|
||||
width: 100%;
|
||||
.el-radio-button__inner{
|
||||
background-color:transparent;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.radioText{
|
||||
font-size:22px;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
|
||||
<el-row style="height:10%" class="FlexCenter">
|
||||
<div class="titleBox">计划【排序题】</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:30%" class="FlexCenter lightBlue">
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
请你点击下方的下拉按钮选择合适的顺序，计划一下解决问题的步骤吧！<br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:60%" class="FlexCenter">
|
||||
<el-table :data="tableData" border class="PTable FlexAutoTable BlackTableBorder">
|
||||
<el-table-column prop="step" label="步骤" min-width="70%" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="顺序" align="center" min-width="30%">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="selectValue[scope.$index]" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(item, index) in dropDownData"
|
||||
:key="index"
|
||||
:label="item.text"
|
||||
:value="item.text"
|
||||
:disabled="item.disable"
|
||||
@click.native="handleClick(scope.row, item.selection, item.text)">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!-- <el-dropdown trigger="click">
|
||||
<span class="dropdownLink">
|
||||
{{ scope.row.text }}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-for="(item, index) in dropDownData"
|
||||
:key="index"
|
||||
:disabled="item.disable"
|
||||
@click.native="handleClick(scope.row, item.selection, item.text)"
|
||||
>{{ item.text }}</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectValue:['','','',''],
|
||||
model: {},
|
||||
tableData: [
|
||||
{
|
||||
id: "1",
|
||||
step: "收集资料：收集与巨型蚂蚁相关的各种资料。",
|
||||
text: "请选择",
|
||||
selected: -1,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
step: "列式计算：列出解决问题所需的算式并计算。",
|
||||
text: "请选择",
|
||||
selected: -1,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
step: "判断真实性：根据得到的结果判断现实中是否可能存在巨型蚂蚁。",
|
||||
text: "请选择",
|
||||
selected: -1,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
step: "思考分析：分析巨型蚂蚁的相关资料，建立数学关系。",
|
||||
text: "请选择",
|
||||
selected: -1,
|
||||
},
|
||||
],
|
||||
dropDownData: [
|
||||
{ selection: 1, text: "第一步", disable: false },
|
||||
{ selection: 2, text: "第二步", disable: false },
|
||||
{ selection: 3, text: "第三步", disable: false },
|
||||
{ selection: 4, text: "第四步", disable: false },
|
||||
{ selection: 5, text: "取消", disable: false },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(row, select, text) {
|
||||
|
||||
if(!this.dropDownData[select - 1].disable){
|
||||
const index = row.id - 1;
|
||||
const selection = this.tableData[index].selected;
|
||||
if (select !== 5) {
|
||||
if (selection !== -1) {
|
||||
this.$set(this.dropDownData, selection - 1, {
|
||||
...this.dropDownData[selection - 1],
|
||||
disable: false,
|
||||
});
|
||||
}
|
||||
|
||||
this.$set(this.tableData, index, {
|
||||
...this.tableData[index],
|
||||
text: text,
|
||||
selected: select,
|
||||
});
|
||||
this.$set(this.dropDownData, select - 1, {
|
||||
...this.dropDownData[select - 1],
|
||||
disable: true,
|
||||
});
|
||||
this.UpdateModel(index, select);
|
||||
} else {
|
||||
this.$set(this.selectValue,index,"")
|
||||
this.$set(this.dropDownData, selection - 1, {
|
||||
...this.dropDownData[selection - 1],
|
||||
disable: false,
|
||||
});
|
||||
this.$set(this.tableData, index, {
|
||||
...this.tableData[index],
|
||||
text: "请选择",
|
||||
selected: -1,
|
||||
});
|
||||
this.UpdateModel();
|
||||
}
|
||||
}
|
||||
},
|
||||
UpdateModel() {
|
||||
const data = new Array(4);
|
||||
let applicable = true;
|
||||
for(let i =0 ; i < this.tableData.length ; i++) {
|
||||
data[i] = {id:this.tableData[i].id,selected:this.tableData[i].selected};
|
||||
if(this.tableData[i].selected === -1){
|
||||
applicable = false;
|
||||
}
|
||||
}
|
||||
this.model.plan.p3.applicable = applicable;
|
||||
this.model.plan.p3.answer = data;
|
||||
},
|
||||
updateTableText() {
|
||||
for (let i = 0; i < this.tableData.length; i++) {
|
||||
|
||||
for(let j = 0 ; j <this.dropDownData.length ; j++) {
|
||||
const data = this.tableData[i];
|
||||
const datas = this.dropDownData[j];
|
||||
|
||||
if(data.selected === datas.selection){
|
||||
this.tableData[i].text = datas.text;
|
||||
this.dropDownData[j].disable = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
const data = this.model.plan.p3;
|
||||
|
||||
if(data.answer.length >0){
|
||||
for(let i = 0 ; i< this.tableData.length ; i++){
|
||||
if(this.tableData[i].id == data.answer[i].id){
|
||||
this.tableData[i].selected = data.answer[i].selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.updateTableText();
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
.PTable {
|
||||
width: auto;
|
||||
margin-top: 3px;
|
||||
|
||||
|
||||
|
||||
.el-table--border {
|
||||
border-right: 1px solid #111 !important;
|
||||
}
|
||||
|
||||
.is-leaf {
|
||||
background-color: #92d050 !important;
|
||||
color: #111;
|
||||
font-size:25px;
|
||||
width: auto;
|
||||
}
|
||||
.el-table__cell {
|
||||
background-color: #e2f0d9;
|
||||
color: #111;
|
||||
font-size:22px;
|
||||
width: auto;
|
||||
}
|
||||
.dropdownLink{
|
||||
font-size:22px;
|
||||
}
|
||||
}
|
||||
|
||||
.flexAutoTable{
|
||||
.el-table__header-wrapper table,.el-table__body-wrapper table{
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-table__body, .el-table__footer, .el-table__header{
|
||||
table-layout: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
<template>
|
||||
<div class="fullHeight" style="max-height:700px">
|
||||
|
||||
|
||||
<el-row class="PlanFlex" style="width:90%;margin:2px auto 0px;" >
|
||||
<el-col :span="4" class="FlexCol" style="width: 100px;">
|
||||
<div class="UserBox " style="width: 100px;height: 80px;margin: 0;">
|
||||
|
||||
<img src="../../assets/img/girl.png" alt="" style="width:70%;"/>
|
||||
|
||||
</div>
|
||||
<p style="width:100%;margin-top:10px;font-size: 1.6vw;font-weight: bold;" class="FlexCenter">
|
||||
美美
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div class="ChatBox1 FlexCenter" style="padding: 2%;box-sizing: border-box;">
|
||||
<p>
|
||||
我们想要判断现实中是否存在巨型蚂蚁，需要解决什么问题呢？
|
||||
</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row v-if="this.model.p1 !== '' && this.page >0" class="PlanFlex1" style="width:90%;margin:1px auto 0px;" >
|
||||
<el-col :span="20" style="height:100%;">
|
||||
<div class="ChatBox2" style="padding: 2%;box-sizing: border-box;">
|
||||
<p>{{this.model.p1.slice(1)}}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4" class="FlexCol" style="width: 100px;">
|
||||
<div class="UserBox" style="width: 100px;height: 80px;margin: 0;">
|
||||
|
||||
<img src="../../assets/img/panda.png" alt="" style="width:70%;"/>
|
||||
|
||||
</div>
|
||||
<p style="width:100%;margin-top:10px;font-size: 1.6vw;font-weight: bold;" class="FlexCenter" >
|
||||
你
|
||||
</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row class="PlanFlex" v-if="page >1" style="width:90%;margin:1px auto 0px;" >
|
||||
<el-col :span="4" class="FlexCol" style="width: 100px;">
|
||||
<div class="UserBox" style="width: 100px;height: 80px;margin: 0;">
|
||||
<img src="../../assets/img/girl.png" alt="" style="width:70%;"/>
|
||||
</div>
|
||||
<p style="width:100%;margin-top:10px;font-size: 1.6vw;font-weight: bold;" class="FlexCenter">
|
||||
美美
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div class="ChatBox1 FlexCenter" style="padding: 2%;box-sizing: border-box;">
|
||||
<p>
|
||||
{{ sliceText(2) }}
|
||||
</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row v-if="this.model.p2 !== '' && this.page >1" class="PlanFlex1" style="width:90%;margin:1px auto 0px;" >
|
||||
<el-col :span="20" style="height:100%;">
|
||||
<div class="ChatBox2" style="padding: 2%;box-sizing: border-box;">
|
||||
<p >{{this.model.p2.slice(1)}}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4" class="FlexCol" style="width: 100px;">
|
||||
<div class="UserBox" style="width: 100px;height: 80px;margin: 0;">
|
||||
<img src="../../assets/img/panda.png" alt="" style="width:70%;"/>
|
||||
</div>
|
||||
<p style="width:100%;margin-top:10px;font-size: 1.6vw;font-weight: bold;" class="FlexCenter">
|
||||
你
|
||||
</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row class="PlanFlex" v-if="page >2" style="width:90%;margin:1px auto 0px;" >
|
||||
<el-col :span="4" class="FlexCol" style="height:100%;">
|
||||
<div class="UserBox" style="width: 100px;height: 80px;margin: 0;">
|
||||
<img src="../../assets/img/girl.png" alt="" style="width:70%;"/>
|
||||
</div>
|
||||
<p style="width:100%;margin-top:10px;font-size: 1.6vw;font-weight: bold;" class="FlexCenter">
|
||||
美美
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col :span="20" style="height:90%;">
|
||||
<div class="ChatBox1" style="padding: 2%;box-sizing: border-box;">
|
||||
<p>
|
||||
{{sliceText(3)}}
|
||||
</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
page:{
|
||||
type:Number,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
sliceText(page){
|
||||
let Text = '';
|
||||
if(page === 2){
|
||||
const Select = this.model.p1[0];
|
||||
if(Select === 'B'){
|
||||
Text = '我同意你的想法。那么接下来我们需要先做什么呢?';
|
||||
}else if(Select === 'A' || Select === 'C' || Select === 'D'){
|
||||
Text = '我不太同意你的看法，我认为需要判断巨型蚂蚁在现实中是否可能存活。那么接下来我们需要先做什么呢?'
|
||||
}else{
|
||||
Text = '或许需要我们判断巨型蚂蚁在现实中是否可能存活。那么接下来我们需要先做什么呢?'
|
||||
}
|
||||
}
|
||||
else if (page === 3){
|
||||
const Select = this.model.p2[0];
|
||||
if(Select === 'D'){
|
||||
Text = '那我们来计划一下解决问题的步骤吧!'
|
||||
}else{
|
||||
Text = '为了能成功地解决问题，我认为需要先计划一下解决问题的步骤。'
|
||||
}
|
||||
}
|
||||
return Text;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.UserBox {
|
||||
background-color: #fbe5d6;
|
||||
border: 2px solid #111;
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ChatBox1 {
|
||||
background-color: #d9d9d9;
|
||||
clip-path: polygon(5% 0, 100% 0, 100% 100%, 5% 100%, 5% 65%, 0 50%, 5% 35%);
|
||||
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
|
||||
p {
|
||||
|
||||
min-height: 45px;
|
||||
font-size: 1.5vw;
|
||||
margin-left: 40px;
|
||||
|
||||
}
|
||||
}
|
||||
.ChatBox2 {
|
||||
background-color: #a9d18e;
|
||||
clip-path: polygon(0 0, 88% 0, 88% 35%, 95% 50%, 88% 65%, 88% 100%, 0 100%);
|
||||
border-radius: 15px;
|
||||
p {
|
||||
min-height: 45px;
|
||||
font-size: 1.5vw;
|
||||
|
||||
}
|
||||
}
|
||||
.PlanFlex {
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.PlanFlex1 {
|
||||
margin:5px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.FlexCol {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div :style="styleCSS">
|
||||
|
||||
<el-row class="lightBlue FlexCenter Radius" style="height:60%">
|
||||
<div class="TextBox FlexCenter">
|
||||
你确定已经将巨型蚂蚁的外表皮都找全了吗?
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:50%" class="ROW">
|
||||
<el-button class="creamButton logButton" @click="goBack">
|
||||
返回检查
|
||||
</el-button>
|
||||
|
||||
<el-button class="creamButton logButton" @click="goNext">
|
||||
找全了
|
||||
</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
WindowHeight:500,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
GetWindowHight(){
|
||||
this.WindowHeight= window.innerHeight*1.5 /3 ;
|
||||
},
|
||||
goBack(){
|
||||
this.$emit('goPrev',1);
|
||||
},
|
||||
goNext(){
|
||||
this.$emit('goNext',0)
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
styleCSS(){
|
||||
return `height:${this.WindowHeight}px`
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.GetWindowHight();
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.TextBox{
|
||||
height:100%;
|
||||
color:#000;
|
||||
font-size:40px;
|
||||
|
||||
}
|
||||
|
||||
.Radius{
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.ROW{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.logButton{
|
||||
width:30%;
|
||||
height: 50%;
|
||||
color:#000;
|
||||
font-size:24px;
|
||||
}
|
||||
|
||||
.creamButton{
|
||||
background-color: #FFF2CC;
|
||||
font-size:35px;
|
||||
border:2px solid #111;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
|
||||
<el-row style="height:45%;" class="FlexCenter">
|
||||
<img src="../../assets/img/ant.png" style="height: 90%;"/>
|
||||
</el-row>
|
||||
<el-row style="height:5%;"></el-row>
|
||||
<el-row style="height:45%; " class="FlexCenter">
|
||||
<div class="FlexCenter backGround border" style="height:100%;width:96%;">
|
||||
<span style="margin-left:5px;line-height: 50px;">
|
||||
<strong> 科学研究显示</strong>：蚂蚁是通过身体表面来进行呼吸的。一只蚂蚁每秒钟每立方厘米身体消耗的氧气为20毫升，而每秒钟每平方厘米外表皮可以吸收的氧气为5毫升。如果一只蚂蚁每秒钟消耗的氧气量大于吸收的氧气量，那么就无法生存。
|
||||
</span>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border{
|
||||
border-radius: 10%;
|
||||
border:1px solid #000;
|
||||
}
|
||||
.backGround {
|
||||
background-color: #FBE5D6;
|
||||
font-size:30px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,363 @@
|
|||
<template>
|
||||
<div ref="Q3Div">
|
||||
<el-row class="Q3titleRow">
|
||||
<img src="../../assets/img/waters.png" alt="" class="titleImg" />
|
||||
<el-col class="Q3titleCol">
|
||||
<div class="title">每次刷牙水龙头的出水量</div>
|
||||
<el-slider class="slider" v-model="value1" :step="5" :marks="marks1" :max="15">
|
||||
</el-slider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="Q3titleRow">
|
||||
<img src="../../assets/img/Brushteeth.png" alt="" class="titleImg" />
|
||||
<el-col class="Q3titleCol">
|
||||
<div class="title">每次刷牙正常所需的水量</div>
|
||||
<el-slider class="slider" v-model="value2" :step="1" :marks="marks2" :max="3">
|
||||
</el-slider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="Q3Row">
|
||||
<el-button class="Q3Button" @click="updateTableData">开始实验</el-button>
|
||||
<el-button class="Q3Button" @click="backTableData">撤销上一次实验结果</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row class="Q3TableRow" :style="SolveWidth">
|
||||
<el-table
|
||||
ref="scrollingTable"
|
||||
:data="tableData"
|
||||
:cell-class-name="ColumnClass"
|
||||
:header-cell-class-name="HeaderColumnClass"
|
||||
border
|
||||
fit
|
||||
class="Q3Table FlexAutoTable BlackTableBorder"
|
||||
>
|
||||
<el-table-column prop="step" label="序号" align="center" fixed> </el-table-column>
|
||||
<el-table-column prop="record1" label="1" align="center"> </el-table-column>
|
||||
<el-table-column prop="record2" label="2" align="center"> </el-table-column>
|
||||
<el-table-column prop="record3" label="3" align="center"> </el-table-column>
|
||||
<el-table-column prop="record4" label="4" align="center"> </el-table-column>
|
||||
<el-table-column prop="record5" label="5" align="center"> </el-table-column>
|
||||
<el-table-column prop="record6" label="6" align="center"> </el-table-column>
|
||||
<el-table-column prop="record7" label="7" align="center"> </el-table-column>
|
||||
<el-table-column prop="record8" label="8" align="center"> </el-table-column>
|
||||
<el-table-column prop="record9" label="9" align="center"> </el-table-column>
|
||||
<el-table-column prop="record10" label="10" align="center"> </el-table-column>
|
||||
<el-table-column prop="record11" label="11" align="center"> </el-table-column>
|
||||
<el-table-column prop="record12" label="12" align="center"> </el-table-column>
|
||||
<el-table-column prop="record13" label="13" align="center"> </el-table-column>
|
||||
<el-table-column prop="record14" label="14" align="center"> </el-table-column>
|
||||
<el-table-column prop="record15" label="15" align="center"> </el-table-column>
|
||||
<el-table-column prop="record16" label="16" align="center"> </el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model:{},
|
||||
MaxWidth: {
|
||||
width: "100px",
|
||||
},
|
||||
value1: 0,
|
||||
marks1: {
|
||||
0: "0升",
|
||||
5: "5升",
|
||||
10: "10升",
|
||||
15: "15升",
|
||||
},
|
||||
value2: 0,
|
||||
marks2: {
|
||||
0: "0升",
|
||||
1: "1升",
|
||||
2: "2升",
|
||||
3: "3升",
|
||||
},
|
||||
labStatus: 1,
|
||||
tableData: [
|
||||
{
|
||||
id: "1",
|
||||
step: "每次刷牙水龙头的出水量",
|
||||
record1: "",
|
||||
record2: "",
|
||||
record3: "",
|
||||
record4: "",
|
||||
record5: "",
|
||||
record6: "",
|
||||
record7: "",
|
||||
record8: "",
|
||||
record9: "",
|
||||
record10: "",
|
||||
record11: "",
|
||||
record12: "",
|
||||
record13: "",
|
||||
record14: "",
|
||||
record15: "",
|
||||
record16: "",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
step: "每次刷牙正常所需的水量",
|
||||
record1: "",
|
||||
record2: "",
|
||||
record3: "",
|
||||
record4: "",
|
||||
record5: "",
|
||||
record6: "",
|
||||
record7: "",
|
||||
record8: "",
|
||||
record9: "",
|
||||
record10: "",
|
||||
record11: "",
|
||||
record12: "",
|
||||
record13: "",
|
||||
record14: "",
|
||||
record15: "",
|
||||
record16: "",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
step: "每次刷牙浪费的水量",
|
||||
record1: "",
|
||||
record2: "",
|
||||
record3: "",
|
||||
record4: "",
|
||||
record5: "",
|
||||
record6: "",
|
||||
record7: "",
|
||||
record8: "",
|
||||
record9: "",
|
||||
record10: "",
|
||||
record11: "",
|
||||
record12: "",
|
||||
record13: "",
|
||||
record14: "",
|
||||
record15: "",
|
||||
record16: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateTableData() {
|
||||
if (this.labStatus >= 17) {
|
||||
alert("实验报告已满，撤销后可继续实验");
|
||||
} else {
|
||||
for (let i = 0; i < this.tableData.length; i++) {
|
||||
if (i === 0) {
|
||||
this.$set(this.tableData[i], `record${this.labStatus}`, this.value1);
|
||||
} else if (i === 1) {
|
||||
this.$set(this.tableData[i], `record${this.labStatus}`, this.value2);
|
||||
} else {
|
||||
let sum = false;
|
||||
if (this.value1 - this.value2 < 0) {
|
||||
sum = true;
|
||||
}
|
||||
|
||||
this.$set(
|
||||
this.tableData[i],
|
||||
`record${this.labStatus}`,
|
||||
sum === true ? "不合理的结果" : this.value1 - this.value2
|
||||
);
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
const tableWrapper = this.$refs.scrollingTable.$el.querySelector(
|
||||
".el-table__body-wrapper"
|
||||
);
|
||||
if (tableWrapper) {
|
||||
const columnIndex = this.labStatus-4;
|
||||
const columnWidth = 115;
|
||||
tableWrapper.scrollTo({
|
||||
left: columnIndex * columnWidth,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
});
|
||||
this.labStatus += 1;
|
||||
this.model.question.q3.tableData=this.tableData
|
||||
this.model.question.q3.tableStatus= this.labStatus;
|
||||
}
|
||||
},
|
||||
backTableData() {
|
||||
this.labStatus = this.labStatus > 1 ? (this.labStatus -= 1) : 1;
|
||||
|
||||
for (let i = 0; i < this.tableData.length; i++) {
|
||||
if (i === 0) {
|
||||
this.$set(this.tableData[i], `record${this.labStatus}`, "");
|
||||
} else if (i === 1) {
|
||||
this.$set(this.tableData[i], `record${this.labStatus}`, "");
|
||||
} else {
|
||||
this.$set(this.tableData[i], `record${this.labStatus}`, "");
|
||||
}
|
||||
}
|
||||
this.model.question.q3.tableData=this.tableData
|
||||
this.model.question.q3.tableStatus= this.labStatus;
|
||||
},
|
||||
ColumnClass({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex === 0) {
|
||||
return "tableWidth";
|
||||
}
|
||||
},
|
||||
HeaderColumnClass(row, column, rowIndex, columnIndex) {
|
||||
if (row.column.label == "序号") {
|
||||
return "tableWidth";
|
||||
}
|
||||
},
|
||||
handleResize() {
|
||||
let width = this.$refs.Q3Div.offsetWidth;
|
||||
const height = this.$refs.Q3Div.offsetHeight;
|
||||
|
||||
const windowWidth = window.innerWidth;
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
if (windowWidth < 1470) {
|
||||
width = (windowWidth * 1.32) / 3;
|
||||
} else if (windowWidth < 1500) {
|
||||
width = (windowWidth * 1.38) / 3;
|
||||
} else if (windowWidth < 1520) {
|
||||
width = (windowWidth * 1.4) / 3;
|
||||
} else {
|
||||
width = windowWidth / 2;
|
||||
}
|
||||
|
||||
this.MaxWidth.width = width;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
SolveWidth() {
|
||||
return {
|
||||
maxWidth: this.MaxWidth.width + "px",
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
this.handleResize();
|
||||
|
||||
if(this.model.question.q3.tableData.length > 0) {
|
||||
this.tableData=this.model.question.q3.tableData;
|
||||
this.labStatus= this.model.question.q3.tableStatus;
|
||||
}
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("resize", this.handleResize);
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.Q3titleRow {
|
||||
display: flex;
|
||||
margin: 5px 5px;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
.Q3titleCol {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.titleImg {
|
||||
width: 150px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
font-size: 33px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.slider {
|
||||
width: 80%;
|
||||
.el-slider__button {
|
||||
background-color: #ff0000;
|
||||
border: 1px solid #ff0000;
|
||||
}
|
||||
.el-slider__bar {
|
||||
background-color: #00b050;
|
||||
}
|
||||
.el-slider__marks-stop {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Q3Row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
.Q3TableRow {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Q3Button {
|
||||
background-color: #e2f0d9;
|
||||
border: 3px solid #111;
|
||||
font-size: 21px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.el-slider__marks-text {
|
||||
min-width: 35px;
|
||||
}
|
||||
|
||||
.Q3Table {
|
||||
margin-top: 5px;
|
||||
height: 100%;
|
||||
|
||||
.el-table__body-wrapper {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
overflow: auto;
|
||||
|
||||
.el-table--border {
|
||||
border-right: 1px solid #111 !important;
|
||||
}
|
||||
|
||||
.is-leaf {
|
||||
background-color: #92d050 !important;
|
||||
color: #111;
|
||||
font-size: 23px;
|
||||
}
|
||||
.el-table__cell {
|
||||
background-color: #e2f0d9;
|
||||
color: #111;
|
||||
font-size: 15px;
|
||||
min-width: 115px !important;
|
||||
}
|
||||
.el-table__fixed{
|
||||
min-width: 115px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tableWidth1 {
|
||||
min-width: 131px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
<template>
|
||||
<div style="height: 100%">
|
||||
|
||||
<el-row class="Q4Header">
|
||||
<TABLE :Data="this.model.question.q3" :height="'170px'"/>
|
||||
</el-row>
|
||||
|
||||
<el-row class="Q4Body">
|
||||
<el-row class="FlexRow">
|
||||
<div class="TableTitle">信息</div>
|
||||
</el-row>
|
||||
|
||||
<el-row class="FlexRow">
|
||||
<div
|
||||
v-for="(text, index) in texts"
|
||||
:key="index"
|
||||
class="gridItem Grab FlexCenter Q4LWidth"
|
||||
:draggable=" text !== '' "
|
||||
@dragstart="dragStart($event, text)"
|
||||
@dragend="dragEnd"
|
||||
>
|
||||
{{ text }}
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row class="FlexRow ">
|
||||
<div class="TableTitle orange">运算关系</div>
|
||||
</el-row>
|
||||
|
||||
<el-row class="FlexRow ">
|
||||
<div
|
||||
v-for="(text, index) in symbols"
|
||||
:key="index"
|
||||
:class="checkClass(text)"
|
||||
|
||||
:draggable="text.length === 1"
|
||||
@dragstart="dragStart($event, text)"
|
||||
@dragend="dragEnd"
|
||||
>
|
||||
{{ (text !== ')' || text !== '(') ? text : text }}
|
||||
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TABLE from '../../components/DataTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TABLE
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model:{},
|
||||
texts: [
|
||||
"每秒钟每立方厘米身体消耗的氧气量",
|
||||
"每秒钟每平方厘米外表皮吸收的氧气量",
|
||||
"漱口杯的容量",
|
||||
"水龙头每分钟流出的水量",
|
||||
"每次刷牙正常所需的水量",
|
||||
"刷牙时的水温",
|
||||
"家中包括4个成员",
|
||||
"",
|
||||
|
||||
],
|
||||
symbols: [
|
||||
"加法关系",
|
||||
"+",
|
||||
"减法关系",
|
||||
"-",
|
||||
"乘法关系",
|
||||
"×",
|
||||
"除法关系",
|
||||
"÷",
|
||||
"括号",
|
||||
"(",")",
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
dragStart(event, text) {
|
||||
this.$emit("drag-start", event, text);
|
||||
},
|
||||
dragEnd(event) {
|
||||
event.target.style.cursor = "grab";
|
||||
this.$emit("drag-end", event);
|
||||
},
|
||||
checkClass(text){
|
||||
if(text.length === 1 )
|
||||
{
|
||||
if(text !== ')' && text !=='('){
|
||||
return "Grab gridItem DarkPink"
|
||||
}
|
||||
else if( text === '('){
|
||||
return ' Grab halfItem borderRight DarkPink'
|
||||
}
|
||||
return 'Grab halfItem DarkPink';
|
||||
}
|
||||
else {
|
||||
return 'gridItem DarkPink';
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener("drop", function (ev) {
|
||||
const dropbox = ev.target.closest("[allowdrop]");
|
||||
if (dropbox) {
|
||||
dropbox.toggleAttribute("over", false);
|
||||
}
|
||||
});
|
||||
|
||||
// let data = [];
|
||||
// let array = this.model.q2;
|
||||
// array.sort();
|
||||
// for(let i=0;i<array.length;i++){
|
||||
// data.push(array[i].slice(1));
|
||||
// }
|
||||
// if(array.length %2 !==0){
|
||||
// data.push('')
|
||||
// }
|
||||
|
||||
let data = [
|
||||
"每秒钟每立方厘米身体消耗的氧气量",
|
||||
"每秒钟每平方厘米外表皮吸收的氧气量",
|
||||
""
|
||||
]
|
||||
|
||||
let array = this.model.question.q3;
|
||||
|
||||
for(let i=0;i<array.length;i++){
|
||||
data.push(array[i].shape +'的长')
|
||||
data.push(array[i].shape +'的宽')
|
||||
data.push(array[i].num)
|
||||
}
|
||||
|
||||
|
||||
this.texts=data;
|
||||
|
||||
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.Q4Header {
|
||||
height: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
}
|
||||
|
||||
.Q4Body {
|
||||
height: 75%;
|
||||
.FlexRow {
|
||||
display: flex;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
.TableTitle {
|
||||
width: 90.5%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
background-color: #92d050;
|
||||
font-size: 22px;
|
||||
border:1px solid #111;
|
||||
}
|
||||
|
||||
}
|
||||
.gridItem {
|
||||
width: 44.9%;
|
||||
text-align: center;
|
||||
background-color: #e2f0d9;
|
||||
font-size: 22px;
|
||||
|
||||
border:1px solid #111;
|
||||
}
|
||||
.halfItem{
|
||||
width:22.4%;
|
||||
text-align: center;
|
||||
background-color: #e2f0d9;
|
||||
font-size: 22px;
|
||||
border:1px solid #111;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bode{
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
|
||||
.Grab:hover {
|
||||
cursor: grab;
|
||||
}
|
||||
.Grab:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.DarkPink{
|
||||
background-color: #FBE5D6 !important;
|
||||
}
|
||||
.orange{
|
||||
background-color: #FFC000 !important;
|
||||
}
|
||||
|
||||
.Q4LWidth{
|
||||
width:30% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
|
||||
|
||||
|
||||
<el-row class="">
|
||||
<div class="pink fullHeight"
|
||||
|
||||
style="font-size:1.6vw; line-height: 50px;border:2px solid rgb(132, 60, 11);padding: 5px;box-sizing: border-box;border-radius: 30px;margin: 5px auto;width: 95%;">
|
||||
<strong>科学研究显示：</strong>
|
||||
蚂蚁是通过身体表面来进行呼吸的。一只蚂蚁每秒钟每立方厘米身体消耗的氧气为20毫升，而每秒钟每平方厘米外表皮可以吸收的氧气为5毫升。如果一只蚂蚁每秒钟消耗的氧气量大于吸收的氧气量，那么就无法生存。
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:40%;" class="SpecialRow">
|
||||
<TABLE :height="TableHeight()" :Data="this.model.question.q3"/>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:30%">
|
||||
<el-col :span="8" class="Q5ColItemLeft FlexCenter">
|
||||
这只巨型蚂蚁每秒钟吸收氧气量的表达式
|
||||
</el-col>
|
||||
<el-col :span="16" class="FlexCenter Q5ColItemRight">
|
||||
{{ this.model.question.q4.answer }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TABLE from '../../components/DataTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TABLE,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
init:false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getNewDiv(e){
|
||||
|
||||
this.$bus.$emit("cancelMoving",e.clientX,e.clientY)
|
||||
},
|
||||
clearAll(){
|
||||
this.$bus.$emit("clearAllCreateDiv")
|
||||
|
||||
},
|
||||
deleteIt(){
|
||||
this.$bus.$emit("beThrow")
|
||||
|
||||
},
|
||||
TableHeight() {
|
||||
this.$nextTick(() => {
|
||||
const parentElement = document.querySelector('.el-row');
|
||||
if (parentElement) {
|
||||
const parentHeight = parentElement.offsetHeight;
|
||||
return `${parentHeight * 0.9}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.init = true;
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.Q5ColItemLeft{
|
||||
background-color: #00B0F0;
|
||||
height:100%;
|
||||
font-size:22px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
.Q5ColItemRight{
|
||||
background-color: #DEEBF7;
|
||||
height:100%;
|
||||
font-size:20px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
|
||||
|
||||
|
||||
<el-row style="height:30%;" class="pink">
|
||||
<div class=" fullHeight" style="font-size:29px; margin-left:5px;">
|
||||
<strong>科学研究显示：</strong>
|
||||
蚂蚁是通过身体表面来进行呼吸的。一只蚂蚁每秒钟每立方厘米身体消耗的氧气为20毫升，而每秒钟每平方厘米外表皮可以吸收的氧气为5毫升。如果一只蚂蚁每秒钟消耗的氧气量大于吸收的氧气量，那么就无法生存。
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:40%;" class="SpecialRow">
|
||||
<TABLE :height="TableHeight()" :Data="this.model.question.q3"/>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:30%">
|
||||
<el-col :span="8" class="Q5ColItemLeft FlexCenter">
|
||||
这只巨型蚂蚁每秒钟吸收氧气量的表达式
|
||||
</el-col>
|
||||
<el-col :span="16" class="FlexCenter Q5ColItemRight">
|
||||
{{ this.model.question.q4.answer }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TABLE from '../../components/DataTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TABLE,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
init:false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
TableHeight() {
|
||||
this.$nextTick(() => {
|
||||
const parentElement = document.querySelector('.el-row');
|
||||
if (parentElement) {
|
||||
const parentHeight = parentElement.offsetHeight;
|
||||
return `${parentHeight * 0.9}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.init = true;
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.Q5ColItemLeft{
|
||||
background-color: #00B0F0;
|
||||
height:100%;
|
||||
font-size:22px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
.Q5ColItemRight{
|
||||
background-color: #DEEBF7;
|
||||
height:100%;
|
||||
font-size:20px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<el-row>
|
||||
<el-table :data="TitleTableData" class="Q6Table BlackTableBorder" border
|
||||
:cell-class-name="ColumnClass"
|
||||
:show-header="false"
|
||||
>
|
||||
<el-table-column prop="title" width="130px" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column>
|
||||
<template slot-scope="scope" >
|
||||
{{ scope.row.text }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-table :data="tableData" class="Q6Table FlexAutoTable BlackTableBorder" >
|
||||
<el-table-column prop="datas" label="收集的信息" align="center"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
TitleTableData: [
|
||||
{
|
||||
title: "你的表达式",
|
||||
text: `一个四口之家每周刷牙浪费水量=`,
|
||||
},
|
||||
{
|
||||
title: "你的算式",
|
||||
text: `一个四口之家每周刷牙浪费水量=`,
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
datas: "每人每天刷牙的次数：2次",
|
||||
},
|
||||
{
|
||||
datas: "漱口杯的容量：0.5升",
|
||||
},
|
||||
{
|
||||
datas: "每次刷牙的平均时长：3分钟",
|
||||
},
|
||||
{
|
||||
datas: "每次刷牙使用的牙膏量：1克",
|
||||
},
|
||||
{
|
||||
datas: "牙刷的长度：18厘米",
|
||||
},
|
||||
{
|
||||
datas: "水龙头每分钟流出的水量：3升",
|
||||
},
|
||||
{
|
||||
datas: "刷牙时的水温：25摄氏度",
|
||||
},
|
||||
{
|
||||
datas: "每次刷牙正常所需的水量：1升",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateTitleTableData() {
|
||||
this.$set(this.TitleTableData, 0, {
|
||||
title: "你的表达式",
|
||||
text: `一个四口之家每周刷牙浪费水量=${this.model.question?.q4.answer || ""}`,
|
||||
});
|
||||
|
||||
this.$set(this.TitleTableData, 1, {
|
||||
title: "你的算式",
|
||||
text: `一个四口之家每周刷牙浪费水量=${this.model.question?.q5 || ""}`,
|
||||
});
|
||||
},
|
||||
ColumnClass({row,column,rowIndex,columnIndex}){
|
||||
if(columnIndex === 0){
|
||||
return 'BlueBackground';
|
||||
}else if (columnIndex === 1){
|
||||
return 'LightBlueBackground';
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
this.updateTitleTableData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
TitleTableData: {
|
||||
handler(val) {
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
|
||||
.Q6Table {
|
||||
margin-top:15px;
|
||||
margin-bottom:15px;
|
||||
|
||||
.el-table__cell {
|
||||
color: #111;
|
||||
font-size: 21px;
|
||||
white-space: pre-line;
|
||||
border-right: 1px solid #111 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.BlueBackground{
|
||||
background-color: #00b0f0;
|
||||
.cell{
|
||||
color:#111;
|
||||
}
|
||||
}
|
||||
.LightBlueBackground{
|
||||
background-color: #deebf7;
|
||||
.cell{
|
||||
color:#111;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
|
||||
|
||||
|
||||
<el-row v-show="currentPage == 8 || currentPage == 9">
|
||||
<div class="pink fullHeight"
|
||||
|
||||
style="font-size:1.6vw; line-height: 40px;border:2px solid rgb(132, 60, 11);padding: 5px;box-sizing: border-box;border-radius: 30px;margin: 5px auto;width: 95%;">
|
||||
<strong>科学研究显示：</strong>
|
||||
蚂蚁是通过身体表面来进行呼吸的。一只蚂蚁每秒钟每立方厘米身体消耗的氧气为20毫升，而每秒钟每平方厘米外表皮可以吸收的氧气为5毫升。如果一只蚂蚁每秒钟消耗的氧气量大于吸收的氧气量，那么就无法生存。
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:40%;">
|
||||
<TABLE :height="'350px'" :Data="this.model.question.q3"/>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:30%">
|
||||
<el-col :span="8" class="Q5ColItemLeft FlexCenter " >
|
||||
这只巨型蚂蚁每秒钟消耗氧气量的表达式
|
||||
</el-col>
|
||||
<el-col :span="16" class="FlexCenter Q5ColItemRight">
|
||||
{{ this.model.question.q6.answer }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TABLE from '../../components/DataTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TABLE,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.Q5ColItemLeft{
|
||||
background-color: #00B0F0;
|
||||
height:100%;
|
||||
font-size:22px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
.Q5ColItemRight{
|
||||
background-color: #DEEBF7;
|
||||
height:100%;
|
||||
font-size:20px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
|
||||
<el-row>
|
||||
<div class="pink fullHeight"
|
||||
|
||||
style="font-size:1.6vw; line-height: 40px;border:2px solid rgb(132, 60, 11);padding: 5px;box-sizing: border-box;border-radius: 30px;margin: 5px auto;width: 95%;">
|
||||
<strong>科学研究显示：</strong>
|
||||
蚂蚁是通过身体表面来进行呼吸的。一只蚂蚁每秒钟每立方厘米身体消耗的氧气为20毫升，而每秒钟每平方厘米外表皮可以吸收的氧气为5毫升。如果一只蚂蚁每秒钟消耗的氧气量大于吸收的氧气量，那么就无法生存。
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 10%;margin-top: 15px;">
|
||||
<div class="fullHeight FlexCenter Q5ColItemLeft" style="font-size:1.6vw;">你的计算结果</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 50%">
|
||||
<el-col :span="12" class="Q5ColItemLeft FlexCenter halfHeight" style="font-size:1.6vw;">
|
||||
这只巨型蚂蚁每秒钟吸收氧气量
|
||||
</el-col>
|
||||
<el-col :span="12" class="FlexCenter Q5ColItemRight halfHeight">
|
||||
{{ this.model.question.q4 }} （毫升）
|
||||
</el-col>
|
||||
<el-col :span="12" class="Q5ColItemLeft FlexCenter halfHeight" style="font-size:1.6vw;">
|
||||
这只巨型蚂蚁每秒钟消耗氧气量
|
||||
</el-col>
|
||||
<el-col :span="12" class="FlexCenter Q5ColItemRight halfHeight">
|
||||
{{ this.model.question.q6.result }} （毫升）
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.halfHeight {
|
||||
height: 40% !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
|
||||
<el-row style="height:10%;" class="FlexCenter">
|
||||
<div class="titleBox" style="height:85%;">第1题【单选题】</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:40% " class="FlexCenter lightBlue">
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
请根据收集到的资料，你认为可以如何判断这样的巨型蚂蚁是否存在呢？ <br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height:50%;" class="FlexCenter">
|
||||
<el-radio-group v-model="model.question.q1">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in problems"
|
||||
:key="index"
|
||||
:label="item.selection"
|
||||
border
|
||||
class="Q1radioItem"
|
||||
>
|
||||
<span class="radioText">{{ item.selection }}. {{ item.text }}</span>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
problems: [
|
||||
{ selection: "A", text: "计算巨型蚂蚁每秒钟消耗的氧气量。" },
|
||||
{ selection: "B", text: "计算巨型蚂蚁每秒钟吸收的氧气量。" },
|
||||
{ selection: "C", text: "比较普通蚂蚁吸收与消耗的氧气量。" },
|
||||
{ selection: "D", text: "比较巨型蚂蚁吸收与消耗的氧气量。" },
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.Q1radioItem {
|
||||
background-color: #e2f0d9;
|
||||
border: 1px solid #111;
|
||||
width: 100%;
|
||||
.el-radio-button__inner {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.radioText {
|
||||
font-size: 22px;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row style="height: 10%" class="FlexCenter">
|
||||
<div class="titleBox" style="height:85%;">第2题【单选题】</div>
|
||||
</el-row>
|
||||
<el-row style="height:20%" class="pink">
|
||||
<div class="FlexCenter fullHeight" style="font-size:1.6vw;margin-left:5px;line-height: 50px;">
|
||||
左侧是可以多角度观察的立体图形。你可以点击下方选择选择立体图形，并通过拖动立体图形从多个角度进行观察。
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row style="height: 30%" class="FlexCenter lightBlue">
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
请根据收集到的资料，选择你认为最符合巨型蚂蚁的立体图形。
|
||||
<br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 30%; background-color:#80C48A;" class="Q2Board">
|
||||
|
||||
<el-row class="Q2Board_title FlexCenter" >
|
||||
<div>供选择的立体图形</div>
|
||||
</el-row>
|
||||
|
||||
<el-row class="Q2Board_group">
|
||||
|
||||
<el-radio-group v-model="selected" class="fullHeight fullWidth">
|
||||
<el-radio-button v-for="(item,index) in choose" :key="index" :label="item.value" class="Q2Board_group_item lightGreen">
|
||||
{{ item.text }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
</el-row>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
choose: [
|
||||
{text:'正方体1',value:"square1"},
|
||||
{text:'长方体1',value:"cuboid1"},
|
||||
{text:'圆柱1',value:"cylinder1"},
|
||||
{text:'正方体2',value:"square2"},
|
||||
{text:'长方体2',value:"cuboid2"},
|
||||
{text:'圆柱2',value:"cylinder2"},
|
||||
],
|
||||
selected:""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
selected:{
|
||||
handler(val) {
|
||||
this.model.question.q2=val;
|
||||
this.$bus.$emit('changeChoose',val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
if(this.model.question.q2){
|
||||
this.selected = this.model.question.q2;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.Q2radioItem {
|
||||
background-color: #e2f0d9;
|
||||
border: 1px solid #111;
|
||||
width: 100%;
|
||||
.el-checkbox-button__inner {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.radioText {
|
||||
font-size: 22px;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
.Q2Board{
|
||||
|
||||
&_title{
|
||||
background-color: #92D050;
|
||||
height:40%;
|
||||
border:1px solid #000;
|
||||
font-size:33px;
|
||||
}
|
||||
&_group{
|
||||
height:90%;
|
||||
|
||||
&_item{
|
||||
border:1px solid #000;
|
||||
width: 32.95%;
|
||||
height: 50%;
|
||||
|
||||
.el-radio-button__inner{
|
||||
width:100%;
|
||||
height:100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
background-color: #E2F0D9;
|
||||
flex-wrap: wrap;
|
||||
color: #000;
|
||||
font-size: 25px;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,344 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row class="FlexCenter" style="height: 10%">
|
||||
<div class="titleBox">第3题【操作题、单选题】</div>
|
||||
</el-row>
|
||||
|
||||
<el-row class="FlexCenter lightBlue" style="">
|
||||
<el-row style="height: 100%;padding-top: 30px;padding-bottom: 30px;padding-left: 10px;padding-right: 10px;" class="">
|
||||
<p class="FlexCenter fullHeight borderRadius" style="font-size: 1.6vw;line-height: 50px;">
|
||||
蚂蚁的外表皮是指包裹身体最外层皮肤。请根据你选择的立体图形，选择表示这只巨型蚂每秒钟蚁吸收氧气量的表达式。
|
||||
|
||||
<br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
|
||||
|
||||
</p>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
<div style="width: 98%;margin: auto; background-color: rgb(146,208,80);
|
||||
font-size: 1.2vw;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-right: 2px solid black;border-top: 2px solid black;border-left: 2px solid black;"
|
||||
>
|
||||
|
||||
这只巨型蚂蚁每秒钟吸收氧气量
|
||||
=
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div style="width: 98%;margin:auto;border: 2px solid black;height: 100px;display: flex;box-sizing: border-box;">
|
||||
|
||||
|
||||
<div style="width: 58%;background-color: rgb(226, 240, 217);
|
||||
display: flex;align-items: center;
|
||||
border-right: 2px solid black;">
|
||||
<el-select style="width: 100%;font-size: 100px;" v-model="q3Choose.lv"
|
||||
|
||||
placeholder="请选择">
|
||||
<el-option
|
||||
style="font-size: 1.2vw;"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="width: 14.5%;background-color: rgb(226, 240, 217);
|
||||
display: flex;align-items: center;
|
||||
border-right: 2px solid black;">
|
||||
<el-select style="width: 100%;" v-model="q3Choose.cv" placeholder="请选择">
|
||||
<el-option
|
||||
style="font-size: 1.2vw;"
|
||||
v-for="item in mathOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="width: 28%;background-color: rgb(226, 240, 217);
|
||||
display: flex;align-items: center;
|
||||
border-right: 2px solid black;">
|
||||
<el-select style="width: 100%;" v-model="q3Choose.rv" placeholder="请选择">
|
||||
<el-option
|
||||
style="font-size: 1.2vw;"
|
||||
v-for="item in lastOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <el-row style="height: 60%" class="DarkGreen">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
class="Q3TableStyle FlexAutoTable BlackTableBorder"
|
||||
max-height="505px"
|
||||
>
|
||||
<el-table-column
|
||||
prop="shape"
|
||||
label="形状"
|
||||
align="center"
|
||||
min-width="50%"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="size"
|
||||
label="尺寸"
|
||||
align="center"
|
||||
min-width="170%"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column label="数量" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number
|
||||
v-model="scope.row.num"
|
||||
:min="0"
|
||||
:max="10"
|
||||
size="small"
|
||||
></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
lastOptions:[
|
||||
|
||||
],
|
||||
mathOptions: [
|
||||
{
|
||||
value: '0',
|
||||
label: '+'
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '—'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '×'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '÷'
|
||||
}],
|
||||
options: [{
|
||||
value: '0',
|
||||
label: '每秒钟每立方厘米身体消耗的氧气'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '每秒钟每平方厘米外表皮可以吸收的氧气'
|
||||
}],
|
||||
q3Choose:{
|
||||
lv:'',
|
||||
cv:'',
|
||||
rv:''},
|
||||
tableData: [
|
||||
{ shape: "正方形1", size: "边长=100厘米", num: 0 },
|
||||
{ shape: "正方形2", size: "边长=200厘米", num: 0 },
|
||||
{ shape: "正方形3", size: "边长=400厘米", num: 0 },
|
||||
{ shape: "正方形4", size: "边长=800厘米", num: 0 },
|
||||
{ shape: "长方形1", size: "长=800厘米，宽=100厘米", num: 0 },
|
||||
{ shape: "长方形2", size: "长=800厘米，宽=200厘米", num: 0 },
|
||||
{ shape: "长方形3", size: "长=800厘米，宽=600厘米", num: 0 },
|
||||
{ shape: "长方形4", size: "长=1200厘米，宽=800厘米", num: 0 },
|
||||
{ shape: "圆形1", size: "周长=600厘米，面积=30000平方厘米", num: 0 },
|
||||
{ shape: "圆形2", size: "周长=1200厘米，面积=120000平方厘米", num: 0 },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.$bus.$on('changeChooseQ3',(val)=>{
|
||||
this.q3Choose.rv = ''
|
||||
this.q3Choose.lv = ''
|
||||
this.q3Choose.cv = ''
|
||||
var name = val == 'square1' ? '正方体1' : val == 'square2' ? '正方体2' : val == 'cuboid1' ? '长方体1' : val == 'cuboid2' ? '长方体2' : val == 'cylinder1' ? '圆柱1' : '圆柱2'
|
||||
var op = [
|
||||
{
|
||||
value: '0',
|
||||
label: name + '的表面积'
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: name + '的体积'
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
if(val == 'square1' || val == 'square2' || val == 'cuboid1' || val == 'cuboid2'){
|
||||
op.push({
|
||||
value:'2',
|
||||
label :'黄色正方形的边长'
|
||||
})
|
||||
|
||||
if(val == 'cuboid1' || val == 'cuboid2'){
|
||||
op.push({
|
||||
value:'3',
|
||||
label :'红色线段的长度'
|
||||
})
|
||||
|
||||
}
|
||||
}else {
|
||||
op.push({
|
||||
value:'3',
|
||||
label :'红色线段的长度'
|
||||
})
|
||||
|
||||
op.push({
|
||||
|
||||
value:'4',
|
||||
label: '蓝色线段的长度'
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
this.lastOptions = op
|
||||
})
|
||||
if (
|
||||
this.model.question.q2 === "cylinder1" ||
|
||||
this.model.question.q2 === "cylinder2"
|
||||
) {
|
||||
this.tableData = [
|
||||
{ shape: "长方形1", size: "长=800厘米，宽=100厘米", num: 0 },
|
||||
{ shape: "长方形2", size: "长=800厘米，宽=200厘米", num: 0 },
|
||||
{ shape: "长方形3", size: "长=800厘米，宽=600厘米", num: 0 },
|
||||
{ shape: "长方形4", size: "长=1200厘米，宽=800厘米", num: 0 },
|
||||
{ shape: "圆形1", size: "周长=600厘米，面积=30000平方厘米", num: 0 },
|
||||
{ shape: "圆形2", size: "周长=1200厘米，面积=120000平方厘米", num: 0 },
|
||||
];
|
||||
} else {
|
||||
this.tableData = [
|
||||
{ shape: "正方形1", size: "边长=100厘米", num: 0 },
|
||||
{ shape: "正方形2", size: "边长=200厘米", num: 0 },
|
||||
{ shape: "正方形3", size: "边长=400厘米", num: 0 },
|
||||
{ shape: "正方形4", size: "边长=800厘米", num: 0 },
|
||||
{ shape: "长方形1", size: "长=800厘米，宽=100厘米", num: 0 },
|
||||
{ shape: "长方形2", size: "长=800厘米，宽=200厘米", num: 0 },
|
||||
{ shape: "长方形3", size: "长=800厘米，宽=600厘米", num: 0 },
|
||||
{ shape: "长方形4", size: "长=1200厘米，宽=800厘米", num: 0 },
|
||||
];
|
||||
}
|
||||
|
||||
if(this.model.question.q3.length > 0){
|
||||
const data = this.model.question.q3;
|
||||
|
||||
for(let i = 0; i < this.tableData.length; i++){
|
||||
|
||||
for(let j = 0; j < data.length; j++){
|
||||
if(this.tableData[i].shape === data[j].shape){
|
||||
this.tableData[i].num = data[j].num;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
|
||||
q3Choose:{
|
||||
handler(){
|
||||
if(this.model.question.q4.length > 0){
|
||||
this.$bus.$emit("qClear",4)
|
||||
this.$bus.$emit("changeTheQ4")
|
||||
}
|
||||
|
||||
this.model.question.q3 = this.q3Choose
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.Q3FlexBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.Q3radioItem {
|
||||
background-color: #e2f0d9;
|
||||
border: 1px solid #111;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
|
||||
.el-radio-button__inner {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.radioText {
|
||||
font-size: 21px;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
.lightPink {
|
||||
background-color: #fbe5d6;
|
||||
}
|
||||
|
||||
.borderRadius {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.Q3TableStyle {
|
||||
.is-leaf {
|
||||
background-color: #92d050 !important;
|
||||
color: #111;
|
||||
font-size: 25px;
|
||||
width: auto;
|
||||
}
|
||||
.el-table__cell {
|
||||
background-color: #e2f0d9;
|
||||
color: #111;
|
||||
font-size: 22px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
}
|
||||
:deep(.el-input__inner){
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,525 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row style="height: 10%" class="FlexCenter">
|
||||
<div class="titleBox">第4题【填空题】</div>
|
||||
</el-row>
|
||||
|
||||
<el-row class="FlexCenter lightBlue">
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
美美列出了计算这只巨型蚂蚁每秒钟吸收氧气量的算式，请你帮助她计算一下并使用虚拟键盘将计算结果输入在下面的作答框中。
|
||||
<br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
|
||||
<div style="width: 98%;margin: auto;font-size: 1.6vw;border: 2px solid black;box-sizing: border-box;">
|
||||
<div style="width: 100%;border-bottom: 2px solid black;display: flex;">
|
||||
<div style="width: 55%;background-color: rgb(146, 208, 80);padding: 10px;box-sizing: border-box;text-align: center;border-right: 2px solid black;">
|
||||
这只巨型蚂蚁每秒钟吸收氧气量=
|
||||
</div>
|
||||
<div style="width: 45%;padding: 10px;background-color: rgb(226, 240, 217);box-sizing: border-box;">
|
||||
{{model.question.q3.lv == 0 ? 20 : 5}} {{model.question.q3.cv == 0 ? '+' : model.question.q3.cv == 1 ? '-' : model.question.q3.cv == 2 ? '×' : '÷'}}
|
||||
{{model.question.q3.rv == 0 ? (model.question.q2 == "square1" ? 960000 : model.question.q2 == "square2" ? 3840000 : model.question.q2 == "cuboid1" ? 720000 : model.question.q2 == "cuboid2" ? 340000 : model.question.q2 == "cylinder1" ? Math.round(Math.PI * 400 * 800 * 100)/100 : Math.round(Math.PI * 200 * 800 * 100) / 100) :
|
||||
model.question.q3.rv == 1 ? (model.question.q2 == "square1" ? 400 * 400 * 400 : model.question.q2 == "square2" ? 800 * 800 * 800 : model.question.q2 == "cuboid1" ? 200 * 200 * 800 : model.question.q2 == "cuboid2" ? 100 * 100 * 800 : model.question.q2 == "cylinder1" ? Math.round(Math.PI * 200 * 200 * 800 * 100)/100 : Math.round(Math.PI * 100 * 100 * 800 * 100)/100 ) : model.question.q3.rv == 2 ?
|
||||
(model.question.q2 == "square1" ? 400 : model.question.q2 == "square2" ? 800 : model.question.q2 == "cuboid1" ? 200 : 100 ) : model.question.q3.rv == 3 ? 800 : (model.question.q2 == "cylinder1" ? 400 : 200)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%;display: flex;">
|
||||
<div style="width: 55%;background-color: rgb(146, 208, 80);padding: 10px;box-sizing: border-box;text-align: center;border-right: 2px solid black;">
|
||||
计算结果
|
||||
</div>
|
||||
<div style="width: 45%;padding: 10px;background-color: rgb(226, 240, 217);
|
||||
display: flex;align-items: center;
|
||||
box-sizing: border-box;cursor: pointer;"
|
||||
@click="focusIt">
|
||||
<!-- <div
|
||||
style="
|
||||
width: 60%;height: 100%;overflow: auto;
|
||||
padding: 1px;box-sizing: border-box;
|
||||
display: flex;align-items: center;"
|
||||
ref="scrollRef"
|
||||
:style="{backgroundColor: isFocus ? 'white' : 'none'}">
|
||||
<p>{{q4}} <span v-show="isFocus" class="blink" style="border-left: 2px solid black;"></span></p>
|
||||
</div> -->
|
||||
<el-input readonly v-model="q4" style="width: 50%;" placeholder="请输入内容"></el-input>
|
||||
（毫升）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="width: 60%;margin:10px auto 0px;border: 2px solid black;">
|
||||
<div style="font-weight: bold;
|
||||
font-size: 1.3vw;
|
||||
background-color: rgb(146, 208, 80);padding:10px;box-sizing: border-box;text-align: center;">
|
||||
虚拟键盘
|
||||
</div>
|
||||
<div style="width: 100%;display: flex;flex-wrap: wrap;">
|
||||
<div
|
||||
@click="chooseIt(item,index)"
|
||||
v-for="(item,index) in keyBoards" :style="{width: '33.3%',textAlign: 'center',padding: '10px',boxSizing: 'border-box',borderTop: '2px solid black',borderLeft: item == '1' || item == '4' || item == '7' || item == '清空' ? '0px' : '2px solid black',backgroundColor: 'rgb(226, 240, 217)',cursor:'pointer'}" :key="index">
|
||||
{{item}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- @dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave" -->
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFocus:false,
|
||||
q4:'',
|
||||
keyBoards:['1','2','3','4','5','6','7','8','9','清空','0','.'],
|
||||
model: {},
|
||||
history: [""],
|
||||
historyText: [""],
|
||||
inputText: "",
|
||||
idCounter: 0,
|
||||
init: false,
|
||||
ReasonableExpression: true,
|
||||
previewElement: false,
|
||||
dragCounter: 0,
|
||||
test: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
focusIt(){
|
||||
this.isFocus = true
|
||||
},
|
||||
chooseIt(item,index){
|
||||
if(index == 9){
|
||||
this.q4 = ''
|
||||
}else{
|
||||
this.q4 += item
|
||||
|
||||
//let width = this.$refs.scrollRef.clientWidth;
|
||||
//判断内容超过一屏时：
|
||||
//let width = this.$refs.scrollRef.scrollWidth;
|
||||
|
||||
this.$refs.scrollRef.scrollLeft = this.$refs.scrollRef.scrollWidth
|
||||
|
||||
// this.$refs.scrollRef.scrollTo(width,0)
|
||||
|
||||
}
|
||||
},
|
||||
handleDrop(event) {
|
||||
event.preventDefault();
|
||||
|
||||
event.target.classList.remove("ActiveDropArea");
|
||||
event.target.classList.remove("LeaveDropArea");
|
||||
|
||||
const extraParam = event.dataTransfer.getData("extraParam");
|
||||
if (!event.target.classList.contains("drop-area")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!extraParam || extraParam !== "Q4LDraging!") {
|
||||
return;
|
||||
}
|
||||
if (this.previewElement === true && this.dragCounter !== 0) {
|
||||
this.undo();
|
||||
}
|
||||
this.dragCounter = 0;
|
||||
|
||||
this.previewElement = false;
|
||||
const text = event.dataTransfer.getData("text/plain");
|
||||
const dropArea = event.target;
|
||||
|
||||
if (this.isArithmeticSymbol(text)) {
|
||||
this.insertArithmeticSymbol(dropArea, event, text);
|
||||
} else {
|
||||
this.insertText(dropArea, event, text);
|
||||
}
|
||||
|
||||
this.updateInputText();
|
||||
|
||||
this.checkData();
|
||||
this.saveHistory(text, "add");
|
||||
},
|
||||
|
||||
saveHistory(text, type) {
|
||||
const dropArea = this.$el.querySelector(".drop-area");
|
||||
this.history.push(dropArea.innerHTML);
|
||||
this.historyText.push(text);
|
||||
},
|
||||
undo(type) {
|
||||
if (this.history.length > 1) {
|
||||
this.history.pop();
|
||||
this.historyText.pop();
|
||||
const dropArea = this.$el.querySelector(".drop-area");
|
||||
dropArea.innerHTML = this.history[this.history.length - 1];
|
||||
this.updateInputText();
|
||||
this.checkData();
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
const dropArea = this.$el.querySelector(".drop-area");
|
||||
dropArea.innerHTML = "";
|
||||
this.history = [""];
|
||||
this.historyText = [""];
|
||||
this.inputText = "";
|
||||
this.model.question.q4.applicable = false;
|
||||
|
||||
const textBlocks = this.$el.querySelectorAll(".text-block");
|
||||
textBlocks.forEach((textBlock) => textBlock.remove());
|
||||
},
|
||||
preventDelete(event) {
|
||||
if (event.key === "Backspace" || event.key === "Delete") {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
updateInputText() {
|
||||
const dropArea = this.$el.querySelector(".drop-area");
|
||||
const spans = dropArea.querySelectorAll("span");
|
||||
const data = Array.from(spans)
|
||||
.map((span) => span.textContent)
|
||||
.join(" ");
|
||||
this.inputText = data.split(" ");
|
||||
this.test = data.split(" ");
|
||||
},
|
||||
|
||||
handleDragEnter(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (event.target.classList.contains("drop-area")) {
|
||||
if (this.dragCounter === 0) {
|
||||
const text = this.model.question.q4.preview;
|
||||
const dropArea = event.target;
|
||||
|
||||
if (this.isArithmeticSymbol(text)) {
|
||||
this.insertArithmeticSymbol(dropArea, event, text);
|
||||
} else {
|
||||
this.insertText(dropArea, event, text);
|
||||
}
|
||||
|
||||
this.previewElement = true;
|
||||
this.saveHistory();
|
||||
}
|
||||
this.dragCounter = 1;
|
||||
} else if (event.target.tagName === "span" && this.dragCounter === 1) {
|
||||
this.dragCounter = 2;
|
||||
}
|
||||
this.checkData();
|
||||
},
|
||||
handleDragLeave(event) {
|
||||
if (event.target.classList.contains("drop-area")) {
|
||||
if (!event.relatedTarget || !event.relatedTarget.closest(".drop-area")) {
|
||||
this.dragCounter = 0;
|
||||
|
||||
if (this.previewElement) {
|
||||
this.previewElement = false;
|
||||
this.undo();
|
||||
}
|
||||
}
|
||||
} else if (event.target.tagName === "SPAN" && this.dragCounter === 2) {
|
||||
this.dragCounter = 1;
|
||||
if (this.previewElement) {
|
||||
this.previewElement = false;
|
||||
this.undo();
|
||||
}
|
||||
} else {
|
||||
if (this.previewElement) {
|
||||
this.previewElement = false;
|
||||
this.undo();
|
||||
}
|
||||
}
|
||||
|
||||
this.checkData();
|
||||
},
|
||||
|
||||
isArithmeticSymbol(text) {
|
||||
return "+-×÷".includes(text);
|
||||
},
|
||||
isParenthesis(text) {
|
||||
return "()".includes(text);
|
||||
},
|
||||
NotText(text) {
|
||||
return "()+-×÷".includes(text);
|
||||
},
|
||||
isLamb(text, regex) {
|
||||
return regex.includes(text);
|
||||
},
|
||||
|
||||
createElement(tag, text, className) {
|
||||
const element = document.createElement(tag);
|
||||
element.textContent = text;
|
||||
element.dataset.id = this.idCounter++;
|
||||
element.classList.add(className);
|
||||
return element;
|
||||
},
|
||||
|
||||
insertAtPosition(event, element, dropArea) {
|
||||
const range = document.caretRangeFromPoint(event.clientX, event.clientY);
|
||||
if (range) {
|
||||
const startContainer = range.startContainer;
|
||||
let insertNode =
|
||||
startContainer.nodeType === 3 ? startContainer.parentElement : startContainer;
|
||||
|
||||
if (
|
||||
insertNode.classList.contains("text-block") ||
|
||||
insertNode.classList.contains("EmptyBlock")
|
||||
) {
|
||||
const rect = insertNode.getBoundingClientRect();
|
||||
const isLeftHalf = event.clientX - rect.left < rect.width / 2;
|
||||
|
||||
if (insertNode.classList.contains("EmptyBlock")) {
|
||||
insertNode.replaceWith(element);
|
||||
} else if (isLeftHalf) {
|
||||
insertNode.insertAdjacentElement("beforebegin", element);
|
||||
} else {
|
||||
insertNode.insertAdjacentElement("afterend", element);
|
||||
}
|
||||
} else {
|
||||
range.insertNode(element);
|
||||
}
|
||||
} else {
|
||||
dropArea.appendChild(element);
|
||||
}
|
||||
},
|
||||
|
||||
insertArithmeticSymbol(dropArea, event, text) {
|
||||
const symbolSpan = this.createElement("span", text, "symbol-block");
|
||||
symbolSpan.classList.add("text-block");
|
||||
this.insertAtPosition(event, symbolSpan, dropArea);
|
||||
const createEmptyBlock = () => {
|
||||
return this.createElement("span", "□", "EmptyBlock");
|
||||
};
|
||||
|
||||
const prevElement = symbolSpan.previousElementSibling;
|
||||
const nextElement = symbolSpan.nextElementSibling;
|
||||
|
||||
if (
|
||||
!prevElement ||
|
||||
(!prevElement.classList.contains("EmptyBlock") &&
|
||||
this.isArithmeticSymbol(prevElement.innerText))
|
||||
) {
|
||||
// symbolSpan.insertAdjacentElement("beforebegin", createEmptyBlock());
|
||||
}
|
||||
if (
|
||||
!nextElement ||
|
||||
(!nextElement.classList.contains("EmptyBlock") &&
|
||||
this.isArithmeticSymbol(nextElement.innerText))
|
||||
) {
|
||||
// symbolSpan.insertAdjacentElement("afterend", createEmptyBlock());
|
||||
}
|
||||
},
|
||||
|
||||
insertText(dropArea, event, text) {
|
||||
const textSpan = this.createElement("span", text, "text-block");
|
||||
|
||||
this.insertAtPosition(event, textSpan, dropArea);
|
||||
|
||||
if (
|
||||
textSpan.previousElementSibling &&
|
||||
textSpan.previousElementSibling.classList.contains("EmptyBlock")
|
||||
) {
|
||||
textSpan.previousElementSibling.replaceWith(textSpan);
|
||||
} else if (
|
||||
textSpan.nextElementSibling &&
|
||||
textSpan.nextElementSibling.classList.contains("EmptyBlock")
|
||||
) {
|
||||
textSpan.nextElementSibling.replaceWith(textSpan);
|
||||
}
|
||||
},
|
||||
|
||||
checkData() {
|
||||
let checked = false;
|
||||
let stack = [];
|
||||
this.model.question.q4.applicable = false;
|
||||
|
||||
|
||||
if(this.inputText.length === 1 && this.inputText[0] === ""){
|
||||
checked = true;
|
||||
}
|
||||
else{
|
||||
for (let i = 0; i < this.inputText.length; i++) {
|
||||
if (this.isArithmeticSymbol(this.inputText[i])) {
|
||||
if (i == 0) {
|
||||
checked = true;
|
||||
break;
|
||||
} else {
|
||||
if (
|
||||
this.isArithmeticSymbol(this.inputText[i - 1]) ||
|
||||
this.isArithmeticSymbol(this.inputText[i + 1]) ||
|
||||
i === this.inputText.length - 1
|
||||
) {
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (this.inputText[i] === "(") {
|
||||
stack.push("(");
|
||||
} else if (this.inputText[i] === ")") {
|
||||
if (stack.length === 0) {
|
||||
checked = true;
|
||||
break;
|
||||
} else {
|
||||
const lastChar = stack.pop();
|
||||
if (lastChar !== "(") {
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (i !== 0 && i !== this.inputText.length - 1) {
|
||||
if (
|
||||
!this.NotText(this.inputText[i - 1]) ||
|
||||
!this.NotText(this.inputText[i + 1])
|
||||
) {
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
} else if (i !== 0 && i === this.inputText.length - 1) {
|
||||
if (!this.NotText(this.inputText[i - 1])) {
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (stack.length !== 0) {
|
||||
checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (checked !== true) {
|
||||
this.model.question.q4.applicable = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.$bus.$on('changeChoose',()=>{
|
||||
|
||||
this.q4 = ""
|
||||
})
|
||||
|
||||
this.$bus.$on('changeTheQ4',()=>{
|
||||
this.q4 = ""
|
||||
})
|
||||
// const dropArea = this.$el.querySelector(".drop-area");
|
||||
// if (this.model.question.q4.answer !== "") {
|
||||
// this.historyText = this.model.question.q4.history;
|
||||
// this.historyText.forEach((text) => {
|
||||
// const span = document.createElement("span");
|
||||
// span.textContent = text;
|
||||
// span.dataset.id = this.idCounter++;
|
||||
// span.classList.add("text-block");
|
||||
// if (text.length === 1 && text !== ")" && text !== "(") {
|
||||
// span.classList.add("symbol-block");
|
||||
// }
|
||||
|
||||
// dropArea.appendChild(span);
|
||||
// this.saveHistory();
|
||||
// });
|
||||
// }
|
||||
// this.init = true;
|
||||
// this.updateInputText();
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
q4:{
|
||||
handler(){
|
||||
this.model.question.q4 = this.q4
|
||||
}
|
||||
},
|
||||
inputText(val) {
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.blink {
|
||||
animation: blink-animation 1s steps(1, start) infinite;
|
||||
}
|
||||
|
||||
@keyframes blink-animation {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.drop-area {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
min-height: 30px;
|
||||
background-color: #f9f9f9;
|
||||
max-height:200px;
|
||||
overflow: auto;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 3px 5px;
|
||||
background-color: #e2f0d9;
|
||||
color: #000000;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 21px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.EmptyBlock {
|
||||
display: inline-block;
|
||||
margin: 1px 5px;
|
||||
background-color: #fac2fa !important;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.symbol-block {
|
||||
background-color: #fbe5d6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.Q5Row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.dropTitle {
|
||||
margin-top: 15px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f9f9f9;
|
||||
font-size: 22px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.WaringBox {
|
||||
background-color: #ffff00;
|
||||
border-radius: 50%;
|
||||
height: 90px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,289 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row style="height: 10%">
|
||||
<div class="titleBox">第5题【操作题】</div>
|
||||
</el-row>
|
||||
|
||||
<el-row class="FlexCenter lightBlue">
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
请拖动左侧的信息和运算关系到下方的作答框中，组合出这只巨型蚂每秒钟蚁消耗氧气量的表达式。
|
||||
|
||||
<br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<div class="dropTitle" style="margin-top:0px;background-color: #92d14f;border-right: 2px solid black;border-top: 2px solid black; border-left: 2px solid black;">这只巨型蚂蚁每秒钟消耗氧气量=</div>
|
||||
|
||||
<div id="receiveContainer" @click="getNewDiv" style="cursor: pointer;width: 100%;
|
||||
height: 320px;background-color: white;display: flex;border:2px solid black; box-sizing: border-box;">
|
||||
|
||||
</div>
|
||||
<!-- <div
|
||||
class="drop-area"
|
||||
contenteditable="true"
|
||||
@drop="handleDrop"
|
||||
|
||||
@keypress.prevent
|
||||
@keydown.prevent="preventDelete"
|
||||
></div> -->
|
||||
|
||||
|
||||
<!-- @dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave" -->
|
||||
<div style="display: flex;justify-content: center;align-items: center;margin-top: 5px;">
|
||||
|
||||
<div style="height: 45px;width: 120px;border: 2px solid black;line-height: 45px;text-align: center;
|
||||
background-color: rgb(226,240,217);cursor: pointer;" @click="clearAll">
|
||||
清空作答
|
||||
</div>
|
||||
<div style="height: 50px;width:55px;border: 2px solid black;text-align: center;
|
||||
background-color: rgb(226,240,217);margin-left: 50px;" >
|
||||
<img @click="deleteIt" src="../../assets/img/rubbishcan.png" style="height: 100%;width: 100%;cursor: pointer;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BOARD from "../../components/Computer.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BOARD,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
inputData: "",
|
||||
selected: -2,
|
||||
tableData: [],
|
||||
applicable: false,
|
||||
currentAnswer: "",
|
||||
currentArray: [],
|
||||
init: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
addedStyleTableData() {
|
||||
return this.tableData.map((item) => {
|
||||
let style = ["FlexCenter"];
|
||||
if (item.type === "text") {
|
||||
style.push("QR5Text");
|
||||
} else if (item.type === "num") {
|
||||
style.push("QR5Num");
|
||||
} else {
|
||||
style.push("QR5Symbol");
|
||||
}
|
||||
|
||||
if (item.index === this.selected) {
|
||||
style.push("Active");
|
||||
}
|
||||
|
||||
return { ...item, style };
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getNewDiv(e){
|
||||
|
||||
this.$bus.$emit("cancelMoving",e.clientX,e.clientY)
|
||||
},
|
||||
clearAll(){
|
||||
|
||||
this.$bus.$emit("clearAllCreateDiv")
|
||||
|
||||
},
|
||||
deleteIt(){
|
||||
this.$bus.$emit("beThrow")
|
||||
|
||||
},
|
||||
AddChar(value) {
|
||||
const data = this.tableData;
|
||||
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// if (data[i].id === this.selected && this.tableData[i].num.length < 9) {
|
||||
// this.tableData[i].hasNum = true;
|
||||
// this.tableData[i].num += value;
|
||||
// }
|
||||
// }
|
||||
|
||||
this.tableData[this.selected].hasNum = true;
|
||||
this.tableData[this.selected].num += value;
|
||||
},
|
||||
DelChar() {
|
||||
const data = this.tableData; // Use tableData consistently
|
||||
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// if (data[i].id === this.selected) {
|
||||
// if (data[i].num.length > 1) {
|
||||
// data[i].num = data[i].num.slice(0, -1); // Use slice with -1 to remove the last character
|
||||
// } else {
|
||||
// data[i].num = "";
|
||||
// data[i].hasNum = false;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
const pos = this.selected;
|
||||
|
||||
if (data[pos].num.length > 1) {
|
||||
data[pos].num = data[pos].num.slice(0, -1);
|
||||
} else {
|
||||
data[pos].num = "";
|
||||
data[pos].hasNum = false;
|
||||
}
|
||||
},
|
||||
SelectThis(item, index) {
|
||||
if (item.type === "text") {
|
||||
this.selected = index;
|
||||
}
|
||||
},
|
||||
checkAnswer() {
|
||||
let res;
|
||||
let equation = "";
|
||||
|
||||
const data = this.tableData;
|
||||
let EmptyNumber = false;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].num === "") {
|
||||
EmptyNumber = true;
|
||||
this.inputData = "不合理的结果";
|
||||
this.applicable = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (data[i].num === "×") {
|
||||
equation += "*";
|
||||
} else if (data[i].num === "÷") {
|
||||
equation += "/";
|
||||
} else {
|
||||
equation += data[i].num;
|
||||
}
|
||||
}
|
||||
|
||||
res = eval(equation);
|
||||
|
||||
if (typeof res !== "number" || isNaN(res) || !isFinite(res)) {
|
||||
this.inputData = "不合理的结果";
|
||||
this.applicable = false;
|
||||
} else {
|
||||
this.inputData = res;
|
||||
this.applicable = true;
|
||||
}
|
||||
this.model.question.q5.history = this.tableData;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
inputData: {
|
||||
handler(val) {
|
||||
if (this.init) {
|
||||
this.inputData = val;
|
||||
this.model.question.q5.answer = this.inputData;
|
||||
this.model.question.q5.applicable = this.applicable;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$bus.$on("isFullAndclearAll",()=>{
|
||||
this.clearAll()
|
||||
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.inputBox {
|
||||
.el-input__inner {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.BoardBody {
|
||||
height: 100%;
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
.Q5BTN {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e2f0d9;
|
||||
border: 1px solid #000;
|
||||
font-size: 23px;
|
||||
color: #111;
|
||||
}
|
||||
.Q5TABLE {
|
||||
.is-leaf {
|
||||
background-color: #92d050 !important;
|
||||
color: #111;
|
||||
font-size: 23px;
|
||||
}
|
||||
.el-table__cell {
|
||||
background-color: #e2f0d9;
|
||||
color: #111;
|
||||
font-size: 15px;
|
||||
min-width: 115px !important;
|
||||
}
|
||||
.gutter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.FLEX {
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.QR5Text,
|
||||
.QR5Symbol,
|
||||
.QR5Num {
|
||||
border: 1px solid #111;
|
||||
}
|
||||
|
||||
.QR5Text {
|
||||
background-color: #e2f0d9;
|
||||
color: red;
|
||||
}
|
||||
.QR5Symbol {
|
||||
background-color: #deebf7;
|
||||
|
||||
:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.QR5Num {
|
||||
background-color: #deebf7;
|
||||
}
|
||||
|
||||
.QR5Text:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.QR5Num,
|
||||
.QR5Symbol:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.Active {
|
||||
background-color: #ccc;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,534 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row style="height: 10%">
|
||||
<div class="titleBox">第6题【填空题】</div>
|
||||
</el-row>
|
||||
|
||||
<el-row class="FlexCenter lightBlue">
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
请你根据左侧的信息，点击表达式中的文字部分，使用虚拟键盘输入相应的数字。
|
||||
|
||||
<br />
|
||||
点击“开始计算”即可得出计算结果。
|
||||
<br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<div style="width: 98%;margin: 5px auto 0px;border: 2px solid black;box-sizing: border-box;">
|
||||
<div style="background-color: rgb(146, 208, 80);text-align: center;padding: 5px;box-sizing: border-box;">
|
||||
这只巨型蚂蚁每秒钟消耗氧气量=
|
||||
|
||||
</div>
|
||||
<div style="width: 100%;display: flex;flex-wrap: wrap;">
|
||||
|
||||
<div @click="changeStatus(item,index)" :style="{cursor:item.match(/[\（\）\+\-\×\÷]/) != null ? 'default' : 'pointer',backgroundColor: item.match(/[\（\）\+\-\×\÷]/) != null ? '#fbe5d7' : 'rgb(226, 240, 217)'}" style="padding: 2px;box-sizing: border-box;border: 1px solid black;display: flex;align-items: center;" v-for="(item,index) in answerArr">
|
||||
<p v-show="!showArr[index]">{{item}}</p>
|
||||
<el-input readonly v-show="showArr[index]" v-model="q6Arr[index]" :placeholder="item"></el-input>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="width: 100%;display: flex;">
|
||||
<div style="width:50%;background-color: rgb(146, 208, 80);
|
||||
text-align: center;padding:2px;box-sizing: border-box;
|
||||
border-top: 2px solid black;border-right: 2px solid black;">
|
||||
|
||||
计算结果
|
||||
|
||||
|
||||
</div>
|
||||
<div style="width:50%;
|
||||
text-align: center;
|
||||
border-top: 2px solid black;padding: 2px;box-sizing: border-box;">
|
||||
{{ result}} （毫升）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 98%;margin: auto;display: flex;align-items: center;justify-content: space-around;margin-top: 5px;">
|
||||
<div style="width: 40%;border: 2px solid black;">
|
||||
<div style="font-weight: bold;
|
||||
font-size: 1.3vw;
|
||||
background-color: rgb(146, 208, 80);padding:2px;box-sizing: border-box;text-align: center;">
|
||||
虚拟键盘
|
||||
</div>
|
||||
<div style="width: 100%;display: flex;flex-wrap: wrap;">
|
||||
|
||||
<div
|
||||
@click="chooseIt(item,index)"
|
||||
v-for="(item,index) in keyBoards" :style="{width: '33.3%',textAlign: 'center',padding:answerArr.length > 12 ? '1px' : '5px',boxSizing: 'border-box',borderTop: '2px solid black',borderLeft: item == '1' || item == '4' || item == '7' || item == '清空' ? '0px' : '2px solid black',backgroundColor: 'rgb(226, 240, 217)',cursor:'pointer'}" :key="index">
|
||||
{{item}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
@click="caculateIt" style="width: 30%;height:50px;
|
||||
text-align: center;line-height: 50px;
|
||||
background-color: rgb(226, 240, 217);border: 2px solid black;font-size: 1.6vw;font-weight: bold;cursor: pointer;">
|
||||
|
||||
开始计算
|
||||
</div>
|
||||
</div>
|
||||
<!-- <el-row style="height: 5%">
|
||||
<el-input v-model="inputData" :disabled="true" class="inputBox LightGreen">
|
||||
<template slot="prepend">
|
||||
<span style="font-size: 20px; color: #000"> 计算结果=</span>
|
||||
</template>
|
||||
<template slot="append"
|
||||
><span style="font-size: 20px; color: #000">(毫升)</span></template
|
||||
>
|
||||
</el-input>
|
||||
</el-row>
|
||||
|
||||
<el-row class="BoardBody overFlow FLEX" style="height: 20%">
|
||||
<el-col :span="6" class="QR5Num"> 这只巨型蚂蚁每秒钟吸收氧气量= </el-col>
|
||||
<el-col
|
||||
v-for="item in addedStyleTableData"
|
||||
:key="item.index"
|
||||
:span="6"
|
||||
:class="item.style"
|
||||
@click.native="SelectThis(item, item.index)"
|
||||
>
|
||||
{{ item.hasNum === true ? item.num : item.text }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 30%" class="FlexCenter">
|
||||
<el-col :span="18">
|
||||
<BOARD
|
||||
:type="'NumBoard'"
|
||||
:size="'15px'"
|
||||
@PushChar="AddChar"
|
||||
@DeleteChar="DelChar"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button class="Q5BTN FlexCenter" @click="checkAnswer">开始计算</el-button>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BOARD from "../../components/Computer.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BOARD,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result:'',
|
||||
currentShow:-1,
|
||||
showArr:[],
|
||||
q6Arr:[],
|
||||
answerArr:[],
|
||||
keyBoards:['1','2','3','4','5','6','7','8','9','清空','0','.'],
|
||||
model: {},
|
||||
inputData: "",
|
||||
selected: -2,
|
||||
tableData: [],
|
||||
applicable: false,
|
||||
currentAnswer: "",
|
||||
currentArray: [],
|
||||
init: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
addedStyleTableData() {
|
||||
return this.tableData.map((item) => {
|
||||
let style = ["FlexCenter"];
|
||||
if (item.type === "text") {
|
||||
style.push("QR5Text");
|
||||
} else if (item.type === "num") {
|
||||
style.push("QR5Num");
|
||||
} else {
|
||||
style.push("QR5Symbol");
|
||||
}
|
||||
|
||||
if (item.index === this.selected) {
|
||||
style.push("Active");
|
||||
}
|
||||
|
||||
return { ...item, style };
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
caculateIt(){
|
||||
|
||||
var isTrue = true
|
||||
for(var i = 0;i<this.answerArr.length;i++){
|
||||
if(this.answerArr[i].match(/[\（\）\+\-\×\÷]/) == null){
|
||||
|
||||
const regex = /^\d+\.\d+$/;
|
||||
|
||||
if(this.q6Arr[i].length == 0){
|
||||
isTrue = false
|
||||
this.$bus.$emit("changeP6Status",false)
|
||||
break
|
||||
}else if(!regex.test(this.q6Arr[i])){
|
||||
if(this.q6Arr[i].includes('.')){
|
||||
|
||||
isTrue = false
|
||||
this.$bus.$emit("changeP6Status",false)
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var result = ""
|
||||
if(isTrue){
|
||||
this.answerArr.forEach((item,index)=>{
|
||||
if(item.match(/[\（\）\+\-\×\÷]/) == null){
|
||||
|
||||
result+= this.q6Arr[index].replace(/^0+(?!$)/, '')
|
||||
|
||||
}else{
|
||||
result+=item
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
result = result.replaceAll('（','(')
|
||||
result = result.replaceAll('）',')')
|
||||
result = result.replaceAll('×','*')
|
||||
result = result.replaceAll('÷','/')
|
||||
this.result = Math.round(eval(result) * 100) / 100
|
||||
|
||||
this.$bus.$emit("changeP6Status",true)
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
chooseIt(item,index){
|
||||
|
||||
if(this.currentShow != -1){
|
||||
|
||||
|
||||
if(index == 9){
|
||||
this.$set(this.q6Arr,this.currentShow,'')
|
||||
}else{
|
||||
this.$set(this.q6Arr,this.currentShow,this.q6Arr[this.currentShow] += item)
|
||||
|
||||
|
||||
//let width = this.$refs.scrollRef.clientWidth;
|
||||
//判断内容超过一屏时：
|
||||
//let width = this.$refs.scrollRef.scrollWidth;
|
||||
|
||||
|
||||
// this.$refs.scrollRef.scrollTo(width,0)
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
changeStatus(item,index){
|
||||
if(item.match(/[\（\）\+\-\×\÷]/) == null){
|
||||
this.$set(this.showArr,index,true)
|
||||
this.currentShow = index
|
||||
}
|
||||
},
|
||||
AddChar(value) {
|
||||
const data = this.tableData;
|
||||
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// if (data[i].id === this.selected && this.tableData[i].num.length < 9) {
|
||||
// this.tableData[i].hasNum = true;
|
||||
// this.tableData[i].num += value;
|
||||
// }
|
||||
// }
|
||||
|
||||
this.tableData[this.selected].hasNum = true;
|
||||
this.tableData[this.selected].num += value;
|
||||
},
|
||||
DelChar() {
|
||||
const data = this.tableData; // Use tableData consistently
|
||||
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// if (data[i].id === this.selected) {
|
||||
// if (data[i].num.length > 1) {
|
||||
// data[i].num = data[i].num.slice(0, -1); // Use slice with -1 to remove the last character
|
||||
// } else {
|
||||
// data[i].num = "";
|
||||
// data[i].hasNum = false;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
const pos = this.selected;
|
||||
|
||||
if (data[pos].num.length > 1) {
|
||||
data[pos].num = data[pos].num.slice(0, -1);
|
||||
} else {
|
||||
data[pos].num = "";
|
||||
data[pos].hasNum = false;
|
||||
}
|
||||
},
|
||||
SelectThis(item, index) {
|
||||
if (item.type === "text") {
|
||||
this.selected = index;
|
||||
}
|
||||
},
|
||||
checkAnswer() {
|
||||
let res;
|
||||
let equation = "";
|
||||
|
||||
const data = this.tableData;
|
||||
let EmptyNumber = false;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].num === "") {
|
||||
EmptyNumber = true;
|
||||
this.inputData = "不合理的结果";
|
||||
this.applicable = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (data[i].num === "×") {
|
||||
equation += "*";
|
||||
} else if (data[i].num === "÷") {
|
||||
equation += "/";
|
||||
} else {
|
||||
equation += data[i].num;
|
||||
}
|
||||
}
|
||||
|
||||
res = eval(equation);
|
||||
|
||||
if (typeof res !== "number" || isNaN(res) || !isFinite(res)) {
|
||||
this.inputData = "不合理的结果";
|
||||
this.applicable = false;
|
||||
} else {
|
||||
this.inputData = res;
|
||||
this.applicable = true;
|
||||
}
|
||||
this.model.question.q5.history = this.tableData;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
|
||||
q6Arr:{
|
||||
handler(){
|
||||
this.model.question.q6 =
|
||||
{
|
||||
arr:this.q6Arr.filter(Boolean),
|
||||
result:this.result
|
||||
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
},
|
||||
result:{
|
||||
handler(){
|
||||
this.model.question.q6 =
|
||||
{
|
||||
arr:this.q6Arr.filter(Boolean),
|
||||
result:this.result
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.$bus.$on("answerArrChange",(val)=>{
|
||||
|
||||
this.result = ""
|
||||
this.currentShow = -1
|
||||
this.answerArr = this.model.question.q5.answer.split(/([\（\）\+\-\×\÷])/).filter(Boolean)
|
||||
this.q6Arr = []
|
||||
this.showArr = []
|
||||
this.answerArr.forEach(()=>{
|
||||
this.q6Arr.push('')
|
||||
this.showArr.push(false)
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
const q4 = this.model.question.q4;
|
||||
let tableDatas = new Array(q4.history.length);
|
||||
|
||||
let index = 0;
|
||||
let id = 1;
|
||||
let map = new Map();
|
||||
const array = q4.history;
|
||||
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
const now = array[i];
|
||||
|
||||
if (!isNaN(now) && !isFinite(now)) {
|
||||
tableDatas[i] = {
|
||||
id: -1,
|
||||
index: index,
|
||||
text: now,
|
||||
num: parseInt(now),
|
||||
hasNum: false,
|
||||
type: "num",
|
||||
};
|
||||
} else if (now.length === 1) {
|
||||
tableDatas[i] = {
|
||||
id: -1,
|
||||
index: index,
|
||||
text: now,
|
||||
num: now,
|
||||
hasNum: false,
|
||||
type: "symbol",
|
||||
};
|
||||
} else {
|
||||
const idx = map.get(now);
|
||||
if (!idx) {
|
||||
map.set(now, id);
|
||||
id++;
|
||||
}
|
||||
tableDatas[i] = {
|
||||
id: map.get(now),
|
||||
index: index,
|
||||
text: now,
|
||||
num: "",
|
||||
hasNum: false,
|
||||
type: "text",
|
||||
};
|
||||
}
|
||||
index++;
|
||||
}
|
||||
|
||||
if (this.model.question.q5.history.length > 0) {
|
||||
const arrays = this.model.question.q5.history;
|
||||
|
||||
if (arrays.length === tableDatas.length) {
|
||||
let same = true;
|
||||
|
||||
for (let i = 0; i < tableDatas.length; i++) {
|
||||
|
||||
|
||||
if (
|
||||
tableDatas[i].text !== arrays[i].text ||
|
||||
tableDatas[i].type !== arrays[i].type
|
||||
) {
|
||||
same = false;
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
if (same === true) {
|
||||
tableDatas = arrays;
|
||||
this.inputData = this.model.question.q5.answer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.tableData = tableDatas;
|
||||
this.init = true;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.inputBox {
|
||||
.el-input__inner {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.BoardBody {
|
||||
height: 100%;
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
.Q5BTN {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e2f0d9;
|
||||
border: 1px solid #000;
|
||||
font-size: 23px;
|
||||
color: #111;
|
||||
}
|
||||
.Q5TABLE {
|
||||
.is-leaf {
|
||||
background-color: #92d050 !important;
|
||||
color: #111;
|
||||
font-size: 23px;
|
||||
}
|
||||
.el-table__cell {
|
||||
background-color: #e2f0d9;
|
||||
color: #111;
|
||||
font-size: 15px;
|
||||
min-width: 115px !important;
|
||||
}
|
||||
.gutter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.FLEX {
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.QR5Text,
|
||||
.QR5Symbol,
|
||||
.QR5Num {
|
||||
border: 1px solid #111;
|
||||
}
|
||||
|
||||
.QR5Text {
|
||||
background-color: #e2f0d9;
|
||||
color: red;
|
||||
}
|
||||
.QR5Symbol {
|
||||
background-color: #deebf7;
|
||||
|
||||
:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.QR5Num {
|
||||
background-color: #deebf7;
|
||||
}
|
||||
|
||||
.QR5Text:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.QR5Num,
|
||||
.QR5Symbol:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.Active {
|
||||
background-color: #ccc;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,462 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row style="height: 10%" class="FlexCenter">
|
||||
<div class="titleBox">第6题【操作题】</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 30%" class="FlexCenter lightBlue">
|
||||
<div class="problemTitle">
|
||||
根据巨型蚂蚁外表皮的相关信息，列出这只巨型蚂每秒钟蚁消耗氧气量的表达式。
|
||||
<br /><br />
|
||||
【你可以拖动左侧的信息或运算符号到下方作答框中，组合形成表达式。完成组合表达式后，点击“下一页”】
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<div class="dropTitle">这只巨型蚂蚁每秒钟消耗氧气量=</div>
|
||||
<div
|
||||
class="drop-area"
|
||||
contenteditable="true"
|
||||
@drop="handleDrop"
|
||||
@keypress.prevent
|
||||
@keydown.prevent="preventDelete"
|
||||
></div>
|
||||
</el-row>
|
||||
|
||||
<!-- @dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave" -->
|
||||
|
||||
<el-row class="Q5Row">
|
||||
<el-button @click="undo('delete')" type="warning">撤销一步操作 </el-button>
|
||||
<el-button @click="clear" type="danger">清空作答 </el-button>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-row class="FlexCenter" style="margin-top: 5px; ">
|
||||
<el-col class="WaringBox FlexCenter " :span="12">
|
||||
<span style="width: 70%; font-size: 20px">
|
||||
如果左侧信息中没有找到你想用的信息，会不会是因为在信息收集时有遗漏呢？
|
||||
</span>
|
||||
</el-col>
|
||||
<el-col class="InfoBox FlexCenter" :span="12">
|
||||
<span style="width: 70%; font-size: 21px">
|
||||
提示：你可以借鉴长方体的体积公式来尝试计算圆柱的体积哦！
|
||||
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
history: [""],
|
||||
historyText: [""],
|
||||
inputText: "",
|
||||
idCounter: 0,
|
||||
init: false,
|
||||
ReasonableExpression: true,
|
||||
previewElement: false,
|
||||
dragCounter: 0,
|
||||
test: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleDrop(event) {
|
||||
event.preventDefault();
|
||||
|
||||
event.target.classList.remove("ActiveDropArea");
|
||||
event.target.classList.remove("LeaveDropArea");
|
||||
|
||||
const extraParam = event.dataTransfer.getData("extraParam");
|
||||
if (!event.target.classList.contains("drop-area")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!extraParam || extraParam !== "Q4LDraging!") {
|
||||
return;
|
||||
}
|
||||
if (this.previewElement === true && this.dragCounter !== 0) {
|
||||
this.undo();
|
||||
}
|
||||
this.dragCounter = 0;
|
||||
|
||||
this.previewElement = false;
|
||||
const text = event.dataTransfer.getData("text/plain");
|
||||
const dropArea = event.target;
|
||||
|
||||
if (this.isArithmeticSymbol(text)) {
|
||||
this.insertArithmeticSymbol(dropArea, event, text);
|
||||
} else {
|
||||
this.insertText(dropArea, event, text);
|
||||
}
|
||||
|
||||
this.updateInputText();
|
||||
|
||||
this.checkData();
|
||||
this.saveHistory(text, "add");
|
||||
},
|
||||
|
||||
saveHistory(text, type) {
|
||||
const dropArea = this.$el.querySelector(".drop-area");
|
||||
this.history.push(dropArea.innerHTML);
|
||||
this.historyText.push(text);
|
||||
},
|
||||
undo(type) {
|
||||
if (this.history.length > 1) {
|
||||
this.history.pop();
|
||||
this.historyText.pop();
|
||||
const dropArea = this.$el.querySelector(".drop-area");
|
||||
dropArea.innerHTML = this.history[this.history.length - 1];
|
||||
this.updateInputText();
|
||||
this.checkData();
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
const dropArea = this.$el.querySelector(".drop-area");
|
||||
dropArea.innerHTML = "";
|
||||
this.history = [""];
|
||||
this.historyText = [""];
|
||||
this.inputText = "";
|
||||
|
||||
const textBlocks = this.$el.querySelectorAll(".text-block");
|
||||
textBlocks.forEach((textBlock) => textBlock.remove());
|
||||
|
||||
this.model.question.q6.applicable = false;
|
||||
},
|
||||
preventDelete(event) {
|
||||
if (event.key === "Backspace" || event.key === "Delete") {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
updateInputText() {
|
||||
const dropArea = this.$el.querySelector(".drop-area");
|
||||
const spans = dropArea.querySelectorAll("span");
|
||||
const data = Array.from(spans)
|
||||
.map((span) => span.textContent)
|
||||
.join(" ");
|
||||
this.inputText = data.split(" ");
|
||||
this.test = data.split(" ");
|
||||
},
|
||||
|
||||
handleDragEnter(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (event.target.classList.contains("drop-area")) {
|
||||
if (this.dragCounter === 0) {
|
||||
const text = this.model.question.q6.preview;
|
||||
const dropArea = event.target;
|
||||
|
||||
if (this.isArithmeticSymbol(text)) {
|
||||
this.insertArithmeticSymbol(dropArea, event, text);
|
||||
} else {
|
||||
this.insertText(dropArea, event, text);
|
||||
}
|
||||
|
||||
this.previewElement = true;
|
||||
this.saveHistory();
|
||||
}
|
||||
this.dragCounter = 1;
|
||||
} else if (event.target.tagName === "span" && this.dragCounter === 1) {
|
||||
this.dragCounter = 2;
|
||||
}
|
||||
this.checkData();
|
||||
},
|
||||
handleDragLeave(event) {
|
||||
|
||||
if (event.target.classList.contains("drop-area")) {
|
||||
if (!event.relatedTarget || !event.relatedTarget.closest(".drop-area")) {
|
||||
this.dragCounter = 0;
|
||||
|
||||
if (this.previewElement) {
|
||||
this.previewElement = false;
|
||||
this.undo();
|
||||
}
|
||||
}
|
||||
} else if (event.target.tagName === "SPAN" && this.dragCounter === 2) {
|
||||
this.dragCounter = 1;
|
||||
if (this.previewElement) {
|
||||
this.previewElement = false;
|
||||
this.undo();
|
||||
}
|
||||
} else {
|
||||
if (this.previewElement) {
|
||||
this.previewElement = false;
|
||||
this.undo();
|
||||
}
|
||||
}
|
||||
|
||||
this.checkData();
|
||||
},
|
||||
|
||||
isArithmeticSymbol(text) {
|
||||
return "+-×÷".includes(text);
|
||||
},
|
||||
isParenthesis(text) {
|
||||
return "()".includes(text);
|
||||
},
|
||||
NotText(text) {
|
||||
return "()+-×÷".includes(text);
|
||||
},
|
||||
isLamb(text, regex) {
|
||||
return regex.includes(text);
|
||||
},
|
||||
|
||||
createElement(tag, text, className) {
|
||||
const element = document.createElement(tag);
|
||||
element.textContent = text;
|
||||
element.dataset.id = this.idCounter++;
|
||||
element.classList.add(className);
|
||||
return element;
|
||||
},
|
||||
|
||||
insertAtPosition(event, element, dropArea) {
|
||||
const range = document.caretRangeFromPoint(event.clientX, event.clientY);
|
||||
if (range) {
|
||||
const startContainer = range.startContainer;
|
||||
let insertNode =
|
||||
startContainer.nodeType === 3 ? startContainer.parentElement : startContainer;
|
||||
|
||||
if (
|
||||
insertNode.classList.contains("text-block") ||
|
||||
insertNode.classList.contains("EmptyBlock")
|
||||
) {
|
||||
const rect = insertNode.getBoundingClientRect();
|
||||
const isLeftHalf = event.clientX - rect.left < rect.width / 2;
|
||||
|
||||
if (insertNode.classList.contains("EmptyBlock")) {
|
||||
insertNode.replaceWith(element);
|
||||
} else if (isLeftHalf) {
|
||||
insertNode.insertAdjacentElement("beforebegin", element);
|
||||
} else {
|
||||
insertNode.insertAdjacentElement("afterend", element);
|
||||
}
|
||||
} else {
|
||||
range.insertNode(element);
|
||||
}
|
||||
} else {
|
||||
dropArea.appendChild(element);
|
||||
}
|
||||
},
|
||||
|
||||
insertArithmeticSymbol(dropArea, event, text) {
|
||||
const symbolSpan = this.createElement("span", text, "symbol-block");
|
||||
symbolSpan.classList.add("text-block");
|
||||
this.insertAtPosition(event, symbolSpan, dropArea);
|
||||
const createEmptyBlock = () => {
|
||||
return this.createElement("span", "□", "EmptyBlock");
|
||||
};
|
||||
|
||||
const prevElement = symbolSpan.previousElementSibling;
|
||||
const nextElement = symbolSpan.nextElementSibling;
|
||||
|
||||
if (
|
||||
!prevElement ||
|
||||
(!prevElement.classList.contains("EmptyBlock") &&
|
||||
this.isArithmeticSymbol(prevElement.innerText))
|
||||
) {
|
||||
// symbolSpan.insertAdjacentElement("beforebegin", createEmptyBlock());
|
||||
}
|
||||
if (
|
||||
!nextElement ||
|
||||
(!nextElement.classList.contains("EmptyBlock") &&
|
||||
this.isArithmeticSymbol(nextElement.innerText))
|
||||
) {
|
||||
// symbolSpan.insertAdjacentElement("afterend", createEmptyBlock());
|
||||
}
|
||||
},
|
||||
|
||||
insertText(dropArea, event, text) {
|
||||
const textSpan = this.createElement("span", text, "text-block");
|
||||
|
||||
this.insertAtPosition(event, textSpan, dropArea);
|
||||
|
||||
if (
|
||||
textSpan.previousElementSibling &&
|
||||
textSpan.previousElementSibling.classList.contains("EmptyBlock")
|
||||
) {
|
||||
textSpan.previousElementSibling.replaceWith(textSpan);
|
||||
} else if (
|
||||
textSpan.nextElementSibling &&
|
||||
textSpan.nextElementSibling.classList.contains("EmptyBlock")
|
||||
) {
|
||||
textSpan.nextElementSibling.replaceWith(textSpan);
|
||||
}
|
||||
},
|
||||
|
||||
checkData() {
|
||||
let checked = false;
|
||||
let stack = [];
|
||||
this.model.question.q6.applicable = false;
|
||||
|
||||
for (let i = 0; i < this.inputText.length; i++) {
|
||||
if (this.isArithmeticSymbol(this.inputText[i])) {
|
||||
if (i == 0) {
|
||||
checked = true;
|
||||
break;
|
||||
} else {
|
||||
if (
|
||||
this.isArithmeticSymbol(this.inputText[i - 1]) ||
|
||||
this.isArithmeticSymbol(this.inputText[i + 1]) ||
|
||||
i === this.inputText.length - 1
|
||||
) {
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (this.inputText[i] === "(") {
|
||||
stack.push("(");
|
||||
} else if (this.inputText[i] === ")") {
|
||||
if (stack.length === 0) {
|
||||
checked = true;
|
||||
break;
|
||||
} else {
|
||||
const lastChar = stack.pop();
|
||||
if (lastChar !== "(") {
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (i !== 0 && i !== this.inputText.length - 1) {
|
||||
if (
|
||||
!this.NotText(this.inputText[i - 1]) ||
|
||||
!this.NotText(this.inputText[i + 1])
|
||||
) {
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
} else if (i !== 0 && i === this.inputText.length - 1) {
|
||||
if (!this.NotText(this.inputText[i - 1])) {
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (stack.length !== 0) {
|
||||
checked = true;
|
||||
}
|
||||
|
||||
if (checked !== true) {
|
||||
this.model.question.q6.applicable = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const dropArea = this.$el.querySelector(".drop-area");
|
||||
if (this.model.question.q6.answer !== "") {
|
||||
this.historyText = this.model.question.q6.history;
|
||||
this.historyText.forEach((text) => {
|
||||
const span = document.createElement("span");
|
||||
span.textContent = text;
|
||||
span.dataset.id = this.idCounter++;
|
||||
span.classList.add("text-block");
|
||||
if (text.length === 1 && text !== ")" && text !== "(") {
|
||||
span.classList.add("symbol-block");
|
||||
}
|
||||
|
||||
dropArea.appendChild(span);
|
||||
this.saveHistory();
|
||||
});
|
||||
}
|
||||
this.init = true;
|
||||
this.updateInputText();
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
inputText(val) {
|
||||
if (this.init === true) {
|
||||
let answer = "";
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
answer += val[i];
|
||||
}
|
||||
|
||||
this.model.question.q6.answer = answer;
|
||||
this.model.question.q6.history = this.inputText;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.drop-area {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
min-height: 30px;
|
||||
background-color: #f9f9f9;
|
||||
max-height:200px;
|
||||
overflow: auto;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 3px 5px;
|
||||
background-color: #e2f0d9;
|
||||
color: #000000;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 21px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.EmptyBlock {
|
||||
display: inline-block;
|
||||
margin: 1px 5px;
|
||||
background-color: #fac2fa !important;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.symbol-block {
|
||||
background-color: #fbe5d6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.Q5Row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.dropTitle {
|
||||
margin-top: 15px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f9f9f9;
|
||||
font-size: 21px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.WaringBox {
|
||||
background-color: #ffff00;
|
||||
border-radius: 50%;
|
||||
height: 100px;
|
||||
}
|
||||
.InfoBox{
|
||||
background-color: #DBDBDB;
|
||||
border-radius: 50%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<div style="height: 100%">
|
||||
<el-row style="height: 10%" class="FlexCenter">
|
||||
<div class="titleBox">第7题【填空题】</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 30%" class="FlexCenter lightBlue">
|
||||
<div class="problemTitle">
|
||||
请根据你列出的表达式，计算这只巨型蚂蚁每秒钟消耗氧气量，将结果输入到下面的作答框中吧！
|
||||
<br />
|
||||
<br />
|
||||
【你可以使用虚拟键盘输入作答，完成后点击“下一页”】
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 10%" class="DarkGreen FlexCenter">
|
||||
<el-input v-model="inputData" :disabled="true" class="inputBox lightGreen">
|
||||
<template slot="prepend"
|
||||
><span style="font-size: 20px">这只巨型蚂蚁每秒钟消耗氧气量 </span></template
|
||||
>
|
||||
<template slot="append"><span style="font-size: 20px">(毫升)</span></template>
|
||||
</el-input>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 50%">
|
||||
<keyBoard @PushChar="AddChar" @DeleteChar="DelChar" type="NumBoard" />
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import keyBoard from "../../components/Computer.vue";
|
||||
export default {
|
||||
components: {
|
||||
keyBoard,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
inputData: "",
|
||||
success: false,
|
||||
init: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
AddChar(value) {
|
||||
this.inputData += value;
|
||||
this.checkData();
|
||||
},
|
||||
DelChar(count) {
|
||||
const counts = count * -1;
|
||||
this.inputData = this.inputData.slice(0, counts);
|
||||
this.checkData();
|
||||
},
|
||||
checkData() {
|
||||
const floatRegex = /^[+-]?\d+(\.\d+)?$/;
|
||||
const status = floatRegex.test(this.inputData);
|
||||
|
||||
if (status == true) {
|
||||
this.success = true;
|
||||
} else {
|
||||
this.success = false;
|
||||
}
|
||||
this.model.question.q7.answer = this.inputData;
|
||||
this.model.question.q7.applicable = this.success;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if(this.model.question.q7.answer.length > 0) {
|
||||
this.inputData = this.model.question.q7.answer;
|
||||
this.success = this.model.question.q7.applicable;
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.inputBox {
|
||||
height: 100%;
|
||||
.el-input-group__prepend {
|
||||
font-size: 22px;
|
||||
color: black;
|
||||
}
|
||||
.el-input-group__append {
|
||||
color: black;
|
||||
}
|
||||
.el-input__inner {
|
||||
color: black !important;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
<template>
|
||||
<div class="fullHeight">
|
||||
<el-row class="FlexCenter" style="height: 7%">
|
||||
<div class="titleBox">第7题【选择题、填空题】</div>
|
||||
</el-row>
|
||||
|
||||
<el-row class="FlexCenter lightBlue" >
|
||||
<div class="problemTitle" style="font-size: 1.6vw;line-height: 50px;">
|
||||
请你根据计算的结果，判断现实中是否有可能存在巨型蚂蚁并说明理由。
|
||||
<br />
|
||||
【完成本页任务后，点击“下一页”】
|
||||
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 24%">
|
||||
<el-row>
|
||||
<el-row class="line" type="flex">
|
||||
<el-col :span="3" class="lineL FlexCenter">
|
||||
<p class="Left">我的判断</p>
|
||||
</el-col>
|
||||
<el-col :span="21">
|
||||
<el-radio-group v-model="radio1" class="Q7radio">
|
||||
<el-radio-button
|
||||
class="Q7radioItem"
|
||||
label="A我认为这则报道是可信的"
|
||||
style="width: 40%"
|
||||
>
|
||||
<p class="radioText">A. 我认为巨型蚂蚁可能存在</p>
|
||||
</el-radio-button>
|
||||
<el-radio-button
|
||||
class="Q7radioItem"
|
||||
label="B我认为这则报道是不可信的"
|
||||
style="width: 40%"
|
||||
>
|
||||
<span class="radioText">B. 我认为巨型蚂蚁不可能存在</span>
|
||||
</el-radio-button>
|
||||
<el-radio-button class="Q7radioItem" label="C无法确定" style="width: 20%">
|
||||
<span class="radioText"> C. 无法确定</span>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-row class="line">
|
||||
<el-col :span="4" class="lineL FlexCenter">
|
||||
<p class="Left " style="font-size:21px;">我的理由</p>
|
||||
</el-col>
|
||||
<el-col :span="20" class="Q7InputBox">
|
||||
<el-input
|
||||
v-model="inputData"
|
||||
:disabled="true"
|
||||
:autosize="{ minRows: 5, maxRows: 5 }"
|
||||
class="Q7input"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 37%" class="">
|
||||
<KeyBoard type="select" @PushString="AddString" />
|
||||
</el-row>
|
||||
|
||||
<el-row class="Q7Line FlexCenter" style="height: 9%">
|
||||
<el-button class="Q7BottomButton" @click="DelString"> 删除一格 </el-button>
|
||||
<el-button class="Q7BottomButton" @click="ClearString"> 清空作答 </el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KeyBoard from "../../components/Computer.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
KeyBoard,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {},
|
||||
radio1: "",
|
||||
inputData: "",
|
||||
inputDataArray: [],
|
||||
init:false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
AddString(data) {
|
||||
const label = data.label;
|
||||
const value = data.value;
|
||||
|
||||
this.inputData += label;
|
||||
this.inputDataArray.push(label.length);
|
||||
|
||||
},
|
||||
DelString() {
|
||||
if (this.inputData.length > 0) {
|
||||
const deleteCount = this.inputDataArray.pop();
|
||||
this.inputData = this.inputData.slice(0, -deleteCount);
|
||||
}
|
||||
},
|
||||
ClearString() {
|
||||
this.inputData = "";
|
||||
this.inputDataArray = [];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.model = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
inputData: {
|
||||
handler(val) {
|
||||
this.inputData = val;
|
||||
if(this.init)
|
||||
this.model.question.q7.reason = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
radio1:{
|
||||
handler(val){
|
||||
this.radio1 = val;
|
||||
if(this.init)
|
||||
this.model.question.q7.judge = val;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
this.radio1 = this.model.question.q7.judge;
|
||||
this.inputData = this.model.question.q7.reason;
|
||||
this.init= true;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.line {
|
||||
border: 1px solid #111;
|
||||
display: flex;
|
||||
.lineL {
|
||||
border-right: 3px solid #111;
|
||||
background-color: #92d050;
|
||||
|
||||
.Left {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
}
|
||||
.lineR {
|
||||
height: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.Q7InputBox {
|
||||
background-color: #e2f0d9;
|
||||
|
||||
.el-textarea__inner {
|
||||
background-color: transparent;
|
||||
font-size: 15px;
|
||||
color: #111;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Q7radioItem {
|
||||
background-color: #e2f0d9;
|
||||
border: 1px solid #111;
|
||||
.el-radio-button__inner {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
}
|
||||
.radioText {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
.Q7radio {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.Q7Line {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
.Q7BottomButton {
|
||||
background-color: #e2f0d9;
|
||||
border: 2px solid #111;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<div style="width: 100%;">
|
||||
|
||||
<img style="width: 60%;position: absolute;top: 20%;left: 25%;" src="../../assets/img/submitContent.png"/>
|
||||
<br/>
|
||||
<img style="width: 10%;position: absolute;top: 55%;left: 15%;" src="../../assets/img/teacher.png" />
|
||||
|
||||
<button style="border: 3px solid black;position: absolute;top:70%;left: 35%;
|
||||
background-color: #fff2cd;padding: 5px;border-radius: 3px;width: 200px;height: 60px;
|
||||
cursor: pointer;
|
||||
font-size:1.5vw;" @click="backLast">返回上一页</button>
|
||||
|
||||
<button style="border: 3px solid black;position: absolute;top:70%;left: 55%;
|
||||
background-color: #fff2cd;padding: 5px;border-radius: 3px;width: 220px;height: 60px;
|
||||
cursor: pointer;
|
||||
font-size:1.5vw;" @click="submitAnswer">提交全部答案</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
methods:{
|
||||
backLast(){
|
||||
this.$bus.$emit("changePage",-1)
|
||||
},
|
||||
submitAnswer(){
|
||||
this.$bus.$emit("changePage",1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
module.exports={
|
||||
publicPath:"./",
|
||||
lintOnSave:false
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# race
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"name": "race",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.14",
|
||||
"vue": "^2.6.14",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div{
|
||||
font-size: 1.1vw;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,905 @@
|
|||
<template>
|
||||
<div id="app" style="display: flex;flex-wrap: nowrap;height: 100vh;flex-direction: column;">
|
||||
|
||||
<p10 v-show="currentPage == 10"></p10>
|
||||
<p11 v-show="currentPage == 11"></p11>
|
||||
<div v-show="currentPage != 10 && currentPage != 11" class="pageOutContainer">
|
||||
<div style="display: flex;">
|
||||
|
||||
|
||||
|
||||
<el-button v-for="(page,pIndex) in pages" class="pageContainner" :style="{
|
||||
backgroundColor:currentStatus(pIndex),color:currentStatus(pIndex) == '#67C23A' ? 'white' :currentStatus(pIndex) == '#01b0f1' ? 'white' : 'black',border:'none'}">
|
||||
{{page}}
|
||||
</el-button>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<el-button class="navButton" v-show="currentPage >= 2" @click="changePage(-1)">
|
||||
上一页
|
||||
</el-button>
|
||||
<el-button class="navButton" v-show="currentPage >= 2" @click="changePage(1)">
|
||||
下一页
|
||||
</el-button>
|
||||
<el-button class="navButton" v-show="currentPage == 1 && !isPlan3" @click="nextPlan">
|
||||
下一页
|
||||
</el-button>
|
||||
<el-button class="navButton" v-show="currentPage == 1 && isPlan3" @click="changePage(1)">
|
||||
完成计划，开始解题
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outContainer" style="height: 0px;"></div>
|
||||
<div class="contentContainer" v-show="currentPage != 10 && currentPage != 11">
|
||||
<div style="width: 50%;border: 2px solid rgb(107,177,235);box-sizing: border-box;flex:1;">
|
||||
<div style="border:10px solid #d9e5c1;width: 100%;height: 100%;box-sizing: border-box;padding-bottom: 10px;">
|
||||
<p0Left v-show="currentPage == 0"></p0Left>
|
||||
<p1Left v-show="currentPage == 1"></p1Left>
|
||||
<p2Left v-show="currentPage == 2"></p2Left>
|
||||
<p3Left v-show="currentPage == 3"></p3Left>
|
||||
<p4Left v-show="currentPage == 4"></p4Left>
|
||||
<p5Left v-show="currentPage == 5 || currentPage == 6"></p5Left>
|
||||
<!-- <p6Left v-show="currentPage == 6"></p6Left> -->
|
||||
<p7Left v-show="currentPage == 7"></p7Left>
|
||||
<p8Left v-show="currentPage == 8"></p8Left>
|
||||
<p9Left v-show="currentPage == 9"></p9Left>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 50%;border: 2px solid rgb(107,177,235);box-sizing: border-box;flex: 1;">
|
||||
<p0Right v-show="currentPage == 0"></p0Right>
|
||||
<p1Right v-show = "currentPage == 1" :answerIndex="answerIndex"></p1Right>
|
||||
<p2Right v-show = "currentPage == 2"></p2Right>
|
||||
<p3Right v-show = "currentPage == 3"></p3Right>
|
||||
<p4Right v-show = "currentPage == 4"></p4Right>
|
||||
<p5Right v-show = "currentPage == 5"></p5Right>
|
||||
<p6Right v-show = "currentPage == 6"></p6Right>
|
||||
<p7Right v-show="currentPage == 7"></p7Right>
|
||||
<p8Right v-show="currentPage == 8"></p8Right>
|
||||
<p9Right v-show="currentPage == 9"></p9Right>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%">
|
||||
<span style="font-size: 1.6vw;line-height: 50px;">{{dialogVisibleContent}}</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import p0Left from './components/p0_left.vue'
|
||||
import p0Right from './components/p0_right.vue'
|
||||
import p1Left from './components/p1_left.vue'
|
||||
import p1Right from './components/p1_right.vue'
|
||||
import p2Left from './components/p2_left.vue'
|
||||
import p2Right from './components/p2_right.vue'
|
||||
|
||||
import p3Left from './components/p3_left.vue'
|
||||
import p3Right from './components/p3_right.vue'
|
||||
|
||||
import p4Left from './components/p4_left.vue'
|
||||
import p4Right from './components/p4_right.vue'
|
||||
|
||||
import p5Left from './components/p5_left.vue'
|
||||
import p5Right from './components/p5_right.vue'
|
||||
|
||||
import p6Left from './components/p6_left.vue'
|
||||
import p6Right from './components/p6_right.vue'
|
||||
|
||||
import p7Left from './components/p7_left.vue'
|
||||
import p7Right from './components/p7_right.vue'
|
||||
|
||||
import p8Left from './components/p8_left.vue'
|
||||
import p8Right from './components/p8_right.vue'
|
||||
|
||||
import p9Left from './components/p9_left.vue'
|
||||
import p9Right from './components/p9_right.vue'
|
||||
|
||||
import p10 from './components/p10.vue'
|
||||
import p11 from './components/p11.vue'
|
||||
export default {
|
||||
name: 'App',
|
||||
data(){
|
||||
return{
|
||||
dialogVisible: false,
|
||||
dialogVisibleContent:"",
|
||||
currentTop:0.1,
|
||||
rankTimes:1,
|
||||
leftIsMoving:false,
|
||||
isPlan3:false,
|
||||
appIsMoving:false,
|
||||
currentMovingInnerDiv:"",
|
||||
receiveDivs:[],
|
||||
pages:['前言','计划','1','2','3','4','5','6','评价','反思'],
|
||||
currentPage:0,
|
||||
answerIndex:1
|
||||
}
|
||||
},
|
||||
components:{
|
||||
p0Left,
|
||||
p0Right,
|
||||
p1Left,
|
||||
p1Right,
|
||||
p7Left,
|
||||
p7Right,
|
||||
p2Left,
|
||||
p2Right,
|
||||
p3Left,
|
||||
p3Right,
|
||||
p4Left,
|
||||
p4Right,
|
||||
p5Left,
|
||||
p5Right,
|
||||
p6Left,
|
||||
p6Right,
|
||||
p8Left,
|
||||
p8Right,
|
||||
p9Left,
|
||||
p9Right,
|
||||
p10,
|
||||
p11
|
||||
},
|
||||
methods:{
|
||||
currentStatus(index){
|
||||
|
||||
if(index == this.currentPage){
|
||||
|
||||
return '#01b0f1'
|
||||
}else if(this.currentPage > index){
|
||||
return '#67C23A'
|
||||
|
||||
}else if(index == 2 && !(this.$store.state.runRank.some(item => item == "") || this.$store.state.ballRank.some(item => item == "") || this.$store.state.jumpRank.some(item => item == ""))){
|
||||
return '#67C23A'
|
||||
} else if(index == 3 && this.$store.state.p3_radio != -1){
|
||||
return '#67C23A'
|
||||
}
|
||||
else if(index == 4 && !(this.receiveDivs.length == 0 || (this.$store.state.p4_radio == -1 || (this.$store.state.p4_radio == 2 && this.$store.state.p4_answer.length == 0) ) )){
|
||||
|
||||
return '#67C23A'
|
||||
}
|
||||
else if(index == 5 && !(this.$store.state.p5_radio == -1 || this.$store.state.p5_reason.length == 0)){
|
||||
|
||||
return '#67C23A'
|
||||
}else if(index == 6 && !this.$store.state.p6_input.some((item)=>item.value == "")){
|
||||
return '#67C23A'
|
||||
}else if(index == 7 && !this.$store.state.rank.some((item)=>item == "")){
|
||||
return '#67C23A'
|
||||
}else if(index == 8 && !this.$store.state.selfScore.some((item)=>item == 0)){
|
||||
return '#67C23A'
|
||||
|
||||
}else if(index == 9 && this.$store.state.p9_radio != -1){
|
||||
return '#67C23A'
|
||||
|
||||
}
|
||||
|
||||
else{
|
||||
return 'white'
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
nextPlan(){
|
||||
this.$bus.$emit("goNextPlan")
|
||||
},
|
||||
changePage(state){
|
||||
if(!this.leftIsMoving && !this.appIsMoving){
|
||||
var outChildren = document.getElementById("outContainer").children
|
||||
if(state == -1 && this.currentPage > 0){
|
||||
this.currentPage --
|
||||
if(this.currentPage != 4){
|
||||
|
||||
for(var i = 0;i<outChildren.length;i++){
|
||||
outChildren[i].style.display = "none"
|
||||
|
||||
}
|
||||
|
||||
}else{
|
||||
for(var i = 0;i<outChildren.length;i++){
|
||||
outChildren[i].style.display = "block"
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}else if(state == 1 && this.currentPage < 11){
|
||||
if(this.currentPage == 1 && (this.$store.state.plan3[0].length == 0 || this.$store.state.plan3[1].length == 0
|
||||
|| this.$store.state.plan3[2].length == 0 || this.$store.state.plan3[3].length == 0)){
|
||||
this.dialogVisibleContent = "这个问题你还没做完，请作答后再进入下一页吧！"
|
||||
this.dialogVisible = true
|
||||
|
||||
|
||||
}else if(this.currentPage == 2 && (this.$store.state.runRank.some(item => item == "") || this.$store.state.ballRank.some(item => item == "") || this.$store.state.jumpRank.some(item => item == ""))){
|
||||
this.dialogVisibleContent = "这个问题你还没做完，请作答后再进入下一页吧！"
|
||||
this.dialogVisible = true
|
||||
|
||||
}else if(this.currentPage == 2 && this.rankTimes == 1 && (this.$store.state.runRank.toString() != ["1","3","2","4","0"].toString() || this.$store.state.ballRank.toString() != ["1","0","3","4","2"].toString() || this.$store.state.jumpRank.toString() != ["0","2","4","3","1"].toString())){
|
||||
this.dialogVisibleContent = "你给出的排名好像有问题哦！请再检查一下。"
|
||||
this.dialogVisible = true
|
||||
|
||||
this.rankTimes ++
|
||||
}else if(this.currentPage == 2 && this.rankTimes == 2 && (this.$store.state.runRank.toString() != ["1","3","2","4","0"].toString() || this.$store.state.ballRank.toString() != ["1","0","3","4","2"].toString() || this.$store.state.jumpRank.toString() != ["0","2","4","3","1"].toString())){
|
||||
this.dialogVisibleContent = "好像还是有问题哦！请你再检查一下标红的排名。"
|
||||
this.dialogVisible = true
|
||||
|
||||
|
||||
var arr = []
|
||||
|
||||
var runArr = ["1","3","2","4","0"]
|
||||
var ballArr = ["1","0","3","4","2"]
|
||||
var jumpArr = ["0","2","4","3","1"]
|
||||
for(var i = 0;i<runArr.length;i++){
|
||||
|
||||
|
||||
if(runArr[i] != this.$store.state.runRank[i]){
|
||||
|
||||
// arr.push({x:i, y:1})
|
||||
arr.push({x:i, y:2})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
if(ballArr[i] != this.$store.state.ballRank[i]){
|
||||
// arr.push({x:i, y:3})
|
||||
arr.push({x:i, y:4})
|
||||
}
|
||||
|
||||
|
||||
if(jumpArr[i] != this.$store.state.jumpRank[i]){
|
||||
// arr.push({x:i, y:5})
|
||||
arr.push({x:i, y:6})
|
||||
}
|
||||
|
||||
// if(arr.some((item)=> item.x == i)){
|
||||
|
||||
// arr.push({x:i, y:0})
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
this.$bus.$emit("changeErrorArr",arr)
|
||||
this.rankTimes ++
|
||||
}
|
||||
else if(this.currentPage == 3 && this.$store.state.p3_radio == -1){
|
||||
this.dialogVisibleContent = "这个问题你还没做完，请作答后再进入下一页吧！"
|
||||
this.dialogVisible = true
|
||||
}else if(this.currentPage == 4 && (this.receiveDivs.length == 0 || (this.$store.state.p4_radio == -1 || (this.$store.state.p4_radio == 2 && this.$store.state.p4_answer.length == 0) )) ){
|
||||
|
||||
this.dialogVisibleContent = "这个问题你还没做完，请作答后再进入下一页吧！"
|
||||
this.dialogVisible = true
|
||||
|
||||
}
|
||||
|
||||
else if(this.currentPage == 4 && this.receiveDivs.length > 0){
|
||||
if(this.receiveDivs.length == 1){
|
||||
if(document.getElementById(this.receiveDivs[0]).innerText.length == 1 && !(document.getElementById(this.receiveDivs[0]).innerText >= 0 && document.getElementById(this.receiveDivs[0]).innerText <= 9)){
|
||||
|
||||
this.dialogVisibleContent = "你的表达式好像有问题哦！请再检查一下。"
|
||||
this.dialogVisible = true
|
||||
|
||||
}else{
|
||||
this.currentPage ++
|
||||
|
||||
for(var i = 0;i<outChildren.length;i++){
|
||||
outChildren[i].style.display = "none"
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}else if(this.receiveDivs.length > 1){
|
||||
|
||||
var allNumber = true
|
||||
|
||||
for(var i = 0; i<this.$store.state.expression.length;i++){
|
||||
if( !(this.$store.state.expression[i] >= 0 && this.$store.state.expression[i] <= 9)){
|
||||
allNumber = false
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(allNumber){
|
||||
|
||||
|
||||
this.currentPage ++
|
||||
|
||||
for(var i = 0;i<outChildren.length;i++){
|
||||
outChildren[i].style.display = "none"
|
||||
|
||||
}
|
||||
}else{
|
||||
|
||||
|
||||
|
||||
|
||||
var arr = ["+","×","-","÷","（","）"]
|
||||
var isContain = false
|
||||
for(var i = 0; i<arr.length;i++){
|
||||
|
||||
|
||||
if(this.$store.state.expression.includes(arr[i])){
|
||||
isContain = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(isContain){
|
||||
|
||||
if(this.checkCalcExpressionValid(this.$store.state.expression)){
|
||||
this.currentPage ++
|
||||
|
||||
for(var i = 0;i<outChildren.length;i++){
|
||||
outChildren[i].style.display = "none"
|
||||
|
||||
}
|
||||
}else{
|
||||
this.dialogVisibleContent = "你的表达式好像有问题哦！请再检查一下。"
|
||||
this.dialogVisible = true
|
||||
|
||||
}
|
||||
}else{
|
||||
this.dialogVisibleContent = "你的表达式好像有问题哦！请再检查一下。"
|
||||
this.dialogVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} else if(this.currentPage == 5 && (this.$store.state.p5_radio == -1 || this.$store.state.p5_reason.length == 0)){
|
||||
|
||||
this.dialogVisibleContent = "这个问题你还没做完，请作答后再进入下一页吧！"
|
||||
this.dialogVisible = true
|
||||
}else if(this.currentPage == 6 && this.$store.state.p6_input.some((item)=>item.value == "")){
|
||||
this.dialogVisibleContent = "这个问题你还没做完，请作答后再进入下一页吧！"
|
||||
this.dialogVisible = true
|
||||
}else if(this.currentPage == 7 && this.$store.state.rank.some((item)=>item == "")){
|
||||
this.dialogVisibleContent = "这个问题你还没做完，请作答后再进入下一页吧！"
|
||||
this.dialogVisible = true
|
||||
}else if(this.currentPage == 8 && this.$store.state.selfScore.some((item)=>item == 0)){
|
||||
this.dialogVisibleContent = "这个问题你还没做完，请作答后再进入下一页吧！"
|
||||
this.dialogVisible = true
|
||||
|
||||
}else if(this.currentPage == 9 && this.$store.state.p9_radio == -1){
|
||||
this.dialogVisibleContent = "这个问题你还没做完，请作答后再进入下一页吧！"
|
||||
this.dialogVisible = true
|
||||
|
||||
}
|
||||
|
||||
else{
|
||||
this.currentPage ++
|
||||
|
||||
if(this.currentPage != 4){
|
||||
|
||||
for(var i = 0;i<outChildren.length;i++){
|
||||
outChildren[i].style.display = "none"
|
||||
|
||||
}
|
||||
|
||||
}else{
|
||||
for(var i = 0;i<outChildren.length;i++){
|
||||
outChildren[i].style.display = "block"
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
checkCalcExpressionValid(string){
|
||||
// 剔除空白符
|
||||
string = string.replace(/\s/g, '');
|
||||
string = string.replaceAll("50米跑的成绩","*")
|
||||
string = string.replaceAll("实心球的成绩","*")
|
||||
string = string.replaceAll("立定跳远的成绩","*")
|
||||
string = string.replaceAll("50米跑的排名","*")
|
||||
string = string.replaceAll("实心球的排名","*")
|
||||
string = string.replaceAll("立定跳远的排名","*")
|
||||
// 错误情况，空字符串
|
||||
if("" === string){
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// if( /[50米跑的成绩]{2,}/.test(string) ){
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// console.log(/\[0-9][\50米跑的成绩\实心球的成绩\立定跳远的成绩\50米跑的排名\50米跑的成绩\实心球的排名\立定跳远的排名]/.test(string))
|
||||
// if(/\[0-9][\50米跑的成绩\"实心球的成绩"\立定跳远的成绩\50米跑的排名\50米跑的成绩\实心球的排名\立定跳远的排名]/.test(string)){
|
||||
// return false;
|
||||
// }
|
||||
|
||||
|
||||
if(/\d[\*]/.test(string)){
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
if(/[\*]\d/.test(string)){
|
||||
return false;
|
||||
}
|
||||
|
||||
if(/[\*]\*/.test(string)){
|
||||
return false
|
||||
}
|
||||
|
||||
// ["+","×","-","÷","（","）"],
|
||||
// 错误情况，运算符连续
|
||||
if( /[\+\-\×\÷]{2,}/.test(string) ){
|
||||
return false;
|
||||
}
|
||||
|
||||
// 空括号
|
||||
if(/\（\）/.test(string)){
|
||||
return false;
|
||||
}
|
||||
|
||||
//空中括号
|
||||
// if (/\[\]/.test(string)){
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// 错误情况，括号不配对
|
||||
var stack = [];
|
||||
for(var i = 0, item; i < string.length; i++){
|
||||
item = string.charAt(i);
|
||||
if('（' === item){
|
||||
stack.push('（');
|
||||
}else if('）' === item){
|
||||
if(stack.length > 0){
|
||||
stack.pop();
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(0 !== stack.length){
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 错误情况，中括号不配对
|
||||
// var stack2 = [];
|
||||
// for(var i = 0, item; i < string.length; i++){
|
||||
// item = string.charAt(i);
|
||||
// if('[' === item){
|
||||
// stack2.push('[');
|
||||
// }else if(']' === item){
|
||||
// if(stack2.length > 0){
|
||||
// stack2.pop();
|
||||
// }else{
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// if(0 !== stack2.length){
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// 错误情况，(后面是运算符
|
||||
if(/\（[\+\-\×\÷]/.test(string)){
|
||||
return false;
|
||||
}
|
||||
|
||||
// 错误情况，)前面是运算符
|
||||
if(/[\+\-\×\÷]\）/.test(string)){
|
||||
return false;
|
||||
}
|
||||
|
||||
// 错误情况，[后面是运算符
|
||||
// if(/\[[\+\-\*\/]/.test(string)){
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// 错误情况，]前面是运算符
|
||||
// if(/[\+\-\*\/]\]/.test(string)){
|
||||
// return false;
|
||||
// }
|
||||
|
||||
//错误情况，运算符号不能在首末位
|
||||
|
||||
if(/^[\+\-\×\÷.]|[\+\-\×\÷.]$/.test(string)){
|
||||
return false;
|
||||
}
|
||||
|
||||
//错误情况，中括号结尾到下一个开始之间没有运算符
|
||||
// if(/\]\[/.test(string)){
|
||||
// return false;
|
||||
// }
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
watch:{
|
||||
currentPage:{
|
||||
handler(){
|
||||
|
||||
this.$store.state.page = this.currentPage
|
||||
this.updata()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
this.$bus.$on("noLeftMoving",()=>{
|
||||
this.leftIsMoving = false
|
||||
|
||||
})
|
||||
|
||||
this.$bus.$on("clearAllCreateDiv",()=>{
|
||||
if(!this.leftIsMoving && !this.appIsMoving){
|
||||
|
||||
if(this.receiveDivs.length > 0){
|
||||
|
||||
this.receiveDivs.forEach((item)=>{
|
||||
document.getElementById(item).remove()
|
||||
|
||||
})
|
||||
this.receiveDivs = []
|
||||
this.$store.state.expression = ""
|
||||
this.updata()
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
this.$bus.$on("beThrow",()=>{
|
||||
|
||||
if(this.appIsMoving){
|
||||
this.$bus.$emit("theAppIsMoving",false)
|
||||
this.appIsMoving = false
|
||||
this.receiveDivs.splice(this.receiveDivs.findIndex((item) => item == this.currentMovingInnerDiv),1 )
|
||||
document.getElementById(this.currentMovingInnerDiv).remove()
|
||||
|
||||
|
||||
|
||||
this.currentTop = 0.1
|
||||
var DOMRect = document.getElementById("receiveContainer").getBoundingClientRect()
|
||||
for(var i = 0;i < this.receiveDivs.length;i++){
|
||||
var innerDiv = document.getElementById(this.receiveDivs[i])
|
||||
if(i == 0){
|
||||
|
||||
innerDiv.style.left = DOMRect.left + 10 + "px"
|
||||
}else{
|
||||
|
||||
var lastDiv = document.getElementById(this.receiveDivs[i-1]).getBoundingClientRect()
|
||||
if(lastDiv.right + 10 + parseInt(innerDiv.style.width.replace("px","")) >= DOMRect.right - 10 ){
|
||||
|
||||
this.currentTop ++
|
||||
innerDiv.style.left = DOMRect.left + 10 + "px"
|
||||
}else{
|
||||
innerDiv.style.left = lastDiv.right + 10 + "px"
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
innerDiv.style.top = DOMRect.top + this.currentTop * 30 + "px"
|
||||
|
||||
}
|
||||
var exp = ""
|
||||
this.receiveDivs.forEach((item)=>{
|
||||
exp += document.getElementById(item).innerText
|
||||
|
||||
})
|
||||
this.$bus.$emit("changeLeftFull")
|
||||
|
||||
this.$store.state.expression = exp
|
||||
this.updata()
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
this.$bus.$on("changeIsPlan3",()=>{
|
||||
this.isPlan3 = true
|
||||
})
|
||||
|
||||
this.$bus.$on("changePage",(direction)=>{
|
||||
|
||||
this.changePage(direction)
|
||||
|
||||
})
|
||||
|
||||
this.$bus.$on("divMes",(id,x,y)=>{
|
||||
|
||||
console.log("y",y)
|
||||
if(!this.appIsMoving && this.leftIsMoving){
|
||||
|
||||
|
||||
var DOMRect = document.getElementById("receiveContainer").getBoundingClientRect()
|
||||
console.log(DOMRect)
|
||||
if(this.receiveDivs.length == 0){
|
||||
|
||||
document.getElementById(id).style.left = DOMRect.left + 10 + "px"
|
||||
this.receiveDivs.push(id)
|
||||
}else{
|
||||
|
||||
var isFront = false;
|
||||
|
||||
for(var i = 0;i < this.receiveDivs.length;i++){
|
||||
var innerDiv = document.getElementById(this.receiveDivs[i])
|
||||
|
||||
console.log("yige yuansu")
|
||||
console.log(innerDiv.style.left)
|
||||
if(innerDiv.style.left.replace("px","") > x - 20 && innerDiv.getBoundingClientRect().bottom >= y){
|
||||
isFront = true
|
||||
document.getElementById(id).style.left = innerDiv.style.left
|
||||
this.receiveDivs.splice(i,0,id)
|
||||
for(var j = i+1;j<this.receiveDivs.length;j++){
|
||||
var innerDiv1 = document.getElementById(this.receiveDivs[j-1]).getBoundingClientRect()
|
||||
|
||||
|
||||
document.getElementById(this.receiveDivs[j]).style.left = innerDiv1.right + 10 +"px"
|
||||
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
if(!isFront){
|
||||
document.getElementById(id).style.left = document.getElementById(this.receiveDivs[this.receiveDivs.length - 1]).getBoundingClientRect().right + 10 + "px"
|
||||
this.receiveDivs.push(id)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// document.getElementById(id).style.top = (DOMRect.bottom - DOMRect.top)/(4/this.currentTop) + DOMRect.top + "px"
|
||||
this.leftIsMoving = false
|
||||
console.log("关闭")
|
||||
|
||||
this.currentTop = 0.1
|
||||
for(var i = 0;i < this.receiveDivs.length;i++){
|
||||
var innerDiv = document.getElementById(this.receiveDivs[i])
|
||||
if(i == 0){
|
||||
|
||||
innerDiv.style.left = DOMRect.left + 10 + "px"
|
||||
}else{
|
||||
|
||||
var lastDiv = document.getElementById(this.receiveDivs[i-1]).getBoundingClientRect()
|
||||
if(lastDiv.right + 10 + parseInt(innerDiv.style.width.replace("px","")) >= DOMRect.right - 10 ){
|
||||
|
||||
this.currentTop ++
|
||||
innerDiv.style.left = DOMRect.left + 10 + "px"
|
||||
}else{
|
||||
innerDiv.style.left = lastDiv.right + 10 + "px"
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// innerDiv.style.top = (DOMRect.bottom - DOMRect.top)/(8/this.currentTop) + DOMRect.top + "px"
|
||||
|
||||
innerDiv.style.top = DOMRect.top + this.currentTop * 30 + "px"
|
||||
|
||||
}
|
||||
var exp = ""
|
||||
this.receiveDivs.forEach((item)=>{
|
||||
exp += document.getElementById(item).innerText
|
||||
|
||||
})
|
||||
this.$store.state.expression = exp
|
||||
this.updata()
|
||||
|
||||
}else if(!this.leftIsMoving && this.appIsMoving){
|
||||
|
||||
|
||||
this.$bus.$emit("theAppIsMoving",false)
|
||||
this.appIsMoving = false
|
||||
|
||||
|
||||
this.receiveDivs.splice(this.receiveDivs.findIndex((item) => item == this.currentMovingInnerDiv),1)
|
||||
console.log(this.receiveDivs)
|
||||
var DOMRect = document.getElementById("receiveContainer").getBoundingClientRect()
|
||||
if(this.receiveDivs.length == 0){
|
||||
document.getElementById(this.currentMovingInnerDiv).style.left = DOMRect.left + 10 + "px"
|
||||
this.receiveDivs.push(this.currentMovingInnerDiv)
|
||||
|
||||
}else{
|
||||
|
||||
|
||||
var isFront = false;
|
||||
|
||||
for(var i = 0;i < this.receiveDivs.length;i++){
|
||||
var innerDiv = document.getElementById(this.receiveDivs[i])
|
||||
|
||||
if(innerDiv.style.left.replace("px","") > x - 20 && innerDiv.getBoundingClientRect().bottom >= y){
|
||||
isFront = true
|
||||
document.getElementById(this.currentMovingInnerDiv).style.left = innerDiv.style.left
|
||||
this.receiveDivs.splice(i,0,this.currentMovingInnerDiv)
|
||||
|
||||
for(var j = i+1;j<this.receiveDivs.length;j++){
|
||||
var innerDiv1 = document.getElementById(this.receiveDivs[j-1]).getBoundingClientRect()
|
||||
document.getElementById(this.receiveDivs[j]).style.left = innerDiv1.right + 10 +"px"
|
||||
|
||||
}
|
||||
|
||||
document.getElementById(this.receiveDivs[0]).style.left = DOMRect.left + 10 + "px"
|
||||
for(var j = 1;j<this.receiveDivs.length;j++){
|
||||
|
||||
var innerDiv1 = document.getElementById(this.receiveDivs[j-1]).getBoundingClientRect()
|
||||
document.getElementById(this.receiveDivs[j]).style.left = innerDiv1.right + 10 +"px"
|
||||
|
||||
}
|
||||
|
||||
console.log("liminade",this.receiveDivs)
|
||||
console.log(isFront)
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
if(!isFront){
|
||||
document.getElementById(this.currentMovingInnerDiv).style.left = document.getElementById(this.receiveDivs[this.receiveDivs.length - 1]).getBoundingClientRect().right + 10 + "px"
|
||||
|
||||
this.receiveDivs.push(this.currentMovingInnerDiv)
|
||||
|
||||
document.getElementById(this.receiveDivs[0]).style.left = DOMRect.left + 10 + "px"
|
||||
for(var j = 1;j<this.receiveDivs.length;j++){
|
||||
|
||||
var innerDiv1 = document.getElementById(this.receiveDivs[j-1]).getBoundingClientRect()
|
||||
document.getElementById(this.receiveDivs[j]).style.left = innerDiv1.right + 10 +"px"
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.getElementById(this.currentMovingInnerDiv).style.zIndex = 1000
|
||||
document.getElementById(this.currentMovingInnerDiv).style.top = (DOMRect.bottom - DOMRect.top)/4 + DOMRect.top + "px"
|
||||
|
||||
|
||||
|
||||
|
||||
this.currentTop = 0.1
|
||||
for(var i = 0;i < this.receiveDivs.length;i++){
|
||||
console.log(this.currentTop,"-----------")
|
||||
var innerDiv = document.getElementById(this.receiveDivs[i])
|
||||
if(i == 0){
|
||||
|
||||
innerDiv.style.left = DOMRect.left + 10 + "px"
|
||||
}else{
|
||||
|
||||
var lastDiv = document.getElementById(this.receiveDivs[i-1]).getBoundingClientRect()
|
||||
if(lastDiv.right + 10 + parseInt(innerDiv.style.width.replace("px","")) >= DOMRect.right - 10 ){
|
||||
|
||||
this.currentTop ++
|
||||
innerDiv.style.left = DOMRect.left + 10 + "px"
|
||||
}else{
|
||||
innerDiv.style.left = lastDiv.right + 10 + "px"
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// innerDiv.style.top = (DOMRect.bottom - DOMRect.top)/(4/this.currentTop) + DOMRect.top + "px"
|
||||
innerDiv.style.top = DOMRect.top + this.currentTop * 30 + "px"
|
||||
|
||||
}
|
||||
|
||||
var exp = ""
|
||||
this.receiveDivs.forEach((item)=>{
|
||||
exp += document.getElementById(item).innerText
|
||||
|
||||
})
|
||||
this.$store.state.expression = exp
|
||||
this.updata()
|
||||
}
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
this.$bus.$on("addClick",(id)=>{
|
||||
|
||||
if(this.receiveDivs.length < 20){
|
||||
|
||||
this.leftIsMoving = true
|
||||
if(this.receiveDivs.length == 19){
|
||||
|
||||
this.$bus.$emit("isFull")
|
||||
}
|
||||
document.getElementById(id).onclick = ()=>{
|
||||
|
||||
if(!this.appIsMoving && !this.leftIsMoving){
|
||||
|
||||
document.getElementById(id).style.zIndex = 1001
|
||||
this.currentMovingInnerDiv = id
|
||||
this.$bus.$emit("theAppIsMoving",true)
|
||||
this.appIsMoving = true
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
document.addEventListener('mousemove', (e)=> {
|
||||
|
||||
|
||||
if(this.appIsMoving){
|
||||
|
||||
var div = document.getElementById(this.currentMovingInnerDiv)
|
||||
|
||||
div.style.display="block"
|
||||
|
||||
div.style.left = div.innerText.length == 1 ? e.pageX - 20 + 'px' : e.pageX - 130 + 'px';
|
||||
div.style.top = e.pageY - 30 + 'px';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.navButton {
|
||||
background-color: #e2f0d9;
|
||||
border: 3px solid #111;
|
||||
min-width: 80px;
|
||||
height: 50px;
|
||||
margin-top: 3px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.contentContainer{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
.pageOutContainer{
|
||||
background-color: rgb(79,129,189);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-bottom: 4px solid rgb(107,177,235);
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pageContainner{
|
||||
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 915 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 969 B |
Binary file not shown.
|
After Width: | Height: | Size: 909 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue