《JavaScript和jQuery實戰手冊（原書第2版）》——3.5節教程：一個簡單測驗

3.5 教程：一個簡單測驗

是時候把本章學習的内容組合到一起來建立一個完整的程式了。在這個教程中，我們将建立一個簡單測驗系統，它提出問題并評估參加測驗者的表現。首先，本節将看看可能解決這個問題的一些方式，并且讨論程式設計的高效技巧。

第一步總是搞清楚程式要做什麼。下面是我們希望程式完成的一些事情：

詢問問題。如果我們想要測驗一個人，需要一種方式向他提出問題。此時，我們知道從web頁面擷取回報的一種簡單方法：prompt()指令。此外，我們需要一個問題清單，既然數組可以很好地用來存儲資訊清單，那麼我們将使用數組來存儲測驗問題。

讓測驗參加者知道自己的答案是否正确。首先，需要确定測驗參加者是否給出了正确答案：一個條件語句可以負責這項工作。然後，為了讓測驗參加者知道他的回答是正确的或錯誤的，可以使用alert()指令。

顯示測驗結果。我們需要一種方式來記錄測驗參加者做得有多好，隻需要一個變量來記錄正确回答的數目就夠了。然後，為了宣布測驗的最終結果，可以使用alert()指令或document.write()方法。

有很多種方法可以解決這個問題。一些程式員新手可能會采用生硬的方法，并且複制同樣的代碼來詢問每個問題。例如，詢問測驗中的頭兩個問題的javascript可能如下所示：

這種方法似乎合乎邏輯，因為程式的目的是一個接着一個地詢問問題。但是，這并不是高效的程式設計方式。無論何時，當你看到程式中有相同的步驟重複多次時，應該考慮使用循環或函數來替代。我們将建立一個程式把這二者都用到：使用一個循環來周遊測驗中的每個問題，并且使用一個函數來執行詢問問題的任務：

在文本編輯器中打開檔案quiz.html。

首先，可以設定幾個變量來記錄正确回答的問題的數目以及測驗中問題的數目。

找到頁面< head>中的< script>标簽之間的代碼，并且輸入如下代碼：

這個變量存儲了測驗參加者回答正确的問題的數目。在測驗剛開始，回答任何問題之前，我們把這個變量設定為0。接下來，可以建立問題及其答案的一個清單。

按下Enter鍵添加新的一行，并輸入var questions = [。

我們将把所有的問題存儲到一個數組中，數組隻不過是可以存儲多個項目的一個變量。我們剛剛輸入的代碼是數組語句的第一部分。我們将分多行輸入數組，如2.8.1節所介紹的那樣。

按下Enter鍵兩次，增加兩個新行，并輸入];。代碼如下所示：

既然測驗是由一系列的問題組成，那麼，把每個問題存儲為數組的一個項目就有意義了。然後，當你需要詢問測驗問題的時候，直接周遊清單中的每個項目來提問。然而，每個問題還有一個答案，是以，我們需要一種方法來記錄答案。

一個解決方案是建立另一個數組，例如answers[]，它儲存了所有的答案。要詢問第一個問題，查找questions數組中的第一項，并且看看答案是否正确。然而，這有一個潛在的缺陷，就是兩個清單可能會不同步，例如，我們在questions數組的中間位置添加了一個問題，但是卻把答案放在了answers數組的開頭。這時候，questions數組的第一項不再和answers數組的第一項比對。

一種更好的替代方案是使用一個嵌套的數組或者（如果你真的想要聽起來更加引人注意和令人激動的話）使用一個多元數組。這隻是意味着，我們要建立一個包含問題和答案的數組，并且把這些數組作為questions數組的一個項目來存儲。換句話說，我們建立了這樣的清單，而其中的每個項目都是另外的一個清單。

單擊[和]之間的空行，并且添加如下粗體所示的代碼：

代碼['how many moons does earth have?', 1]是擁有兩項的一個數組。第一項是一個問題，第二項是答案。這個數組是數組questions中的第一項。我們不會給這個數組一個名字，因為它嵌套在另一個數組中。這一行末尾的逗号表示questions數組的第一項結束，而後面跟着的是另一個數組項目。

按下回車建立一個新的空白行，并把如下兩行粗體代碼添加到腳本中：

這一測驗還有另外兩個問題。注意，在數組的最後一項之後，不要輸入一個逗号。在一個單個的數組中設定好所有的問題，這具有更大的靈活性。如果想要向清單添加一個問題，隻要添加包含新的問題和答案的另一個嵌套的數組就可以了。

既然設定好了測驗用到的基本變量，是時候搞清楚如何詢問每個問題了。問題存儲在一個數組中，并且我們希望詢問清單中的每個問題。還記得在本書3.3.2節介紹過，循環是周遊數組中的每一項的一種理想方法。

在];（answers數組的末尾）的後面單擊，按下Enter鍵建立一個新的空行，并添加如下代碼：

這一行是for循環的開始（參見3.3.3節）。它做三件事情：第一，建立一個新的名為i的變量并在其中存儲數值0。這個變量是一個計數器，記錄了循環疊代的次數。第二，i現在是時候進入循環的核心部分了，即每次疊代循環實際執行的javascript代碼。

按下Enter鍵建立一個新的空行，并且添加如下代碼行：

我們隻是運作一個函數來提問題，而不是把用來提問的所有程式代碼都放入循環中。這個函數（随後建立）叫做askquestion()。每次疊代循環的時候，我們都把questions數組的一項發送到該函數，即questions[i]部分。别忘了，我們使用一個索引值來通路數組中的一項，是以，questions[0]是數組中的第一項，questions[1]是第二項，以此類推。

通過建立一個函數來提問，我們可以編寫更加靈活的程式。如果需要的話，我們可以把函數移動到其他的程式中來複用。最後，我們将完成循環代碼。

按下Enter鍵建立一個新的空行，并且輸入}表示循環的結束。完成後的循環代碼如下所示：

是的，這就是所有的代碼，隻是一個簡單的循環，它使用測試中每個問題來調用函數。現在，我們将建立測驗的核心部分，即askquestion()函數。

在剛才添加的for循環的前面建立一個空行。

換句話說，在腳本開始定義基本變量的兩條語句和剛剛添加的循環之間，添加這個函數。在腳本中任何地方定義函數都沒有問題，但是，大多數程式員把函數定義放在靠近程式的開始處。在很多腳本中，像這個腳本中的score和questions那樣的全局變量都先定義了，以便我們很容易看到或改變這些變量；接下來是函數，因為它們通常是構成大多數腳本的核心内容；最後是像循環這樣的一步一步的操作。

添加如下的代碼：

這段代碼表示函數的主體；先錄入一個函數的開始花括号和結束花括号，然後再在其中添加腳本，這是一個不錯的辦法。通過這種方式，我們不會偶然忘記添加結束花括号。

這個函數接受一個單個的參數并且将其存儲在一個名為question的變量中。注意，這和我們在步驟6中所建立的questions[]數組不同。在這個例子中，question變量實際上是使用questions[]數組中的一項來填充的。正如我們在步驟8中所見到的，數組中的一項實際上是包含兩項的另一個數組，這兩項是question和answer。

添加如下粗體所示的代碼：

這看上去有些似曾相識，這是prompt()指令。唯一可能覺得比較新的部分就是question[0]。這是通路question數組的第一項。在這個例子中，這個函數接受一個數組，它包含一個問題和一個答案：例如，第一個數組是['how many moons does earth have?', 1]。是以，question[0]通路了第一項，即'how many moons does earth have'，它傳遞給prompt()指令，作為将要出現在提示對話框中的問題。

我們的程式把測驗參加者在提示框中輸入的内容添加到變量answer中。接下來，我們将把測驗參加者的回答和問題的實際答案進行比較。

通過添加如下所示的粗體代碼來完成函數：

這段代碼隻是一條基本的if/else語句。條件answer == question[1]檢查使用者輸入（回答）的是否和答案相同，答案則存儲在數組的第二項（question[1]）中。如果比對，那麼測驗參加者答對了：顯示一條警告資訊讓參加者知道答對了，并且他的分數增加1（score++）。當然，如果他沒有答對，一條消息會給出正确的答案。

此時，測驗功能完整了。如果儲存檔案并在web浏覽器中載入它，我們将能夠進行測驗。然而，我們還沒有為測驗參加者提供結果，以便他知道答對了多少問題。我們将在web頁面的< body>中添加一段腳本，以顯示結果。

找到靠近web頁面底部的第二對< script>标記，在其中輸入如下代碼：

這裡，我們建立了一個新的變量并把字元串“you got”以及測驗參加者的分數存儲到其中。是以，如果他答對了3個問題，變量message将會是“you got 3”。為了讓腳本更容易閱讀，我們将用數行代碼來建構一條更長的消息。

按下Enter鍵并輸入如下代碼：

這會向消息字元串中添加“out of”以及問題的總數，是以，此時，消息會像“you got 3 out of 3”這樣。現在，完成消息并将其顯示到螢幕。

把代碼中粗體顯示的行添加到腳本中：

儲存頁面并在web浏覽器中打開它。進行測驗，并看看能夠做到多好（如圖3-10所示）。如果這個腳本不工作，請參考1.6節提到的一些排錯技術。我們也可以把這個腳本和complete_quiz.html檔案中完整的、功能完備的版本做比較。

嘗試在腳本的開始處向questions[]數組中添加幾個問題，以便測驗能夠更長。

既然我們已經學習了javascript中并不令人興奮且頗費腦筋的細節，是時候把注意力轉向真正的樂趣了。在第二部分中，我們将學習jquery，了解jquery是什麼，如何使用它，還有最重要的，如何通過javascript程式設計享受樂趣和完成實際任務。