2013年11月16日 星期六

Flash : 四則運算出題機

2013年11月16日 星期六

寫在前面 (2018年補充)

本工具以 Flash 開發,如果使用較新版的網頁瀏覽器開啟此小工具,出現類似「無法載入設定檔」的錯誤訊息而不能使用,請先參考底下的兩篇說明:


去年用 Flash 寫了幾個數學小工具,沒有馬上整理記錄,就被放到「遺忘的國度」裡了。就從這個針對四則運算過五關的出題機記錄起吧!

2012年九月明勳提了一個「提升初級減法心算能力的數位教學輔具」的構想。
噗文截圖
原設計圖
我用 Flash 做好的樣子
初級心算--減法大挑戰
後來利用這個「殼」,又改成了「九九乘法大挑戰」。最近明勳想了新的題型,於是我將早己遺忘的程式拿出來重新研究 (哈!coding 的習慣不好) ,Flash 架構重新調整,記錄成績用的 PHP 程式也大改造一番。現在,一支程式就可以搞定加、減、乘、除四則運算,端憑設定檔怎麼設定。


功能簡介

  • 可以自訂出題時運算的方法。
  • 可以自訂每關的題庫
  • 可以自訂遊戲標題及使用說明的文字。
  • 可以自訂玩家每關的闖關時間。
  • 可以自訂每關必須答對的題數。
  • 可以指定成績記錄的外部程式。

稍微介紹一下這個小工具的壓縮檔內的檔案

  • arithmetic.swf:主程式,Flash 的程式檔。
  • arithmetic_set.txt:預設的設定檔,如果沒有特別指定設定檔,arithmetic.swf 會自動載入檔名為「arithmetic_set.txt」的檔案。範例中是以九九乘法為例的設定 (明勳提供的構想)。
  • arithmetic_top10.php:成績記錄暨排行榜資料輸出的範例程式,以 PHP 撰寫,如果 web server 有支援 PHP 可以搭配 arithmetic.swf 使用,而「top10」目錄則是搭配 arithmetic_top10.php 而建立的空目錄,相關的說明已寫在 arithmetic_top10.php 中。
  • arithmetic_set-divide.txt:設定檔範例,以除法為例 (明勳提供的構想)。
  • arithmetic_set-multi.txt:設定檔範例,以二位數乘法為例 (明勳提供的構想)。

設定檔參數說明

底下來看看,設定檔可設定的參數有哪些。
  • title:遊戲的標題,會出現在一開始的畫面中。
  • introduction:遊戲的說明,會出現在一開始的畫面中,可以多行呈現。
  • scriptURL:記錄成績用的外部程式網址,該程式必須負責接收由 .swf 傳來的成績記錄及傳回排行榜給 .swf。由於 Flash 的安全管制,在沒有改過 Flash 的安全設定前,必須將 .swf 放在網路主機上才能記錄成績,所以本機執行 .swf 時,不會有排行榜。
  • setup_enabled:是否開放讓玩家可以自訂闖關的時間及題數,「false」代表不開放自訂,「true」代表玩家可以自訂闖關條件。
  • timer:預設每關的闖關秒數。
  • questions:預設每關必須完成幾題才過關。
  • operator:題目的運算方法,可以設定為「加」、「減」、「乘」、「除」,四選一。
  • level_1_x:參數名稱中的數字「1」代表是第一關的設定,「x」則是代表加、減、乘法的被加數、被減數或是被乘數,在除法中則代表「商」。
    它可以使用一個數,或是用逗號當分隔,列舉多個數,例如:

    「1,3,5,7,9」代表用 1,3,5,7,9 這五個奇數來當題目。

    可以毛毛蟲「~」來指定一個連續的範圍,例如:

    「6~10」代表要使用 6,7,8,9,10 五個數來當題目。

    也可以將前面兩種混搭設定,例如:

    「1,2,25~29」代表要使用 1,2,25,26,27,28,29 七個數來當題目。
  • level_1_y:參數名稱中的數字「1」代表是第一關的設定,「y」則是代表加、減、乘法的加數、減數或是乘數,在除法中則代表「除數」。
    設定的內容則可以參考「level_1_x」的說明,一樣是使用逗號當分隔,列舉多個數,使用毛毛蟲「~」來指定一個連續的範圍。
  • level_2_x:第二關的「x」設定,請參考「level_1_x」的說明。
  • level_2_y:第二關的「y」設定,請參考「level_1_y」的說明。
  • level_3_x:第三關的「x」設定,請參考「level_1_x」的說明。
  • level_3_y:第三關的「y」設定,請參考「level_1_y」的說明。
  • level_4_x:第四關的「x」設定,請參考「level_1_x」的說明。
  • level_4_y:第四關的「y」設定,請參考「level_1_y」的說明。
  • level_5_x:第五關的「x」設定,請參考「level_1_x」的說明。
  • level_5_y:第五關的「y」設定,請參考「level_1_y」的說明。

在網址指定不同的設定檔

arithmetic.swf  如果是以網頁瀏覽器來開啟,可以在網址中,加一個「datafilename」的參數來告訴它,不使用預設的設定檔,而用 datafilename 所指定的檔案當題庫設定。例如:
http://mail.lsps.tp.edu.tw/~gsyan/works/flash/math/arithmetic.swf?datafilename=arithmetic_set-divide.txt

注意最後面的「?datafilename=arithmetic_set-divide.txt」:

  • 問號「?」表示要加參數傳給 arithmetic.swf。
  • 「datafilename=arithmetic_set-divide.txt」表示設定了參數「datafilename」的內容為「arithmetic_set-divide.txt」。
因為上面的網址指定了「datafilename」,主程式 arithmetic.swf 會載入「arithmetic_set-divide.txt」中的設定,而不是使用預設的檔名。

這有什麼功用呢?

利用這種方式,我們可以只用一支程式,來載入不同的題庫檔案,而它的秘密就在網址上而已。也就是,不同題庫的遊戲,選單的部份只要用網頁「超連結」的方式來製作即可。

底下利用上面的方法,將壓縮檔中的三個範例設定檔 (arithmetic_set.txt、arithmetic_set_multi.txt、arithmetic_set_divide.txt) 由同一個 .swf 來載入,變成三個過五關的挑戰。


成績記錄及排行榜

這一部份是有關成績及排行榜資料處理的參考資料,給有需要自行撰寫程式的人參考。

arithmetic.swf 在啟動後,如果載入的設定檔中有指定「scriptURL」,它會在闖關的開始及結束時,於畫面的右下方顯示「排行榜」的按鈕,按下去後,會跟「scriptURL」指定的程式要「排行榜」要顯示的資訊。arithmetic.swf 顯示時,如果每一行資料中有使用 TAB 符號,會在排行榜文字框內 50, 200, 480 畫素的位置設置「定位點」,也就是每行成績記錄如果以 TAB 當分隔符號,可以整齊的排好四個欄位(序號、姓名、登錄時間、花費的時間(成績)」。
arithmetic.swf 在使用者過五關以後,如果載入的設定檔中有指定「scriptURL」,它會以「POST」的方式送出底下的變數內容:
  • filename:swf 載入的設定檔的檔名
  • user:使用者名稱
  • numLevel:通過的關數
  • timerTotal:花費的時間
  • timerDefault:計時器倒數的秒數
  • totalDefault:過關的題數
另外,也會以「GET」的方式傳回設定檔的檔名「filename」。


檔案下載


更新記錄
  • 2013.11.15 修改 arithmetic_top10.php,讓它可以依傳來的設定檔檔名,將不同題庫的成績,寫到不同的檔案中。
  • 2013.11.09 利用乘法練習的程式(math_multi) 改寫為可以適用於四則計算的題庫;輸入使用者名者及排行榜的部份直接顯示於 Flash 畫面中;修改成績登錄的流程,以避免跳出另一個瀏覽頁面的問題。
  • 2012.09.14 明勳提出初級減法心算能力的數位教學輔具的發想後製作雛形。





沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket