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

相关文章
|
23天前
|
前端开发 JavaScript 开发者
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>
在前端开发中,为解决ElementUI缺少处理树状数据选择的Select组件问题,封装了一个Vue子组件`SelectTree`。组件支持单选和多选,具备搜索功能和懒加载特性。单选示例展示了如何展示树状部门数据,而多选则增加了已选内容的取消功能。此外,还新增了根据等级限制选择的功能。文章提供了详细的代码实现和效果截图,对需要此类组件的开发者具有参考价值。
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>
|
29天前
单选全选框如何实现
单选全选框如何实现
14 1
|
2月前
elementui实现表格单选功能
elementui实现表格单选功能
13 0
|
2月前
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
|
5月前
|
存储 区块链 C++
C++ Qt开发:ComboBox下拉组合框组件
在Qt中,ComboBox(组合框)是一种常用的用户界面控件,它提供了一个下拉列表,允许用户从预定义的选项中选择一个。该组件提供了一种方便的方式让用户从预定义的选项中进行选择,一般来说`ComboBox`会以按钮的形式显示在界面上,用户点击按钮后,会弹出一个下拉列表,其中包含预定义的选项。当然`ComboBox`不仅局限于选择,也允许用户手动输入内容。
75 0
|
Windows
Qt之单选按钮和复选按钮(QRadioButton、QCheckBox)
Qt之单选按钮和复选按钮(QRadioButton、QCheckBox)
273 0
|
前端开发 开发者
单选| 学习笔记
快速学习单选。
74 0
单选| 学习笔记
图片单选多选选择动画
在线演示 本地下载
803 0
|
JavaScript