3.7.2　Carla's Classroom：算術課

我們能夠使用已經學習的技能為Carla's Classroom網站創建一個適合小孩能力的數學練習。本節只開發要求學生做整數加法的練習部分。一旦完成這個程序，你將會看到增加簡單的數學運算（減法、乘法和除法）甚至復雜的數學計算是多么容易。在這個程序中，學生將嘗試解決容易的加法問題。一旦學生正確完成了一定數量的問題，程序將會增加難度級別。目前，現在我們將每級加法問題的數量限制在5題以節省空間。在第4章，你將學習如何改進這個程序，以便學生能夠做數學問題的數目沒有限制。我們把這個練習稱為It All Adds Up。

3.7.2.1　開發程序

這個程序有一點兒復雜，因此在編碼之前，我們將創建一些偽代碼詳細制定程序的流程。我們將按三級難度編寫程序：第一級（容易）、第二級（中等）和第三級（高級）。

我們將使用Math.random()方法生成一些隨機整數，并且使用這些數向學生提問每個加法問題。對于第一級，學生將加兩個在1~10之間的數（包含1、10）；第二級將提高難度，給出使用兩個在1~99之間的數（包含1、99）的加法問題；第三級將要求學生加3個在1~99之間的數（包含1、99）。

3.7.2.2　return語句

return語句讓你在執行所有代碼之前退出函數。在每一級中，如果學生正確回答了3個問題，或者已回答這個級別中的所有問題，那么學生將退出這一級，因此我們需要使用這條語句。這條語句的語法是很簡單的：

3.7.2.3　計數器

計數器常用于程序設計的許多目的。計數器在后續章節中起著重要作用，尤其是當我們開始使用循環和重復結構時。對于這個程序，我們需要一個計數器記錄學生在每個級別錄入正確答案的次數。計數器一定是整數變量，并且在整個或者部分程序中增加或減少。要使計數器加1，我們把1加到計數器的現值。假定把我們的計數器命名為count，那么計數器加1的語法如下：

如果你正好學過代數，那么這可能看起來很奇怪（某個東西如何能夠等于它本身加上1呢）。但是在程序設計方面，這條語句意味著取出表達式右邊（count+1）的值，然后存儲在左邊變量（count）中。用這種方法，我們按1遞增count的值。

3.7.2.4　編寫代碼

首先，我們讓學生通過單擊網頁內容區的一個按鈕開始這個數學練習。你可以使用Student Data Files中的模板在內容區包括以下代碼：

你的頁面現在將會看起來像這樣：

用文件名carla_adding.html保存這個頁面，并且在math.html頁面中添加一個到這個頁面的鏈接。math.html頁面現在將會看起來像這樣：

3.7.2.5　計劃

當學生單擊這個按鈕時將啟動一個函數，該函數將產生簡單的加法問題。對于每個加法問題，我們要生成兩個隨機數（在1~10之間），然后提示學生把這些數加起來。學生的回答將與正確的答案比較，如果回答不正確，那么將出現警示對話框顯示這個信息，生成下一個問題并展示給學生。但是，如果回答是正確的，我們就要記錄它，在正確回答3個問題之后程序跳到下一級。為了實現這個效果，我們需要一個計數器。

計數器將記錄正確回答的次數，每次學生正確回答問題時計數器就加1。在每個問題之后，我們查看計數器是否到達3。當發生這種情況時，程序就跳過函數中的任何語句，并且移到下一級。

如果學生答對了3個問題，就調用為第二級編寫的函數。現在，我們生成兩個在1~99之間的隨機數，而且重復第一級使用的處理過程：要求學生將這些數加起來，測試答案是否正確，如果答對了就遞增計數器，查看計數器是否已經到達3，等等。

當到達第三級時，就生成三個在1~99之間的隨機數，其他事情與第一級完全相同。

當發生以下事情之一時，程序將會結束：

·學生回答了第一級的所有問題，但是沒有答對3個題。

·學生答對了第一級的3個問題而且回答了第二級的所有問題，但是在第二級沒有答對3個題。

·學生答對了第一級的3個問題和第二級的3個問題，而且回答了第三級的所有問題，但是在第三級沒有答對3個題。

·學生答對了第一級的3個問題、第二級的3個問題和第三級的3個問題。

你可能已經注意到，雖然這個程序可能變成冗長，但是將會有很多的重復。除了生成隨機數的代碼不同之外，為第一級編寫的函數與第二級完全相同。類似地，除了要加3個隨機數不同之外，第三級函數與第二級完全相同。我們將把所有這些函數放在一個主函數之內。我們將根據以下偽代碼編寫第一級函數，然后把它用做一個模板來編寫另外兩個函數。

一旦編寫了符合這個偽代碼的JavaScript代碼，我們就能夠重復第4~15行的代碼，并且重復的次數可以和我們想要的一樣多。每次重復將生成新的加法問題，要求學生解答。

3.7.2.6　代碼片段

第一級代碼　在本節末尾，通過多次重復每個級別的問題，我們將把整個程序放在一起。然而，為了節省空間，這里只展示重復的第一個問題。符合上面展示的偽代碼的代碼如下：

在這個程序中，表示隨機數、計數器和總數的變量在命名時為變量名附加了一個“1”，這樣命名的好處是在以后更容易識別哪個變量是屬于哪個級別的。我們將在函數levelTwo()中命名變量num2a、num2b、sum2和count2，并且在函數levelThree()中使用相似的名字。因為許多代碼將會重復使用，所以找到容易識別不同元素的方法是有益的，以備調試需要。

最后，在最后一個問題結束時，如果學生仍然還沒有答對3個題，將顯示一條信息告訴學生需要多多練習。為此編寫的代碼應該放在最后一個if子句（查看計數器是否已經到達3）的后面，如下所示：

第二級代碼　第一級和第二級的主要不同在于要編寫一條新語句為每個加法問題生成隨機數。我們現在想要的數是在1~99之間，在第二級生成一個加法問題的代碼如下：

注意，這里需要使用一個新的計數器。否則，若要在這個函數中重新使用相同的變量，必須把這個計數器在新函數的頂端設置為0。記住：一個學生將到達第二級的唯一方法是函數levelOne()的計數器到達3。除非這個計數器重新設定為0，否則由于這個計數器的值沒有改變，還是3，表示已答對了3題，所以這個學生很有可能在第二級沒有回答任何問題就直接進入第三級！

這個函數的其他改變是基于個人偏愛重新命名變量，以及當新的count2到達3時調用函數levelThree()。

正如第一級一樣，在最后一個問題結束時，如果學生沒有答對3個題，將顯示一條信息告訴學生需要多多練習。其代碼將與第一級完全相同。

第三級代碼　對于第三級，要添加少量代碼告知學生已經成功完成了這幾關。除此之外，這個代碼與第二級的主要不同是增加的第3個變量保存第3個在1~99之間的隨機數，然后提示學生把3個數而不是2個數加起來。所有其他程序邏輯與前兩級保持一樣。

這個時候，如果學生回答了第三級的所有問題而且沒有答對3個題，那么程序將會結束而且給出信息。在第三級的最后問題之后添加如下代碼：

關于檢查計數器的注釋　由于學生在只回答一個或兩個問題之后不可能答對3題，所以你會奇怪程序為什么要在前兩個問題時檢查這個計數器。如果愿意，你可以除去這個檢查。然而，通過使用重復結構可以有更容易和更有效的方法處理這個程序。我們將會在第4章學習這種技術，從而改進這個程序。使用重復結構，能夠更簡單地為每個重復結構編寫相同的代碼。為了處理問題“計數器是否等于3”，計算機要花費極短的額外時間，但是通過在所有問題中包括這個檢測可以使其他代碼更為清晰。

3.7.2.7　將所有代碼放在一起

現在我們將整個程序與HTML代碼放在一起。在本章練習中，你可以修改這個代碼來創建用于減法、乘法和除法的數學練習，或者為加法增加難度級別。

3.7.2.8　完成

這里是學生使用這個頁面后的一些可能的結果。

輸出：

學生以答對3題的成績完成了第一級并且開始第二級。

輸出：

學生以答對3題的成績完成了第一級，但是在第二級沒有答對3題。

輸出：

學生成功完成了所有三級問題（也就是，在每級都答對了3題）。