2019年9月28日 星期六

PC : SATA 線讓電腦不開機

之前朋友給了我一臺電腦主機,一直以來常有開關按下去後,只見螢幕左上角有游標閃爍著,卻進不了作業系統,明顯卡在 POST 階段。有時又可以順利的開機使用,因為曾有進了 BIOS 設定當掉的情形,一直懷疑是 BIOS 有問題。大概半年前,認真的探討不開機的原因,甚至把四條記憶體排列組合,一條條換位置;就這麼巧,之後它都正常了,害我喜出望外,以為解決問題了。

昨天聽用的人說它又不能開機了,只好又開啟各種嘗試錯誤的程序。查了一個早上,突然發現光碟機不能用,利用不小心進入 BIOS 設定的機會,試著讓電腦偵測位於 SATA 2 的光碟機,不但偵測很久,甚至會當掉。這激起我對光碟機好奇心了。

從 SATA 線拆起,觀察拆掉的線以後,讓無法開機的原因浮現出來了!


這一條排線疑似「偷吃豬血糕,嘴邊的花生粉沒擦乾淨!」,那些粉末不知道是什麼,但是在線的兩頭都有的粉末,而且可能讓這條 SATA 線變成接觸不良,導致和它連接的光碟機不但無法偵測到,甚至讓電腦無法正常開機。以上的推論在換了一條 SATA 線以後,得到了證實。

之後以刷子將粉末刷乾淨,並用一字小螺絲起子將兩頭的端子金屬部份稍加摩擦,重新插到主機板和光碟機以後,電腦終於可以正常使用了。

今天運氣不錯,不但累積了新經驗,修好的電腦又可以快樂使用囉!


2019年9月21日 星期六

DIY : 修理自動傘的開關

昨天下雨,拿出車內的自動傘要用時,才發現它的開關居然不見了,幸好綁傘帶子上的魔鬼氈還能用,收傘時可以束著。回家後就一直在想怎麼幫它裝個開關,沉澱了一晚,今天下午為了把打開的傘收起來,拿了一根銅線暫時卡在原開關的縫中,機一動,想試試能不能用大迴紋針折一個開關。將另一把因塑膠環斷裂而無法收起來的傘拆下開關研究,原來這自動傘的開關,主要是由一片彎彎的金屬片所構成的,利用尾端當頂點固定(照片紅箭頭處),曲線凸起的地方當支點,因為尾端的曲線設計,開關會被頂出傘柄的細縫凸出(照片綠箭頭處),變成一個有彈力的機構。


試著利用鉗子把迴紋針變形為開關的造型,居然就這麼修好了。


修好上面這把沒了開關的傘後,當我把當研究樣本的金屬片開關裝回原來的傘時,發現它卻變得很鬆,失去了原有的彈力。在猜可能是一開始想把這開關硬塞入上面這把傘時,破壞了金屬片原有的曲度(下圖紅色箭頭處)。


拿出鉗子,把金屬片弄彎一點,再裝回去後,果然開關的彈力恢復正常了。

修傘修上癮了,索性將兩把塑膠環斷掉的傘,以電鑽在斷掉的兩側各鑽一個孔,然後穿上一條細的束線。


測試了一下,束帶不能拉太緊,最好能在靠近金屬管側,以鉗子或起子在中央處往上頂一下,讓束帶變成有一點曲面,這樣才不會因為被拉直了,和金屬管的摩擦力太大,而讓傘卡住,無法自動展開。

還記得小時候看我媽媽修過幾次傘,換傘骨、換傘布,一直覺得她好厲害,為了省錢,什麼都會。不過,我看著看著,也學會自己動手修傘,這一回,甚至超越她,把開關的部份也搞定了,還一次修好三把傘呢!誰說家庭教育不重要呢!而且也不能光說不練,孩子們隨時都盯著大人,看著、學著!




2019年9月10日 星期二

VBA : PK 遊戲題庫產生器

去年曾經用 Google Apps Script 寫了一個 PK 遊戲的題庫產生器 ( 詳見「雄 :Apps Script : PK 遊戲題庫產生器」) ,因為是建置在 Google Drive 中,可以誇平臺使用;缺點則是首次使用必須進行授權,對未操作過的人來說,稍嫌複雜了一點。為了配合大家的習慣,我把程式移植到 Excel 中,以 VBA 來改寫。好處是可以單機離線操作,如果是在 Windows 中使用的話,甚至也可以在自由軟體的 LibreOffice 中正常運作。至於 Linux 和 Mac OS X 則得等我找到適當儲存檔案方法,才能順利執行匯出程式囉!

因為這一次的題庫產生器使用了 VBA,所以無論是在 Excel 或 LibreOffice 的 Calc 中,我們都得先開放 VBA 的執行:

Microsoft Office 啟用巨集的方法

以 Mirosoft Office2007 來說,當我們打開「pk遊戲題庫檔產生器.xls」後, Excel 會提示我們檔案帶有巨集,下圖紅色箭頭處有個「安全性警告」,按一下「選項」,即可啟用巨集。



在「安全性警告」的對話框中,點選「啟用內容」,並按「確定」,即可啟用巨集。



LibreOffice 啟用巨集的方法

LibreOffice 預設的安全性是比較高的,所以無法執行巨集,所以我們要先修改 LibreOffice 的選項,將安全性降為「中」,這樣開啟的試算表檔案中如果帶有巨集,LibreOffice 會先詢間我們是否要啟用。

開啟「pk遊戲題庫檔產生器.xls」後,上方主選單中有個「工具」,展開功能表後,點選「選項」


找到左側的「安全」,並按一下,會看到右側有「巨集安全性」的按鈕,按一下按鈕來設定安全性。


在巨集安全性的選項裡點選「中」,並按「確定」鈕。


設定完巨集安全性以後,關閉檔案,並重新開啟「pk遊戲題庫檔產生器.xls」,就會出現詢問的對話框了


想使用題庫產生器,當然是要按「啟用巨集」的按鈕囉!


製作 PK 遊戲題庫檔案

確定已經將巨集的功能啟用以後,我們就可以來使用題庫產生器製作 PK 遊戲的題庫檔案了。

例如想製作三欄式的題庫,點開「三欄式題庫」的工作表後,只要三步驟即可產生題庫檔案:


  1. 進行基本設定:最重要的是題庫的檔案名稱和選項數量。
  2. 輸入題目的題幹、答案和選項。
  3. 按輸出鈕(圖中綠色的圖示),執行巨集。




如果成功,應該會多一個第一步驟指定檔名的題庫檔案,把題庫檔移到遊戲的目錄中,並在遊戲選單設定檔中,加入該題庫,即可進行測試囉!

有關三欄式題庫和兩欄式題庫的差別,請參考 PK 遊戲的說明。

檔案下載


相關文章


更新記錄

  • 2019.09.09 初版。





2019年8月30日 星期五

Life : 下一個十年

民國108年08月30日是個特別的日子,看著數字,突然想到,打從而立之年起,88年、98年、108年,每十年,我的人生都有個重大的事件發生。不禁好奇,下一個十年──民國118年又會發生什麼轉折?

2019年7月30日 星期二

Biking : 自行車道→大稻埕碼頭

天氣狀況 : 晴
TRIP DIST : 35.39
TRIP TIME : 01:41:51
AVG. SPEED : 20.85
MAX. SPEED : 37.08

在自行車道上一路快速前進,花了大概 45 分鐘來到了大稻埕碼頭。還是很不習慣這裡的吵雜,哈!感覺山裡面自然的聲音聽起來舒服多了。


回程捨漆黑的自行車道走大馬路,在新生國小校門口稍事休息,兩位據說二十歲的加拿大傳教士攀談了一會。他們問我的第一個問題是:「Are you happy?」,我順口就回說:「Fine , thank you ! I'm so happy !」。他們很驚呀的繼續問我,為什麼?哈哈哈!本來想回說,因為我剛運動完,很爽!不過,英文忘了怎麼說了,幸好他們改用中文繼續問。我們大概中、英文混著說,聊了大概十分鐘,中間開心時,年輕人會伸出手來擊掌,好特別的經驗。他們問我幾歲,猜我應該跟他們差不多,我說自己已經超過五十歲了,他說說,看起來頂多三十幾。哈哈哈~年輕人真會說話。



2019年7月29日 星期一

Biking : 恆光→明德宮

天氣狀況 : 晴
TRIP DIST : 10.2
TRIP TIME : 0:42:24
AVG. SPEED : 12.92
MAX. SPEED : 40.89

超過一年沒騎自行車上貓空了,今天試著以最輕齒上山。以前總是求快,今天純運動,有流汗就好。




晚上八、九點,明德宮很多車友來來去去的,天氣好,視野佳,山上的夜景特別漂亮。

2019年6月10日 星期一

HTML5 : English 1200

English 1200 的靈感是得自於由桃園縣青溪國中所製作的「國民中小學一千兩百個英文單字」免費教育光碟。關於這個光碟的詳細介紹,可以參考「桃園縣政府教育局電子報」中的這一篇:

該光碟位於青溪國中的的線上操作版及下載的連結均已失效了

原網站的截圖如下:

English 1200 原來的下載頁面
桃園縣 English 1200 光碟首頁

2011年時,試著用 LimeJS 寫 HTML5 的程式,就以青溪國中 English 1200 的資源,寫了一個聽音選英文或中文的小工具,然後在噗浪中和朋友分享。



放了那麼多年,幾乎把它給忘記了。最近好友明勳提起了它,於是又將 html5_english1200 重新修改一下,並且加入 HTML5 FUN 中:

重新裝修過的 html5_english1200 把功能由原來的「聽音找英文」和「聽音找中文」,再擴充「看中文找英文」和「看英文找中文」兩項選單。此外,也增加了題庫選單功能及一些題庫設定的選項,讓使用者可以下載程式後,加入自己的題庫或自訂一些功能。
試玩:


四大功能選單
聽音找英文
聽音找中文
看中文找英文

自訂選單及題庫

HTML5 FUN 下載的 html5_english1200.zip 解壓縮以後,裡面有幾個檔名叫 ?????set.js 的檔案,它們都是可以自訂的設定檔。

「english1200_menu_set.js」是選單的設定檔。

「english1200-all-set.js」是 english1200 的單字設定範例,「english1200-all-set-sentence.js」是 english1200 的句子設定範例,題庫及聲音檔的來源都是青溪國中製作的光碟。

questions_set_tts.js」則是使用 TTS 來發音的題庫設定範例。

關於選單設定及題庫設定的方法,和我其它 HTML5 程式的都差不多,可以參考這一篇中的說明來修改:

題庫參數說明

關於 html5_english 的題庫有底下的參數可供自訂:
  • numberOfOptions : 每題有幾個選項。選項會利用題庫自動產生。
  • numberOfOptionsPerRow : 每列最多可以有幾個選項。
  • numberOfQuestionsPerRound : 每回合抽幾題題目。如果題庫的數量很多,可以利用此選項,讓程式將所有題目切成多個回合,每回合的分數與時間都會單獨計算。如果此數字大於題庫總題數,會自動修正為題庫的數量。
  • select_questions_in_random : 出題時,程式選擇題目的方式,設定值可以是 true 或 false ; true 是採亂數選題,false 則是按題庫順序出題。
  • soundBaseURL : 聲音檔路徑的前置網址,如果此設定值不是空字串,而且語音不是使用 TTS (tts_enabled=false) ,出題時,程式會為 questionLines 的左欄前面自動加上這裡指定的字串。例如想用 English 1200 網站的聲音檔來發音,可以使用預設值的
    https://gsyan888.github.io/english1200/
  • tts_enabled : 是否使用 TTS 的語音,如果設為 true,就會使用 google 的 TTS 來發音,而不會使用 soundBaseURL 中指定的,或是自訂的 mp3 語音檔案。
  • seperator : 題庫欄位分隔符號。在題庫(questionLines)中,每一行為一題,而一行可以用 seperator 來將它分為不同的欄位。預設值為兩個井字號(##)
  • questionLines : 題庫,每一行一個題目,以 seperator 所指定的符號來分隔為不同的欄位,可以分為「兩欄式題庫」和「三欄式題庫」;

    「兩欄式題庫」左欄為聲音檔路徑也是英文,右欄為中文。
    兩欄式題庫適用於英文單字本身就是聲音檔路徑中的檔名部份,程式可以解析出 mp3檔名,並去掉字尾的 .mp3 成為題庫英文的部份。例如:青溪國中所製作的 English 1200單字題庫。

    「三欄式題庫」左欄為聲音檔路徑,中間欄為中文,右欄為英文。
    三欄式題庫適用於聲音檔檔名較不規則,無法解析出英文的部份的題庫,例如:青溪國中所製作的 English 1200句子的題庫,

兩欄式題庫(english1200-all-set.js)
三欄式題庫(english1200-all-set-sentence.js)

以下 2019.06.12 版新增的自訂參數,可以更改界面中要顯示的文字:

  • caption : 上方標題欄的標題
  • item_button1_caption : 遊戲模式選單第1個按鈕上的文字
  • item_button2_caption : 遊戲模式選單第2個按鈕上的文字
  • item_button3_caption : 遊戲模式選單第3個按鈕上的文字
  • item_button4_caption : 遊戲模式選單第4個按鈕上的文字
  • credit_caption : 下方資料出處的文字
  • numberOfSecondToLoadQuestionLines : 載入題庫等候的最大秒數


相關文章



更新記錄

  • 2019.06.13 修正遊戲頁面上方的標題字字數如果過多時,會和分數及題數重疊的問題。在 english1200_menu_set.js 中如果設定了 memu_title ,程式會將網頁的標題自動更換為該字串。
  • 2019.06.12 新增一些自訂參數,讓界面可以自訂訊息,並更改按鈕上的文字。此外新增 numberOfSecondToLoadQuestionLines 參數,可以控制程式等候題庫變數 questionLines 的載入,應用於動態題庫。
  • 2019.06.11 解決按鈕中的字串如果很長會換行的問題。
  • 2019.05.31 題庫設定檔中加入判斷 CR/LF 的程式判斷,以解決不同系統間換行字元不同,導致題庫第一題會解析錯誤的問題。加入每列最多可以有幾個選項的參數「numberOfOptionsPerRow」。
  • 2019.05.30 加入自訂一回合多少題的功能。
  • 2019.05.29 改版、除蟲,加入 TTS 的功能。
  • 2011.04.17 初版




2019年5月31日 星期五

Life : 407

今天是個值得記錄的日子。

二十七年前,剛進教育圈的我,接手因別人調校而留下的班級──四年七班。

目前這個班,是我當導師的第十個班──四年七班。

四七二十八 (4x7=28) ──再二十八天後,六月二十八日,四年七班也將畫上句點了!


二十七年來,孩子們的笑容時常在我腦海中浮現,他們的笑聲依然縈繞在我耳際。點點滴滴令人回味無窮。

2019年5月5日 星期日

Scratch : TTS

LLK 的 scratch-vm 專案中看到 Scratch 的語音合成參數:



兜了一個可以念出中文的網址:



解析一下參數:

  • locale : 用什麼語言發音。中文用「cmn-CN」,英文用「en-US」。
  • gender : 發音的性別。男聲用「male」,女聲用「female」。不過,目前中文似乎只能用女聲。
  • text:要發音的字串。



2019年4月29日 星期一

HTML5 : 筆順編輯工具

教育部「常用國字標準字體筆順學習網」(以下簡稱「筆順網」) 中收錄了 4808 個國字的筆順,而那些不在這 4808 個字內的國字,如果想要練習筆順怎麼辦呢?

最近因為國語課本中有個生字「粄」不在筆順網的收錄範圍內,為了它,我開發了一個小工具,可以利用它來下載有筆順的其它字,再將「粄」所需要的筆畫拼接起來,就這樣無中生有造出和筆順網相同格式「粄」的筆順資料了。

姑且就叫這個「html5_strokeeditor」 小工具為「筆順編輯工具」。這個工具的網址如下:



當然囉!因為教育部並沒有開放我們將造好的新字上載到主機儲存,所以造出的筆順還是無法使用筆順網來練習。不過,可以利用我開發的新版筆順練習工具來載入自己造的新單字。新版的筆順練習工具,網址如下:

如何利用「筆順編輯工具」造出「粄」這個字呢?

分析部件

由於我們是利用筆順網已有的字來「重組」成新的字,所以在開始「造字」前,得先來分析一下新單字需要哪些筆畫,哪些字中帶有那些筆畫。

以「粄」來說,它可拆成左側的「米」和右側的「反」兩個部件,因為要放兩部件,所以「米」可能需要稍小一點點,才不會和右偏旁的「反」重疊。

綜合上述的需求,「米」我們可以取結構上分左、中、右三部件的「糊」,再結合結構上分為左、右兩部件的「版」。「版」的「反」這個部件會稍小一點點的。這樣應該就有機會造出一個比例適當的「粄」囉!

下載筆順

根據分析部件後的結果,想要造出「粄」這個字,我們需要下載「糊」和「版」兩個字的筆順。

打開「筆順編輯工具」後,在下載的對話框中,輸入想下載筆順的字後,按「開始下載」的按鈕。

之後如果還想再下載別的字,可以按一下右下角的工具箱開關,打開工具箱以後,按一下「下載筆順」的圖示,即可出現下載筆順的對話框。


選擇筆畫

筆畫是有順序的,「筆順編輯工具」怎麼知道哪個筆畫先寫,哪個筆畫後寫呢?

因為筆順網的筆畫有其習慣上的書寫順序,而我們在造字時,其實是依習慣切分的部件,一個筆畫、一個筆畫來選取,所以一個字中,同一個部件的,筆畫順序應該會按照原有的順序。

那不同字的,哪一個要優先呢?以造「粄」這個字需要「糊」的「米」,和「版」的「反」,取出的「米」和「反」,哪一個會先寫呢?

為了解決筆順的順序,「筆順編輯工具」是以著色的方式來選取所需要的筆畫(原本白色或灰色的筆畫,按一下會被塗色,表示已選擇該筆畫;反之,已有塗色的則會被取消),同一顏色的會被當作同一組(同一部件)。此外,因為顏色是有其優先順序的(請注意「色盤」上的編號),所以最後會依顏色的順序來結合成成新單字。

底下以「粄」這個字為例,說明它是如何「造」出來的:
  1. 選取「編號 1 」的顏色。
  2. 點選「糊」中屬部件「米」的所有筆畫。
  3. 選取「編號 2 」的顏色。
  4. 點選「版」中屬部件「反」的所有筆畫。



照上述的順序來換色並點選所需要的筆畫,最後就可以讓新單字「粄」,擁有正確的全字筆順了。不但如此,連部件的設定,也一併設定完畢了。

匯出單字

在「筆順編輯工具」造好的字,可以在右下角的工具列中,找到「匯出單字」的工具。打開後,輸入新筆順是哪個單字,即可匯出一個 .json 的檔案。匯出的檔案,日後可以重新匯入,這樣就不用再重新造字了。





因為目前教育部的筆順網並無法讓我們自行擴充筆順字庫,所以目前只能將造好的筆順,用個人開發的筆順工具來展示並練習。



進階使用

筆順編輯工具除了直接將現有的筆畫或部件拼接以後,也有提供將筆畫移動、縮小和放大的功能。由於只要新增或減少新字的筆畫,移動和縮放的設定都會重置,所以建議想移動或是縮放前,得先確認所需要的筆畫都已增、刪好了,以免「前功盡棄」。

無論搬移或是縮放的功能,操作的程序都是先按一下想進行的功能鈕,然後拖曳想調整的筆畫或是按一下調整的筆畫。以縮放的功能來說,每按一下想調整大小的筆畫,都會放大或縮小為原來的 5%。

有了搬移和縮放的功能,相信大家可以創造出更多字的筆順了。

下面是製作「闁」這個字的簡單示範影片:


相關網站


更新記錄

  • 2019.05.04 加入由儲存在 localStorage 的資料載入的功能。
  • 2019.04.28 加入將造的字移動、縮放的功能。
  • 2019.04.23 可依填入的顏色區分筆畫的順序。
  • 2019.04.20 初版


HTML5 : Unscramble 重組小遊戲

Unscamble 重組小遊戲可以依字串分割設定,出題時,將句子或字詞分成好幾個部份,再以亂數把順序打亂,最後讓玩家將它們依正確的順序排好。

此外,為了避免玩家卡關,出題時也可以在題庫中加入提示用的文字、圖片或是語音。語音的部份如果不想自己錄語音檔,目前可以使用 Google 的 TTS 替代。

試玩與下載

Unscamble 可以在我的 HTML5 FUN 網站中找到,

試玩:

下載:

《範例一》是英文句子重組的遊戲

本範例會先自動播放提示的語音,以 TTS 或是MP3聲音檔來唸出全句。

操作時,先點一下要換位置的字卡,再點一下另一張字卡,兩張字卡就會交換位置。如此兩兩交換,直到正確為止。


《範例二》是英文單字重組的遊戲

本範例不會先自動播放提示的語音,玩家想聽單字的語音時,可以自己按左下角的語音播放鈕。單字提供中文的文字提示,有些甚至還有或圖片的提示。

操作時,先按住要換位置的字母卡不放,將卡片拖曳到要放的位置後,再放開卡片。如此一張張拖、放,直到正確為止。

《範例三》是中文句子重組的遊戲

本範例會先自動以 TTS 來播放全句的提示語音。

操作時,和《範例二》相同,是以拖、放卡片的方式來換位置。

選單設定檔

 「Unscramble 重組小遊戲」在啟動以後,會先載入主設定檔「unscramble_set.js」,接著會載入預設的選單設定檔「unscramble_menu_set.js」,然後依選單設定檔製作選單供玩家選擇,玩家選好後,最後載入題庫設定檔。

選單設定檔裡面的格式很簡單
  • 每一個題庫檔會對應到一行,設定會用一對引號(單引號或雙引號均可)括住。
  • 每一行會以一個半形逗號當分隔符號,將它分為兩個欄位。
  • 每一行的第一個欄位是「項目名稱」,第二個欄位為「題庫設定檔的檔名」。

menu_items = new Array(
//------------------------------------下一行開始為選單增加項目
 '設定範例(英文句子),question_set_example-1.js'
,'設定範例(英文單字),question_set_example-2.js'
,'設定範例(中文句子),question_set_example-3.js'
//------------------------------------選單選項結束,以下請勿修改
);
以上面的設定來說,選單總共會出現三個選項:
  1. 設定範例(英文句子)
  2. 設定範例(英文單字)
  3. 設定範例(中文句子)

按下第一個選項時,程式會打開檔名為「question_set_example-1.js」的題庫設定檔,並出題給玩家玩。同樣的道理,按下第二個選項時,程式會打開檔名為「question_set_example-2.js」;按下第三個選項時,程式會打開檔名為「question_set_example-3.js」。

另外,如果選單項目很多時,可以將它們分類,並建立「次選單」,此部份的機置和我另一個作品 BINGO 是一樣的,在 Blog 中有詳細的說明,可以參考這篇:



題庫設定檔

前面提到的例子,當我們按下範例選單的第一個選單後,「Unscramble 重組小遊戲」會幫我們載入題庫檔案「question_set_example-1.js」,這個檔案是個純文字檔,建議使用純文字的編輯工具來開啟,並修改內容(個人在 Windows 上習慣使用 Notepad++,在 Mac OS X 上使用 Textwrangler ) 。

底下簡單介紹一下 Unscramble 可以自訂的參數。

在開始出題前,遊戲會出現說明畫面,底下是說明對話框相關的設定參數:
  • help_title : 對話框的標題。
  • help_description : 對話框中的說明文字。
  • help_button_caption : 對話框的按鈕。

前面提過,玩家作答時,可以直接將卡片拖曳到要放的位置;或是用按下要選的卡片,再按一下另一張卡,讓兩張卡交換位置的方式。作答的操作方式是由底下的參數所控制的:
  • card_swap_mode : 字卡交換方式。
    0 為用拖曳方式換卡片的位置。
    1 為用按一下指定要交換位置的兩張卡片。

有關對答案的方式,提供一個 enableSubmitButton 的參數,可以用來控制是否出現「送出答案」的按鈕:

  • enableSubmitButton
    true : 玩家按「送出答案」才核對答案。
    false : 卡片換位置後就自動對答案。


有關聲音播放的參數:
  • sound_enabled : 是否播放音效及語音。
    true 播放音效及語音。
    false 不播放任何聲音。
  • sound_autoPlay : 是否自動播放語音。
    true : 出題後自動播放語音。
    false : 使用者按播放鈕後才播放語音。
  • sound_autoPlayLoop : 自動播放的次數。 
  • sound_autoPlayDelay : 隔多久自動重播(單位秒)。
  • tts_enabled : 是否使用 TTS 的語音
    true : 語音採用 TTS 來發音。
    fasle : 不使用 TTS 的語音。
  • tts_is_at_index : 如果使用 TTS ,將題庫中的哪一個欄位的文字轉語音。如果值為 0 ,表示使用左側題目中的文字當要發聲的字串;如果為 1,則是以右側提示欄位中的文字來發聲。
  • tts_language : TTS 選用的語言代碼。
    en : 英文。
    zh_tw : 中文。
  • tts_base_url : TTS 的呼叫網址。

有關題庫的參數:

Unscramble 在出題時,要知道
  • 完整的題目字串是什麼?
  • 怎麼切割字串?
  • 提示是什麼?(可包括文字、圖片、語音)
照這樣看來,每一題題目,我們要:
  • 先切割成題目(第一欄位)和提示(第二欄位)兩個欄位。
  • 第一欄位中的題目再切成多個字串,變成一張張的卡片。
  • 第二欄位中的提示也切成多個項目,變成文字、圖片檔檔名或是聲音檔檔名。
照這樣分析,我們只要使用兩個「分隔符號」分別當「第一層」和「第二層」的分割器,就可以符合我們的需求了。先以 「data_seperator」指定的符號分割,再以「split_seperator 」指定的符號進行第二層的分割。

資料分割符號設定:
  • data_seperator : 用來切割題目和提示的分隔符號(第一層)。
  • split_seperator : 用來切割題目子字串,或是將提示分割為文字、圖片和聲音檔的分隔符號(第二層)。
以《範例二》「question_set_example-2.js」中的設定來說明:

它的資料分割符號設定為:
data_seperator = "###";
split_seperator = "==";
所以「題目」和「提示」之間是以三個井字號「###」來切割。
這個題庫是用來進行英文單字重組的,字母和字母之間是以兩個等號「==」來切割;而提示用的中文或提示用的圖片之間也是以兩個等號「==」來切割。
question_lines=new Array(
//------------------------------------下一行開始增加題目
  'h==a==p==p==y###快樂==images/happy.png'
, 'a==n==g==r==y###生氣'
, 'c==r==y###哭泣'
//------------------------------------題庫結束,以下請勿修改
);
看看第一題是測驗「happy」這個英文單字



三個井字號將第一題分為題目:

h==a==p==p==y

和提示:

快樂==images/happy.png

題目又以兩個等號分為:「h」、「a」、「p」、「p」和「y」五個字母。
提示也以兩個等號分為:中文意思的「快樂」,和提示圖片檔名的「images/happy.png」,兩部份。

觀察一下,後面兩題的「angry」和「cry」則都只有中譯的文字提示,沒有圖片提示。

範例二的解說影片



進階設定

如果有需要調整版面的配置,讓題目、提示文字、提示圖片和語音播放器的位置能自訂,就打開主設定檔「unscramble_set.js」依需要調整底下的座標:
  • answer_block_y : 作答區的 y 座標
  • audioPlayer_x : 語音播放器的 x 座標
  • audioPlayer_y : 語音播放器的 y 座標
  • text_hint_x : 提示文字區的 x 座標
  • text_hint_y : 提示文字區的 y 座標
  • image_hint_x : 圖片的 x 座標
  • image_hint_y : 圖片的 y 座標
調整時要注意的是,(0, 0) 的位置是在左上角。而整個版面是最大範圍:
  • X : 1024
  • Y : 768
以上是有關 Unscramble 重組小遊戲的簡單說明。

相關文章


更新記錄

  • 2019.05.21 加入 split_by_length、split_by_length_substring_length:split_by_length 用來設定是否以字串長度來切割子字串,如果設為 true, 題庫第一欄位會以長度來切割;如果設為 false (預設值), 題庫第一欄位會以 split_seperator 的分隔符號來切割。split_by_length_substring_length 則是當 split_by_length 為 true 時, 每個子字串要多長。
  • 2019.05.18 加入 select_questions_in_random、number_of_questions。
    select_questions_in_random:用來控制如何由題庫選題的方式( true:以亂數選題  false:按題庫順序)。
    number_of_questions:設定在亂數選題時,最多選幾題。
  • 2019.05.15 加入 sound_autoPlayLoop、sound_autoPlayDelay ,用來控制語音自動重播的次數。
  • 2019.04.30 加入 enableSubmitButton 的選項。是否使用「送出答案」的按鈕, true : 玩家按「送出答案」才核對答案; false : 卡片換位置後就自動對答案
  • 2019.04.27 釋出。
  • 2019.04.24 明勳建議加入計時器,可在結束時知道花多少時間作答。
  • 2019.01.06 明勳建議不要自動播放語音,可以在需要時再手動播放語音;版面位置調整改為可以設定檔中自行設定。
  • 2019.01.03 測試版。








2019年4月12日 星期五

Python : 用 SimpleHTTPServer 模組建立一個臨時的網頁伺服器

電腦中有安裝 Python ,臨時需要一個 web server 來測試,怎麼辦?

Python 有個  SimpleHTTPServer 模組,用它就可以馬上建立一個臨時的網頁伺服器。哈!要是以前,我一定是去下載 Appache ,然後再重新「複習」一堆設定的設定檔。但為了一個簡單的需求,玩這麼大,還是用最簡單的方法解決就好:

底下以在 Windows 中的操作來說明建立的流程

步驟一:開啟「命令提示字元」(終端機)


步驟一:切換到要當網頁伺服器根目錄的資料夾 (ex. D:\limejs )

cd \limejs


步驟二:啟動  SimpleHTTPServer

python -m SimpleHTTPServer

如果成功,應該可以在畫面中看到底下類似的訊息

Serving HTTP on 0.0.0.0 port 8000 ...

在網頁瀏覽器的網址列中輸入底下的網址:

http://127.0.0.1:8000/

應該就可以看到該目錄中的內容了。


 SimpleHTTPServer 預設是在 8000 port (埠號),如果想更改網頁伺服器監聽的 port,例如,改在 port 80 監聽,就將啟動指令改為:

python -m SimpleHTTPServer 80

如果想關閉伺服器,就按鍵盤的 Ctrl + C 組合鍵。

這個架站皂方法實在簡單,比以前弄半天的 Appache 容易多了!





2019年4月7日 星期日

JavaScript : 讓行動載具文件不要因拖曳動作亂滑動

忘了從哪一個版本起,無論在 iOS 或 Android 上的瀏覽器玩我寫的 HTML5 小工具,按下並移動位置時,整份文件會跟著滑動,這在玩遊戲進行拖曳或畫圖時真是一大困擾。為了解決我的筆順練習工具在寫字或塗鴨時,畫面一直滑動的問題,忘了是在哪裡找到解決的方法是加入底下的程式碼:


document.addEventListener('touchstart', function(e){ return; }, { passive : false });
document.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive : false });

主要是改變網頁主體的 document 在監聽到 touchmove 事件時,可以不要執行原來滑動的行為,這樣子,使用工具時就不會滑來滑去,不勝其擾。

筆順練習工具在加了前述的語法後,畫面果然就不會亂滑動了;不過,之前想說如法泡製,來解決其它遊戲的滑動問題,將語法複製、貼上,很容易吧!哈~事情總是沒想的簡單。加了語法的遊戲在測試時可以將畫面固定得牢牢的,在利用 LimeJS 的 build -a 指令,把 JavaScript 的原始碼編譯簡化後,滑動的問題還是出現了。當時百思不得其解,試了各種方法,問題仍然存在,最後只好放棄。

昨天在 build 新版的筆順練習工具時,因為加了「-a」參數,想讓程式碼更精簡,有部份功能運作不正常;而不加「-a」參數時又可以使用。讓我聯想到為什麼舊版的筆順練習工具滑動問題得以解決,而新版的在加「-a」去 build 時,又產生滑動問題的原因了。

檢視一下前面兩行程式碼的最後一個參數:

{ passive : false }

這是一個物件,並將「passive」設為「false」,這麼簡單有什麼問題會產生呢?

關鍵就在 LimeJS 是利用 goog Closure optimization 來簡化 JavaScript 的程式碼,所謂的簡化,主要就是將變數、函數名稱 ...... 等變得愈短愈簡單。參考之前這一篇中寫到的:
想要達到程式碼的大小最小化,使用「ADVANCED_OPTIMIZATIONS」,如果沒注意物件存取資料的方式,名稱有可能被改變,導致資料傳遞時會發生失誤。

關於這一點,可以由 build 完的、最佳化後的程式碼看得出來。

1-0 原始碼中用「{ passive : false }」:

document.addEventListener('touchmove', function(e){ e.preventDefault();}, { passive : false });


1-1 未使用「ADVANCED_OPTIMIZATIONS」來 build 後變成:

document.addEventListener("touchmove",function(a){a.preventDefault()},{passive:!1});


1-2 使用「-a」(「ADVANCED_OPTIMIZATIONS」) 來 build 後變成:

document.addEventListener("touchmove",function(a){a.preventDefault()},{ef:q});


註:上面的「q」為 0,可以追到 build 完的程式碼中有「q=!1;」

很明顯的,「-a」參數一加上去,build 完的物件參數名稱「passive」已經被改為「ef」,這樣就無法正確的設定給 document 的 touchmove 事件。


再來看看最後一個參數,在名稱加上一對單引號變成:

{ 'passive' : false }

2-0 原始碼中用「{ 'passive' : false }」:

document.addEventListener('touchmove', function(e){ e.preventDefault();}, { 'passive' : false });


2-1 未使用「ADVANCED_OPTIMIZATIONS」來 build 後變成:

document.addEventListener("touchmove",function(a){a.preventDefault()},{passive:!1});


2-2 使用「-a」(「ADVANCED_OPTIMIZATIONS」) 來 build 後變成:

document.addEventListener("touchmove",function(a){a.preventDefault()},{passive:q});


註:上面的「q」為 0,可以追到 build 完的程式碼中有「q=!1;」

1-0 和 2-0 就只在變數名稱差了一對單引號,但使用引號的名稱讓 2-1、2-2 中的「passive」可以不管在什麼情形下都叫「passive」,始終不改其名。關於這一點,以後可牢牢記住才行,不然真的是除蟲除到地老天荒啊!


2019年3月25日 星期一

LimeJS : 改變 CanvasContext 圖形的透明度


LimeJS 的 CanvasContext 和其它 node 物件一樣,有 setOpacity 可以設定透明度,但它並無法改變在 CanvasContext 中繪製圖形的透明度。當然囉!我們可以在繪圖的指令中加入透明度的參數,一道道的去設定,在想,可以無腦的在呼叫 setOpacity 改變 CanvasContext 的透明度時,不用管裡面繪製了什麼,就將圖形按 setOpacity 的參數來直接換透明度?

在上一篇的「雄 : LimeJS : 取得 canvas 中某一點的顏色」中提到可以利用 getImageData() ,讓我們取得某一區塊的圖形資料。資料中每一個點包括了 RGB (紅綠藍)的的資訊和 A (透明度),所以我們只要將第四個 byte 的透明度,依 CanvasContext 的透明度比例去計算後,再利用 putImageData 把資料寫回去即可達到改變圖形透明度的目的了。

下面假設 canvas 是一個 LimeJS 的 CanvasContext 物件,將繪圖區中圖形變更透明度的方法如下:

var ctx = canvas.getDeepestDomElement().getContext('2d');
var width = canvas.getSize().width;
var height = canvas.getSize().height;
var opacity = canvas.getOpacity();
var imageData = ctx.getImageData(0, 0, width, height);
for(var i=0;i<height;i++) {
for(var j=0;j<width;j++) {
var pixelAlphaIndex = (i*(width*4)) + (j*4) + 3;
var alpha = imageData.data[pixelAlphaIndex];
if( alpha > 0 ) {
imageData.data[pixelAlphaIndex] = Math.floor(alpha*opacity);
}
}
}
ctx.putImageData(imageData,0,0);

這個方法是一個點,一個點的掃描,並變更透明度的值,有空再來看看有沒有效率更高的方法。

LimeJS : 解決 CanvasContext 無法立即繪圖

LimeJS 提供了 lime.CanvasContext 物件來動態的畫圖,但是之前發現有一個問題,如果不是剛建立好 CanvasContext 物件,如果緊接著在 context 中下的繪圖指令,並不會立即看到想畫的東西。這樣一來,就不能動態建立所需要的 CanvasContext 物件了,實在很不方便。

原本就在猜測,可能是因為 CanvasContext 物件還沒來得及在場景中完全建立好,就開始繪圖所產生指令下了,卻看不到圖的問題,今天想到一招,那就讓繪圖指令延遲一下下好了,例如,在百分之一秒後再執行繪圖指令:

如果原來是:

ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 0);
ctx.lineTo(300, 300);
ctx.lineTo(0, 300);
ctx.closePath();
ctx.fill();

就利用 setTimeout 來延遲繪圖指令:

setTimeout( function() {
ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 0);
ctx.lineTo(300, 300);
ctx.lineTo(0, 300);
ctx.closePath();
ctx.fill();
}, 10);

最後的 10 ,讓 funtion() 中的指令在 10/1000 秒後才執行。

至於要延遲多少時間,可以自行再調整。

先用這樣解決了眼前的問題,再看看有沒有更好的方法可用。



 
© 2009. Design by Pocket