|
@@ -1,8 +1,44 @@
|
|
|
<template>
|
|
|
- <section class="auditory-recognition-container flex-center wh-full relative">
|
|
|
+ <section class="auditory-recognition-container flex-center flex-col wh-full relative">
|
|
|
<water-title title="语音辨识" />
|
|
|
<div v-if="isMainWin" class="text-[42px]">接下来会给你听一些声音,请在这些声音中选择出屏幕中呈现的词语</div>
|
|
|
|
|
|
+ <div v-if="!isMainWin && showTopics" class="flex-center flex-col text-100px text-[#15FAF2]">
|
|
|
+ {{ TopicsVal[currentIndex].correct }}
|
|
|
+ </div>
|
|
|
+ <div class="w-80% h-60% my-20px flex-center flex-row justify-between">
|
|
|
+ <template v-if="showTopics">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in TopicsVal[currentIndex].choices"
|
|
|
+ :key="index"
|
|
|
+ class="w-320px h-360px flex-center rounded-8px shadow-2xl text-140px cursor-pointer"
|
|
|
+ :class="{ 'bg-[#15FAF2] text-white': useClickIndex === index || item === TopicsVal[currentIndex].userAnswer }"
|
|
|
+ @click="handleItemClick(item, index)"
|
|
|
+ >
|
|
|
+ <div v-if="isMainWin">{{ item }}</div>
|
|
|
+ <div v-else>{{ index + 1 }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="!isMainWin" class="w-[300px] h-[140px]">
|
|
|
+ <el-image
|
|
|
+ v-if="showSubmitBtn"
|
|
|
+ src="/static/image/cognitiveAbility/SpeechTraining/verify-bg.png"
|
|
|
+ fit="contain"
|
|
|
+ class="w-[300px] h-[140px] cursor-pointer hover:scale-101"
|
|
|
+ @click="handleSubmit"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-image
|
|
|
+ v-if="showNextBtn"
|
|
|
+ src="/static/image/cognitiveAbility/SpeechTraining/next.png"
|
|
|
+ fit="contain"
|
|
|
+ class="!absolute bottom-[24px] right-[140px] w-[300px] h-[140px] cursor-pointer hover:scale-101"
|
|
|
+ @click="handleNext()"
|
|
|
+ />
|
|
|
+
|
|
|
<VoiceImp ref="VoiceImpRef" />
|
|
|
</section>
|
|
|
</template>
|
|
@@ -15,19 +51,88 @@
|
|
|
* 编写者: JutarryWu
|
|
|
*/
|
|
|
|
|
|
+import { isJSON } from '@/utils'
|
|
|
+
|
|
|
defineOptions({
|
|
|
name: 'CATAuditoryTrainingRecognition',
|
|
|
inheritAttrs: false
|
|
|
})
|
|
|
+
|
|
|
+import Topics from './topics.json'
|
|
|
+
|
|
|
+interface TopicsType {
|
|
|
+ question: string
|
|
|
+ choices: string[]
|
|
|
+ correct: string
|
|
|
+ userAnswer: string
|
|
|
+}
|
|
|
+
|
|
|
const props = defineProps({})
|
|
|
-const emits = defineEmits([])
|
|
|
+const emits = defineEmits(['gameOver'])
|
|
|
|
|
|
const isMainWin = ref(false)
|
|
|
+const showNextBtn = ref(false) // 主屏 - 显示下一题按钮标识
|
|
|
+const showSubmitBtn = ref(false) // 副屏 - 显示确定按钮标识
|
|
|
+let isSubmitting = false // 是否正在提交标识
|
|
|
+const showTopics = ref(false) // 显示题目选项标识
|
|
|
const VoiceImpRef = ref()
|
|
|
+const currentIndex = ref(0)
|
|
|
+const TopicsVal = ref<TopicsType[]>([])
|
|
|
+const useClickIndex = ref(-1) // 副屏 - 用户点击的选项索引
|
|
|
+
|
|
|
+const handleNext = () => {
|
|
|
+ if (TopicsVal.value[currentIndex.value].userAnswer === '') {
|
|
|
+ showTopics.value = true
|
|
|
+ showNextBtn.value = false
|
|
|
+ localStorage.setItem('tow-win-auditory-recognition-show-topics', 'YES')
|
|
|
+ } 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')
|
|
|
+ } else {
|
|
|
+ currentIndex.value++
|
|
|
+ handleNext()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleItemClick = (item: string, index: number) => {
|
|
|
+ if (isSubmitting) return // 如果再提交进程中,不响应点击事件
|
|
|
+ if (isMainWin.value) {
|
|
|
+ localStorage.setItem('two-win-auditory-recognition-item-check', item)
|
|
|
+ } else {
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleSubmit = () => {
|
|
|
+ if (TopicsVal.value[currentIndex.value].userAnswer === '') {
|
|
|
+ ElMessage.warning('请先完成当前题目!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ VoiceImpRef.value.videoPlay(
|
|
|
+ TopicsVal.value[currentIndex.value].userAnswer === TopicsVal.value[currentIndex.value].correct ? 'right' : 'error'
|
|
|
+ )
|
|
|
+ showSubmitBtn.value = false
|
|
|
+ localStorage.setItem('two-win-auditory-recognition-try-over', 'YES')
|
|
|
+}
|
|
|
|
|
|
async function exec() {
|
|
|
isMainWin.value = window.location.href.includes('win=main')
|
|
|
- if (!isMainWin.value) {
|
|
|
+ if (isMainWin.value) {
|
|
|
+ TopicsVal.value = Topics.map((item) => {
|
|
|
+ item.choices = item.choices.sort(() => Math.random() - 0.5)
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ localStorage.setItem('two-win-auditory-recognition-init-data', JSON.stringify(TopicsVal.value))
|
|
|
+ setTimeout(() => {
|
|
|
+ showNextBtn.value = true
|
|
|
+ }, 6600)
|
|
|
+ } else {
|
|
|
VoiceImpRef.value.videoPlay(
|
|
|
'Speech-Auditory',
|
|
|
'static/voice/cognitiveAbility/SpeechTraining/Auditory/Recognition/1.mp3'
|
|
@@ -37,6 +142,44 @@ async function exec() {
|
|
|
|
|
|
onMounted(() => {
|
|
|
exec()
|
|
|
+
|
|
|
+ window.addEventListener('storage', (val) => {
|
|
|
+ if (isMainWin.value) {
|
|
|
+ if (val.key === 'two-win-auditory-recognition-submit-answer') {
|
|
|
+ TopicsVal.value[currentIndex.value].userAnswer = val.newValue!
|
|
|
+ localStorage.removeItem('two-win-auditory-recognition-submit-answer')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val.key === 'two-win-auditory-recognition-try-over') {
|
|
|
+ showNextBtn.value = true
|
|
|
+ localStorage.removeItem('two-win-auditory-recognition-try-over')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (val.key === 'two-win-auditory-recognition-init-data' && isJSON(val.newValue!)) {
|
|
|
+ TopicsVal.value = JSON.parse(val.newValue!) as TopicsType[]
|
|
|
+ localStorage.removeItem('two-win-auditory-recognition-init-data')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val.key === 'tow-win-auditory-recognition-show-topics' && val.newValue === 'YES') {
|
|
|
+ showTopics.value = true
|
|
|
+ localStorage.removeItem('tow-win-auditory-recognition-show-topics')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val.key === 'two-win-auditory-recognition-item-check') {
|
|
|
+ VoiceImpRef.value.videoPlay(
|
|
|
+ 'Speech-Auditory',
|
|
|
+ `static/voice/cognitiveAbility/SpeechTraining/Auditory/Recognition/${val.newValue}.mp3`
|
|
|
+ )
|
|
|
+ localStorage.removeItem('two-win-auditory-recognition-item-check')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val.key === 'tow-win-auditory-recognition-isSubmitting' && val.newValue === 'YES') {
|
|
|
+ isSubmitting = true
|
|
|
+ emits('gameOver', JSON.stringify(TopicsVal.value))
|
|
|
+ localStorage.removeItem('tow-win-auditory-recognition-isSubmitting')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
</script>
|
|
|
|