|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <section class="auditory-recognition-container flex-center flex-col wh-full relative">
|
|
|
+ <section class="auditory-word-img-matching-container flex-center flex-col wh-full relative">
|
|
|
<water-title title="词图匹配" />
|
|
|
<div v-if="isMainWin" class="text-[42px] text-[#0F308C]">
|
|
|
{{ Topics.question }}
|
|
@@ -17,19 +17,19 @@
|
|
|
class="w-[300px] h-[160px] mb-40px cursor-pointer hover:scale-101"
|
|
|
@click="handlePlay"
|
|
|
/>
|
|
|
- <div class="w-full flex flex-row justify-between">
|
|
|
+ <div class="w-full flex flex-row justify-around">
|
|
|
<div v-for="(item, index) in TopicsVal[currentIndex].choices" :key="index" class="flex flex-col items-center">
|
|
|
- <div
|
|
|
- class="w-360px h-180px flex-center rounded-58px text-96px cursor-pointer bg-[#F9F9F9] border-[#E7E7E7] border-1px text-[#0F308C]"
|
|
|
- @click="handleItemClick(item, index)"
|
|
|
- >
|
|
|
- <div v-if="isMainWin">{{ item }}</div>
|
|
|
- <div v-else>{{ index + 1 }}</div>
|
|
|
+ <div class="w-180px h-180px flex-center cursor-pointer" @click="handleItemClick(item, index)">
|
|
|
+ <el-image
|
|
|
+ :src="`/static/image/cognitiveAbility/SpeechTraining/Visual/${item}.jpg`"
|
|
|
+ fit="contain"
|
|
|
+ class="w-[120px] h-[120px] cursor-pointer mt-30px"
|
|
|
+ />
|
|
|
</div>
|
|
|
<el-image
|
|
|
:src="`/static/image/cognitiveAbility/SpeechTraining/${useClickIndex === index || item === TopicsVal[currentIndex].userAnswer ? 'Options-right' : 'Options-Blank'}.png`"
|
|
|
fit="contain"
|
|
|
- class="w-[120px] h-[120px] cursor-pointer mt-30px"
|
|
|
+ class="w-[100px] h-[100px] mt-30px"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -99,12 +99,12 @@ const handleNext = () => {
|
|
|
if (TopicsVal.value[currentIndex.value].userAnswer === '') {
|
|
|
showTopics.value = true
|
|
|
showNextBtn.value = false
|
|
|
- localStorage.setItem('tow-win-auditory-recognition-show-topics', 'YES')
|
|
|
+ localStorage.setItem('tow-win-auditory-word-img-matching-show-topics', currentIndex.value + '')
|
|
|
} else {
|
|
|
let tempCount = TopicsVal.value.filter((item) => item.userAnswer !== '').length
|
|
|
if (tempCount === TopicsVal.value.length) {
|
|
|
isSubmitting = true
|
|
|
- localStorage.setItem('tow-win-auditory-recognition-isSubmitting', 'YES')
|
|
|
+ localStorage.setItem('tow-win-auditory-word-img-matching-isSubmitting', 'YES')
|
|
|
} else {
|
|
|
currentIndex.value++
|
|
|
handleNext()
|
|
@@ -113,7 +113,7 @@ const handleNext = () => {
|
|
|
}
|
|
|
|
|
|
const handlePlay = () => {
|
|
|
- localStorage.setItem('two-win-auditory-recognition-item-check', TopicsVal.value[currentIndex.value].choices.join(','))
|
|
|
+ localStorage.setItem('two-win-auditory-word-img-matching-item-check', TopicsVal.value[currentIndex.value].correct)
|
|
|
}
|
|
|
|
|
|
const handleItemClick = (item: string, index: number) => {
|
|
@@ -123,7 +123,10 @@ const handleItemClick = (item: string, index: number) => {
|
|
|
TopicsVal.value[currentIndex.value].userAnswer = item
|
|
|
useClickIndex.value = index
|
|
|
showSubmitBtn.value = true
|
|
|
- localStorage.setItem('two-win-auditory-recognition-submit-answer', TopicsVal.value[currentIndex.value].userAnswer)
|
|
|
+ localStorage.setItem(
|
|
|
+ 'two-win-auditory-word-img-matching-submit-answer',
|
|
|
+ TopicsVal.value[currentIndex.value].userAnswer
|
|
|
+ )
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -136,7 +139,7 @@ const handleSubmit = () => {
|
|
|
TopicsVal.value[currentIndex.value].userAnswer === TopicsVal.value[currentIndex.value].correct ? 'right' : 'error'
|
|
|
)
|
|
|
showSubmitBtn.value = false
|
|
|
- localStorage.setItem('two-win-auditory-recognition-try-over', 'YES')
|
|
|
+ localStorage.setItem('two-win-auditory-word-img-matching-try-over', 'YES')
|
|
|
}
|
|
|
|
|
|
async function exec() {
|
|
@@ -148,7 +151,7 @@ async function exec() {
|
|
|
return item
|
|
|
})
|
|
|
.sort(() => Math.random() - 0.5)
|
|
|
- localStorage.setItem('two-win-auditory-recognition-init-data', JSON.stringify(TopicsVal.value))
|
|
|
+ localStorage.setItem('two-win-auditory-word-img-matching-init-data', JSON.stringify(TopicsVal.value))
|
|
|
setTimeout(() => {
|
|
|
showNextBtn.value = true
|
|
|
}, 6600)
|
|
@@ -156,7 +159,7 @@ async function exec() {
|
|
|
taskBeginTime = Date.now()
|
|
|
VoiceImpRef.value.videoPlay(
|
|
|
'Speech-Auditory',
|
|
|
- 'static/voice/cognitiveAbility/SpeechTraining/Auditory/Recognition/1.mp3'
|
|
|
+ 'static/voice/cognitiveAbility/SpeechTraining/Auditory/WordImgMatching/1.mp3'
|
|
|
)
|
|
|
}
|
|
|
}
|
|
@@ -166,40 +169,37 @@ onMounted(() => {
|
|
|
|
|
|
window.addEventListener('storage', (val) => {
|
|
|
if (isMainWin.value) {
|
|
|
- if (val.key === 'two-win-auditory-recognition-submit-answer') {
|
|
|
+ if (val.key === 'two-win-auditory-word-img-matching-submit-answer') {
|
|
|
TopicsVal.value[currentIndex.value].userAnswer = val.newValue!
|
|
|
- localStorage.removeItem('two-win-auditory-recognition-submit-answer')
|
|
|
+ localStorage.removeItem('two-win-auditory-word-img-matching-submit-answer')
|
|
|
}
|
|
|
|
|
|
- if (val.key === 'two-win-auditory-recognition-try-over') {
|
|
|
+ if (val.key === 'two-win-auditory-word-img-matching-try-over') {
|
|
|
showNextBtn.value = true
|
|
|
- localStorage.removeItem('two-win-auditory-recognition-try-over')
|
|
|
+ localStorage.removeItem('two-win-auditory-word-img-matching-try-over')
|
|
|
}
|
|
|
} else {
|
|
|
- if (val.key === 'two-win-auditory-recognition-init-data' && isJSON(val.newValue!)) {
|
|
|
+ if (val.key === 'two-win-auditory-word-img-matching-init-data' && isJSON(val.newValue!)) {
|
|
|
TopicsVal.value = JSON.parse(val.newValue!) as TopicsType[]
|
|
|
- localStorage.removeItem('two-win-auditory-recognition-init-data')
|
|
|
+ localStorage.removeItem('two-win-auditory-word-img-matching-init-data')
|
|
|
}
|
|
|
|
|
|
- if (val.key === 'tow-win-auditory-recognition-show-topics' && val.newValue === 'YES') {
|
|
|
+ if (val.key === 'tow-win-auditory-word-img-matching-show-topics') {
|
|
|
showTopics.value = true
|
|
|
- localStorage.removeItem('tow-win-auditory-recognition-show-topics')
|
|
|
+ currentIndex.value = Number(val.newValue!)
|
|
|
+ useClickIndex.value = -1
|
|
|
+ localStorage.removeItem('tow-win-auditory-word-img-matching-show-topics')
|
|
|
}
|
|
|
|
|
|
- if (val.key === 'two-win-auditory-recognition-item-check') {
|
|
|
- let tempArr = val.newValue!.split(',')
|
|
|
- tempArr.forEach((name, index) => {
|
|
|
- setTimeout(() => {
|
|
|
- VoiceImpRef.value.videoPlay(
|
|
|
- 'Speech-Auditory',
|
|
|
- `static/voice/cognitiveAbility/SpeechTraining/Auditory/Recognition/${name}.mp3`
|
|
|
- )
|
|
|
- }, 1200 * index)
|
|
|
- })
|
|
|
- localStorage.removeItem('two-win-auditory-recognition-item-check')
|
|
|
+ if (val.key === 'two-win-auditory-word-img-matching-item-check') {
|
|
|
+ VoiceImpRef.value.videoPlay(
|
|
|
+ 'Speech-Auditory',
|
|
|
+ `static/voice/cognitiveAbility/SpeechTraining/Auditory/WordImgMatching/${val.newValue}.mp3`
|
|
|
+ )
|
|
|
+ localStorage.removeItem('two-win-auditory-word-img-matching-item-check')
|
|
|
}
|
|
|
|
|
|
- if (val.key === 'tow-win-auditory-recognition-isSubmitting' && val.newValue === 'YES') {
|
|
|
+ if (val.key === 'tow-win-auditory-word-img-matching-isSubmitting' && val.newValue === 'YES') {
|
|
|
isSubmitting = true
|
|
|
emits('gameOver', {
|
|
|
min: formatSeconds(Date.now() - taskBeginTime),
|
|
@@ -209,7 +209,7 @@ onMounted(() => {
|
|
|
}),
|
|
|
score: TopicsVal.value.filter((item) => item.userAnswer === item.correct).length + ''
|
|
|
})
|
|
|
- localStorage.removeItem('tow-win-auditory-recognition-isSubmitting')
|
|
|
+ localStorage.removeItem('tow-win-auditory-word-img-matching-isSubmitting')
|
|
|
}
|
|
|
}
|
|
|
})
|