9. 辨音挑战赛（对应：jqx）

功能介绍：
针对《jqx》与Ü相拼规则的强化练习。题目给出含有错误拼写的拼音（如 “qü”）和正确拼写（如 “qu”），学生需要快速判断对错。当选中正确选项时，屏幕显示小ü脱帽行礼的动画，强化“j、q、x小淘气，见了鱼眼就挖去”的口诀记忆。
功能特点
1.题目设计：
包含10道题目，涵盖各种情况
错误拼写：q ü、j ü、x ü、q ü an、j ü n、x ü e
正确拼写：qu、ju、xu、quan
每道题目都有详细的解释和正确拼写
2.判断功能：
提供"正确"和"错误"两个按钮
点击按钮后立即显示反馈信息
答对加分，答错显示正确答案
3.小ü脱帽动画：
当题目为错误拼写时，显示小ü脱帽行礼的动画
动画展示ü的帽子（点）飞走的过程
动画结束后显示脱帽后的u
配有文字提示：“ü 见了 j q x ，脱帽行礼”
4.口诀记忆：
顶部显示：“j、q、x小淘气，见了鱼眼就挖去”
底部显示完整口诀：
j、q、x小淘气，
见了鱼眼就挖去。
小ü见了j、q、x，
脱帽行礼懂礼貌。
5.得分统计：
实时显示得分和题目进度
完成所有题目后显示最终得分
提供"重新开始"按钮
6.视觉设计：
使用卡片式布局，清晰区分不同功能区域
正确按钮使用绿色，错误按钮使用红色
动画区域使用黄色背景突出显示
口诀区域使用绿色背景
整体采用柔和的配色方案，适合儿童使用
使用方法
1.阅读题目，判断拼音拼写是否正确
2.点击"正确"或"错误"按钮
3.查看反馈信息，了解正确答案
4.如果题目为错误拼写，观察小ü脱帽动画
5.点击"下一题"继续练习
6.完成所有题目后，查看最终得分
7.点击"重新开始"可以重新练习
这个应用通过判断题和动画演示，帮助学生掌握j、q、x与ü相拼的规则，强化"j、q、x小淘气，见了鱼眼就挖去"的口诀记忆，适合一年级学生学习拼音使用。您可以在IDE中预览这个应用程序，体验完整的练习功能。

interface QuizQuestion {
  question: string;
  correctAnswer: boolean;
  explanation: string;
  correctSpelling: string;
}

@Entry
@Component
struct QuizGame {
  @State score: number = 0;
  @State currentQuestionIndex: number = 0;
  @State feedback: string = "请判断正误";
  @State showAnimation: boolean = false;
  @State animationProgress: number = 0;
  @State answered: boolean = false;
  
  private questions: QuizQuestion[] = [
    {
      question: "q ü",
      correctAnswer: false,
      explanation: "j q x 见了 ü ，脱帽行礼。",
      correctSpelling: "qu"
    },
    {
      question: "j ü",
      correctAnswer: false,
      explanation: "j q x 见了 ü ，脱帽行礼。",
      correctSpelling: "ju"
    },
    {
      question: "x ü",
      correctAnswer: false,
      explanation: "j q x 见了 ü ，脱帽行礼。",
      correctSpelling: "xu"
    },
    {
      question: "qu",
      correctAnswer: true,
      explanation: "正确！ü 见了 j q x ，脱帽行礼。",
      correctSpelling: "qu"
    },
    {
      question: "ju",
      correctAnswer: true,
      explanation: "正确！ü 见了 j q x ，脱帽行礼。",
      correctSpelling: "ju"
    },
    {
      question: "xu",
      correctAnswer: true,
      explanation: "正确！ü 见了 j q x ，脱帽行礼。",
      correctSpelling: "xu"
    },
    {
      question: "q ü an",
      correctAnswer: false,
      explanation: "j q x 见了 ü ，脱帽行礼。",
      correctSpelling: "quan"
    },
    {
      question: "j ü n",
      correctAnswer: false,
      explanation: "j q x 见了 ü ，脱帽行礼。",
      correctSpelling: "jun"
    },
    {
      question: "x ü e",
      correctAnswer: false,
      explanation: "j q x 见了 ü ，脱帽行礼。",
      correctSpelling: "xue"
    },
    {
      question: "quan",
      correctAnswer: true,
      explanation: "正确！ü 见了 j q x ，脱帽行礼。",
      correctSpelling: "quan"
    }
  ];

  checkAnswer(userAnswer: boolean) {
    if (this.answered) {
      return;
    }
    
    this.answered = true;
    const currentQuestion = this.questions[this.currentQuestionIndex];
    
    if (userAnswer === currentQuestion.correctAnswer) {
      this.score++;
      this.feedback = "回答正确！" + currentQuestion.explanation;
      
      if (!currentQuestion.correctAnswer) {
        this.showAnimation = true;
        this.startAnimation();
      }
    } else {
      this.feedback = "回答错误！" + currentQuestion.explanation + " 应该是 " + currentQuestion.correctSpelling;
      
      if (!currentQuestion.correctAnswer) {
        this.showAnimation = true;
        this.startAnimation();
      }
    }
  }

  startAnimation() {
    animateTo({ duration: 2000, curve: Curve.Linear }, () => {
      this.animationProgress = 100;
    });
    
    setTimeout(() => {
      this.showAnimation = false;
      this.animationProgress = 0;
    }, 2500);
  }

  nextQuestion() {
    if (this.currentQuestionIndex < this.questions.length - 1) {
      this.currentQuestionIndex++;
      this.feedback = "请判断正误";
      this.answered = false;
    }
  }

  resetGame() {
    this.score = 0;
    this.currentQuestionIndex = 0;
    this.feedback = "请判断正误";
    this.answered = false;
    this.showAnimation = false;
    this.animationProgress = 0;
  }

  build() {
    Column({ space: 20 }) {
      Text("jqx与Ü相拼规则练习")
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .fontColor('#333333')
        .margin({ top: 30 })

      Text("j、q、x小淘气，见了鱼眼就挖去")
        .fontSize(16)
        .fontColor('#666666')
        .margin({ bottom: 10 })

      // 得分和进度
      Row({ space: 20 }) {
        Text("得分: " + this.score + "/" + this.questions.length)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#4CAF50')
        
        Text("题目: " + (this.currentQuestionIndex + 1) + "/" + this.questions.length)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#2196F3')
      }
      .width('95%')
      .justifyContent(FlexAlign.Center)
      .padding(15)
      .backgroundColor('#FFFFFF')
      .borderRadius(16)
      .shadow({ radius: 10, color: '#1F000000', offsetX: 2, offsetY: 2 })

      // 题目区域
      Column({ space: 15 }) {
        Text("判断下列拼音拼写是否正确：")
          .fontSize(18)
          .fontColor('#333333')
        
        Text(this.questions[this.currentQuestionIndex].question)
          .fontSize(48)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FF9800')
          .margin({ top: 10, bottom: 10 })
      }
      .width('95%')
      .height(150)
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#FFFFFF')
      .borderRadius(16)
      .shadow({ radius: 10, color: '#1F000000', offsetX: 2, offsetY: 2 })

      // 按钮区域
      Row({ space: 20 }) {
        Button("正确")
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FFFFFF')
          .backgroundColor(this.answered ? '#CCCCCC' : '#4CAF50')
          .width(120)
          .height(60)
          .borderRadius(12)
          .enabled(!this.answered)
          .onClick(() => {
            this.checkAnswer(true);
          })
        
        Button("错误")
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FFFFFF')
          .backgroundColor(this.answered ? '#CCCCCC' : '#F44336')
          .width(120)
          .height(60)
          .borderRadius(12)
          .enabled(!this.answered)
          .onClick(() => {
            this.checkAnswer(false);
          })
      }
      .width('95%')
      .justifyContent(FlexAlign.Center)

      // 反馈信息
      Text(this.feedback)
        .fontSize(18)
        .fontColor('#2196F3')
        .textAlign(TextAlign.Center)
        .width('90%')
        .margin({ top: 10 })

      // 小ü脱帽动画
      if (this.showAnimation) {
        Column({ space: 10 }) {
          Text("小ü脱帽行礼动画")
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333333')
          
          Stack() {
            // 小ü的帽子（点）
            Text("¨")
              .fontSize(40)
              .position({ x: 50 + this.animationProgress * 0.5, y: 20 - this.animationProgress * 0.3 })
              .opacity(1 - this.animationProgress * 0.01)
            
            // 小ü的身体
            Text("ü")
              .fontSize(60)
              .position({ x: 50, y: 40 })
            
            // 脱帽后的u
            if (this.animationProgress > 50) {
              Text("u")
                .fontSize(60)
                .position({ x: 50, y: 40 })
                .opacity((this.animationProgress - 50) * 0.02)
            }
          }
          .width('95%')
          .height(120)
          .backgroundColor('#FFF9C4')
          .borderRadius(12)
          
          Text("ü 见了 j q x ，脱帽行礼")
            .fontSize(16)
            .fontColor('#FF9800')
            .margin({ top: 10 })
        }
        .width('95%')
        .padding(15)
        .backgroundColor('#FFFFFF')
        .borderRadius(16)
        .shadow({ radius: 10, color: '#1F000000', offsetX: 2, offsetY: 2 })
      }

      // 下一题按钮
      if (this.answered) {
        if (this.currentQuestionIndex < this.questions.length - 1) {
          Button("下一题")
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor('#FFFFFF')
            .backgroundColor('#2196F3')
            .width(200)
            .height(60)
            .borderRadius(30)
            .margin({ top: 20 })
            .onClick(() => {
              this.nextQuestion();
            })
        } else {
          Column({ space: 10 }) {
            Text("练习完成！")
              .fontSize(24)
              .fontWeight(FontWeight.Bold)
              .fontColor('#4CAF50')
            
            Text("最终得分: " + this.score + "/" + this.questions.length)
              .fontSize(20)
              .fontColor('#333333')
            
            Button("重新开始")
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .fontColor('#FFFFFF')
              .backgroundColor('#FF9800')
              .width(200)
              .height(60)
              .borderRadius(30)
              .margin({ top: 10 })
              .onClick(() => {
                this.resetGame();
              })
          }
          .width('95%')
          .padding(20)
          .backgroundColor('#FFFFFF')
          .borderRadius(16)
          .shadow({ radius: 10, color: '#1F000000', offsetX: 2, offsetY: 2 })
        }
      }

      // 口诀记忆
      Column({ space: 10 }) {
        Text("记忆口诀")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#333333')
        
        Text("j、q、x小淘气，")
          .fontSize(16)
          .fontColor('#666666')
        
        Text("见了鱼眼就挖去。")
          .fontSize(16)
          .fontColor('#666666')
        
        Text("小ü见了j、q、x，")
          .fontSize(16)
          .fontColor('#666666')
        
        Text("脱帽行礼懂礼貌。")
          .fontSize(16)
          .fontColor('#666666')
      }
      .width('95%')
      .padding(15)
      .backgroundColor('#E8F5E9')
      .borderRadius(16)
      .shadow({ radius: 10, color: '#1F000000', offsetX: 2, offsetY: 2 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
  }
}