國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
第四章 網頁架構
在本章節，將會介紹本系統架設網頁所使用的工具以及在網頁上包裝詴題的相關 技術。我們可以對圖形具有特殊意義的點或邊做些更動，使得圖形更加的清楚，或是 對圖形產生一些變化卻不影響其難易度的，如此更動過後的詴題將會更具有價值。
4.1.1：Appserv
本研究使用 Appserv 來協助我們的網站架設。Appserv 是一個 Apache + PHP + MySQL + PHPMyAdmin 的一個網站架設整合工具，利用 Apache 架設網站、PHP 編寫 語法、MySQL 用來當資料庫儲存東西，並使用 PHPMyAdmin 管理所做出來的網站。
使用者可以省去繁瑣的安裝軟體流程，直接進入架設網頁伺服器的階段。
4.1.2：Apache
Apache[15]是 Apache 軟體基金會的一個開放原始碼的網頁伺服器軟體，除了歷史 悠久、免費、具有彈性化的介面外，還擁有牢靠可信的美譽。根據 NETCRAFT[16]在 數百萬的網站的統計上，Apache 在全球有接近半數的網站所使用，特別是熱門與流量 大的網站(例如維基百科的網站)，是目前市占率最高的網頁伺服器軟體。
4.2：Clingo 計算
當使用者在我們的網頁上選擇好演算法，並設置參數且送出後，參數將會送至伺 服器端進行計算，並將輸入的值轉換成 Clingo 語法。這將會成為我們 ASP 檔所使用 的參數，接下來使用 PHP 的功能呼叫 Clingo 執行 ASP 檔來產生結果。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
clingo version 5.2.1 Reading from htd.lp Solving... Answer: 1 sup(13,27) sup(13,26) sup(7,15) sup(7,14) sup(6,13) sup(6,12) sup(5,11) sup(5,10) sup(3,7) sup(3,6) sup(2,5) sup(2,4) sup(1,3) sup(1,2) val(15,25) val(14,24) val(26,11)
上方敘述是運算完產出的結果擷取部分出來，這與我們心目中理想的詴題有著非 常大的差距，所以將結果內容包裝是必要的。可以選擇將結果擷取文字出來加入其他 文字成為詴題，或是將結果轉換成 DOT 語法的格式並使用 Graphviz 來生成圖片。不 同的需求會需要不同的包裝形式，而這些都將由我們做好並設成選項供使用者自行選 擇。
4.3：圖形呈現
圖 4-1：Dijkstra 題目圖
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 4-2：Dijkstra 解答圖
在網頁執行完 Clingo 得出結果之後，我們可以對結果進行轉換，將結果轉變為 Graphviz 能運算的格式來產生圖片。然而根據出題者需求的不同，所需要的圖形也會 不一樣，需要對 Clingo 結果進行的轉換也會不同。以 Dijkstra 為例，圖 4-1 是單純製 作為詴題所用的詴題圖形，而對圖 4-1 圖形的解答邊添加了顏色敘述以後所產出的圖 為圖 4-2，成為用來供教師用來改答案所用的解答圖形。這些基本需求都由我們事先 設定好讓使用者可自行選擇要產生何種類型。然而有些較為複雜或少見的需求未能一 起兼顧到時，我們也提供圖形的 DOT 檔供使用者下載，使用者可以自行對 DOT 檔進 行改動來產生他所希望得到的圖片。
4.4：置換(Permutation)
考詴或出作業的時候如果給全班的人一樣的詴題，可能發生作弊或是互相抄襲答 案的情況，但給不一樣的詴題又會導致不公帄，這時候便可使用置換(Permutation)。
置換是將所生成的詴題轉換成另外一種形式，可能是更改參數或對圖形進行更動，然 後所產生出的詴題的解題過程或是難易度並未改變，這樣就可以避免作弊且較不會產 生不公帄的現象。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
本研究的詴題圖片為使用 Graphviz 圖片生成工具來對運算完後產生的 DOT 檔進 行運算所生成的，所以要進行置換對 DOT 檔進行更動是一個好方案。本研究在詴題 運算完以後將提供 DOT 檔供使用者下載，使用者可將 DOT 檔上傳至本研究所設計的 網頁上，將會提供數種置換的方案供使用者選擇。如果使用者對置換的選項不滿意也 可以自行對 DOT 檔進行更動，來取得心目中最佳的結果。
圖 4-3：kruskal 之節點權重置換圖
圖 4-3 左方為 Kruskal 演算法之原詴題圖，藍色的邊為此圖的最短路徑樹。右方為 將所產生的 Kruskal 圖形的節點權重進行置換，使得原本是數字的節點權重變成英文 字母。達成此置換的方式為在 DOT 檔內添加將權重更換的程式碼，來表示這些節點 的權重要換成甚麼。使用者對節點的權重進行置換時，本研究將會提供讓使用者選擇 節點要更換為數字還是英文單字，並且會將次序打亂。