单选多选(CocosCreator)

简介: 单选多选(CocosCreator)
推荐阅读:

1.前沿

      首先来说说我们的需求吧:随机出现单选题或者多选题,完全回答正确才算正确(多选题中少选错选算错),核实答案的正确性,某个选项选择正确出现选项正确标志,某个选项选择错误出现错误标志(选项错误包括单选中选择错误的选项;多选中未选择的选项)。

2.UI界面

下面,先来实现单选多选界面:
单选:
在这里插入图片描述
为singleAnswer添加ToggleGroup组件
在这里插入图片描述
为每个option选项天机Toggle组件,并制定组为SingleAnswer
在这里插入图片描述
多选:多选只需要在单选的基础上去掉ToggleGroup组件,并删掉每个option的所属组。

3.获取用户答案

代码判断用户选择的选项,并将其保存在数组中:

    submitAnswer() {
        var self = this;
        let answerArr = [];
        if (self.isSingle) {
            for (let i = 0; i < self.uiRoot.singleOptions.length; i++) {
                let isSelect = self.uiRoot.singleOptions[i].getComponent(cc.Toggle).isChecked;
                if (isSelect) {
                    answerArr.push(i);
                }
            }
            cc.log("我的单选答案==", answerArr);
        }
        else {
            for (let i = 0; i < self.uiRoot.mulOptions.length; i++) {
                let isSelect = self.uiRoot.mulOptions[i].getComponent(cc.Toggle).isChecked;
                if (isSelect) {
                    answerArr.push(i);
                }
            }
            cc.log("我的多选答案==", answerArr);
        }
        self.checkAnswer(answerArr);
    },

      原理是判断每个选项的Toggle组件中的IsChecked的布尔值,true(选择),false(未选择)

4.显示答题结果

根据正确答案来显示对应的图标:

//验证答案是否正确
    checkAnswer(answerArr) {

        var self = this;
        self.right = [0,1,2];//正确答案
        if (self.isSingle) {
            if (answerArr[0] == self.right[0]) {
                cc.find("option" + (answerArr[0] + 1) + "/right" + (answerArr[0] + 1), self.uiRoot.singleAnswer).active = true;//显示正确的
            } else {
                cc.find("option" + (self.right[0] + 1) + "/right" + (self.right[0] + 1), self.uiRoot.singleAnswer).active = true;//显示正确答案
                cc.find("option" + (answerArr[0] + 1) + "/error" + (answerArr[0] + 1), self.uiRoot.singleAnswer).active = true;//显示错误选项的标志
            }
        } else {
            for (let i = 0; i < self.uiRoot.mulAnswer.children.length; i++) {
                if (self.right.indexOf(i) > -1) {
                    //包含
                    cc.find("option" + (i + 1) + "/right" + (i + 1), self.uiRoot.mulAnswer).active = true;
                } else if (answerArr.indexOf(i) > -1) {
                    cc.find("option" + (i + 1) + "/error" + (i + 1), self.uiRoot.mulAnswer).active = true;
                }
            }
        }
        answerArr=answerArr.sort();
        if (JSON.stringify(answerArr) == JSON.stringify(self.right)) {
            //最终答案正确
            cc.find("finalRight", self.uiRoot.question).active=true;
            cc.find("finalError", self.uiRoot.question).active=false;
        }else
        {
            cc.find("finalRight", self.uiRoot.question).active=false;
            cc.find("finalError", self.uiRoot.question).active=true;
        }
    },

      判断原理是判断用户的答案数组中元素是否和正确答案中的元素相等。
      单选题实现简单,只需要判断数组中第一个元素是否相等;多选题就比较复杂,具体方法是:为了避免用户数组中答案与正确答案顺序不同,需要先将用户答案数组进行排序用户答案数组.sort();然后使用JSON.stringify将数组转换为字符串比较;如果正确答案是字符串,则需要将

相关文章
|
图形学
模型UV纹理设置工具
贴图可以赋予模型丰富的外观纹理和颜色信息,而法线贴图可以增加模型的细节和真实感。这两种纹理贴图技术相互配合,共同营造出逼真的三维场景。
817 3
模型UV纹理设置工具
|
传感器 存储 JSON
|
4月前
|
存储 人工智能 运维
从“BI支撑”走到“AI驱动”:企业数据底座该怎么重做?
本文探讨AI时代数据平台的演进:传统BI导向的架构已难满足分钟级实时、多模态数据治理及AI Agent自动化需求。提出以Lakehouse统一存储计算、通用增量计算(GIC)平衡新鲜度与成本、Data Agent赋能人机协同的“AI原生智能基座”实践路径,并结合小红书、长安汽车案例验证可行性。(239字)
375 0
|
存储 分布式计算 API
大数据-107 Flink 基本概述 适用场景 框架特点 核心组成 生态发展 处理模型 组件架构
大数据-107 Flink 基本概述 适用场景 框架特点 核心组成 生态发展 处理模型 组件架构
1042 0
|
消息中间件 缓存 监控
【Java笔记+踩坑】SpringBoot基础3——开发。热部署+配置高级+整合NoSQL/缓存/任务/邮件/监控
springboot的热部署、配置的宽松绑定和校验、任务、邮件、监控、springboot整合JdbcTemplate,h2等sql技术、整合redis,mongodb,es等nosql技术、整合redis,Memcached,jetcache,j2cache等缓存技术、整合ActiveMQ,RabbitMQ,RocketMQ,Kafka等消息的中间件的入门、整合缓存/任务/邮件/监控
【Java笔记+踩坑】SpringBoot基础3——开发。热部署+配置高级+整合NoSQL/缓存/任务/邮件/监控
|
安全 API UED
WebSocket API 中的 close 事件是如何触发的?
【10月更文挑战第26天】close事件的触发涵盖了从正常的连接关闭到各种异常情况导致的连接中断等多种场景。通过监听close事件,开发人员可以在连接关闭时进行相应的处理,如清理资源、更新界面状态或尝试重新连接等,以确保应用程序的稳定性和良好的用户体验。
基本时间单位 | 带你读《5G 空口设计与实践进阶 》之十五
为提供精确、一致的时间度量,NR 定义了最小时间单位 Tc。
基本时间单位 | 带你读《5G 空口设计与实践进阶 》之十五
|
安全 数据安全/隐私保护 虚拟化
win11家庭版怎么升级专业版
Windows 11家庭版用户常需升级到专业版以解锁远程桌面、组策略和BitLocker等高级功能。在升级前,备份数据、确保系统更新至最新。购买正版密钥后,通过“设置”-&gt;“系统”-&gt;“激活”输入密钥进行升级。遵循提示完成升级过程,系统会自动应用专业版特性。如有问题,参考官方文档或寻求技术支持。
win11家庭版怎么升级专业版
|
自然语言处理 数据处理 知识图谱
PaddleNLP UIE 实体关系抽取 -- 抽取药品说明书(名称、规格、用法、用量)【废弃】
PaddleNLP UIE 实体关系抽取 -- 抽取药品说明书(名称、规格、用法、用量)【废弃】
454 1
|
前端开发
使用display:inline-block会产生什么问题?解决方法?
【10月更文挑战第27天】使用`display: inline-block`时可能会出现空白间隙和垂直对齐等问题,但通过上述相应的解决方法,可以有效地克服这些问题,实现更精确、更美观的页面布局效果。

热门文章

最新文章