上篇文章中，我介紹了考試界面的布局和美化，但我們的界面不是固定死的，里面的內(nèi)容是需要?jiǎng)討B(tài)加載的。

下面，我會(huì)一一對(duì)之前的頁面進(jìn)行修改。

▌一、題目庫保存方式

首先，我們需要知道，我們的數(shù)據(jù)庫（題目庫）保存在哪里。

通常情況下，網(wǎng)頁的數(shù)據(jù)是都保存在后端，但我自己設(shè)計(jì)的系統(tǒng)，只需要本地獨(dú)立運(yùn)行，因此，我直接使用 JS 中的對(duì)象進(jìn)行保存。

JS 對(duì)象的大致結(jié)構(gòu)如下圖：

好了，我們的數(shù)據(jù)已經(jīng)有啦，接下來，我們就需要把這些數(shù)據(jù)按照一定的格式，加載到我們的頁面中。

▌二、題目描述及答案

首先，我們要知道，需要展示的題目是哪個(gè)。因此，我定義了一個(gè)全局變量 index，代表它在所有題目中的位置，之后只需要調(diào)整 index 的值即可。

對(duì)于題目描述和答案解析部分，直接調(diào)用之前定義的對(duì)象即可：

▌三、題目序號(hào)及類型

首先，我們需要判斷當(dāng)前題目的類型（多選、判斷、單選、不定項(xiàng)），然后寫入對(duì)應(yīng)的文字信息。相比于上面的直接加載，這里多了一個(gè)將英文類型轉(zhuǎn)為中文字符的過程：

▌四、題目所有選項(xiàng)

由于不同的題目類型，選項(xiàng)前的符號(hào)是不一樣的。如果是單選或者判斷題，那么前面的符號(hào)是圓圈的單選按鈕○?radio，否則就是復(fù)選按鈕□?checkbox。

這里，與上一步驟的操作方式類似，通過 switch 語句就可以完成。然后，通過循環(huán)，將拼接好的字符加載到頁面上：

這部分稍微有點(diǎn)小復(fù)雜，補(bǔ)充幾點(diǎn)。

首先，我們需要知道，這道題目一共有多少個(gè)選項(xiàng)，而且每個(gè)選項(xiàng)的值是從A開始的，我們就需要建立字母A與選項(xiàng)序號(hào)的聯(lián)系，這里我選擇的是ASCLL碼的方式：

而A用數(shù)字65表示，在JS中，可以使用?String.fromCharCode(數(shù)字)的方法，獲取到ABCD這種字符。

▌五、左側(cè)題目答題卡

我們的題目，不可能是固定的四種題目，并且，每道大題的數(shù)量也不是固定的，這些，都需要?jiǎng)討B(tài)加載。

要解決這個(gè)問題，我們需要對(duì)數(shù)據(jù)庫的結(jié)構(gòu)做一定的規(guī)范。

在數(shù)據(jù)庫中，order 的值即為大題的題目序號(hào)，從1開始，逐次增加，不能產(chǎn)生跳號(hào)的問題。

下面，我們只需要獲取每個(gè)order中的最大值即可，或者獲取最后一道題的 order 也可以。通過循環(huán)，加載 div 即可：

下面，我們就需要加載，每道大題中的各個(gè)小題了。

這里需要統(tǒng)計(jì)，每道大題中有幾道小題，使用數(shù)組 + 循環(huán)方式即可：

之后，就可以根據(jù)這個(gè)數(shù)量來加載左側(cè)的列表了：

好了，把數(shù)據(jù)從數(shù)組中顯示到頁面，到這里大致就結(jié)束了。

下篇文章，我會(huì)介紹一下，界面右上角的倒計(jì)時(shí)，是如何制作的，又怎樣實(shí)現(xiàn)暫停、3分鐘提醒的。

▌無獎(jiǎng)問答環(huán)節(jié)
不知道各位是因?yàn)槭裁炊P(guān)注我的呢？而你又希望看到哪種文章呢？可以評(píng)論區(qū)聊聊呦~