2014年7月13日 星期日

HTML5 : 造句靈感產生器

2014年7月13日 星期日
2014.06.04 噗友明勳老師提出了一個師生互動數位輔具「造句靈感產生器」的構想:

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

明勳老師發想文截圖

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

造句靈感產生器的截圖

造句靈感產生器的檔案置於 HTML5 FUN 網站中

它的圖示是:

HTML5 造句靈感

按一下該圖示,即可試玩範例題庫。

做一個自己的「造句靈感產生器」

如果想製作一個自己的「造句靈感產生器」,有兩種方式,第一種是將 HTML5 FUN 網站中,打包好的「造句靈感產生器」檔案下載回來,解壓縮後,找到設定檔,並修改內容。2022年11月起,則可以使用第二種方式,以造句靈感產生器的「Blogger 暨網站嵌入語法產生器」來製作嵌入網站的語法,再將語法貼到 Blogger 、Google Sites 或是其它網頁中。

第一種方式:下載並修改設定

想要下載造句靈感產生器的所有檔案,可以按一下底下的連結:

下載完,先將壓縮檔先行解壓縮,解壓縮完,應該會有一個資料夾名稱為「 html5_sentence」的。

在 html5_sentence 資料夾中,各個檔案的功用可以參考下圖:



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

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


設定檔中的第一行及最後一行「請勿更改」,中問的部份,每一行代表一張詞卡的設定。詞卡的設定內容以兩個半形井字號「##」(預設值,2022年版可自訂)當欄位分隔符號,
  • 左起第一個欄位是詞卡上方的說明文字。
  • 第二個欄位起,則為一個個語詞 (記得用兩個半形的井字號「##」隔開)。

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

第二種方式:使用 Blogger及網站嵌入語法產生器

2022年11月 HTML5 造句靈感產生器進行了改版,如果有 Blogger、Google Sites 或是其它網站,我們也可以將自製的造句靈感產生器嵌入網頁中。只要經過三大步驟,即可取得嵌入網站用的 HTML 語法,將語法貼入網頁中,即可使用。有興趣可以按下底下的連結使用語法產生器:

補充說明

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

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


檔案下載

相關文章

更新記錄

  • 2023.11.14 v9f 分享按鈕按下後,題庫會試著用 Google 試算表儲存,如果儲存成功,可以用短網址來存取,並製作 QRCode;如果無法儲存成短網址,會以原來的超長網址呈現。
  • 2023.10.30 v9e 在畫面左下角加入一個題庫編輯的按鈕,按下後,可以編輯題庫內容;題庫編輯器右下角的分享按鈕按下後,可以產生目前題庫的網址;支援由網址讀入題庫內容的參數,使用「q」當參數名稱( q=......... ),參數有經過編碼,編碼的字 % 被置換為 *,在程式讀入後, * 會被還原為 % 再進行一般解碼。題庫如果只有單一牌組,內容可以一行一個內容,這樣可以不用輸入分隔符號(預設為兩個井字號 ##),直接以換行當題目內容的分隔。
  • 2023.04.24 v9b 載入注音符號的 web font。
  • 2023.04.24 v9a 將圖片預載的功能由卡片中移出,首次進入時即載入全部圖片,而且必須在載入完畢後才能開始按卡片。
  • 2022.12.29 v.9 牌中如果只有語音的題庫設定,會出現聲音播放的圖示,按下後會播放聲音。
  • 2022.12.01 v.8 新增分數輸入器及聲音播放器;題庫欄位中如果使用 xxx.tts 的格式,會播放 xxx 的TTS合成語音;新增 sound_player_autoplay 的參數,可以自訂題目中的聲音是否要自動播放;網址中可以使用 question_set_filename 來指定要載入的題庫設定檔。
  • 2022.11.29 加入可自訂使用翻牌還是抽牌的動畫(與圖片隨選器類似);牌組中如果使用到圖片,圖片會先預載後才能開始按按鈕。
  • 2022.11.24 v.7 修正圖片會有未顯示的問題 (LimeJS fill 在逾時後未設定 background 的 url);設定參數加入「order_by_random」的參數,可以自訂是否要使用亂數抽牌。
  • 2022.11.24 v.6 新增「seperator2」的參數,預設使用兩個毛毛蟲「~~」當卡片素材媒體的分隔符號,可以文字、圖片混搭;畫面右下角新增一個圖示(按鈕),按下以後,將所有牌組都翻到下一張。
  • 2022.11.18 v.3 更改題庫設定,多一個欄位分隔號的參數,預設使用兩個井字號「##」為分隔符號;自動計算有多少牌組,依數量決定版面的行列數,自動計算大小及位置;題庫支援國字旁加注音的格式;支援嵌入 Blogger、Google Sites 或其它網站。
  • 2021.05.10 v.2 讓文字可以自動調整大小; 可於  sentence_set.js 中設定標題字跟卡片文字的字體; 加入翻卡時的音效。另外, 發現圖片在重覆翻卡後, 會有顯示不出圖片的 bug, 尚找不出原因, 待解決。
  • 2014.07.12 題庫設定檔中的語詞欄位可以設為圖片檔的路徑,詞卡變成圖卡。
  • 2014.06.10 設定檔中多一個 card_background_color 的變數,供自訂卡片的背景顏色。
  • 2014.06.08 第一版發布

13 則留言:

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

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

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

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

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

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

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

      刪除
  6. 雄老師你好 , 想請問一下 如果圖片代替字 應該在javascript 加入什麼碼? 請指教 萬分感謝!!:)

    回覆刪除
    回覆
    1. 您好:
      您只要把將文字用圖片檔的路徑徑置換掉即可。
      例如:如果將 test.jpg 這個圖片檔放到 images 這個資料夾中了,就在原來文字的欄位中放入 images/test.jpg 即可。

      刪除

 
雄::gsyan © 2009. Design by Pocket