|
@@ -0,0 +1,227 @@
|
|
|
+<template>
|
|
|
+ <section class="auditory-right-or-wrong-response-container flex-center flex-col wh-full relative">
|
|
|
+ <water-title title="是非反应" />
|
|
|
+ <div v-if="isMainWin" class="text-[42px] text-[#0F308C]">
|
|
|
+ {{ Topics.question }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="!isMainWin && showTopics" class="w-80% flex-center flex-col text-42px text-[#0F308C]">
|
|
|
+ {{ TopicsVal[currentIndex].question }}
|
|
|
+ </div>
|
|
|
+ <div class="w-80% h-60% my-30px flex-center flex-col">
|
|
|
+ <template v-if="showTopics">
|
|
|
+ <el-image
|
|
|
+ v-if="isMainWin"
|
|
|
+ src="/static/image/cognitiveAbility/SpeechTraining/Auditory/play.png"
|
|
|
+ fit="contain"
|
|
|
+ class="w-[300px] h-[160px] mb-40px cursor-pointer hover:scale-101"
|
|
|
+ @click="handlePlay"
|
|
|
+ />
|
|
|
+ <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-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-[60px] h-[60px] mt-30px"
|
|
|
+ />
|
|
|
+ </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>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+/*
|
|
|
+ * 组件名: CATAuditoryTrainingRightOrWrongResponse
|
|
|
+ * 组件用途: 常规听康复训练 - 是非反应
|
|
|
+ * 创建日期: 2024/11/12
|
|
|
+ * 编写者: JutarryWu
|
|
|
+ */
|
|
|
+
|
|
|
+import { formatSeconds, isJSON } from '@/utils'
|
|
|
+
|
|
|
+defineOptions({
|
|
|
+ name: 'CATAuditoryTrainingRightOrWrongResponse',
|
|
|
+ inheritAttrs: false
|
|
|
+})
|
|
|
+
|
|
|
+import Topics from './topics.json'
|
|
|
+
|
|
|
+interface TopicsType {
|
|
|
+ question: string
|
|
|
+ choices: string[]
|
|
|
+ correct: string
|
|
|
+ userAnswer: string
|
|
|
+}
|
|
|
+
|
|
|
+const props = defineProps({})
|
|
|
+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) // 副屏 - 用户点击的选项索引
|
|
|
+let taskBeginTime = 0 // 任务开始时间
|
|
|
+
|
|
|
+const handleNext = () => {
|
|
|
+ if (TopicsVal.value[currentIndex.value].userAnswer === '') {
|
|
|
+ showTopics.value = true
|
|
|
+ showNextBtn.value = false
|
|
|
+ localStorage.setItem('tow-win-auditory-right-or-wrong-response-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-right-or-wrong-response-isSubmitting', 'YES')
|
|
|
+ } else {
|
|
|
+ currentIndex.value++
|
|
|
+ handleNext()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handlePlay = () => {
|
|
|
+ localStorage.setItem(
|
|
|
+ 'two-win-auditory-right-or-wrong-response-item-check',
|
|
|
+ TopicsVal.value[currentIndex.value].question
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const handleItemClick = (item: string, index: number) => {
|
|
|
+ if (isSubmitting) return // 如果再提交进程中,不响应点击事件
|
|
|
+ if (!isMainWin.value) {
|
|
|
+ VoiceImpRef.value.videoPlay()
|
|
|
+ TopicsVal.value[currentIndex.value].userAnswer = item
|
|
|
+ useClickIndex.value = index
|
|
|
+ showSubmitBtn.value = true
|
|
|
+ localStorage.setItem(
|
|
|
+ 'two-win-auditory-right-or-wrong-response-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-right-or-wrong-response-try-over', 'YES')
|
|
|
+}
|
|
|
+
|
|
|
+async function exec() {
|
|
|
+ isMainWin.value = window.location.href.includes('win=main')
|
|
|
+ if (isMainWin.value) {
|
|
|
+ TopicsVal.value = Topics.topics
|
|
|
+ .map((item) => {
|
|
|
+ item.choices = item.choices.sort(() => Math.random() - 0.5)
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ .sort(() => Math.random() - 0.5)
|
|
|
+ localStorage.setItem('two-win-auditory-right-or-wrong-response-init-data', JSON.stringify(TopicsVal.value))
|
|
|
+ setTimeout(() => {
|
|
|
+ showNextBtn.value = true
|
|
|
+ }, 5200)
|
|
|
+ } else {
|
|
|
+ taskBeginTime = Date.now()
|
|
|
+ VoiceImpRef.value.videoPlay(
|
|
|
+ 'Speech-Auditory',
|
|
|
+ 'static/voice/cognitiveAbility/SpeechTraining/Auditory/RightOrWrongResponse/1.mp3'
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ exec()
|
|
|
+
|
|
|
+ window.addEventListener('storage', (val) => {
|
|
|
+ if (isMainWin.value) {
|
|
|
+ if (val.key === 'two-win-auditory-right-or-wrong-response-submit-answer') {
|
|
|
+ TopicsVal.value[currentIndex.value].userAnswer = val.newValue!
|
|
|
+ localStorage.removeItem('two-win-auditory-right-or-wrong-response-submit-answer')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val.key === 'two-win-auditory-right-or-wrong-response-try-over') {
|
|
|
+ showNextBtn.value = true
|
|
|
+ localStorage.removeItem('two-win-auditory-right-or-wrong-response-try-over')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (val.key === 'two-win-auditory-right-or-wrong-response-init-data' && isJSON(val.newValue!)) {
|
|
|
+ TopicsVal.value = JSON.parse(val.newValue!) as TopicsType[]
|
|
|
+ localStorage.removeItem('two-win-auditory-right-or-wrong-response-init-data')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val.key === 'tow-win-auditory-right-or-wrong-response-show-topics') {
|
|
|
+ showTopics.value = true
|
|
|
+ currentIndex.value = Number(val.newValue!)
|
|
|
+ useClickIndex.value = -1
|
|
|
+ VoiceImpRef.value.videoPlay(
|
|
|
+ 'Speech-Auditory',
|
|
|
+ `static/voice/cognitiveAbility/SpeechTraining/Auditory/RightOrWrongResponse/${TopicsVal.value[currentIndex.value].question}.mp3`
|
|
|
+ )
|
|
|
+ localStorage.removeItem('tow-win-auditory-right-or-wrong-response-show-topics')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val.key === 'two-win-auditory-right-or-wrong-response-item-check') {
|
|
|
+ VoiceImpRef.value.videoPlay(
|
|
|
+ 'Speech-Auditory',
|
|
|
+ `static/voice/cognitiveAbility/SpeechTraining/Auditory/RightOrWrongResponse/${val.newValue}.mp3`
|
|
|
+ )
|
|
|
+ localStorage.removeItem('two-win-auditory-right-or-wrong-response-item-check')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val.key === 'tow-win-auditory-right-or-wrong-response-isSubmitting' && val.newValue === 'YES') {
|
|
|
+ isSubmitting = true
|
|
|
+ emits('gameOver', {
|
|
|
+ min: formatSeconds(Date.now() - taskBeginTime),
|
|
|
+ content: JSON.stringify({
|
|
|
+ question: Topics.question,
|
|
|
+ topics: TopicsVal.value
|
|
|
+ }),
|
|
|
+ score: TopicsVal.value.filter((item) => item.userAnswer === item.correct).length + ''
|
|
|
+ })
|
|
|
+ localStorage.removeItem('tow-win-auditory-right-or-wrong-response-isSubmitting')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss"></style>
|