解題網站重新整合進度 50%

這周預計的進度是把先前的解題網站和各題的成果做個整合然後再重新放到網站去給大家參考,三天下來,目前完成了新的首頁製作,直接把四個題目的簡介放在一個畫面中,不再分成需要捲動的畫面,公告文字的部份則是做成可以動態縮放,並且加了cookie,如果使用者曾經來過一次,則預設公告都是小按鈕的型態,第一次造訪或是cookie過期時才會呈現公告版的型態。

新首頁,採用了不少動態技巧

解題說明的部份則是調整了版面的配置,把原本的寬度做了調整,方便未來因應RWD,同時修改了導覽列的內容及功能,增加一個可以在各題組間切換的連結選單,也在各個步驟增加了側邊欄,方便在各個步驟間做切換。

新的導覽列內容及側邊欄

至於各題組的成果,主要是增加了一個上方導覽列,方便在各題組的成果網站間切換,同時也增加該題組的解題說明連結,讓整個網站的使用更方便一些

新增了一個上方的導覽列

接下來的工作主要是把各題組的程式碼做一些調整,因為檢定用的程式碼直接上網其實是充滿風險的,幸好過去一年只有不到五千的造訪次數,所以也沒出什麼大問題,目前打算整修一下這些內容,至少基本的sql injection / XSS的防護要做到,至於CSRF的防護,要看時間來不來得及再說;除此之外,打算再增加一個資料庫自動還原的功能,以免像先前那樣,資料庫被搞亂了,我得手動去恢復,這個功能會有點麻煩,我希望可以做到自動偵測每天是否有人來使用這些題組,以及是否有變動了資料,如果資料有變動,那麼隔天會自動把資料庫的內容還原,這邊需要動到系統的自動執行功能,要花點時間研究一下,我並不想沒有變動的狀況下每天都自動還原一次,這樣感覺太傷資料庫了。

如果順利,希望可以在三月中之前完成這個計畫並上線。




Ajax與測驗系統實作

這周的主要講課內容是Ajax,除了把目前常用的幾種ajax語法講一次外,也拿了丙級的題目來練功,用簡單的方式來取代原本的iframe載入頁面功能,不過最後的大魔王是我準備的測驗系統實作。

這個測驗系統的db是網頁丙級學科的題目,然後我讓學生試著去撰寫php的api來回應前端的請求,利用jQuery的$.get(),$.post(),$.ajax()幾個方法來達到請求資料及回傳資料的功能;

系統主畫面

作答功能畫面

這個系統的實作花了兩天的時間講解,除了ajax的使用,也同時講解了如何利用取得的json資料進行畫面的佈局,真心覺得這是誠意滿滿的範例,就怕同學吸收不了,不過這點技巧真的只是進入業界的基礎而已。

因為這個系統也是我原本就有在規劃要進行的專案,提供給學生練習的內容己經簡化了不少,但我自己要做的規模則是大上許多,計畫中是要擴展這套系統到可以放入更多的題庫類型,希望可以在幾個月內抽空完成。