實用程式彙報

第三篇
製作一個簡單好玩的線上測驗程式

適合程度： 初學者 一般程度 進階者 以上均宜
範例

壹、製作用意及測驗規則說明：
希望藉此遊戲提高或增進您的學習興趣。
讓您知道，其實THML + JavaCript 的網頁也能做到如此有趣。
我使(套)用幾個 JavaCript 時間程式，讓測驗更加有刺激好完。
順便看看您對 THML 語法瞭解多少。
測驗規則說明：
1.本測驗內容以您對 THML 語法瞭解為主，適合初、中程度者。
2.測驗採計(限)時及答錯扣分(退回啟點)方式競賽。
3.每題 5 個選項，均限時 1 分鐘內需完成做答。
4.如果您答對該題，則會順利轉到下一頁面，總共 5 題 5 分鐘時間。
5.答錯該題，則會退回開始頁面，重新再來一次，直到測試完畢。
6.作答愈時( 1 分鐘)也會自動退回[開始計時]畫面，使用總時間則繼續累計。
7.按下[開始計時]按鈕，上方顯示您總共(累計)使用時間，不得更改。
8.測驗標準分數，以總共累計使用多少時間計算。
9.請按[接授測驗]按鈕，進入測驗分數及等級說明。
測驗分數及等級 ：
三分鐘以內者：   100 分，真的不簡單喔，了不起。
3 ~ 4 分鐘者：   90 分，很棒！為自己鼓掌一下。
4 ~ 5 分鐘者：   80 分，不錯喔！不會有碰運氣的答題吧。
5 ~ 7 分鐘者：   75 分，您可以嘗試使用記事本寫網頁了。
7 ~ 9 分鐘者：   70 分，看樣子您是有讀一點書。
9 ~ 12 分鐘者：   65 分，還算可以啦，其實您可以更好。
12 ~ 15分鐘者：   60 分，剛好級格，還要繼續努力。
15分鐘以上者：   55 分，您不級格啦，真的要加點油喔。

貳、製作程序：
點選[範例]便進入測驗規則說明，此時標題列會顯示歡迎詞及今天日期。
看完說明後按[接授測驗]便進入倒數計時測驗畫面。
通過後就依序進入第二個測驗的畫面。
沒通過後就退回開始測驗的畫面。
可依據您的測試題數製作測驗畫面，直到整個測驗結束為止。

參、架構運作安排：
[範例]按鈕彈出一個固定小視窗(製作方法詳04)。
begin.htm分割為上下兩個視窗。
上視窗top.htm 標題上顯示今天日期(製作方法詳05)。
下(主)視窗main.htm 顯示測驗規則說明及[接授測驗]、[放棄測驗]按鈕。
按下[接授測驗]按鈕進入測驗分數及等級說明 (0.htm) 頁面。
按下[開始計時]按鈕進入停留時間、倒數計時及測驗的第一個畫面 。
go.htm採用 Target="_top" 功能，又分割為上下兩個視窗(製作方法詳06)。
上視窗time.htm 顯示進入停留時間(製作方法詳07)。
下(主)視窗1.htm 倒數計時及第一個測驗畫面(製作方法詳08 & 09)。
程序及架構示圖：
                        name=top  top.htm
03.htmbegin.htm{                                       name=top time.htm
                        name=main main.htm0.htmgo.htm {
                                                               name=main 1~5.htm 

1~5.htm 答對繼續下去，答錯或愈時則退回 (00.htm) 頁面，通過測試 (000.htm) 頁面。

肆、彈出小視窗：
電子報[範例]圖示所使用的 JavaScript 程式
<a href="#" onClick="window.open
('begin.htm','begin','width=500,height=450,directories=no,location=no,menubar=no,scrollbars=no,status=yes,toolbar=no,resizable=no,
left=140,top=25,screenX=0,screenY=0');return false">
<img src="../../imags/exp2.gif" width="44" height="22" align="top" border="0" alt="範例"> /a>

伍、今天日期 JavaScript 程式碼(top.htm)：
<!-------JavaScript標題列日期開始-------->
<script language="JavaScript1.2">
<!--begin
var isnMonth = new
Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
var isnDay = new
Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
today = new Date () ;
Year=today.getYear();
if (Year < 1000)
Year+=1900
Date=today.getDate();
if (document.all)
document.title="今天是 : "+isnDay[today.getDay()]+" , "+isnMonth[today.getMonth()]+" "+Date+" 日 , 西元 "+Year+"年"
//--end-->
</script>
<!-------JavaScript標題列日期結束-------->
 使用技巧：
1.此 JavaScript 程式碼要放於 begin.htm 分割視窗內，否則無法顯示。
2.日期部份您也可以改為
document.title="今天是： 中華民國 "+(Year-1911)+" 年 "+isnMonth[today.getMonth()]+" "+Date+" 日 "+isnDay[today.getDay()]+" "

陸、採用 Target="_top" 語法：
<form name="form" method=post>
<input type=button value="接授測驗"
onclick="top.window.location.replace('go.htm');" style="width:90px;height:19px;color:#000000;border:1px #000000 outset #FFFFFF;cursor:hand">
</form>

柒、顯示進入停留時間 JavaScript 程式碼 (time.htm)
<!-------JavaScript停留時間開始-------->
<BODY onload="init(); window.setTimeout('show_secs()',1);">
<script language="JAVASCRIPT">
<!--
var ap_name = navigator.appName;
var ap_vinfo = navigator.appVersion;
var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf('(')));
var time_start = new Date();
var clock_start = time_start.getTime();
var dl_ok=false;
function init ()
{
if(ap_name=="Netscape" && ap_ver>=3.0)
dl_ok=true;
return true;
}
function get_time_spent ()
{
var time_now = new Date();
return((time_now.getTime() - clock_start)/1000);
}
function show_secs ()
{
var i_total_secs = Math.round(get_time_spent());
var i_secs_spent = i_total_secs % 60;
var i_mins_spent = Math.round((i_total_secs-30)/60);
var s_secs_spent = "" + ((i_secs_spent>9) ? i_secs_spent : "0" + i_secs_spent);
var s_mins_spent = "" + ((i_mins_spent>9) ? i_mins_spent : "0" + i_mins_spent);
document.fm0.time_spent.value = s_mins_spent + ":" + s_secs_spent;
window.setTimeout('show_secs()',1000);
}
// -->
</script>
<form name="fm0" onsubmit="0">
您總共使用了 <input type="text" size="7" name="time_spent"> 時間
</form>
<!-------JavaScript停留時間結束-------->
捌、倒數計時及第一個測驗畫面製作方法 (1~5.htm)：
製題答對與錯 JavaScript 程式碼：
<form>
<input name="q1" type="radio" value="1" onclick="alert('喔喔！答錯了，請重來吧！');location.href='00.htm'"> 1.她必需使用英文字母
<input name="q1" type="radio" value="4" onclick="alert('您答對了，不錯喔！');location.href='2.htm'"> 4.她是程式語言的一種
</form>
您還剩下多少時間 JavaScript 程式碼：
<body onload="begintimer()">
<!-------JavaScript倒數計時離開頁面開始-------->
<script>
<!--
var limit="0:30"
if (document.images){
var parselimit=limit.split(":")
parselimit=parselimit[0]*60+parselimit[1]*1
}
function begintimer(){
if (!document.images)
return
if (parselimit==1)
window.location="00.htm" //設定網頁路徑
else{
parselimit-=1
curmin=Math.floor(parselimit/60)
cursec=parselimit%60
if (curmin!=0)
curtime="還剩下" +curmin+" 分 "+cursec+" 秒退回測驗的第一個畫面"
else
curtime="還剩下" +cursec+" 秒退回測驗的開始計時畫面"
window.status=curtime
setTimeout("begintimer()",1000)
}
}
//-->
</script>
<!-------JavaScript 倒數計時離開頁面結束-------->

玖、訂戶及讀者重要通告：
如果您想完整取得電子報內所有檔案資料，我們提供 燒錄光碟片 給您。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。