(實戰專題) 網路試卷上篇(頁 1) - ASP 與 ASP.NET

小誌發表於 2010-5-24 15:40

(實戰專題) 網路試卷上篇

相信各位網友們對於『遠距教學』這個名詞應該都是耳熟能詳了吧！『遠距教學』拜網路科技的技術的日漸成熟，使得原本處於理論研究階段的『遠距教學』逐漸成為可以實際應用的技術，『遠距教學』顧名思義就是學生們可以由家中電腦或在學生宿舍中，經由網路連線至學校的電腦計算機中心，來進行『教學』，即使是老師身於台北而學生遠在高雄，都依然可以透過網路的『遠距教學』進行授課及學習，甚至可以在網站上繳交作業或是進行學習成果的評量測驗。

　現在除了可以使用傳統的紙張方式進行學習測驗外，同時還可以利用『網路試卷』的方式於網站上進行現場的學習成果測驗，不但可以馬上得知測驗成績的結果免除辛勞試卷批改，同時還免用紙張，為地球環保盡一份棉薄之利呦。

　本教學篇就是要為各位網友示範一個可以讓於網上進行學習成果測驗的『網路試卷』(線上考試)！

[color=Blue]在本範例『網路試卷』中所使用的資料(學生資料，考題答案、成績結果等三項資料紀錄)都是儲存於資料庫檔案中，別緊張！我們所使用的資料庫檔案格式為 Access 形式的 .mdb 檔案，相信各位網友們都已經是駕輕就熟啦！不熟？沒關係！我們會為各位簡單的介紹如何建立這個資料庫檔案。[/color]

小誌發表於 2010-5-24 15:42

[color=DarkOrange][size=5][b]試卷的組成構造[/b][/size][/color]
要讓學生在線上進行學習成果測試，第一件要作的事，就是先確認學生的身分，所以我們要先設計一個『試場大門』的網頁，在本例中我們將這個網頁檔案名稱定為：『indoor.asp』，這個網頁主要用來比對學生的身分，以便於測試結束後，將考試的結果儲存於相對應的學生成績欄位。

有了『試場大門』的網頁，比對學生的身分無誤後，接下來我們就要發給學生考試卷，這個考試卷當然是以網頁的型式呈現於學生的電腦螢幕中，這一個『網路試卷』的網頁，在本例中我們將這個網頁檔案名稱定為：『question.asp』，這個網頁中將含有一個讀取考試試題的ASP程式來讀取資料庫中的考題。

當學生完成試題的填寫完成後並且按下『交卷』的按鈕後，將會進入評分的ASP程式網頁中，在這個網頁中ASP程式將進行分數的計算，並且將評分後的成績送至資料庫檔案中儲存，不僅如此，ASP程式還會馬上將評定的成績結果立即顯示在網頁中，學生可以在線上填卷測驗後馬上得知自己的測驗成績，這一個『評分及公佈成績』的網頁，在本例中我們將這個網頁檔案名稱定為：『grad.asp』。

最後，還有一個必要的檔案必須被建立，那就是含有學生資料，考題答案、成績結果等三項資料記錄的資料庫檔案，這個資料庫檔案為 Access 格式的　mdb 資料庫檔案，負責存放學生資料，考題答案、成績結果的資料記錄，在本範例中這個『儲存學生資料、考題、成績結果』的資料庫檔案，我們將它定名為：『exam.mdb』。

簡言之，我們網路試卷的構成共有下列四大部分：
[list]
[*]試場大門網頁：用來檢驗受測學生的身分。
[*]網路試卷網頁：也就是學生們要作答的考試卷，在這個網頁中將顯示學們們接受測驗的所有題目。
[*]評分及公佈成績網頁：在這個網頁中ASP程式將進行分數的計算，將評分後的成績送至資料庫檔案中儲存，並且將受測學生的成績結果立即顯示出來。
[*]資料庫檔案：負責存放學生資料，考題題目答案、成績結果的資料記錄。
[/list]

下圖為網路試卷的組成與關聯性說明圖：

[attach]860[/attach]

小誌發表於 2010-5-24 15:46

[color=darkorange][b][size=5]試場大門[/size][/b][/color]
我們要讓學生於網路線上進行學習成果測驗，首先要作的事就是先確認前來參加測驗考試的學生身分，所以我們必須先設計一個可以驗證學生身分的『網路試卷－試場大門』網頁，確認要參加測驗的學生是否在我們的受測名單中，這個網頁中含有一個身分確認的網頁表單讓受測學生填寫姓名與學號，並且含有一支ASP程式與另一支檢查表單欄位受否有填寫資料的VB Script 程式，受測學生按下表單中的『進入考場』按鈕後，將會先啟動VB Script 程式檢驗是否缺填相關的資料，接著這些資料將會被送至ASP程式中，ASP程式將會讀取資料庫中的受測學生名單資料與自網頁表單接收到的學生資料比對以確認前來受測學生的資格，如果確認受測學生的身分無誤後就會進入『網路試卷－試卷網頁』。

　現在我們就來製作這個含有輸入資料檢查、身分驗證檢查的試場大門網頁『indoor.asp』：

[attach]861[/attach]

[table]
[tr][td=1,1,48][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]編號[/size][/font][/font][/p][/td][td=1,1,110][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]欄位[/size][/font][/font][/p][/td][td=1,1,125][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]欄位名稱[/size][/font][/font][/p][/td][td=1,1,178][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]表單元件[/size][/font][/font][/p][/td][/tr]
[tr][td=1,1,48][p=30, 2, center][font=全真中細圓體][color=#000000][font=Courier New][size=2]Ａ[/size][/font][/color][/font][/p][/td][td=1,1,110][p=30, 2, center][font=全真中細圓體][color=#000000][font=Courier New][size=2]姓名[/size][/font][/color][/font][/p][/td][td=1,1,125][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]studentname[/size][/font][/color][/font][/p][/td][td=1,1,178][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]單行文字輸入方塊[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,48][p=30, 2, center][font=全真中細圓體][color=#000000][font=Courier New][size=2]Ｂ[/size][/font][/color][/font][/p][/td][td=1,1,110][p=30, 2, center][font=全真中細圓體][color=#000000][font=Courier New][size=2]學號[/size][/font][/color][/font][/p][/td][td=1,1,125][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]number[/size][/font][/color][/font][/p][/td][td=1,1,178][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]單行文字輸入方塊[/size][/font][/color][/font][/p][/td][/tr]
[/table]
按下表單中的『進入考場』按鈕<input type="button" value="進入考場" onclick="datacheck">後，將會先啟動VB Script 程式中的檢驗函數『datacheck』檢驗是否缺填相關的資料，然後觸發網頁中的ASP程式進行身分驗證。

[color=Green][size=4][b] 檢查資料欄位是否填寫資料的VB script 程式：[/b][/size][/color][code]<script language="vbscript">

Function datacheck


IF Len(document.indoor.studentname.value)=0 or Len(document.indoor.number.value)=0 then

msg="請輸入資料！"
MsgBox msg,vbExclamation,"錯誤!"
Exit Function
End IF

indoor.Submit
End Function
-->
</script>[/code]在這個檢驗資料欄位是否有填寫資料的VB Script程式中，我們利用VB 檢驗字串長度的Len函數驗證欄位資料是否填寫，如果有任一個欄位沒有填些資料將會出現下圖的警告視窗：

[attach]862[/attach]

小誌發表於 2010-5-24 15:48

[color=Green][size=4][b]身分驗證[/b][/size][/color]

雖然說我們在資料欄位中填寫了姓名與學號資料，但是程式還是會再核對一次身分呦！如果前來受測學生並沒有在資料庫的受測學生名單資料中，那麼就會出現提示訊息，提醒前來的受測的學生是否有誤填資料，並要求重新填寫資料。

[attach]864[/attach]

indoor.asp[code]<%
'承接由Indoor表單傳來的學號、姓名資料
studentname=Request("studentname")
number=Request("number")
Msg=""
'如果Indoor表單傳來的學號、姓名資料不是空白的
'就進行與資料庫中受測學生資料進行比對
IF studentname<>Empty and number<>Empty then
'開啟exam.mdb資料庫
'建立資料庫連結物件conobject
Set conobject = Server.CreateObject("ADODB.Connection")
'利用MapPath方法取得資料完整真實路徑
DBPath = Server.MapPath("exam.mdb")
'利用Open方法打開資料庫
conobject.Open "Driver={Microsoft Access Driver (*.mdb)};DBQ="&DBPath
'建立存取資料庫物件recobject
Set recobject=Server.CreateObject("ADODB.Recordset")
'從student資料表中找出學號、姓名與輸入相同的資料
SQL="SELECT * From student where 學號="&number&" and 姓名='"&studentname&"'"
recobject.Open SQL,conobject,1,1,1
'如果姓名學號驗證無誤就進入試卷網頁
Do while not recobject.EOF
   Response.Redirect "question.asp?"&Request.QueryString
   recobject.MoveNext
Loop
'如果找不到對應的學號與姓名就顯示錯誤訊息
IF Msg="" then
Msg="姓名或學號輸入有錯誤！"
End IF
'關閉資料庫
recobject.Close
conobject.CLose
End If
%>

<html>
<head>
<title>網路試卷-試場大門</title>
<script language="vbscript">

Function datacheck

IF Len(document.indoor.studentname.value)=0 or Len(document.indoor.number.value)=0 then

msg="請輸入資料！"
MsgBox msg,vbExclamation,"錯誤!"
Exit Function
End IF

indoor.Submit
End Function
-->
</script>
</head>
<body>

<p align="center"><font color="#FF0000" size="6" face="新細明體">網路試卷-試場大門</font></p>

<center><font color="red"><%=Msg%></font></center>
<form method="get" name="indoor" >
  <div align="center">
<table border="0" width="60%">
   <tr>
      <td width="50%">
      <p align="right"><font color="#0000FF">姓名：</font></td>
      <center>
      <td width="50%"><input type="text" name="studentname" size="10" value="<%=studentname%>"></td>
      </tr>
   <tr>
      <td width="50%">
      <p align="right"><font color="#0000FF">學號：</font></td>
      <td width="50%"><input type="number" name="number" size="10" value="<%=number%>"></td>
      </tr>
      <tr>
      <td width="100%" colspan="2">
         <p align="center"><input type="button" value="進入考場" onclick="datacheck">
         <input type="reset" value="重新輸入"></td>
      </tr>
   </table>
</center>
  </div>
</form>
</body>
</html>[/code]

小誌發表於 2010-5-24 15:52

[color=darkorange][size=5][b]試卷程式網頁[/b][/size][/color]
在『網路試卷－試場大門』網頁中，利用VB Script 程式檢查表單欄位資料的填寫與ASP程式確認受測學生的身分無誤後就會進入『網路試卷－試卷網頁』來進行測驗，在『網路試卷－試卷網頁』的ASP程式機制中分為兩大部分，一為建立建立資料庫連結物件(Connection)、建立存取資料庫物件(Recordset)來與資料庫進行連結與存取資料內資料表的資料，另一為將讀取進來的『考試題目』顯示在網頁中讓受測學生作答。

[color=green][size=4][b]連結開啟資料庫[/b][/size][/color]

　首先我們先來看看資料庫進行連結與存取資料庫內資料表的資料的ASP程式是如何建立及開啟一個資料庫檔案：[code]<%
'承接來自Indoor.asp的學號、姓名資料
studentname=Request("studentname")
number=Request("number")
'開啟exam.mdb資料庫中的first(題目)資料表
'建立資料庫連結物件conobject
Set conobject = Server.CreateObject("ADODB.Connection")
'利用MapPath方法取得資料完整真實路徑
DBPath = Server.MapPath("exam.mdb")
'利用Open方法打開資料庫
conobject.Open "Driver={Microsoft Access Driver (*.mdb)};DBQ="&DBPath
'建立存取資料庫物件recobject
Set recobject=Server.CreateObject("ADODB.Recordset")
SQL="SELECT * From "&"first"&" ORDER by 題號"
recobject.Open SQL,conobject,1,1,1
'先將資料表的資料錄移至第一筆
recobject.MoveFirst
%>[/code]在ASP程式中，我們若要進行資料庫的存取動作必須先建立一個 Connection的物件(資料庫連結物件)，Connection 物件是負責與資料庫實際的連結動作，建立與網路伺服器資料庫的連結是進行資料庫存取的第一步，若沒有 Connection 物件連結資料庫，則空有其他物件也沒用，接著我們再利用使用 Connection 物件的『Open』方法來連結『mdb』資料庫，如果我們要連結的mdb資料庫有設定密碼，那麼我們就要使用這個密碼參數，若資料庫沒有設定密碼，那麼我們就可以省列這個參數:

　下表為利用Connection 物件的『Open』方法來連結『mdb』資料庫必須給予的參數
[table]
[tr][td=1,1,231][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]參數[/size][/font][/font][/p][/td][td=1,1,230][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]設定值[/size][/font][/font][/p][/td][/tr]
[tr][td=1,1,231][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]Provider[/size][/font][/color][/font][/p][/td][td=1,1,230][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]microsoft.jet.oledb.4.0[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,231][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]Data Source[/size][/font][/color][/font][/p][/td][td=1,1,230][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]實際路徑檔案名稱[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,231][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]jet oledb:database password[/size][/font][/color][/font][/p][/td][td=1,1,230][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]密碼[/size][/font][/color][/font][/p][/td][/tr]
[/table]

利用Connection的物件連結資料庫後，我們必須再建立一個RecordSet物件出來，Recordset物件是負責瀏覽與操作從資料庫取出來的資料，Recordset物件其實是針對資料庫中的資料表進行存取的動作，可以搭配下方屬性MoveFirst及EOF將所有資料讀取

[color=Magenta]改變目前資料表的方法[/color]
[list=1]
[*]MoveNext：移至下一筆資料使其成為現用資料錄
[*]MovePrevious：移至前一筆資料使其成為現用資料錄
[*]MoveFirst：移至第一筆資料使其成為現用資料錄
[*]MoveLast：移至最後一筆資料使其成為現用資料錄
[*]BOF：資料錄指標是否移至第一筆資料錄之前
[*]EOF：資料錄指標是否移至最後一筆資料錄之後
[*]AbsolutePosition：設定或傳回現用資料錄的絕對位置
[/list]

[color=Magenta]資料表的新增、刪除與修改[/color]
[list=1]
[*]Addnew：新增資料錄
[*]Update：更新資料錄
[*]CancelUpdate：取消更新資料
[*]Delete：刪除資料錄
[/list]

頁: [1]

麻辣家族討論版版's Archiver

(實戰專題) 網路試卷 上篇

(實戰專題) 網路試卷上篇