手把手教你打造一个考试刷题系统（二）——界面动态加载显示

上篇文章中，我介绍了考试界面的布局和美化，但我们的界面不是固定死的，里面的内容是需要动态加载的。

下面，我会一一对之前的页面进行修改。

▌一、题目库保存方式

首先，我们需要知道，我们的数据库（题目库）保存在哪里。

通常情况下，网页的数据是都保存在后端，但我自己设计的系统，只需要本地独立运行，因此，我直接使用 JS 中的对象进行保存。

JS 对象的大致结构如下图：

好了，我们的数据已经有啦，接下来，我们就需要把这些数据按照一定的格式，加载到我们的页面中。

▌二、题目描述及答案

首先，我们要知道，需要展示的题目是哪个。因此，我定义了一个全局变量 index，代表它在所有题目中的位置，之后只需要调整 index 的值即可。

对于题目描述和答案解析部分，直接调用之前定义的对象即可：

▌三、题目序号及类型

首先，我们需要判断当前题目的类型（多选、判断、单选、不定项），然后写入对应的文字信息。相比于上面的直接加载，这里多了一个将英文类型转为中文字符的过程：

▌四、题目所有选项

由于不同的题目类型，选项前的符号是不一样的。如果是单选或者判断题，那么前面的符号是圆圈的单选按钮○ radio，否则就是复选按钮□ checkbox。

这里，与上一步骤的操作方式类似，通过 switch 语句就可以完成。然后，通过循环，将拼接好的字符加载到页面上：

这部分稍微有点小复杂，补充几点。

首先，我们需要知道，这道题目一共有多少个选项，而且每个选项的值是从A开始的，我们就需要建立字母A与选项序号的联系，这里我选择的是ASCLL码的方式：

而A用数字65表示，在JS中，可以使用 String.fromCharCode(数字)的方法，获取到ABCD这种字符。

▌五、左侧题目答题卡

我们的题目，不可能是固定的四种题目，并且，每道大题的数量也不是固定的，这些，都需要动态加载。

要解决这个问题，我们需要对数据库的结构做一定的规范。

在数据库中，order 的值即为大题的题目序号，从1开始，逐次增加，不能产生跳号的问题。

下面，我们只需要获取每个order中的最大值即可，或者获取最后一道题的 order 也可以。通过循环，加载 div 即可：

下面，我们就需要加载，每道大题中的各个小题了。

这里需要统计，每道大题中有几道小题，使用数组 + 循环方式即可：

之后，就可以根据这个数量来加载左侧的列表了：

好了，把数据从数组中显示到页面，到这里大致就结束了。

下篇文章，我会介绍一下，界面右上角的倒计时，是如何制作的，又怎样实现暂停、3分钟提醒的。

▌无奖问答环节
不知道各位是因为什么而关注我的呢？而你又希望看到哪种文章呢？可以评论区聊聊呦~