App Inventor學習記錄84,問題遊戲(2),從100題中選10題出來回答

經過了上一篇用檔案管理元件讀取CSV檔文件,建一個題目庫對我們來說,應該就比較輕鬆了,所以我們把問答遊戲繼續的往下做。

記錄一下:
App Inventor學習記錄84,問題遊戲(2),從100題中選10題出來回答


“START”這個螢幕下的遊戲開始的畫面編排如下:

這次特地的做了一個開場畫面。不好看,但我儘力了。
我覺得搞這種美編的部份,比寫程式還累……


“START”這個螢幕下的程式碼,只有一個。

就是點擊開始遊戲的按鈕之後,就打開 “Screen1”這個螢幕。


“Screen1”下的畫面編排如下:

這次我加了背景素材,背景音樂,音效,甚至連按鈕都加上顏色了等等等等的東西。


Screen1螢幕全部的程式碼如下:

這裡關於讀取 CSV文件的部份,在前一篇用檔案管理元件讀取CSV檔文件,把CSV檔轉成可使用的清單,已經做過介紹,就不在重覆的說明。這次就只挑重點來說明其它的程式碼部份。


當開始答題按鈕被點選的時候。

1.  呼叫隨機取 3個題目程式。
2.  呼叫題目配置及答案選項隨機出現程式。
3.  把開始答題按鈕的可見性,設定為假。
4.  把下一題按鈕的可見性,設定為真。
這裡因為開始答題和下一題按鈕的位置是重覆的,所以打開其中一個,就把另一個給藏起來。

5.  把答案 123按鈕群組中的按鈕的啟用,都設定為真。
這是要讓答題選項的按鈕,在按下開始按鈕之後,才能夠被按下。

6.  把標籤 3.文字,設定為空白。


當下一題按鈕被點選的時候:

1.  把第幾題參數的值,設定成每按鈕一次按鈕後就加 1。
2.  加入一個流程判斷式,如果第幾題參數的值小於等於 10的時候。
2.1 呼叫題目配置及答按選項隨機出現的程式。
2.2 把答案 123按鈕群組中的按鈕的啟用,都設定為真。
這是因為按下選項按鈕的其一個之後,會把其它按鈕給停用掉,所以這裡要再打開一次。
2.3 把標籤 3的文字,設定為空白。

否則,也就是第幾題參數的值不是小於等於 10的時候。
2.4 把標籤 3的文字,設定成完成了,因為這個時候已經做到第 11題,所以猜題遊戲結束。
2.5 把資料傳遞清單這個變數的值,建立一個答對題數和答錯題數的清單。
這個是要把值傳到 “END“這個螢幕用的。
這個部份,我們在用清單元件,把多個數值,在多個 Screen中傳遞,這篇有介紹過。
2.6 開啟 “END“這個螢幕,要傳送的值,就是資料傳遞清單這個資料。


隨機取 3個題目程式是這樣子的。

名字我忘了改,但是這裡已經改成取 10題目了。
因為本來只有差不多 10題的題目,我花了快 2個小時搜集題目和整理,所以現在的題庫已經有 100題了。

至於程式碼的部份,就是先確認隨機題目清單的長度,如果小於10的話,就設定一個變數去取刪除標題後的清單中的隨機項。再判斷這個隨機項如果沒有在隨機題目清單中的話,就把它加進到隨機題目的清單中。


接著是判斷程式的寫法,這裡有建立一個叫按下那一個按鈕的參數。

如果按下按鈕的文字,等於清單中的正確答案的時候。
把按鈕的啟用,設定為假,
把標籤 3的文字,設定成太棒了,你答對了。

如果答案不正確的話,同樣把按鈕的啟用,設定為假。
但是標籤 3的文字,就換成別的文字。


接著是題目配置及答案選項隨機出現這個程式的寫法。
稍微長了些,所以拆成三部份來說。

把題目的文字,設定成隨機題目清單中的第 1項。這裡我們放的就是題目。
答案隨機出現清單的值,設定成一個空清單。


這裡拉一個初化化區域變數,叫每題答案暫存清單,它的值是一個空清單。

每題答案暫存清單,設定成一個空清單。
把答案的選項,都加入到每題答案的暫存清單中。


最後一部份

就一樣是把它給隨機打亂,然後分配給各個按鈕就完成了。


在 “END“這個螢幕中的畫面配置如下。


END“這個螢幕的程式碼如下。

這裡的重點只有一個,就是取得初始值的地方。
在 APP INVENTOR中,只要切換了螢幕的話,包含變數,畫面編排等等的東西,基本上都要在寫過一次。
但在這裡,我們要取得別的螢幕的值的時候,所以要利用一個清單的變數來傳遞別的螢幕的資料到我們目前使用的螢幕這裡。然後,我們在目前的這個螢幕,才可以取到別的螢幕的值來使用。

這部份請參考:
App Inventor學習記錄52,用清單元件,把多個數值,在多個 Screen中傳遞


這裡補充一下,由於我一開始沒打算做開始遊戲的畫面,是後來才加上去的。我把這個開始畫面放在一個新建的叫 “START“的螢幕上。這樣的作法在模擬器上測試的時候都沒問題。

但一把遊戲轉成 APK放到手機上測試的時候,問題就來了。
在手機上打開遊戲的第一個畫面,居然不是 “START“這個螢幕的內容,而是 “Screen1“這個螢幕的內容。
這個時候,我才發現我又犯錯了 (為什麼要說又呢?)。

我居然忘了在 APP INVENTOR中,“Screen1″這個螢幕就是 APP在執行時的第一個畫面沒錯,是我自己又阿呆了。
但東西已經寫了一堆了,難不成叫我畫面和程式的部份都重新拉一次嗎?

光用想的就懶了。還好,這個問題我們是可以處理的,稍稍的麻煩了一點。
我們放到下一篇再來介紹。

這次的 apk檔的下載連結如下:
點我下載 NO_84_Multi_choose.apk

參考書籍如下:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響