製作一個簡單好玩的線上測驗程式─智邦公益電子報─台灣最大公益電子報發行中心

第三階段【網頁製作系列報導】電子報【各種程式選用】

實用程式彙報

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

壹、製作用意及測驗規則說明：
⊙希望藉此遊戲提高或增進您的學習興趣。
⊙讓您知道，其實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.htm => begin.htm => {                                       name=top time.htm
                        name=main main.htm => 0.htm => go.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)：

<script language="JavaScript1.2">

</script>

⊙使用技巧：
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)

<BODY onload="init(); window.setTimeout('show_secs()',1);">
<script language="JAVASCRIPT">

</script>
<form name="fm0" onsubmit="0">
您總共使用了 <input type="text" size="7" name="time_spent" onfocus="this.blur()"> 時間
</form>

捌、倒數計時及第一個測驗畫面製作方法(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()">

<script>

</script>

玖、訂戶及讀者重要通告：
本報(室)即日起不再接受線上指導教學。
如果您有本報導教材或網頁指導需求者，請改用贊助本站方式取得。
凡[贊助本站]者可獲得以下兩份(現在及第三期電子報全部完成後)的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。
參考網頁： http://www.webpage.idv.tw/donate.htm

拾、結論與建議：
⊕本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
⊕本電子報第三階段報導資料，將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎繼續訂閱。
⊕強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，將[所見即所得]軟體當做輔助工具吧。
⊕本站自即日起不再以推廣線上教材(學)會員，自 84 年 10 月 1 日全面改為贊助本站方式，永續耕耘教學網站推展。
⊕本報導內容或資料，因限人力、時間，非贊助本站網友，不接受任何疑惑解答，敬請見諒。
⊕即日起網頁研習室網站，開始提供所有電子報、網頁製作教材等資料，免費各別下載服務，歡迎蒞臨指教。
⊕凡與網路有關之內容，您想要本報在未來報導那些專題？歡迎提出出評價與建議。

第三階段94.10.31.發行第016期前期：再次深入探討如何使用HTML標籤