
Harmony OS Next应用“丁斗口算”开发记录 (12) 原创
第十二节 自动评分和结果显示
用户点击“交卷”,应用开始评判。即将用户输入的答案,与自动生成的答案进行比较,同时计算正确率。以加减法为例,代码如下:
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时,会多一个“继续做题”按钮。
@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();
至此,完成了自动评分和结果显示。
