臺灣博碩士論文加值系統

運算思維是指一套善用資訊科技來解決問題的觀念與方法。隨
著各種資訊科技在日常生活應用的日漸普及，世界各國也都積極推
動運算思維的學習，而我國也將運算思維列為新版十二年國民基本
教育科技領域的課程綱要中。運算思維的學習應涵括所有同學，並
非侷限在特定領域，其中，程式設計又是熟練運算思維觀念的最佳
方式，但許多既有的程式設計測驗系統或證照都過於專業，僅適合
資訊相關領域的同學。雖然視覺化程式設計可以透過圖形化介面與
簡單的方式，讓非資訊科系的學生輕鬆學習程式設計，但目前市面
上卻僅有相關的練習網站，而缺乏測驗系統。
在本論文中，我們設計並完成一個線上視覺化程式設計的測驗
系統，讓運算思維的推廣不再侷限於觀念的學習，而是可以透過程
式模擬的方式來解決問題，訓練邏輯思考能力，並將此能力具體量
化。同時，該系統也具備自動閱卷的功能，可以輕鬆滿足短時間內
的大量測驗需求，有助於運算思維之推廣。這個系統也與大葉大學
的校務系統整合，實際應用在107 學年度運算思維課程的期末測驗，
獲得不錯的成果。

Computational thinking refers to a set of concepts and methods that make good use of information technology to solve problems. With the increasing popularity of various information technologies in daily life, countries around the world are also actively promoting the study of computing thinking, and our country has also listed computing thinking as a new version of the 12-year syllabus of the basic education science and technology field. The study of computational thinking should cover all students, not limited to specific areas. Among them, programming is the best way to master the idea of thinking, but many existing programming test systems or licenses are too professional, only suitable for information-related Classmates in the field.Although visual programming can make it easy for non-information students to learn programming through a graphical interface and a simple way, there are only relevant
practice websites on the market, and there is no test system.
In this paper, we design and complete a test system for online visual
programming, so that the promotion of computing thinking is no longer limited to the study of ideas, but can solve problems through program simulation, train logical thinking ability, and This ability is specifically quantified. At the same time, the system also has the function of automatic marking, which can easily meet the needs of a large number of tests in a short period of time and is conducive to the promotion of computing thinking. This system is also integrated with the school system of Dayeh University. It is actually applied to the final exam of the 107-year computing thinking course and has achieved good results.

中文摘要 iii
英文摘要 iv
誌謝 vi
目錄 vii
圖目錄 ix
表目錄 xii
第一章 緒論 1
1.1 研究動機與背景 1
1.2 研究目的 2
1.3 論文架構 3
第二章 相關研究 4
2.1 視覺化程式設計 4
2.2 Blockly 5
2.3 Scratch 7
2.4 比較 8
2.5 DHTML 9
2.6 AJAX 10
2.7 JSON 11
第三章 系統分析與設計 12
3.1 系統分析 12
3.2 系統設計 13
3.2.1 系統架構 14
3.2.2 題目畫面設計 15
3.2.3 設計客製化方塊 16
3.2.4 設計工具箱與作答區 17
3.2.5 儲存答案流程 18
3.2.6 檢查答案流程 24
3.2.7 資料庫建置 26
第四章 實作與結果 28
4.1 系統建置 28
4.2 測驗系統之實作與結果 29
第五章 結論與未來展望 48
參考文獻 49

[1]Wing, Jeannette M. (2014). Computational Thinking Benefits Society 40th Anniversary Blog of Social Issues in Computing.http://socialissues.cs.toronto.edu/index.html%3Fp=279.html.
[2]Wing, Jeanette M. (2006). Computational thinking. Communications
of the ACM, 49 (3),33-35.
[3]HITSA 基金會，https://www.hitsa.ee/about-us/news/technology-education-has-reached-majority-of-estonian-schools-by-support-of-the-progetiger-program，2018 年12 月。
[4]GOV.UK 網站，https://www.gov.uk/government/news/new-curriculum-will-make-education-system-envy-of-the-world，2018 年12 月。
[5]CNN 網站，https://money.cnn.com/2014/10/20/technology/chicago-coding-education/index.html，2018 年12 月。
[6]Hechingerreport 網站，https://hechingerreport.org/san-francisco-plans-tobe-
first-large-district-to-bring-computer-science-to-all-grades/，2018 年12 月。
[7]國家教育研究院，https://pulse.naer.edu.tw/Home/SpecailContent/6fe1eedf-10a1-4e1e-890e-dbbec8ce0647?categoryid=00000000-0000-0000-0000-000000000000&CurrentPage=1，2018 年12 月。
[8]南開科技大學最新消息，http://www.tyhs.edu.tw/notice/8732，2018 年12 月。
[9]Blockly games，https://blockly-games.appspot.com/，2018 年12 月。
[10]Scratch，https://scratch.mit.edu/，2018 年12 月。
[11]Code.org，https://code.org/，2018 年12 月。
[12]盧一屏（2010）。以VTK 為基礎之視覺化程式設計環境在科學視覺上之應用。大葉大學資訊工程學系碩士班碩士論文，彰化縣。取自https://hdl.handle.net/11296/fnve99。
[13]Matthew Revell, "What Is Visual Programming?".(2017,August).
https://www.outsystems.com/blog/what-is-visual-programming.html
[14]Tsukamoto, H., Takemura, Y., Oomori, Y., Ikeda, I., Nagumo,H., Monden, A., & Matsumoto, K. I. (2016, October). Textual vs.visual programming languages in programming education for primary schoolchildren. In Frontiers in Education Conference (FIE), 2016IEEE (pp. 1-7).
[15]E. Pasternak, R. Fenichel and A. N. Marshall, "Tips for creating a block language with blockly," 2017 IEEE Blocks and Beyond Workshop (B&B), Raleigh, NC, USA, 2017, pp. 21-24.
[16]Blockly Guides，https://developers.google.com/blockly/guides/getstarted/web，2018 年5 月。
[17]Blockly Developer Tools，https://blockly-demo.appspot.com/static/demos/blockfactory/index.html，2018 年5 月。
[18]About Scratch，https://scratch.mit.edu/info/faq，2019 年1 月。
[19]Maloney, J., Resnick, M., Rusk, N., Silverman, B., Eastmond, E.(2010). The Scratch Programming Language and Environment. ACM Transactions on Computing Education, November 2010.
[20]DHTML 維基百科，https://en.wikipedia.org/wiki/Dynamic_HTML，2018 年5 月。
[21]W3C HTML 介紹，https://www.w3schools.com/html/default.asp，2018 年5 月。
[22]W3C JAVASCRIPT 介紹，https://www.w3schools.com/js/default.asp，2018 年5 月。
[23]W3C HTML DOM 介紹，https://www.w3schools.com/js/js_htmldom_html.asp，2018 年5 月。
[24]W3C CSS 介紹，https://www.w3schools.com/css/css_intro.asp，2018年5 月。
[25]W3C AJAX 介紹，https://www.w3schools.com/js/js_ajax_intro.asp，2018 年6 月。
[26]JSON 維基百科，https://zh.wikipedia.org/wiki/JSON，2018 年6 月。
[27]W3C JSON 介紹，https://www.w3schools.com/js/js_json_intro.asp，2018 年6 月。