3.2 學生子系統流程與功能實作
3.2.2 學生子系統重點功能
功能一：試題 widget 仿照 QTI 介面格式
QTI 格式其優點，主要是希望 “測驗題目設計者” 所設計出來的題型可以 互相流通與再利用，有別於傳統的出題模式。QTI 標準主要制訂了三個重要個概 念，分別為 ASI Model、Result Report 以及 Render Type，因此我們仿照 QTI，參 考 QTI 的優點，作出仿照 QTI 介面格式的試題 widget。
仿照 QTI 的呈現格式，可以藉由圖 3-5 清楚的瞭解 ASI model 所要呈現的意義，
Assessment 我們可以將他想像成測驗卷的整體、Section 為測驗卷的題型，如選擇 題、是非題等，而 Assessment Item 則為測驗題本身。
圖 3-5 試題 widget 仿 QTI 範例圖 ASI model
另外 Result Report 在於定義測驗者作答的回覆格式，例如選擇題以四個選項 回復如圖 3-6，其程式內容如程式碼 3-1，而是非題則以是和否回復如圖 3-7，程 式內容如程式碼 3-2，問答題以文字回答的方式回答如圖 3-8，程式內容如程式碼
3-3。
圖 3-6 選擇題選項回答 選擇題
<style>
body {font-family: sans-serif;font-size:30px;}
</style>
</head>
<body>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid
#EE872A;">
<div id="main">
<img width="200" height="150"
src="http://140.122.184.35/ibook/img/loading.gif"></img>
</div>
<input type="radio" name="ques" value="A" onclick="s_click()"/>
（Ａ）
<br/>
<br/>
<input type="radio" name="ques" value="B" onclick="s_click()"/>
（Ｂ）
<br/>
<br/>
<input type="radio" name="ques" value="C" checked="checked"
onclick="s_click()"/>
（Ｃ）
<br/>
<br/>
<input type="radio" name="ques" value="D" onclick="s_click()"/>
（Ｄ）
body {font-family: sans-serif;font-size:30px;}
</style>
</head>
<body>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid
#EE872A;">
<div id="main">
<img width="200" height="150"
src="http://140.122.184.35/ibook/img/loading.gif"></img>
</div>
<input type="radio" name="ques" value="Ｏ" onclick="s_click()"/>
（O）
<br/>
<br/>
<input type="radio" name="ques" value="Ｘ" onclick="s_click()"/>
（X）
<style>
body {font-family: sans-serif;font-size:30px;}
</style>
</head>
<body>
<div id="main">
<img width="200" height="150"
src="http://140.122.184.35/ibook/img/loading.gif"></img>
</div>
<td>回答</td>
<br>
<td><input type="text" name="answer"/></td>
</tr>
<button id="send" onclick="send()">儲存</button>
</body>
程式碼 3-3 問答題作答程式碼
Render Type 則是定義了測驗題目的類型，我們在學生子系統上設種題型分 別是，是非題、選擇題、問答題和計算題。
功能二：LocalStorage 儲存
LocalStorage 儲存的功能我們在學生子系統用在兩個地方，一個是基本資料 的儲存，另一個是使用在基本題型的作答，兩者都是將資料暫時儲存於
LocalStorage，以方便上傳之利用。
在基本資料程式部分，在輸入基本資料後，當 send 這個按鈕被按下，就會 被執行 send()這個 function，這個 widget 最重要的工作就是將學生的各項資料 儲存至 localStorage，因此我們可以看見，send()這個 function 裡面就有這樣 的程式，如程式碼 3-4 所示:
localStorage.userName = document.getElementsByName('userName')[0].value;
localStorage.userBirth = document.getElementsByName('birth')[0].value;
localStorage.userSex = document.getElementsByName('sex')[0].value;
localStorage.userHandicap = document.getElementsByName('handicap')[0].value;
localStorage.userEmail = document.getElementsByName('email')[0].value;
程式碼 3-4 資料儲存至 localStorage
設定一個變數叫做 userEmail，它的值是從 tag name 叫做 email 的標籤抓取 來的，將值存入 localStorage，好讓其他 widget 可以使用這個值。
另外在儲存作答結果在基本題型的作答，重點在於，當我們按下 radio button 時，會觸發一個 s_click()的函式，這個函式可以將我們所選擇的答案給儲存起來，
存進 localStorage 當中，以下是程式碼 3-5：
function s_click() { 查現在所選的是哪一個選項，並且把結果存入相對應的 localStorage 當中，
localStorage 的命名方式是這樣：quesNum+題號，所以如果我今天要儲存第一題 的答案，我就會存在 quesNum1 當中，第二題就存在 quesNum2 當中以此類推，在 javascript 中，想要把變數跟程式碼結合，並且執行此結合後的程式碼，可以使 用 eval()這個函式來達到這結果。
功能三：題目前端後端同步
$('#main').html('第' + data.number + '題<br/><br/>'+data.question+'<br/><hr/>');
} 題，Javascript 禁止跨網域的動作，所以當我想要從 iBooks 中的 widget 發送資料
到伺服器端，並要求資料的回傳時，就會遇到問題，iBooks 中 widget 的資料是它 內建的，怎麼樣也無法讓 widget 中的 Javascript 不跨網域來收取資料，所以這裡 我們就需要用到 jsonp 這個型態，jsonp 提供了一個跨網域的解決方法，使用 jsonp 型態連到伺服器端，並且設定回傳的資料是 json 格式的檔案時，就可以跨網域。
因此可以看到 Ajax 的核心程式碼當中，dataType 設定為 jsonp，把題號 ques_num 傳送給伺服器端，讓伺服器端去資料庫中搜尋並將題目內容返回。若 AJAX 成功，就返回兩個參數：ques_amount，在題庫中總共有幾題以及 question 代表題目的內容，並將 ques_amount 儲存在 localStorage 中，將題目內容嵌入 HTML 中輸出給使用者看。
伺服器端的程式碼如下程式碼 3-7：
$sql = "select * from question";
$resource = mysql_query($sql, $link_ID);
$ques_count = mysql_num_rows($resource);
$ques_num = $_GET["ques_num"];
$sql = "select * from question where ques_num=$ques_num";
$resource = mysql_query($sql, $link_ID);
$data = mysql_fetch_array($resource);
$result["ques_amount"] = $ques_count;
$result["number"] = $ques_num;
$result["question"] = $data["content"];
echo $_GET['json_callback'] . '(' . json_encode($result) . ');';
程式碼 3-7 題目伺服器端接收
以上程式碼說明如何連接資料庫，比較值得注意的是，要回傳的資料將它們 分類好放在陣列當中，再用 json_encode 把它編碼成 json 格式。
功能四：基本題型上傳與自動對答
學生在作答完後可以把作答結果，連同學生的基本資料，利用 Ajax 方式傳送
給 Sever 儲存如程式碼 3-8，讓教師子系統可以讓老師了解學生程度。
$.ajax({
url:'http://140.122.184.35/ibook/receive_ques_data.php', jsonp: 'json_callback',
data:{'ques_answer':ques_string, 'name':name, 'sex':sex, 'birth':birth, 'handicap':handicap, 'email':email},
dataType:'jsonp',
$ques_answer = $_GET["ques_answer"];
if($sex == "male") $sex = 0;
else
$sex = 1;
$sql = "insert into user_answer (answer, name, sex, birth, mainDisable, mailOrPhone, build_time) values('$ques_answer', '$name', '$sex', '$birth', '$handicap', '$email', Now())";
$resource = mysql_query($sql);
程式碼 3-9 基本題型回答 Sever 接收
而自動對答方面，作答結果會以字串的方式存到陣列如程式碼 3-10：
var ques = new Array();
for(var i=1; i<=parseInt(localStorage.ques_amount); ++i) {
eval('ques['+(i-1)+'] = localStorage.ques'+i+'');
}
var ques_string = ques.join(',');
程式碼 3-10 作答結果存成陣列字串
另外學生可以在作答完成後觀看自己的作答結果和正確答案，同時也可以知
道對錯幾題，如下程式碼 3-11，以 document.write()語法呈現字串。
var ques_string = ques.join(',');
function answer() {
document.write(ques_string);
}
<script type="text/javascript">
answer(ques_string);
</script>
程式碼 3-11 document.write()語法呈現字串 功能五：Canvas 畫板作答 -Touch-and-Mou，其中比較特別因為要使用在平板上面，所以需給 iPad 或 Android 智慧型動裝置上定義一個變數，如下程式碼 3-12：
var is_touch_device = 'ontouchstart' in document.documentElement;
程式碼 3-12 touch_device 變數 功能六：進階題型截圖與上傳
由於智慧型動裝置有內建截圖功能，如 ipad 的 Home 鍵+電源鍵同時按下即 可截圖，而上傳檔案部分，不同於基本題題型流程，為了方便老師 Email 回覆給 學生批改結果，會要求學生輸入姓名與 Email，而上傳中同時將圖片檔存入 Sever 端使用 move_uploaded_file()語法並且圖片檔位址使用 sql 語法 insert 同時寫入資
料庫，程式碼如下程式碼 3-13：
move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8",
"big5","upload/".$userpic_1));//上傳至資料夾
$instr = fopen(iconv("UTF-8", "big5","upload/".$userpic_1),"rb");
$file = addslashes(fread($instr,filesize(iconv("UTF-8",
"big5","upload/".$userpic_1))));
$sql="insert into
imageDB(image,name,email)values('".$string."','".$_POST["newname"]."','".$_POST[
"email"]."')";//位址寫入資料庫
程式碼 3-13 圖片上傳