单选多选(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将数组转换为字符串比较;如果正确答案是字符串,则需要将

相关文章
|
消息中间件 缓存 监控
【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/缓存/任务/邮件/监控
|
自然语言处理 数据处理 知识图谱
PaddleNLP UIE 实体关系抽取 -- 抽取药品说明书(名称、规格、用法、用量)【废弃】
PaddleNLP UIE 实体关系抽取 -- 抽取药品说明书(名称、规格、用法、用量)【废弃】
287 1
|
存储 监控 Docker
如何限制docker使用的cpu,内存,存储
如何限制docker使用的cpu,内存,存储
|
存储 算法 安全
网络安全中的加密技术与解密算法:保障数据安全的基石
【7月更文挑战第1天】网络安全依赖加密技术与解密算法确保数据安全。本文探讨加密原理、对称与非对称加密(如AES、DES、RSA、ECC)及它们在数据传输、存储安全和身份验证中的应用。加密是数据保密的核心,面对不断升级的网络威胁,加密技术将持续进化以适应新挑战。
|
存储 人工智能 搜索推荐
[AI Mem0] 结合Mem0编写有状态AI应用,让应用更智能、更个性化
[AI Mem0] 结合Mem0编写有状态AI应用,让应用更智能、更个性化
|
Oracle 关系型数据库 数据库
Oracle 部署及基础使用,字节跳动资深面试官亲述
Oracle 部署及基础使用,字节跳动资深面试官亲述
基本时间单位 | 带你读《5G 空口设计与实践进阶 》之十五
为提供精确、一致的时间度量,NR 定义了最小时间单位 Tc。
基本时间单位 | 带你读《5G 空口设计与实践进阶 》之十五
|
移动开发 HTML5
html5为什么只需要写<!doctype html>? 一共有多少种Doctype文档类型?
html5为什么只需要写<!doctype html>? 一共有多少种Doctype文档类型?
402 0
|
存储 Linux API
C++新特性 线程局部存储
C++新特性 线程局部存储
403 0
|
Android开发 iOS开发 容器
CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)(2)
CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)
1318 0

热门文章

最新文章