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

相关文章
|
5月前
|
前端开发 JavaScript 开发者
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>
在前端开发中,为解决ElementUI缺少处理树状数据选择的Select组件问题,封装了一个Vue子组件`SelectTree`。组件支持单选和多选,具备搜索功能和懒加载特性。单选示例展示了如何展示树状部门数据,而多选则增加了已选内容的取消功能。此外,还新增了根据等级限制选择的功能。文章提供了详细的代码实现和效果截图,对需要此类组件的开发者具有参考价值。
181 1
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>
|
5月前
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
|
5月前
|
C++
C++ Qt开发:RadioButton单选框分组组件
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍`QRadioButton`单选框组件以及与之交互的`QButtonGroup`类的常用方法及灵活运用。`QRadioButton`是Qt框架中的一个部件(Widget),用于提供单选按钮的界面元素。单选按钮允许用户从多个互斥的选项中选择一个,通常用于表示一组相关但互斥的选项。
197 0
C++ Qt开发:RadioButton单选框分组组件
|
5月前
|
存储 区块链 C++
C++ Qt开发:ComboBox下拉组合框组件
在Qt中,ComboBox(组合框)是一种常用的用户界面控件,它提供了一个下拉列表,允许用户从预定义的选项中选择一个。该组件提供了一种方便的方式让用户从预定义的选项中进行选择,一般来说`ComboBox`会以按钮的形式显示在界面上,用户点击按钮后,会弹出一个下拉列表,其中包含预定义的选项。当然`ComboBox`不仅局限于选择,也允许用户手动输入内容。
268 0
|
11月前
《QT从基础到进阶·二十四》按钮组QButtonGroup,单选框QRadioButton和多选框QCheckBox
《QT从基础到进阶·二十四》按钮组QButtonGroup,单选框QRadioButton和多选框QCheckBox
196 0
|
Windows
Qt之单选按钮和复选按钮(QRadioButton、QCheckBox)
Qt之单选按钮和复选按钮(QRadioButton、QCheckBox)
326 0
|
JavaScript 前端开发
单选与全选
结合table表格和checkbox复选框实现单选与全选功能(本文只考虑功能实现,样式不要在意,虽然极丑,但我看不到 φ(>ω<*) )。
单选与全选
|
前端开发 开发者
单选| 学习笔记
快速学习单选。
单选| 学习笔记
|
API 数据库
Flutter:使用复选框进行下拉多选
Flutter:使用复选框进行下拉多选 本文向您展示了在 Flutter 中使用复选框实现下拉多选的两种不同方法。在第一种方法中,我们将从头开始构建多选。在第二种方法中,我们将使用第三方包快速完成工作。
710 0
Flutter:使用复选框进行下拉多选