言语康复训练 - 听 - 100%

src/views/tester/components/RehabilitationEvaluation/CognitiveAbilityTask/CognitiveAbilityTaskAuditoryTraining/CATAuditoryTrainingExecuteInstructions/index.vue

@@ -1,39 +1,25 @@
 <template>
   <section class="auditory-execute-instructions-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="flex-center flex-col text-100px text-[#0F308C]">
-      {{ TopicsVal[currentIndex].correct }}
-    </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-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>
-            <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>
+    <template v-if="isMainWin">
+      <div class="text-[42px] text-[#0F308C]">
+        {{ Topics.question }}
+      </div>
+      <div class="text-[100px] text-[#0F308C] w-80% h-300px flex-center">
+        {{ TopicsVal[currentIndex].userAnswer }}
+      </div>
+    </template>
+
+    <div v-if="!isMainWin && showTopics" class="flex-center flex-col">
+      <div class="text-42px text-[#0F308C]">请根据指示做出动作</div>
+      <div class="tgr-container w-1200px h-500px my-50px relative shadow-2xl rounded-18px" @click="useClick(0)">
+        <div
+          class="circle absolute cursor-pointer hover:scale-101 shadow-2xl"
+          :style="circleStyle"
+          @click.stop="useClick(1)"
+        ></div>
+      </div>
     </div>
 
     <div v-if="!isMainWin" class="w-[300px] h-[140px]">
@@ -112,24 +98,58 @@ const handleNext = () => {
   }
 }
 
-const handlePlay = () => {
-  localStorage.setItem(
-    'two-win-auditory-execute-instructions-item-check',
-    TopicsVal.value[currentIndex.value].choices.join(',')
-  )
+const useClick = (index: number) => {
+  showSubmitBtn.value = true
+  useClickIndex.value = index
+  VoiceImpRef.value.videoPlay()
+  TopicsVal.value[currentIndex.value].userAnswer = index === 0 ? '未点击圆球' : '点击圆球'
+  localStorage.setItem('two-win-auditory-execute-instructions-submit-answer', index === 0 ? '未点击圆球' : '点击圆球')
 }
 
-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-execute-instructions-submit-answer',
-      TopicsVal.value[currentIndex.value].userAnswer
-    )
+// 定义一个响应式对象来存储圆的样式
+const circleStyle = ref({
+  top: '0px',
+  left: '0px',
+  width: '0px',
+  height: '0px',
+  backgroundColor: '#000'
+})
+
+// 生成随机数的函数
+function getRandomInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+// 生成随机颜色的函数
+function getRandomColor() {
+  const letters = '0123456789ABCDEF'
+  let color = '#'
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)]
+  }
+  return color
+}
+
+// 生成随机圆的函数
+function generateRandomCircle() {
+  const container = document.querySelector('.tgr-container') as HTMLElement
+  const containerWidth = container.offsetWidth
+  const containerHeight = container.offsetHeight
+
+  const circleSize = getRandomInt(50, 100) // 圆的直径范围
+  const circleTop = getRandomInt(0, containerHeight - circleSize)
+  const circleLeft = getRandomInt(0, containerWidth - circleSize)
+  const circleColor = getRandomColor()
+
+  console.log(circleSize, circleTop, circleLeft, circleColor)
+
+  circleStyle.value = {
+    top: `${circleTop}px`,
+    left: `${circleLeft}px`,
+    width: `${circleSize}px`,
+    height: `${circleSize}px`,
+    backgroundColor: circleColor,
+    borderRadius: '50%'
   }
 }
 
@@ -138,9 +158,7 @@ const handleSubmit = () => {
     ElMessage.warning('请先完成当前题目!')
     return
   }
-  VoiceImpRef.value.videoPlay(
-    TopicsVal.value[currentIndex.value].userAnswer === TopicsVal.value[currentIndex.value].correct ? 'right' : 'error'
-  )
+  VoiceImpRef.value.videoPlay(useClickIndex.value === 1 ? 'right' : 'error')
   showSubmitBtn.value = false
   localStorage.setItem('two-win-auditory-execute-instructions-try-over', 'YES')
 }
@@ -191,20 +209,10 @@ onMounted(() => {
         showTopics.value = true
         currentIndex.value = Number(val.newValue!)
         useClickIndex.value = -1
-        localStorage.removeItem('tow-win-auditory-execute-instructions-show-topics')
-      }
-
-      if (val.key === 'two-win-auditory-execute-instructions-item-check') {
-        let tempArr = val.newValue!.split(',')
-        tempArr.forEach((name, index) => {
-          setTimeout(() => {
-            VoiceImpRef.value.videoPlay(
-              'Speech-Auditory',
-              `static/voice/cognitiveAbility/SpeechTraining/Auditory/ExecuteInstructions/${name}.mp3`
-            )
-          }, 1200 * index)
+        nextTick(() => {
+          generateRandomCircle()
         })
-        localStorage.removeItem('two-win-auditory-execute-instructions-item-check')
+        localStorage.removeItem('tow-win-auditory-execute-instructions-show-topics')
       }
 
       if (val.key === 'tow-win-auditory-execute-instructions-isSubmitting' && val.newValue === 'YES') {

src/views/tester/components/RehabilitationEvaluation/CognitiveAbilityTask/CognitiveAbilityTaskAuditoryTraining/CATAuditoryTrainingExecuteInstructions/topics.json

@@ -1,10 +1,10 @@
 {
-  "question": "接下来会给你听一些声音，请在这些声音中选择出屏幕中呈现的词语",
+  "question": "请仔细听给出的指令，请你根据指令做出相应动作",
   "topics":
   [
     {
-      "choices": ["雷声", "狗叫", "葡萄"],
-      "correct": "葡萄",
+      "choices": [],
+      "correct": "点击圆球",
       "userAnswer": ""
     }
   ]

src/views/tester/components/RehabilitationEvaluation/CognitiveAbilityTask/CognitiveAbilityTaskAuditoryTraining/index.vue

@@ -42,6 +42,12 @@
           @game-over="childTaskOver"
         />
 
+        <!-- 执行指令 -->
+        <c-a-t-auditory-training-execute-instructions
+          v-if="checkItems[4].active && checkItems[4].isTraining && !checkItems[4].isFinish"
+          @game-over="childTaskOver"
+        />
+
         <!-- 短文故事 -->
         <c-a-t-auditory-training-short-story
           v-if="checkItems[5].active && checkItems[5].isTraining && !checkItems[5].isFinish"
@@ -113,6 +119,7 @@ import { useThrottleFn } from '@vueuse/core'
 import { useUserStore } from '@/store'
 import { isJSON } from '@/utils'
 import CATAuditoryTrainingShortStory from '@/views/tester/components/RehabilitationEvaluation/CognitiveAbilityTask/CognitiveAbilityTaskAuditoryTraining/CATAuditoryTrainingShortStory/index.vue'
+import CATAuditoryTrainingExecuteInstructions from '@/views/tester/components/RehabilitationEvaluation/CognitiveAbilityTask/CognitiveAbilityTaskAuditoryTraining/CATAuditoryTrainingExecuteInstructions/index.vue'
 interface CheckItem {
   key: number
   name: string