HTML5 Speaking 是一個可以練習看文(圖)說話的自學小工具。學生看完提示(文字或、圖片)後，以麥克風說出答案，程式利用語音辨識的結果，來檢核答案正確與否，並給予回饋。
HTML5 Speaking 除了可以在 HTML5 FUN 網站中下載並改成自己的練習內容；有自己的網站或是 Blog 的人，也可以利用本頁中的「語法產生器」(已停用)，製作可直接放在網路上玩的版本。
想要在 Blogger 中放自訂題庫的 HTML5 FUN Speaking 嗎？利用「HTML5 FUN 烘焙機」製作語法，再將語法貼入 Blogger 的文章中，即可以直接利用 Blogger 當儲存題庫、並讓別人來玩自製遊戲的空間囉！
最新版的語法產生器稱為「烘焙機」，而且已經將 HTML5 FUN 大部份的遊戲整合在一個烘焙機中，可以按這個連結前往：
示範影片
[之一] 在語法產生器的題庫中加上圖片及 Vocaroo 錄製的語音
[之二] HTML5 Speaking 語法產生器製作 Blogger 及 Weebly 頁面的方法
相關連結
更新記錄
- 2022.12.06 修正加密模式語法在 Google Sites 中會有錯誤，及因為 Google Sites 使用 iFrame，無法使用 prompt 及 alert 來取得遊戲代碼及顯示訊息，所以改用自訂的輸入對話框取代。
- 2022.10.28 加入可勾選支援 Google Sites 嵌入語法的選項。
- 2022.10.27 加入圖形化編輯區。
- 2022.10.16 新增 topTitle 的選項
- 2022.10.15 新增 pinyinConvertEnable 的選項。
- 2022.10.13 新增 order_by_random 和 ttsPlaybackRate 兩個選項供設定；解決說明對話框說明文字的填入題庫設定的問題。
- 2022.10.08 在第三步驟加入一個可輸入「會員限定的遊戲代碼」的欄位，如果設定了，題庫會被加密，玩的時候必須先輸入正確的代碼，才能將題庫解碼，出現開始玩的按鈕。
- 2022.10.03 將語音辨識的語言代碼、說明畫面的說明內容及遊戲模式選擇鈕上的文字，列入填寫的欄位，方便自訂；調整版面，將三大步驟以圓角邊框區分清楚。
- 2022.09.28 解決在 iOS 時，會有按了試玩鈕，畫面不正常顯示及有按鈕無法按的情形。
- 2022.09.25 解決語法產生單輸入的自訂題庫，因為主程式載入後，會覆蓋掉設定的問題。
- 2022.09.25 正式發布。
', html);
/* &符號必須轉為 & \ 必須轉為 \\ 才能用 */
html = html.replace(/\/g, '>').replace(/\\/g, '\\\\');
/* 使用 Template2 變成 Google Sites 嵌入的語法 */
html = getGoogleSitesTemplate(2).replace('', html);
/* \\` 變成 \` 不然無法置換變數 */
html = html.replace(/\\\\`/g, '\\`');
/* 修正最後一個 多了一個反斜線 */
html = html.replace(/<\\\\\//g, '<\/').replace(/<\\\//g, '</'); }
}
/* =========== Google Sites 網頁語法加料完成 ===== */
break;
}
html = decodeHTML(html);
html = html.replace(/&/g, '&').replace(//g, '>');//.replace(/\u00a0/g, ' ');
html = html.replace(/^(.*)$/mg, "
$1");
obj.innerHTML='
'+html+'
';
//select and copy
if(n==2) {
copyAndSelectToClipboard(obj);
}
} else {
obj.innerHTML = '';
document.getElementById('showCodeBtn'+n).innerHTML= labelText[n];
}
//reset another's innerHTML
for(var i=0; i
0) {
questionLines = q.value;
}
var settingJS = document.getElementById('settingJS');
if(typeof(settingJS)!='undefined') {
//由 settingJS 取得題庫設定, 並將 questionLines 的部份更新
settingJS.innerHTML = settingJS.innerHTML.replace(qRE,'$1'+"\n"+questionLines+"\n"+'$2');
}
}
update_settingJS = function() {
var settingJS = document.getElementById('settingJS');
if(typeof(settingJS)!='undefined') {
for(var i=0; i 1) ) {
mimeType = 'application/octet-stream';
} else {
//var mimeType = 'text/json';
}
//return "data:text/json;charset=utf-8;base64," + jsonString;
//return 'data:application/octet-stream;charset=utf-8;base64," + jsonString;
return 'data:'+mimeType+';charset=utf-8;base64,' + dataURIString;
}
utf16to8 = function(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
};
base64_encode = function(data) {
// http://kevin.vanzonneveld.net
// + original by: Tyler Akins (http://rumkin.com)
// + improved by: Bayron Guevara
// + improved by: Thunder.m
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Pellentesque Malesuada
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Rafa? Kukawski (http://kukawski.pl)
// * example 1: base64_encode('Kevin van Zonneveld');
// * returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
// mozilla has this native
// - but breaks in 2.0.0.12!
//if (typeof this.window['btoa'] === 'function') {
// return btoa(data);
//}
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
ac = 0,
enc = "",
tmp_arr = [];
if (!data) {
return data;
}
do { // pack three octets into four hexets
o1 = data.charCodeAt(i++);
o2 = data.charCodeAt(i++);
o3 = data.charCodeAt(i++);
bits = o1 << 16 | o2 << 8 | o3;
h1 = bits >> 18 & 0x3f;
h2 = bits >> 12 & 0x3f;
h3 = bits >> 6 & 0x3f;
h4 = bits & 0x3f;
// use hexets to index into b64, and append result to encoded string
tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
} while (i < data.length);
enc = tmp_arr.join('');
var r = data.length % 3;
return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
}
/*
按完右上角的叉叉後，將畫面捲回輸出的區塊
*/
callbackAfterClosed = function() {
setTimeout( function() {
var elm = document.getElementById('step3');
if (typeof(elm)!='undefined' && elm!=null) {
window.scrollBy({
top: elm.offsetTop,
left: 0,
behavior: 'smooth'
});
}
},100);
};
/* 將物件的 innerText 設給同層最後一個元件的 value */
setThisValue = function(elm) {
if(typeof(elm.parentNode.lastChild.value)!='undefined' && elm.parentNode.lastChild.value!=null) {
elm.parentNode.lastChild.value = elm.innerText;
if(typeof(update_settingJS)=='function') {
update_settingJS();
}
}
};
//
//檢查 textarea 是否已存在，有就將目前的題庫及設定放進輸入區
var qIntervalID = setInterval(function() {
for(var i=0; i
發表文章
沒有留言:
張貼留言