2014年7月13日 星期日

HTML5 : 造句靈感產生器

2014.06.04 噗友明勳老師提出了一個師生互動數位輔具「造句靈感產生器」的構想:

[師生互動數位輔具]
構想一個「造句靈感產生器」,
在學生想不出要造什麼句的時候使用之。
===需求說明====
一個畫面中有6個區塊,每個區塊中有一個按鈕,按鈕上方有可自訂的說明文字,按下按鈕後會隨機從語詞庫中挑出一個語詞,若不喜歡可以再按一次跳出另外一個語詞,例如說,第1區:什麼人物,第2區:什麼時間,第3區:什麼地點,第4區:什麼動作,第5區:什麼事情,第6區:國語某一課的語詞。6區就有6個語詞庫,可以自行輸入語詞。

明勳老師發想文截圖

它的架構很簡單,在載入題庫設定檔解析後,使用者按一下詞卡,程式就以亂數抽語詞並顯示在詞卡上。我以之前做的另一個作品「HTML5 math_flashcards」為基礎,改為需要顯示六張閃卡的「造句靈感產生器」。

造句靈感產生器的截圖

造句靈感產生器的檔案置於底下的網址中:

各個檔案的功用可以參考下圖:


我們可以透過修改 sentence_set.js 和 question_set.js 兩個設定檔來客製卡片及題庫。

例如,想設定每一張詞卡內的詞語內容,可以利用純文字檔編輯工具(例如:Windows 附屬應用程式裡的記事本,或是類似 Notepad++ ...... 等) 來開啟題庫設定檔 question_set.js 。(如何開啟 .js 檔案來修改,可以參考這一篇「HTML5 : 如何以 Windows 的記事本修改 .js 的設定檔」)。


設定檔中的第一行及最後一行「請勿更改」,中問的部份,每一行代表一張詞卡的設定。詞卡的設定內容以「半形逗號」當欄位分隔符號,

  • 左起第一個欄位是詞卡上方的說明文字。
  • 第二個欄位起,則為一個個語詞 (記得用半形逗號隔開)。


至於主設定檔 sentence_set.js 可以設定哪些,在檔案中已有加上註解,就不再贅述。

補充說明

因為 HTML5 有快取的機置,而它會看快取設定檔(這支程式用純文字檔: cache.appcache)是否有異動而決定需不需要重新載入被快取的檔案,因此,建議改完題庫設定檔或是主設定檔以後,順便以文字編輯工具修改 cache.appcache 中類似「# Updated on: 2014-07-12 00:00:00」的這行(改日期、時間),這樣可以避免改了題庫,瀏覽器卻沒有載入新設定檔的問題 (詳細說明可以參考我的另一篇文:HTML5 : CACHE MANIFEST 離線使用與快取)。

另外,2014.07.12 以後的版本支援圖片的功能,如果題庫設定檔的語詞欄位用的是圖片檔的檔名(.jpg , .png , .gif ),而且圖片檔路徑無誤,詞卡內就會顯示所指定的圖片而不是文字。

檔案下載


相關文章



更新記錄

  • 2014.07.12 題庫設定檔中的語詞欄位可以設為圖片檔的路徑,詞卡變成圖卡。
  • 2014.06.10 設定檔中多一個 card_background_color 的變數,供自訂卡片的背景顏色。
  • 2014.06.08 第一版發布




11 則留言:

  1. 謝謝老師的分享, 我來取經

    回覆刪除
  2. 謝謝老師設計了這麼方便的程式分享給我們使用^^
    並想請教老師:
    請問,如果我想更改格子的長度(每行字數) 要怎麼做呢

    回覆刪除
    回覆
    1. YUNNAI 您好:
      目前只適用於單行語詞,字數不能太多。

      刪除
  3. 謝謝雄老師!請問有方法可以改變字體嗎?

    回覆刪除
    回覆
    1. 能不能改變字體?要看您使用的載具,如果是 iOS or Android 的行動載具,答案是否定的,因為它是使用瀏覽器預設的字體。如果是一般電腦,就可能改。
      另一種方式是題庫使用「圖片」,這樣您高興用什麼字體就什麼字體,缺點是每一張卡都得先製作好圖片檔。

      刪除
  4. 找到字體設定了!謝謝!

    回覆刪除
  5. 回覆
    1. 您客氣了, 希望這個工具對您有幫助。

      刪除

 
© 2009. Design by Pocket