|
|
@@ -1,369 +1,474 @@
|
|
|
<template>
|
|
|
- <!-- <ResidualDialog ref="openDialogRef" close-color="#F00" @close-dialog="handleClose">-->
|
|
|
- <!-- <div class="breadth-training-container w-full h-full flex flex-col items-center relative">-->
|
|
|
- <div
|
|
|
- class="child-container bor-radius-8 bg-[#ffffff] w-[1960px] h-[960px] mt-[100px] flex flex-col justify-center items-center gap-y-[30px]"
|
|
|
- >
|
|
|
- <div id="myButton" class="absolute top-[110px]">
|
|
|
- <div class="bg-1" v-if="divShow && !showAdd">
|
|
|
- <img :src="onceData.question" alt="question" class="w-[460px] h-[460px]" />
|
|
|
- </div>
|
|
|
- <div class="bg-1" v-if="divShow && !showAdd">
|
|
|
- <img :src="onceData.questions" alt="question" class="w-[460px] h-[460px]" />
|
|
|
+ <my-full-screen-dialog ref="openDialogRef" close-color="white" @close-dialog="handleClose">
|
|
|
+ <div class="working-memory-container w-full h-full flex-center">
|
|
|
+ <div
|
|
|
+ class="w-[88%] h-[88%] border-[3px] border-white bg-[#ffffffe5] rounded-[8px] shadow-lg"
|
|
|
+ v-if="data.testFlag"
|
|
|
+ >
|
|
|
+ <!-- @click="userClick()"-->
|
|
|
+ <div class="sable absolute left-[180px] top-[120px] Deadlock w-[1250px] h-[850px] ml-6">
|
|
|
+ <h1 class="sable absolute left-[400px] top-[-60px]" style="text-align: center; font-size: 80px">
|
|
|
+ ({{ data.nbackIndex }}-back)
|
|
|
+ </h1>
|
|
|
+ <h2
|
|
|
+ v-if="data.countDownSpanShow"
|
|
|
+ class="txt-center sable absolute left-[100px] top-[70px]"
|
|
|
+ style="text-align: center; font-size: 80px"
|
|
|
+ >
|
|
|
+ 将在<span style="color: red; font-size: 80px">{{ data.countDownTime }}</span
|
|
|
+ >秒后继续测试
|
|
|
+ </h2>
|
|
|
+ <!-- <div class="letterCss txt-center" v-if="data.divShow && !data.showAdd">
|
|
|
+ <div class="big-square w-[600px] h-[600px] mt-[135px]">
|
|
|
+ <div class="small-square" v-for="i in 9" :key="i"></div>
|
|
|
+ </div>
|
|
|
+ {{ data.currentLetter }}
|
|
|
+ </div> -->
|
|
|
+ <div class="letterCss absolute left-[180px] txt-center" v-if="data.divShow && !data.showAdd">
|
|
|
+ <!-- <div class="letterCss absolute left-[180px] txt-center">-->
|
|
|
+ <div class="big-square w-[600px] h-[600px] mt-[135px] main">
|
|
|
+ <div v-show="data.currentLetterA == '1'" class="w-[150px] h-[150px] m-[25px]"></div>
|
|
|
+ <div v-show="data.currentLetterA == '2'" class="w-[150px] h-[150px] m-[25px]"></div>
|
|
|
+ <div v-show="data.currentLetterA == '3'" class="w-[150px] h-[150px] m-[25px]"></div>
|
|
|
+ <div v-show="data.currentLetterA == '4'" class="w-[150px] h-[150px] m-[25px]"></div>
|
|
|
+ <div class="w-[150px] h-[150px] m-[25px]">
|
|
|
+ <span style="color: #ffffff; font-size: 80px">{{ data.currentLetter }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-show="data.currentLetterA == '6'" class="w-[150px] h-[150px] m-[25px]"></div>
|
|
|
+ <div v-show="data.currentLetterA == '7'" class="w-[150px] h-[150px] m-[25px]"></div>
|
|
|
+ <div v-show="data.currentLetterA == '8'" class="w-[150px] h-[150px] m-[25px]"></div>
|
|
|
+ <div v-show="data.currentLetterA == '9'" class="w-[150px] h-[150px] m-[25px]"></div>
|
|
|
+ <!-- <div class="w-[150px] h-[150px] m-[25px]"></div>-->
|
|
|
+ <!-- <div class="w-[150px] h-[150px] m-[25px]"></div>-->
|
|
|
+ <!-- <div class="w-[150px] h-[150px] m-[25px]"></div>-->
|
|
|
+ <!-- <div class="w-[150px] h-[150px] m-[25px]"></div>-->
|
|
|
+ <!-- <div class="w-[150px] h-[150px] m-[25px]">-->
|
|
|
+ <!-- <span style="color: #ffffff; font-size: 80px">{{ data.currentLetter }}</span>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="w-[150px] h-[150px] m-[25px]"></div>-->
|
|
|
+ <!-- <div class="w-[150px] h-[150px] m-[25px]"></div>-->
|
|
|
+ <!-- <div class="w-[150px] h-[150px] m-[25px]"></div>-->
|
|
|
+ <!-- <div class="w-[150px] h-[150px] m-[25px]"></div>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- </div>-->
|
|
|
- <voice-imp ref="VoiceImpRef" />
|
|
|
- <!-- </ResidualDialog>-->
|
|
|
+ <VoiceImp ref="VoiceImpRef" />
|
|
|
+ </my-full-screen-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { getCurrentInstance, onMounted, ref } from 'vue'
|
|
|
-// 游戏所有等级和试次的图片数据
|
|
|
-import Topics from './topics.json'
|
|
|
+/*
|
|
|
+ * 组件名: WorkingMemory
|
|
|
+ * 组件用途: 工作记忆
|
|
|
+ * 创建日期: 2024/9/9
|
|
|
+ * 编写者: JutarryWu
|
|
|
+ */
|
|
|
+import { getCurrentInstance } from 'vue'
|
|
|
+import { getRandomInt } from '@/utils'
|
|
|
import AchievementAPI from '@/api/tester/rehabilitation/training/achievement'
|
|
|
import { RTPlanMgrQuery } from '@/api/tester/rehabilitation/training/plain'
|
|
|
import { useUserStore } from '@/store'
|
|
|
+import Log from '@/api/tester/evaluation/log'
|
|
|
|
|
|
-const $emits = defineEmits(['gameOver'])
|
|
|
-
|
|
|
-interface LevelData {
|
|
|
- level: number
|
|
|
- correct: boolean
|
|
|
- ifNeedClick: boolean
|
|
|
- ifUserClick: boolean
|
|
|
- score: number
|
|
|
- responseStartTime: number
|
|
|
- responseEndTime: number
|
|
|
+interface AnswerList {
|
|
|
+ [key: string]: string[]
|
|
|
}
|
|
|
-
|
|
|
-interface OnceItem {
|
|
|
- question: string
|
|
|
- questions: string
|
|
|
- choices: string[]
|
|
|
- answer: string
|
|
|
- answers: string
|
|
|
-}
|
|
|
-
|
|
|
+const data = reactive({
|
|
|
+ countDownTime: 8,
|
|
|
+ countDownSpanShow: false,
|
|
|
+ sourceLetterList: [],
|
|
|
+ sourceLetterListA: [],
|
|
|
+ currentLetter: '',
|
|
|
+ currentLetterA: '',
|
|
|
+ currentLetterIndex: 0,
|
|
|
+ resultData: {
|
|
|
+ exerciseList: [],
|
|
|
+ examList: {
|
|
|
+ back0: ['M', 'B', 'M', 'G', 'M', 'C', 'K', 'V', 'M', 'E'],
|
|
|
+ back1: ['Y', 'K', 'Y', 'Y', 'P', 'K', 'O', 'O', 'A', 'A'],
|
|
|
+ back2: ['M', 'B', 'M', 'B', 'M', 'C', 'K', 'C', 'K', 'O']
|
|
|
+ },
|
|
|
+ examListA: {
|
|
|
+ back0: ['3', '1', '3', '7', '3', '8', '3', '7', '8', '3'],
|
|
|
+ back1: ['4', '6', '6', '7', '8', '8', '3', '3', '1', '1'],
|
|
|
+ back2: ['5', '6', '5', '6', '3', '6', '4', '6', '8', '6']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ smallsquare: 0,
|
|
|
+ currentLetterList: [],
|
|
|
+ currentLetterListA: [],
|
|
|
+ nbackIndex: 0,
|
|
|
+ taskName: 'back0',
|
|
|
+ testTurnCount: 0,
|
|
|
+ taskId: '',
|
|
|
+ saveFlag: false,
|
|
|
+ subjectInfo: '',
|
|
|
+ divShow: false,
|
|
|
+ showAdd: false,
|
|
|
+ buttonShow: true,
|
|
|
+ passTestExam: false,
|
|
|
+ saveSuccess: false,
|
|
|
+ testFlag: false,
|
|
|
+ testType: '练习测试',
|
|
|
+ buttonName: '开始练习',
|
|
|
+ testTypeCode: 0,
|
|
|
+ startMilliSeconds: 0,
|
|
|
+ divShowInteval: null,
|
|
|
+ countDownInterval: null,
|
|
|
+ userId: '',
|
|
|
+ testResult: {},
|
|
|
+ userAnswerList: {
|
|
|
+ back0: [],
|
|
|
+ back1: [],
|
|
|
+ back2: []
|
|
|
+ },
|
|
|
+ userAnswerListA: {
|
|
|
+ back0: [],
|
|
|
+ back1: [],
|
|
|
+ back2: []
|
|
|
+ },
|
|
|
+ testState: false,
|
|
|
+ back0SuccessRate: '',
|
|
|
+ back1SuccessRate: '',
|
|
|
+ back2SuccessRate: '',
|
|
|
+ back0backAverageTime: '',
|
|
|
+ back1backAverageTime: '',
|
|
|
+ back2backAverageTime: '',
|
|
|
+ count: 0
|
|
|
+})
|
|
|
+let countDownInterval: any
|
|
|
+let divShowInteval: any
|
|
|
+const $emits = defineEmits(['gameOver'])
|
|
|
const openDialogRef = ref()
|
|
|
const VoiceImpRef = ref()
|
|
|
-const gameData = ref(Topics as OnceItem[][])
|
|
|
-// 当前试次的游戏图片数据
|
|
|
-const onceData = ref({} as OnceItem)
|
|
|
-const countDownVisible = ref(false) // 倒计时是否可见
|
|
|
-const fistOpen = ref(true) // 第一屏
|
|
|
-const flage1 = ref(true) // 视觉模式选项
|
|
|
-const flage2 = ref(false) // 听觉模式选项
|
|
|
-const flage3 = ref(false) // 混合模式选项
|
|
|
-const next_stepFlag1 = ref(false) // 视觉游戏开始
|
|
|
-const next_stepFlag2 = ref(false) // 听觉模式开始
|
|
|
-const next_stepFlag3 = ref(false) // 混合模式开始
|
|
|
-
|
|
|
-// const next_stepflag = ref(true) // 第二屏
|
|
|
-const countDownVal = ref(560) // 倒计时时间
|
|
|
-const showAdd = ref(false)
|
|
|
-const divShow = ref(true)
|
|
|
-
|
|
|
-// 得分列表
|
|
|
-const scoreList = [10, 30, 60, 100, 150, 210]
|
|
|
-// 在60秒内猜中50个物品额外得50分
|
|
|
-const extraScore = 50
|
|
|
-// 最大游戏等级 6
|
|
|
-const maxLevel = 0
|
|
|
-// 当前游戏等级
|
|
|
-let currentLevel = 0
|
|
|
-// 游戏最大时长 60 秒
|
|
|
-const gameMaxDuration = 60 * 1000
|
|
|
-// 游戏开始时间
|
|
|
-let gameStartTime = 0
|
|
|
-// 游戏结束时间
|
|
|
-let gameEndTime = 0
|
|
|
-// 游戏收集的数据
|
|
|
-let gameList: LevelData[] = []
|
|
|
-// 游戏模式：'1' 呈现轮廓，选择彩色物品、'2' 呈现彩色物品，选择轮廓
|
|
|
-const gameMode = '1'
|
|
|
-// 每个等级的最大试次 15
|
|
|
-const maxNumber = 9
|
|
|
-// 当前试次
|
|
|
-let currentNumber = 0
|
|
|
-// 响应开始时间戳
|
|
|
-let responseStartTime = 0
|
|
|
-let currentLetterList = []
|
|
|
-let timerId: any
|
|
|
-let divShowInteval: any
|
|
|
-let gameStartTime_record = 0
|
|
|
+const handleClose = (done: () => void) => {
|
|
|
+ $emits('gameOver', 'WorkingMemory')
|
|
|
+ clearInterval(countDownInterval)
|
|
|
+ clearInterval(divShowInteval)
|
|
|
+}
|
|
|
|
|
|
-const planInfo = ref<RTPlanMgrQuery>()
|
|
|
const instance = getCurrentInstance()
|
|
|
+const planInfo = ref<RTPlanMgrQuery>()
|
|
|
const userStore = useUserStore()
|
|
|
-function executeMethod() {
|
|
|
- nextOnce()
|
|
|
- console.log('执行此方法。')
|
|
|
- // createCurrentLetterList(onceData.value)
|
|
|
-}
|
|
|
-const setTimetiming = () => {
|
|
|
- let elapsedSeconds = 0
|
|
|
- function startTimer() {
|
|
|
- timerId = setInterval(() => {
|
|
|
- elapsedSeconds++
|
|
|
- if (elapsedSeconds > 1) {
|
|
|
- // executeMethod()
|
|
|
- elapsedSeconds = 0
|
|
|
- showAdd.value = true
|
|
|
- // nextOnce()
|
|
|
- executeMethod()
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
- // if (elapsedSeconds >= 60) {
|
|
|
- // clearInterval(timerId)
|
|
|
- // elapsedSeconds = 0
|
|
|
- // return
|
|
|
- // }
|
|
|
- }
|
|
|
- // divShow.value = true
|
|
|
- startTimer()
|
|
|
-}
|
|
|
-// 随机排列数组
|
|
|
-function shuffleArray(array: any) {
|
|
|
- const newArray = [...array]
|
|
|
- for (let i = newArray.length - 1; i > 0; i--) {
|
|
|
- const j = Math.floor(Math.random() * (i + 1))
|
|
|
- ;[newArray[i], newArray[j]] = [newArray[j], newArray[i]]
|
|
|
- }
|
|
|
- return newArray
|
|
|
-}
|
|
|
+let gameStartTime_record = 0
|
|
|
|
|
|
-const chengFlagek = () => {
|
|
|
- console.log('开始')
|
|
|
- if (flage1.value) {
|
|
|
- setTimetiming()
|
|
|
- next_stepFlag1.value = true
|
|
|
- next_stepFlag2.value = false
|
|
|
- next_stepFlag3.value = false
|
|
|
- fistOpen.value = false
|
|
|
- countDownVisible.value = true
|
|
|
- } else if (flage2.value) {
|
|
|
- fistOpen.value = false
|
|
|
- next_stepFlag2.value = true
|
|
|
- next_stepFlag1.value = false
|
|
|
- next_stepFlag3.value = false
|
|
|
- // countDownVisible.value = true
|
|
|
- } else {
|
|
|
- fistOpen.value = false
|
|
|
- next_stepFlag2.value = false
|
|
|
- next_stepFlag1.value = false
|
|
|
- next_stepFlag3.value = true
|
|
|
- }
|
|
|
-}
|
|
|
-const chengFlage1 = (answer: string) => {
|
|
|
- console.log('haaahaha', answer)
|
|
|
- if (answer === '1') {
|
|
|
- // flage1.value = false
|
|
|
- // flage2.value = true
|
|
|
- // flage3.value = true
|
|
|
- } else if (answer === '2') {
|
|
|
- flage1.value = true
|
|
|
- flage2.value = false
|
|
|
- flage3.value = false
|
|
|
- } else if (answer === '3') {
|
|
|
- // flage2.value = false
|
|
|
- // flage1.value = true
|
|
|
- // flage3.value = true
|
|
|
- } else if (answer === '4') {
|
|
|
- flage2.value = true
|
|
|
- flage1.value = false
|
|
|
- flage3.value = false
|
|
|
- } else if (answer === '5') {
|
|
|
- // flage2.value = true
|
|
|
- // flage1.value = true
|
|
|
- // flage3.value = false
|
|
|
- } else if (answer === '6') {
|
|
|
- flage2.value = false
|
|
|
- flage1.value = false
|
|
|
- flage3.value = true
|
|
|
+async function exec() {
|
|
|
+ openDialogRef.value.openDialog()
|
|
|
+ window.addEventListener('keydown', userClick)
|
|
|
+ const tempPlan = sessionStorage.getItem('currentPlanInfo')
|
|
|
+ gameStartTime_record = Date.now()
|
|
|
+ if (tempPlan) {
|
|
|
+ planInfo.value = JSON.parse(tempPlan)
|
|
|
}
|
|
|
+ await nextTick(() => {
|
|
|
+ // countDown()
|
|
|
+ startTest()
|
|
|
+ })
|
|
|
}
|
|
|
-const nextOnce = () => {
|
|
|
- console.log(onceData.value.choices, 'onceData392')
|
|
|
- // console.log(showAdd.value, divShow.value)
|
|
|
- // const a = document.getElementById('countdown');
|
|
|
- // dingshqi()
|
|
|
- gameEndTime = performance.now()
|
|
|
- const gameDuration = gameEndTime - gameStartTime
|
|
|
- // console.log(gameDuration, 'gameDuration')
|
|
|
- // console.log(gameEndTime, 'gameEndTime')
|
|
|
- // console.log(gameStartTime, 'gameStartTime')
|
|
|
- const currentLevelList = gameList.filter((it) => it.level === currentLevel)
|
|
|
- // 当前等级进行 10 个试次以上时，计算正确率
|
|
|
- if (currentLevelList.length >= 10) {
|
|
|
- // 当前等级正确试次个数
|
|
|
- const count = currentLevelList.reduce((acc, curr) => {
|
|
|
- if (curr.correct) {
|
|
|
- acc++
|
|
|
- }
|
|
|
- return acc
|
|
|
- }, 0)
|
|
|
-
|
|
|
- // 当前等级正确率
|
|
|
- const accuracy = (count / currentLevelList.length) * 100
|
|
|
-
|
|
|
- // 升降级规则：正确率达到80%难度升级，低于40%降级
|
|
|
- if (accuracy >= 80) {
|
|
|
- if (currentLevel < maxLevel) {
|
|
|
- currentLevel++
|
|
|
- // 删除升级之后的已有数据
|
|
|
- gameList = gameList.filter((it) => it.level !== currentLevel)
|
|
|
- // 重置当前等级试次索引
|
|
|
- currentNumber = 0
|
|
|
- console.log('80%难度升级')
|
|
|
- }
|
|
|
- } else if (accuracy < 40) {
|
|
|
- if (currentLevel > 0) {
|
|
|
- // 删除降级之前的已有数据
|
|
|
- gameList = gameList.filter((it) => it.level !== currentLevel)
|
|
|
- currentLevel--
|
|
|
- // 删除降级之后的已有数据
|
|
|
- gameList = gameList.filter((it) => it.level !== currentLevel)
|
|
|
- // 重置当前等级试次索引
|
|
|
- currentNumber = 0
|
|
|
- console.log('低于40%降级')
|
|
|
- }
|
|
|
+function countDown() {
|
|
|
+ // 测试时间倒计时
|
|
|
+ countDownInterval = setInterval(() => {
|
|
|
+ data.countDownTime--
|
|
|
+ if (data.countDownTime == 0) {
|
|
|
+ //开始测试
|
|
|
+ // this.startTest();
|
|
|
+ startTest()
|
|
|
+ // 清除定时器
|
|
|
+ clearInterval(countDownInterval)
|
|
|
+ data.countDownTime = 8
|
|
|
+ // startTest();
|
|
|
+ // countDown()
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- // 如果当前等级的试次小于最大试次，则试次加一，否则应该进入下一等级
|
|
|
- if (currentNumber < maxNumber) {
|
|
|
- currentNumber++
|
|
|
+ }, 1000)
|
|
|
+}
|
|
|
+function startTest() {
|
|
|
+ data.divShow = true
|
|
|
+ data.countDownSpanShow = false
|
|
|
+ pageDataInit()
|
|
|
+
|
|
|
+ divShowInteval = setInterval(() => {
|
|
|
+ data.showAdd = true
|
|
|
+ // data.backgroundColor = ''
|
|
|
+ // if (data.testTypeCode == 1) {
|
|
|
+ // data.count++;
|
|
|
+ // }
|
|
|
+ divRandomShow()
|
|
|
+ }, 2000)
|
|
|
+}
|
|
|
+function divRandomShow() {
|
|
|
+ // console.log('执行了')
|
|
|
+ // showRandomValue()
|
|
|
+ // console.log(data.currentLetterIndex, 'data.currentLetterIndex146')
|
|
|
+
|
|
|
+ if (data.currentLetterIndex == data.currentLetterList.length) {
|
|
|
+ // console.log('长度相等清除定时器', data.currentLetterList.length)
|
|
|
+ clearInterval(divShowInteval)
|
|
|
+ currentTurnCompute()
|
|
|
} else {
|
|
|
- // 如果当前等级小于最大等级，则等级加一，否则游戏结束
|
|
|
- if (currentLevel < maxLevel) {
|
|
|
- currentLevel++
|
|
|
- // 删除升级之后的已有数据
|
|
|
- gameList = gameList.filter((it) => it.level !== currentLevel)
|
|
|
- // 重置当前等级试次索引
|
|
|
- currentNumber = 0
|
|
|
- } else {
|
|
|
- // 游戏结束
|
|
|
- console.log('游戏结束2')
|
|
|
- console.log(gameList, '游戏数据')
|
|
|
- clearInterval(timerId)
|
|
|
- clearInterval(divShowInteval)
|
|
|
- // sendData()
|
|
|
- return
|
|
|
- }
|
|
|
+ let tempObj = data.currentLetterList[data.currentLetterIndex]
|
|
|
+ let tempObjA = data.currentLetterListA[data.currentLetterIndex]
|
|
|
+ VoiceImpRef.value.videoPlay('Speech-Auditory', `static/voice/game/WorkingMemory/${tempObj.letter}.mp3`)
|
|
|
+ // data.smallsquare = data.currentLetterListA[data.currentLetterIndex]
|
|
|
+ // console.log(data.currentLetterList, 'data.currentLetterList');
|
|
|
+ // console.log(tempObj, 'tempObjdata.currentLetter', data.currentLetterIndex, '显示字母索引')
|
|
|
+ data.currentLetter = ''
|
|
|
+ data.currentLetterA = ''
|
|
|
+ setTimeout(() => {
|
|
|
+ data.currentLetter = tempObj.letter
|
|
|
+ data.currentLetterA = tempObjA.letter
|
|
|
+ data.startMilliSeconds = new Date().getTime()
|
|
|
+ data.showAdd = false
|
|
|
+ }, 1000)
|
|
|
+ data.currentLetterIndex++
|
|
|
}
|
|
|
- divShow.value = true
|
|
|
- setTimeout(() => {
|
|
|
- showAdd.value = false
|
|
|
- }, 1000)
|
|
|
|
|
|
- // 根据当前等级和当前试次改变游戏素材
|
|
|
- setOnceData()
|
|
|
+ // if (this.currentLetterIndex == this.currentLetterList.length) {
|
|
|
+ // clearInterval(this.divShowInteval);
|
|
|
+ // this.currentTurnCompute();
|
|
|
+ // } else {
|
|
|
+ // let tempObj = this.currentLetterList[this.currentLetterIndex];
|
|
|
+ // this.currentLetter = tempObj.letter;
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.startMilliSeconds = new Date().getTime();
|
|
|
+ // this.showAdd = false;
|
|
|
+ // }, 1000);
|
|
|
+ // this.currentLetterIndex++;
|
|
|
+ // }
|
|
|
}
|
|
|
-
|
|
|
-function getTime() {
|
|
|
- const countdownElement = document.getElementById('countdown')
|
|
|
- let remainingSeconds = 60
|
|
|
-
|
|
|
- function updateCountdown() {
|
|
|
- countdownElement ? (countdownElement.textContent = '00分' + remainingSeconds + '秒') : ''
|
|
|
- if (remainingSeconds % 5 === 0) {
|
|
|
- // nextOnce()
|
|
|
+function currentTurnCompute() {
|
|
|
+ //正式测试时，需要根据情况进行切换任务类型
|
|
|
+ //正式测试时的逻辑
|
|
|
+ data.divShow = false
|
|
|
+ data.testTurnCount++
|
|
|
+ data.currentLetterIndex = 0
|
|
|
+ // console.log(data.testTurnCount, '153', data.nbackIndex)
|
|
|
+ // console.log(data.userAnswerList, 'data.userAnswerList', data.currentLetterList, 'data.currentLetterList')
|
|
|
+ if (data.nbackIndex == 0) {
|
|
|
+ data.userAnswerList.back0.push(data.currentLetterList)
|
|
|
+ data.userAnswerListA.back0.push(data.currentLetterListA)
|
|
|
+
|
|
|
+ if (data.testTurnCount == 2) {
|
|
|
+ data.nbackIndex++
|
|
|
+ data.countDownSpanShow = true
|
|
|
+ data.taskName = 'back' + data.nbackIndex
|
|
|
+ data.testTurnCount = 0
|
|
|
}
|
|
|
- remainingSeconds--
|
|
|
- if (remainingSeconds < 0) {
|
|
|
- clearInterval(countdownInterval)
|
|
|
- // countdownElement.textContent = '倒计时结束';
|
|
|
+ data.countDownSpanShow = true
|
|
|
+ countDown()
|
|
|
+ } else if (data.nbackIndex == 1) {
|
|
|
+ data.userAnswerList.back1.push(data.currentLetterList)
|
|
|
+ data.userAnswerListA.back1.push(data.currentLetterListA)
|
|
|
+ if (data.testTurnCount == 2) {
|
|
|
+ data.nbackIndex++
|
|
|
+ data.countDownSpanShow = true
|
|
|
+ data.taskName = 'back' + data.nbackIndex
|
|
|
+ data.testTurnCount = 0
|
|
|
+ }
|
|
|
+ data.countDownSpanShow = true
|
|
|
+ countDown()
|
|
|
+ } else if (data.nbackIndex == 2) {
|
|
|
+ data.userAnswerList.back2.push(data.currentLetterList)
|
|
|
+ data.userAnswerListA.back2.push(data.currentLetterListA)
|
|
|
+ if (data.testTurnCount == 2) {
|
|
|
+ data.testState = false
|
|
|
+ data.testFlag = false
|
|
|
+ //用户数据保存
|
|
|
+ sendData()
|
|
|
+ // data.userAnswerPost();
|
|
|
+ clearInterval(countDownInterval)
|
|
|
+ // this.$message({
|
|
|
+ // message: "测试结束！",
|
|
|
+ // type: "success",
|
|
|
+ // });
|
|
|
+ // screenfull.exit();
|
|
|
+ return ''
|
|
|
+ } else {
|
|
|
+ data.countDownSpanShow = true
|
|
|
+ countDown()
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- const countdownInterval = setInterval(updateCountdown, 1000)
|
|
|
}
|
|
|
-
|
|
|
-const submitFn = () => {
|
|
|
- console.log('------------------------')
|
|
|
- sendData()
|
|
|
+function pageDataInit() {
|
|
|
+ data.testFlag = true
|
|
|
+ // console.log('pageDataInit', 'data.testTypeCode', data.testTypeCode, 'data.taskName', data.taskName)
|
|
|
+ // console.log('data.resultData.examList', data.resultData.examList[data.taskName])
|
|
|
+ // data.sourceLetterList = data.resultData.examList[data.taskName][data.testTurnCount];
|
|
|
+ // console.log(data.sourceLetterList, 'data.sourceLetterList')
|
|
|
+ // data.currentLetterList = data.resultData.examList[data.taskName]
|
|
|
+ data.sourceLetterList = data.resultData.examList[data.taskName]
|
|
|
+ data.sourceLetterListA = data.resultData.examListA[data.taskName]
|
|
|
+ createCurrentLetterList(data.sourceLetterList, data.sourceLetterListA)
|
|
|
+ // createCurrentLetterListA(data.sourceLetterListA)
|
|
|
}
|
|
|
-
|
|
|
-const setOnceData = () => {
|
|
|
- responseStartTime = performance.now()
|
|
|
- // console.log(currentNumber, 'currentNumber')
|
|
|
- onceData.value = gameData.value[currentLevel][currentNumber]
|
|
|
- console.log(currentLevel, '当前游戏等级')
|
|
|
- if (currentLevel == 0) {
|
|
|
- gameList.push({
|
|
|
- level: currentLevel,
|
|
|
- correct: false,
|
|
|
- score: 0,
|
|
|
- ifNeedClick: gameData.value[currentLevel][0].answer === onceData.value.question,
|
|
|
+function createCurrentLetterList(sourceLetterList: any, sourceLetterListA: any) {
|
|
|
+ data.currentLetterList = []
|
|
|
+ data.currentLetterListA = []
|
|
|
+ for (var i = 0; i < sourceLetterList.length; i++) {
|
|
|
+ let tempObj = {
|
|
|
+ letter: sourceLetterList[i],
|
|
|
+ ifNeedClick: false,
|
|
|
ifUserClick: false,
|
|
|
- responseEndTime: performance.now(),
|
|
|
- responseStartTime: responseStartTime
|
|
|
- })
|
|
|
+ userResponseTime: 0
|
|
|
+ }
|
|
|
+ let tempObjA = {
|
|
|
+ letter: sourceLetterListA[i],
|
|
|
+ ifNeedClick: false,
|
|
|
+ ifUserClick: false,
|
|
|
+ userResponseTime: 0
|
|
|
+ }
|
|
|
+ if (i == 0 || i < data.nbackIndex) {
|
|
|
+ data.currentLetterList.push(tempObj)
|
|
|
+ data.currentLetterListA.push(tempObjA)
|
|
|
+ } else {
|
|
|
+ if (
|
|
|
+ (data.sourceLetterList[i] == sourceLetterList[0] && data.nbackIndex == 0) ||
|
|
|
+ (data.sourceLetterList[i] == sourceLetterList[i - data.nbackIndex] && data.nbackIndex != 0)
|
|
|
+ ) {
|
|
|
+ tempObj.ifNeedClick = true
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ (data.sourceLetterListA[i] == sourceLetterListA[0] && data.nbackIndex == 0) ||
|
|
|
+ (data.sourceLetterListA[i] == sourceLetterListA[i - data.nbackIndex] && data.nbackIndex != 0)
|
|
|
+ ) {
|
|
|
+ tempObjA.ifNeedClick = true
|
|
|
+ }
|
|
|
+ data.currentLetterList.push(tempObj)
|
|
|
+ data.currentLetterListA.push(tempObjA)
|
|
|
+ }
|
|
|
}
|
|
|
+ console.log(data.currentLetterList, '.letter', data.currentLetterListA)
|
|
|
}
|
|
|
-
|
|
|
-const handleKeyDown = (event: any) => {
|
|
|
- console.log(event.button, '判断鼠标点击左键还是右键')
|
|
|
- console.log(event.key, '判断鼠标点j还是f')
|
|
|
- console.log(currentNumber, '当前试次', gameList, gameList[currentNumber])
|
|
|
- if (event.key == 'f') {
|
|
|
- gameList[currentNumber].ifUserClick = true
|
|
|
+function userClick(event: any) {
|
|
|
+ //用户点击动作
|
|
|
+ console.log(event.key, '按键')
|
|
|
+ if (event.key == 'f' || event.key == 'F') {
|
|
|
+ if (data.currentLetterIndex - 1 >= 0) {
|
|
|
+ data.currentLetterList[data.currentLetterIndex - 1].ifUserClick = true
|
|
|
+ data.currentLetterList[data.currentLetterIndex - 1].userResponseTime =
|
|
|
+ new Date().getTime() - data.startMilliSeconds
|
|
|
+ // console.log(new Date().getTime() - data.startMilliSeconds)
|
|
|
+ // console.log(data.currentLetterList, 'currentLetterList')
|
|
|
+ if (
|
|
|
+ data.currentLetterList[data.currentLetterIndex - 1].ifUserClick ==
|
|
|
+ data.currentLetterList[data.currentLetterIndex - 1].ifNeedClick
|
|
|
+ ) {
|
|
|
+ VoiceImpRef.value.videoPlay('right')
|
|
|
+ } else {
|
|
|
+ VoiceImpRef.value.videoPlay('error')
|
|
|
+ data.smallsquare++
|
|
|
+ if (data.smallsquare > 5) {
|
|
|
+ sendData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- if (gameList[currentNumber].ifUserClick === gameList[currentNumber].ifNeedClick) {
|
|
|
- gameList[currentNumber].correct = true
|
|
|
+ if (event.key == 'j' || event.key == 'J') {
|
|
|
+ if (data.currentLetterIndex - 1 >= 0) {
|
|
|
+ data.currentLetterListA[data.currentLetterIndex - 1].ifUserClick = true
|
|
|
+ data.currentLetterListA[data.currentLetterIndex - 1].userResponseTime =
|
|
|
+ new Date().getTime() - data.startMilliSeconds
|
|
|
+ // console.log(new Date().getTime() - data.startMilliSeconds)
|
|
|
+ // console.log(data.currentLetterList, 'currentLetterList')
|
|
|
+ if (
|
|
|
+ data.currentLetterListA[data.currentLetterIndex - 1].ifUserClick ==
|
|
|
+ data.currentLetterListA[data.currentLetterIndex - 1].ifNeedClick
|
|
|
+ ) {
|
|
|
+ VoiceImpRef.value.videoPlay('right')
|
|
|
+ } else {
|
|
|
+ VoiceImpRef.value.videoPlay('error')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- // }
|
|
|
- // // VoiceImpRef.value.videoPlay('click')
|
|
|
- // // setTimeout(() => {
|
|
|
- // // if (correct) {
|
|
|
- // // console.log(VoiceImpRef.value, 'hbbbbbbbbbbbbbbbbbbbbbbbbbdf=============>')
|
|
|
- // //
|
|
|
- // // VoiceImpRef.value.videoPlay('right')
|
|
|
- // // } else {
|
|
|
- // // VoiceImpRef.value.videoPlay('error')
|
|
|
- // // }
|
|
|
- // // }, 200)
|
|
|
- // // 收集当前试次的用户操作数据
|
|
|
- // // gameList.push({
|
|
|
- // // level: currentLevel,
|
|
|
- // // correct: correct,
|
|
|
- // // score: correct ? scoreList[currentLevel] : 0,
|
|
|
- // // responseEndTime: performance.now(),
|
|
|
- // // responseStartTime: responseStartTime
|
|
|
- // // })
|
|
|
- // // 开始下一次
|
|
|
- // // nextOnce()
|
|
|
- // console.log(gameList, '当前试次用户操作数据')
|
|
|
+ console.log(data.currentLetterList, 'currentLetterList', 312)
|
|
|
}
|
|
|
-
|
|
|
// 发送请求
|
|
|
const sendData = () => {
|
|
|
+ let correctCount = 0,
|
|
|
+ totalResponseTime = 0,
|
|
|
+ totalScore = 0
|
|
|
if (planInfo.value) {
|
|
|
- // 计算正确反应数和总反应时
|
|
|
- let { correctCount, totalResponseTime, totalScore } = gameList.reduce(
|
|
|
- (obj, curr) => {
|
|
|
- if (curr.correct) {
|
|
|
- obj.correctCount++
|
|
|
+ data.userAnswerList.back0.map((item) => {
|
|
|
+ console.log(item, item, 'back0')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+
|
|
|
+ totalScore += 10
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
}
|
|
|
- obj.totalScore += curr.score
|
|
|
- obj.totalResponseTime += curr.responseEndTime - curr.responseStartTime
|
|
|
- return obj
|
|
|
- },
|
|
|
- { correctCount: 0, totalResponseTime: 0, totalScore: 0 }
|
|
|
- )
|
|
|
-
|
|
|
- // 平均反应时 = 总反应时 / 总试次
|
|
|
- const avrResponseTime = `${(totalResponseTime / gameList.length).toFixed(2)}ms`
|
|
|
-
|
|
|
- // 如果在60秒内猜中50个物品得30分
|
|
|
- if (correctCount >= 50) {
|
|
|
- totalScore += 50
|
|
|
- }
|
|
|
-
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.userAnswerList.back1.map((item) => {
|
|
|
+ console.log(item, 'back1')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+
|
|
|
+ totalScore += 10
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.userAnswerList.back2.map((item) => {
|
|
|
+ console.log(item, 'back2')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+ totalScore += 30
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.userAnswerListA.back0.map((item) => {
|
|
|
+ console.log(item, item, 'back0')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+
|
|
|
+ totalScore += 10
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.userAnswerListA.back1.map((item) => {
|
|
|
+ console.log(item, 'back1')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+
|
|
|
+ totalScore += 10
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.userAnswerListA.back2.map((item) => {
|
|
|
+ console.log(item, 'back2')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+ totalScore += 30
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // const avrResponseTime = `${totalResponseTime}`
|
|
|
+ const avrResponseTime = `${(totalResponseTime / 60).toFixed(2)}ms`
|
|
|
const { gameId, gameName, id: planId } = planInfo.value
|
|
|
- const data = {
|
|
|
+ const sendData = {
|
|
|
finish: '1',
|
|
|
gameId,
|
|
|
gameName,
|
|
|
@@ -383,220 +488,297 @@ const sendData = () => {
|
|
|
name: '平均反应时',
|
|
|
value: avrResponseTime
|
|
|
},
|
|
|
+ {
|
|
|
+ code: 'gameTotalTime',
|
|
|
+ name: '游戏总时长',
|
|
|
+ value: (Date.now() - gameStartTime_record) / 1000 + 's'
|
|
|
+ },
|
|
|
{
|
|
|
code: 'avrResponseTime',
|
|
|
name: '最大难度',
|
|
|
- value: currentLevel + 1
|
|
|
+ value: data.nbackIndex + 1
|
|
|
},
|
|
|
{
|
|
|
- code: 'gameTotalTime',
|
|
|
- name: '游戏总时长',
|
|
|
- value: (Date.now() - gameStartTime_record) / 1000
|
|
|
+ code: 'avrResponseTime',
|
|
|
+ name: '游戏模式',
|
|
|
+ value: '混合模式'
|
|
|
}
|
|
|
],
|
|
|
planId,
|
|
|
- gamelevel: currentLevel + 1,
|
|
|
+ // gamelevel: currentLevel + 1,
|
|
|
score: totalScore,
|
|
|
userId: userStore.user.id,
|
|
|
gameTotalTime: Date.now() - gameStartTime_record
|
|
|
}
|
|
|
-
|
|
|
- console.log('发送数据', data)
|
|
|
-
|
|
|
- AchievementAPI.add(data).then(() => {
|
|
|
+ AchievementAPI.add(sendData).then(() => {
|
|
|
ElMessage.success('本次训练已结束')
|
|
|
- clearInterval(timerId)
|
|
|
-
|
|
|
+ clearInterval(countDownInterval)
|
|
|
+ clearInterval(divShowInteval)
|
|
|
handleClose(() => {})
|
|
|
|
|
|
instance?.proxy?.$Bus.emit('trainList-refresh')
|
|
|
})
|
|
|
+ console.log('发送数据', sendData)
|
|
|
} else {
|
|
|
- ElMessage.success('本次训练已结束')
|
|
|
- clearInterval(timerId)
|
|
|
+ data.userAnswerList.back0.map((item) => {
|
|
|
+ console.log(item, item, 'back0')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+
|
|
|
+ totalScore += 10
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.userAnswerList.back1.map((item) => {
|
|
|
+ console.log(item, 'back1')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+
|
|
|
+ totalScore += 10
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.userAnswerList.back2.map((item) => {
|
|
|
+ console.log(item, 'back2')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+ totalScore += 30
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.userAnswerListA.back0.map((item) => {
|
|
|
+ console.log(item, item, 'back0')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+
|
|
|
+ totalScore += 10
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.userAnswerListA.back1.map((item) => {
|
|
|
+ console.log(item, 'back1')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+
|
|
|
+ totalScore += 10
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.userAnswerListA.back2.map((item) => {
|
|
|
+ console.log(item, 'back2')
|
|
|
+ item.map((item1) => {
|
|
|
+ console.log(item1.ifNeedClick, item1.ifUserClick, '0')
|
|
|
+ if (item1.ifNeedClick === true && item1.ifUserClick === true) {
|
|
|
+ console.log('正确')
|
|
|
+ totalScore += 30
|
|
|
+ correctCount++
|
|
|
+ totalResponseTime += item1.userResponseTime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ const sendData = {
|
|
|
+ finish: '1',
|
|
|
+ paramList: [
|
|
|
+ {
|
|
|
+ code: 'score',
|
|
|
+ name: '得分',
|
|
|
+ value: totalScore
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 'correctCount',
|
|
|
+ name: '正确反应数',
|
|
|
+ value: correctCount
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 'avrResponseTime',
|
|
|
+ name: '平均反应时',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 'gameTotalTime',
|
|
|
+ name: '游戏总时长',
|
|
|
+ value: (Date.now() - gameStartTime_record) / 1000
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // code: 'avrResponseTime',
|
|
|
+ // name: '最大难度',
|
|
|
+ // value: 3
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ // gamelevel: currentLevel + 1,
|
|
|
+ score: totalScore,
|
|
|
+ userId: userStore.user.id,
|
|
|
+ gameTotalTime: Date.now() - gameStartTime_record
|
|
|
+ }
|
|
|
+ console.log('发送数据', sendData)
|
|
|
|
|
|
+ ElMessage.success('本次训练已结束')
|
|
|
+ // clearInterval(timerId)
|
|
|
+ clearInterval(countDownInterval)
|
|
|
+ clearInterval(divShowInteval)
|
|
|
handleClose(() => {})
|
|
|
instance?.proxy?.$Bus.emit('trainList-refresh')
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-const handleClose = (done: () => void) => {
|
|
|
- clearInterval(timerId)
|
|
|
- $emits('gameOver', 'WorkingMemory')
|
|
|
-}
|
|
|
-
|
|
|
-async function exec() {
|
|
|
- // openDialogRef.value.openDialog()
|
|
|
- gameStartTime_record = Date.now()
|
|
|
- let tempPlan = sessionStorage.getItem('currentPlanInfo')
|
|
|
- // console.log(onceData.value,'onceData392');
|
|
|
-
|
|
|
- // onceData.choices = shuffleArray(onceData.choices)
|
|
|
- if (tempPlan) {
|
|
|
- planInfo.value = JSON.parse(tempPlan)
|
|
|
- }
|
|
|
- // 记录游戏开始时间戳
|
|
|
- gameStartTime = performance.now()
|
|
|
- // 重置游戏结束时间戳
|
|
|
- gameEndTime = 0
|
|
|
- // 重置当前等级
|
|
|
- currentLevel = 0
|
|
|
- // 重置当前试次
|
|
|
- currentNumber = 0
|
|
|
- // 清空游戏数据
|
|
|
- gameList = []
|
|
|
- // 设置第一个试次的游戏素材
|
|
|
- setOnceData()
|
|
|
-}
|
|
|
onMounted(() => {
|
|
|
exec()
|
|
|
- nextTick(() => {
|
|
|
- window.addEventListener('keydown', handleKeyDown)
|
|
|
- countDownVisible.value = true
|
|
|
- setTimetiming()
|
|
|
- })
|
|
|
-})
|
|
|
-watchEffect(() => {
|
|
|
- // console.log(onceData.value.choices, 'onceData.value.choices')
|
|
|
- // onceData.value.choices = shuffleArray(onceData.value.choices)
|
|
|
})
|
|
|
+//页面销毁方法
|
|
|
onUnmounted(() => {
|
|
|
- clearInterval(timerId)
|
|
|
+ //将定时器进行清除
|
|
|
+ clearInterval(divShowInteval)
|
|
|
+ clearInterval(countDownInterval)
|
|
|
})
|
|
|
-// 添加键盘事件监听
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-// .object-recognition-containers {
|
|
|
-// background-color: #eff2f4;
|
|
|
-// }
|
|
|
-.breadth-training-container {
|
|
|
+.working-memory-container {
|
|
|
+ background-color: #f5f4e9;
|
|
|
+
|
|
|
+ //.big-square {
|
|
|
+ // // margin-top: 150px;
|
|
|
+ // // width: 600px;
|
|
|
+ // // height: 600px;
|
|
|
+ // border: 1px solid black;
|
|
|
+ // background-color: black;
|
|
|
+ // display: grid;
|
|
|
+ // padding: 10px;
|
|
|
+ // grid-template-columns: repeat(3, 1fr);
|
|
|
+ // grid-template-rows: repeat(3, 1fr);
|
|
|
+ //}
|
|
|
+
|
|
|
+ //.small-square {
|
|
|
+ // background-color: #006fbf;
|
|
|
+ // margin: 10px;
|
|
|
+ //}
|
|
|
+
|
|
|
+ .sable {
|
|
|
+ // border: 1px solid #ef49ad;
|
|
|
+ //background: aqua;
|
|
|
+ }
|
|
|
+
|
|
|
+ .letterCss {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background-size: cover;
|
|
|
+ font-size: 480px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 200px;
|
|
|
+ color: #333333;
|
|
|
+ text-shadow: 0px 3px 6px rgb(0, 0, 0, 0.76);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
//background-color: #f5f4e9;
|
|
|
- //background-color: #2bae68;
|
|
|
background-image: url('/static/image/game/bg-WorkMemory.png');
|
|
|
background-size: 100% 100%;
|
|
|
background-position: center center;
|
|
|
+ background-repeat: repeat;
|
|
|
|
|
|
- :deep(.el-progress-bar__outer) {
|
|
|
- background-color: rgba(0, 0, 0, 0.1);
|
|
|
+ .center-area {
|
|
|
+ background-image: url('/static/image/game/ADL/bg-center.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ /* 可选，让图片居中对齐 */
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ //display: flex;
|
|
|
+ position: relative;
|
|
|
+ //flex-direction: row;
|
|
|
+ //justify-content: space-around;
|
|
|
+ //align-items: center;
|
|
|
+ //width: calc(100%);
|
|
|
+ //height: 500px;
|
|
|
+ //background-color: black;
|
|
|
+ background: #000000;
|
|
|
}
|
|
|
|
|
|
- .choice-div {
|
|
|
- &:hover {
|
|
|
- box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.7);
|
|
|
- }
|
|
|
+ .main > div {
|
|
|
+ //width: 100px;
|
|
|
+ //height: 100px;
|
|
|
+ //margin: 40px;
|
|
|
}
|
|
|
- .center-bg-1 {
|
|
|
- background-image: url('/static/image/game/LogicalReasoning/bg-1.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: center center;
|
|
|
- background-repeat: repeat;
|
|
|
+
|
|
|
+ .main > div:nth-child(1) {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #006fbf;
|
|
|
}
|
|
|
- .center-bg-2 {
|
|
|
- background-image: url('/static/image/game/LogicalReasoning/bg-2.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: center center;
|
|
|
- background-repeat: repeat;
|
|
|
+
|
|
|
+ .main > div:nth-child(2) {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 33%;
|
|
|
+ //margin: 0 auto;
|
|
|
+ background-color: #006fbf;
|
|
|
}
|
|
|
- .center-bg-3 {
|
|
|
- background-image: url('/static/image/game/LogicalReasoning/bg-3.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: center center;
|
|
|
- background-repeat: repeat;
|
|
|
+
|
|
|
+ .main > div:nth-child(3) {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: #006fbf;
|
|
|
}
|
|
|
- .center-bg-4 {
|
|
|
- background-image: url('/static/image/game/LogicalReasoning/bg-4.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: center center;
|
|
|
- background-repeat: repeat;
|
|
|
+ .main > div:nth-child(4) {
|
|
|
+ position: absolute;
|
|
|
+ top: 33%;
|
|
|
+ left: 0;
|
|
|
+ background-color: #006fbf;
|
|
|
}
|
|
|
- .center-bg-k {
|
|
|
- background-image: url('/static/image/game/LogicalReasoning/bg-k.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: center center;
|
|
|
- background-repeat: repeat;
|
|
|
+ .main > div:nth-child(5) {
|
|
|
+ position: absolute;
|
|
|
+ top: 5%;
|
|
|
+ right: 28%;
|
|
|
+ //background-color: #006fbf;
|
|
|
}
|
|
|
- .buttonFist {
|
|
|
+ .main > div:nth-child(6) {
|
|
|
position: absolute;
|
|
|
- bottom: 150px;
|
|
|
- font-size: 88px;
|
|
|
- width: 540px;
|
|
|
- height: 180px;
|
|
|
- border-radius: 18px;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- &.next {
|
|
|
- background-image: url('/static/image/game/ResidueRecognition/btn-next.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: center center;
|
|
|
- border-color: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- &.start {
|
|
|
- background-image: url('/static/image/game/ResidueRecognition/btn-start.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: center center;
|
|
|
- border-color: transparent;
|
|
|
- }
|
|
|
+ top: 33%;
|
|
|
+ right: 0;
|
|
|
+ background-color: #006fbf;
|
|
|
}
|
|
|
-
|
|
|
- .bg-1 {
|
|
|
- // margin-top: 20px;
|
|
|
- // position: absolute;
|
|
|
- // top: 80px;
|
|
|
- background-image: url('/static/image/game/ResidueRecognition/bg-2.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: center center;
|
|
|
+ .main > div:nth-child(7) {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #006fbf;
|
|
|
}
|
|
|
-
|
|
|
- .bg-2a {
|
|
|
- cursor: pointer;
|
|
|
- transition: All 0.4s ease-in-out; //设置动画执行的时间为0.6s
|
|
|
-
|
|
|
- :hover {
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- .bg-2 {
|
|
|
- background-image: url('/static/image/game/ResidueRecognition/bg-3.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: center center;
|
|
|
- padding: 50px;
|
|
|
- }
|
|
|
+ .main > div:nth-child(8) {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 32%;
|
|
|
+ background-color: #006fbf;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.first-pass {
|
|
|
- width: 400px;
|
|
|
- height: 100px;
|
|
|
- background-image: url('/static/image/game/ResidueRecognition/bg-4.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: center center;
|
|
|
- position: absolute;
|
|
|
- font-size: 58px;
|
|
|
- top: 130px;
|
|
|
- left: 240px;
|
|
|
- text-align: center;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 39px;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 100px;
|
|
|
- text-shadow: 0px 4px 8px rgba(1, 54, 142, 0.53);
|
|
|
-
|
|
|
- .first-pass-1 {
|
|
|
- width: 182px;
|
|
|
- height: 37px;
|
|
|
- text-align: center;
|
|
|
- margin-left: -40px;
|
|
|
- margin-top: 20px;
|
|
|
- // font-family: Alibaba PuHuiTi 2.0;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 39px;
|
|
|
- color: #a76202;
|
|
|
- // line-height: 100px;
|
|
|
+ .main > div:nth-child(9) {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: #006fbf;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
