Harmony OS Next应用“丁斗口算”开发记录 (12) 原创

丁斗科技
发布于 2025-1-15 17:11
浏览
0收藏

第十二节 自动评分和结果显示

用户点击“交卷”,应用开始评判。即将用户输入的答案,与自动生成的答案进行比较,同时计算正确率。以加减法为例,代码如下:
len = this.arrDataAdd.length;
for (let i = 0; i < len; i++) {
if (this.arrDataAdd[i].Rlt == Number(this.textInput[i])) {
this.rltCorrect[i] = true;
correctCount++;
} else {
this.rltCorrect[i] = false;
}
}
correctRate = correctCount / len;
correctRate = Math.floor(correctRate * 100);
this.Score = correctRate;
分值计算完成后,弹出一个自定义对话框,用于显示给用户看
CustomDialog是自定义弹出框,可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹出框。
弹出框(CustomDialog)可以通过配置isModal来实现模态和非模态弹窗。isModal为true的时候,弹出框为模态弹窗。isModal为false时,弹出框为非模态弹窗。
开发对话框的步骤如下:
使用@CustomDialog装饰器装饰自定义弹出框,可在此装饰器内自定义弹出框内容。CustomDialogController需在@Component内定义。
对话框设计如下图,用户得分为100时,显示一个奖励图片,非100分时仅显示分值。对话框底部有两个按钮,得分为100时仅显示“确认”,得分非100时,会多一个“继续做题”按钮。
Harmony OS Next应用“丁斗口算”开发记录 (12)-鸿蒙开发者社区

@CustomDialog
export default struct CustomDialogExample {
controller: CustomDialogController
continue ?: () => void
confirm ?: () => void

build(){

  Flex({ justifyContent: FlexAlign.SpaceBetween, direction: FlexDirection.Column }) {        
    if (this.score == 100) {
      Row() {
        Image($r('app.media.d100'))
          .width(220)
          .height(220)
          .objectFit(ImageFit.Contain)
      }.width('100%').justifyContent(FlexAlign.Center)
    } else {
      Text(this.score.toString() + '分')
        .fontSize(32)
        .margin({ top: 20, bottom: 10 })
      Text('继续加油哦')
        .fontSize(32)
        .margin({ top: 10, bottom: 50 })
    }
    Row() {
       Button('继续做题')
        .fontSize(16)
        .borderColor(Color.Black)
        .onClick(() => {
          if (this.continue) {
            this.continue();
          }
          this.controller.close();
        })
        .backgroundColor(0xffffff)
        .fontColor(Color.Black)
        .width(96)
         .visibility(this.score==100?Visibility.Hidden:Visibility.Visible)
      Button('确认')
        .fontSize(16)
        .borderColor(Color.Black)
        .onClick(() => {
          if (this.confirm) {
            this.confirm();
          }
          this.controller.close();
        })
        .backgroundColor(0xffffff)
        .fontColor(Color.Red)
        .width(96)
    }.width('100%').height(46).justifyContent(FlexAlign.SpaceEvenly)
  }
  .padding(5)

}

}

对话框导入PageEquation页面后,在页面中创建构造器,与装饰器呼应相连。
dialogController : CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
continue: this.onContinue.bind(this),
confirm: this.onAccept.bind(this),
equationIndex:this.index,
equationNumber:this.inputSelect.length,
score : this.Score,
dispRltCount : this.dispRltCount,
reCalCount : this.reCalCount,
breakRecord : this.breakRecord,
timeCount:this.countTime
}),
alignment: DialogAlignment.Default,
width:‘920px’,
height:‘900px’,
autoCancel:false
})
显示对话框
this.dialogController.open();
至此,完成了自动评分和结果显示。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
收藏
回复
举报
回复
    相关推荐