屈倩倩 闞紅星 高勇

摘要：

根據(jù)少兒學習的特點，通過設計適齡游戲的方式，在游戲過程中不斷引導用戶自主思考如何組裝模塊完成游戲關卡，以達到對用戶的計算能力、數(shù)字化學習創(chuàng)新能力進行綜合性訓練的目的。采用Java編程語言結合Blockly工具箱定義模塊，使用MYSQL數(shù)據(jù)庫存儲數(shù)據(jù)，將動畫效果與多種編程教學方式相結合，符合少兒的認知范疇，具有一定的實用性和先進性。

關鍵詞：

少兒編程; 啟蒙訓練; 可視化; 計算能力

中圖分類號： TP 311

文獻標志碼： A

Design and Implementation of Visual Programming

Education System Based on Blockly

QU Qianqian， KAN Hongxing， GAO Yong

（College of Medicine Information Engineering， Anhui University of Chinese Medicine， Hefei， Anhui ?230012， China）

Abstract：

By analyzing the social environment at home and abroad， this paper concludes the importance of childrens programming learning. According to the characteristics of users of different age groups， through the design ofageappropriate games， we useBlockly toolbox to customize the design of different modules， display the functions that users can choose， and guide users to think independently about how to assemble modules to complete the gamebarriers. Four kinds of games are designed， including the sequence， selection， loop structure and function of programming language， in order to achieve the goal of comprehensive training of users 3R ability. The system combines animation effects with various programming teaching methods， and has certain practicality and advanced nature.

Key words：

childrens programming; enlightenment training; visualization; computing ability

0引言

隨著國家推進智能化進程的加深，編程的普及度也越來越高，學習編程人員的年齡在不斷降低，少兒編程的重視程度逐漸提高。朱海麗[1]在《卡通日?；F(xiàn)象對我國現(xiàn)代少兒教育的影響》]一文中指出，動畫可以充分調(diào)動少兒的學習興趣，并且能夠在其腦海中留下深刻的學習印象，圖形化編程能夠使得編程的學習過程變得更加有趣和直觀。

1需求分析

1.1少兒編程教育平臺開發(fā)的必要性

英國在2014年將少兒編程納入教育范圍之內(nèi)。美國緊隨其后，斥資40億美元進行少兒編程推廣教育。國內(nèi)目前尚未強制進行編程教育，但是在大多數(shù)省份編程已經(jīng)成為中、高考加分項之一，其中浙江省更是將其納入高考可選科目之一[2]。 Mitch Resnick[3]提出少兒編程學習的主要目的并不在于對編程技巧的掌握，而是學習思維方法，通過培養(yǎng)少兒的編程思維，從而提高少兒的創(chuàng)新能力。少兒編程在線教育系統(tǒng)在國外發(fā)展的時間較早，技術相對成熟，例如code.org目前已經(jīng)擁有上百萬用戶，并被其他國家引進。國內(nèi)大多數(shù)編程教育網(wǎng)站，均是以scratch工具和LOGO語言為基礎，著重于功能實現(xiàn)，以編程課程、編程技巧等為設計方向，對于作品類型以及創(chuàng)新的關注度不高，對于青少年的理解能力要求較高，并且普及度較低。因此設計一套以編程思想訓練為主的系統(tǒng)，對于推進少兒編程學習的進程有著至關重要的作用。

1.2系統(tǒng)需求分析

系統(tǒng)主要面向318歲的青少年兒童，從服務人群來看，該類人群年紀較小，對數(shù)理知識儲備量不足，但是對圖形和游戲等視覺服務有較大的興趣[4]。網(wǎng)站教學主要通過游戲來學習編程語言，再利用圖形編程提高孩子的邏輯思維能力、計算能力。所以在系統(tǒng)設計過程中要求游戲關卡易懂、易學，易操作，交互界面簡單直觀，操作便捷，易于用戶理解及使用。以限制用戶自主輸入數(shù)據(jù)的方式，并且提供相應的錯誤提示機制，能夠有效減少用戶的操作錯誤。同時對于系統(tǒng)的非功能性需求需要滿足可用性、可靠性等需求，系統(tǒng)響應時間必須滿足用戶可接受時間[5]。系統(tǒng)需求分析框圖如圖1所示。

2系統(tǒng)模塊設計

本系統(tǒng)按實際開發(fā)需求，可以分為3個模塊，如圖2所示。

通過判斷是否登錄，將用戶細分為注冊用戶和游客，為注冊用戶提供更多功能，如保存游戲記錄、觀看教學視頻等。游戲課程的設計從簡到繁，逐步引導用戶學習，并且覆蓋編程語言學習的重要知識點[5]。課程學習模塊將學習內(nèi)容與游戲相融合，并以動畫的形式展現(xiàn)出來。注冊用戶的關卡進度和歷史操作都可以自動保存到數(shù)據(jù)庫中，用戶登錄后即可繼續(xù)進行最近一次的操作。

2.1課程設計模塊

用戶的學習課程以動畫配合代碼進行互動教學，因此動畫的設計主要基于課程特點。用戶完成課程學習之后，相應的課程會顯示其完成進度狀態(tài)，不同的符號代表不同的進度狀態(tài)和成績。

系統(tǒng)采用了四類小游戲和三大結構以及函數(shù)模塊的結合學習的方法，共設計出11單元109課。課程和知識點的聯(lián)系如表1所示。

用戶可以選擇任意類型游戲的課程進行操作，只需要點擊相應課程編號即可。每種類型的游戲中包含多個關卡。用戶可選擇的課程和課程對應的知識點如圖3所示。

2.2課程學習模塊

對于不同的課程需要用戶進行不同的操作：1、根據(jù)題目選擇正確答案，2、通過拖拽不同的模塊完成不同的操作。正確完成課程之后，會給出通關提示，并且可以選擇顯示本次課程生成的代碼。若答題錯誤，給出錯誤提示，請用戶繼續(xù)答題。用戶學習流程圖如圖4所示。

2.3課程功能模塊

系統(tǒng)中每一個關卡實現(xiàn)的主要功能包括：代碼塊構建、監(jiān)聽塊數(shù)、步進、顯示代碼和課程進度標志。代碼塊構建實現(xiàn)用戶拖拽代碼塊到工作區(qū)進行拼接，完成游戲任務;監(jiān)聽塊數(shù)提醒用戶是否以最佳方案通過關卡;步進功能相當于單步調(diào)試，使用戶能夠看到動畫對應的代碼塊;顯示代碼對應模塊背后的代碼，用戶通過閱讀代碼實現(xiàn)更加深入的學習;課程進度標志標識用戶本關卡完成情況，如圖5所示。

3系統(tǒng)功能的實現(xiàn)

3.1課程的設計和實現(xiàn)

課程學習界面主要包含了游戲區(qū)、工具區(qū)和工作區(qū)。用戶可以通過點擊按鈕和拖拽代碼塊的方式完成每個課程的要求。課程設計分為以下幾個步驟：構建代碼塊、構建工具箱和工作區(qū)、構建課程界面、生成代碼與實現(xiàn)單步運行、監(jiān)聽使用的圖像塊。Blockly官方網(wǎng)站為開發(fā)者提供了構建代碼塊、工具箱、工作區(qū)等功能[6]。

3.1.1構建課程

構建一個課程，首先需要通過Blockly開發(fā)者工具搭建代碼塊，然后將代碼塊導入到工具Blockly的工具箱區(qū)域或者工作區(qū)域。以上都構建完成后，通過Export將對應的代碼塊的JavaScript文件和工具區(qū)的原始配置（JavaScript和XML文件）導出，并注入到編寫好的html中，即可構成課程學習的基礎界面。構建一個課程的示意圖，如圖6所示。

3.1.2課程詳細設計

a.生成代碼

構造的代碼塊實際上對應的是一段符合邏輯的代碼，典型的代碼生成函數(shù)如下。

Blockly.JavaScript['repeat_to_ji'] = function（block） {

var statements_do = Blockly.JavaScript.statementToCode（block， 'do'）;

var code = '...;＼n';

return code;

};

通過下面函數(shù)的調(diào)用，用戶的塊可以隨時從應用程序?qū)С龃a：

var code = Blockly.JavaScript.workspaceToCode（workspace）。

b.塊功能實現(xiàn)

對模塊進行功能設計。使對應代碼塊導入后，能夠?qū)崿F(xiàn)相應的功能。通過在代碼生成函數(shù)“var code = '...'”中code進行函數(shù)自定義實現(xiàn)模塊所需要實現(xiàn)的功能。

c.單步運行功能

為了方便用戶理解每一步的代碼含義，使用JS Interpreter來控制代碼的執(zhí)行速度，實現(xiàn)代碼執(zhí)行過程中的暫停/恢復/逐步等功能。具體步驟如下。

首先引入第三方庫：。接著在代碼執(zhí)行文件中創(chuàng)建解釋器并運行代碼。但同時，因為JS Interpreter是一個與瀏覽器完全隔離的沙箱，所以任何與外界執(zhí)行操作的塊都需要將API添加到解釋器中。如下所示是將帶參函數(shù)alert添加入入解釋器的函數(shù)。

function initApi（interpreter， scope） {

var wrapper = function（text） {

return alert（arguments.length ？ text ： ''）;

};

interpreter.setProperty（scope， 'alert'，

interpreter.createNativeFunction（wrapper））;

}

d.塊的監(jiān)聽

為了讓用戶能更加明確地學習編寫簡潔的代碼，所以需要實時監(jiān)聽用戶所使用的代碼塊的數(shù)量。系統(tǒng)中設置一個使用的代碼塊數(shù)量最理想的值，然后獲得前端使用的代碼塊數(shù)量，并進行對比，當完成本課程的任務后，提示用戶是否以最佳方案通過課程。

3.2關卡模塊的存儲

當關卡較難時，所需代碼塊數(shù)量也會增多。為防止用戶未一次性想出解決方案造成的進度丟失，在用戶關閉窗口或打開新頁面的時候記錄當前代碼塊的布局。當用戶重新回到當前關卡時，不需要從頭開始構建代碼塊。