搭建答题面板
1.添加一个画布(Canvas),在画布下新建一个空物体(Panel_Question),在空物体下添加一张图片(Image),作为答题背景图。然后在背景图下添加一个滚动视图(Scroll View),调整好宽高。在滚动视图的Content物体下新建空物体(Question),作为一道题目的父物体,content物体上添加两个组件【Content Size Fitter】和【Vertical Layout Group】,并设置相关属性和适当的参数,使其子物体可以自适应垂直布局。设置可参考下图:
-
题目(Question)物体下,添加Text文本(topic)作为问题文本;新建空物体(Item)作为选项的父物体,item下添加一个Toggle组件作为选项(命名为option),默认不勾选,添加组件【Layout Element】可以自动布局下设置其宽高;item物体上添加组件【Vertical Layout Group】和【Toggle Group】,分别用来控制选项的垂直布局和选项Toggle组的选中转台,其属性Allow Switch Off默认不勾选,表示在该组下,仅有一个toggle可以被选中,如果勾选,该组下所有toggle都可以不被选中。item面板如下:
再添加一张image(命名为line),作为题目与题目之间的分割线。其面板如下:
最后为题目Question物体添加组件【Vertical Layout Group】,设置如下:
还要将题目Question物体和选项option物体,拖到Resources文件夹下作为预制体,用来实例化生成。
最终答题面板效果如下:
-
添加确认框和得分面板
这两个很容易搭建,就是image、text、button拼接组合,不再详细描述,效果如下:
4.新建Data文件夹保存题目的xml文档
xml文档内容如下:
可根据需求修改。
脚本实现答题功能
1.NewQuestion.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Xml;
using UnityEngine.UI;
///
/// 答题界面
///
public class NewQuestion : MonoBehaviour
{
///
/// 题库xml路径
///
private string problemXmlPath = "/Data/Problem.xml";
///
/// 题目的父物体
///
private Transform questionParent;
///
/// 确认框
///
private Transform hintBG;
///
/// 确认提交面板
///
private GameObject affirmPanel;
///
/// 得分结果面板
///
private GameObject resultPanel;
///
/// 得分内容
///
private Text resultText;
///
/// 用来缓存每一道题目的答题情况数据
///
private List questionItems;
private void Start()
{
resultPanel = transform.Find("hintBG/resultPanel").gameObject;
affirmPanel = transform.Find("hintBG/affirmPanel").gameObject;
resultText = resultPanel.GetComponentInChildren();
SetActive(false, resultPanel, affirmPanel);
resultPanel.gameObject.SetActive(false);
questionParent = transform.Find("answerBG/Scroll View/Viewport/Content");
hintBG = transform.Find("hintBG");
hintBG.localScale = Vector3.zero;
transform.Find("answerBG/SubmitBtn").GetComponent
挂载到Panel_Question物体上:
2.QuestionItem.cs
这个脚本表示每一道题的实例对象,用来缓存题目的数据
using UnityEngine;
using UnityEngine.UI;
///
/// 每一道题
///
public class QuestionItem : MonoBehaviour
{
///
/// 题目内容
///
public Text topicText;
///
/// 选项的父物体
///
public Transform item;
///
/// 一道题的Toggle组
///
public ToggleGroup itemGroup;
///
/// 当前题目是否选择正确
///
public bool isRight;
///
/// 当前题目是否选择答案
///
public bool IsSelect = false;
private Color selectColor;
///
/// 初始化选项Toggel的内容
///
///
///
public void ItemInit(Toggle toggle,OptionData optionData)
{
toggle.GetComponentInChildren().text = optionData.optionStr;
//为每一个选择添加选中事件
toggle.onValueChanged.AddListener((isSelect)=> {
IsSelect = isSelect;
//修改选中的选项的颜色
ColorUtility.TryParseHtmlString("#F1BC52FF", out selectColor);
toggle.GetComponentInChildren().color = selectColor;
//当前题目选中的选项变颜色,其他选项恢复默认颜色
for (int i = 0; i < item.childCount; i++)
{
if (!item.GetChild(i).GetComponent().isOn)
{
item.GetChild(i).GetComponentInChildren().color = Color.black;
}
else
{
//选项对应分值大于0表示该选项是正确答案,否则是错误答案
if (optionData.score>0)
{
isRight = true;
}
else
{
isRight = false;
}
}
}
});
}
}
挂载到Question物体上:
实现效果
直接运行即可
初始效果:
答题效果:
得分显示效果:
如果不了解如何解析xml节点信息的请参考答题系统1.0版本
文末有对解析xml节点的介绍。
2.0版本没有写多选题的相关逻辑,如要需要也可参考1.0版本,添加多选题逻辑和xml配置信息。