<center>
<h2>114學年度科技教育創意實作競賽-資訊科技組 </h2>
<h2> Blockly 離線版(有區網Auto Judge 功能) Open Source (可自行上傳題目及測資，並修改程式碼)</h2>
Author: 國立嘉科實中 資訊教師 叢壯滋 </center>
<center> Create Date: 114年11月12日 </center>
<div style="text-align: center;"><img src="https://hackmd.io/_uploads/ByOD5NGxWl.png" width="200"></div>

<br>

### 不囉嗦，直上檔案連結
[114資科競賽_Blockly離線版.zip 檔案下載](https://drive.google.com/file/d/1rW4znkEoR3utAxoo-DqlWZP-D15cNy1T/view?usp=sharing)
114.11.14更新，有Blockly偽造的Scratch版，可以直接在使用者介面切換，還暫時不好用😅。

### 不負責任說明
* 功能是否完善仍須測試。
* 因本人正在擔任教學組長，無法將程式設計的非常周全，若欲新增功能還請自行修改程式碼。
* 如有疑問，可聯繫 [e-mail]

### 安裝步驟
1. 請先下載 [114資科競賽_Blockly離線版.zip 檔案下載](https://drive.google.com/file/d/1rW4znkEoR3utAxoo-DqlWZP-D15cNy1T/view?usp=sharing)
2. 下載完畢後解壓縮。
3. 伺服器端需要先安裝 Node.js 。[Node.js 安裝步驟](https://www.alibabacloud.com/help/tc/sdk/developer-reference/install-node-js-in-windows)
4. 在資料夾內找到「data/users.csv」，裡面可以建立帳號資料(若非管理員帳號 role 欄位應為空)。
5. 前往 oj-secure_Clear 資料夾，並於該資料夾下開啟 cmd(命令提示字元)

6. 依次輸入以下指令

npm init -y
npm install express vm2

7. 輸入以下指令以啟動server

node server.js

8.開啟 [http://localhost:3000] 並登入測試。

### 題目上傳說明
* 題目置於 data/problems 下共有 p1, p2, p3, p4, p5 五個題目(最多可放到 p6 六題)，若要新增到七題以上須自行修改程式碼(Server.js, index.html)。
* 每道題目底下有 problem\.md，可使用 Markdown 語法編輯，或直接輸入題目敘述即可。
* 每道題目底下有 sample1\.in, sample1\.out, sample2\.in, sample2\.out 表示範例測試資料(會顯示在參賽者畫面中)，目前只能有兩筆測試資料，若要新增一樣須修改程式碼。
* input / output 的資料夾內，放真正的測試資料(選手不會看到)，共可放5筆，若要新增一樣須修改程式碼。
* 請大家把每一題的 output/01.out 打開，把內容修改成只剩下一個 ```6```，不然測試會一直WA(Wrong Answer) 喔！

### 使用者介面
* 請確認您電腦的ip位址(如 192.168.16.1)。
* 請使用另一台電腦連上與伺服器同一個區域網路後，開啟 [http://192.168.16.1:3000] 並登入帳號密碼
* 選擇題目
* 左上角可以執行程式碼，或是按提交評判。
* 右邊可以看到題目(problem\.md) 的內容
* 右邊可以看到範例測資(sample\.in, sample.out)，並可點擊測試。
* 提交測試後，右邊可以看到每筆測資的結果。
* 右下方可以看到自己的記分板(admin帳號可以看到所有人的)

### 評分說明
* 這邊採用測資計分規則，每筆測資20分(配合競賽規章)，每題以最高分計。
* 排名則採用 OI 規則 (先比較總分，總分相同時先拿到該總分者排名靠前)。
* 每次比賽前，記得將 data/scoreboard.json 清空(亦可直接刪除，伺服器會自動建立新檔案)

### 學生答題須注意
* 因為 Blockly 在變數型態上，「數值」與「文字(字串)」的界線並不明顯，一般 Blockly 會把變數當作「文字」處理。
* 學生點選「開始執行時」，是使用Line Buffer Input 輸入，也就是 **測資必須要一個數字打完就按下Enter**，而不是 **打完整行才按Enter**，這樣才會跟提交測試時是一樣的結果。(這邊是與臺師大提供的範例相同)
* 當然在Blockly中還是可以使用 Line Buffer Input 處理資料：
* Blockly在處理 Line Buffer input 的能力比較強，可以透過「從文本製作清單 - 用分隔浮」來切割字串存到清單中，請記得 " " 中間要按空白鍵！
* 如果學過python，上述的概念有點像是 input().split()
* 在計算上，如果要使用「加法」運算，必須要先搭配「-0」(或\*1) 這個動作來讓 Blockly 強制把變數型態改成「數值」。