How to Take Blockly into Use

Blockly-visual blockprogramming

This article is about how to take Blockly into use for a simple web page. The source code can be found from my GitHub account from blockly-tutorial repository. There will be many versions of index.html file. I will tell in each article, which index-xx.html file I have been modified according to needs of each subject. This article’s HTML code is written to index.html file.

The reason why I started to learn Blockly was the need for a customized learning environment . Blockly is a open-source JavaScript library for creating visual block programming languages and editors. It’s a project of Google and e.g. Scratch  is build on top of it. Scratch may be the best known visual block programming environment for teaching kids to code.

The main reason, why I wrote this article, is that during implementation of the demo, it was hard to find a proper tutorials. I used mainly Blockly JavaScript library API and read the bug reports from developer forum. Code examples were difficult to find and bug reports didn’t match for my problems. I hope my articles will help you to tackle the problems with Blockly. 

Technical details

I use GitHub and Git for my coding projects. At first I start the project on my local computer and after each coding sessions I update GitHub from my computer by using commands. If you want to use GitHub and Git, you need to first create account to GitHub, then install Git to your computer and create a connection between both applications. You can find detailed instructions of using Git and GitHub from the following pages:  

GitHub For Beginners: Don’t Get Scared, Get Started

GitHub For Beginners: Commit, Push And Go

Let’s get started!

Steps you need to do

  1. Download Blockly source code

  2. Create a web page and css styles for it

  3. Inject Blockly to created web page

1. Download Blockly source code

The first step is to download the Blockly source code and create a web page, where you will inject the Blockly blocks (called toolbox) and workspace. Follow below steps.

  • Create a directory for this project to your local computer
  • Download the Blockly source code from the Blockly Get Started page
  • Extract compressed file to the directory you created
  • Check that the code works: go to directory demos/fixed and open index.html file to your browser
  • The page should be same like in the picture below, try to drag and drop the blocks

Example of toolbox and workspaceThe picture of ‘Fixed Blockly’ page shows toolbox and workspace areas. Toolbox contains all Blockly blocks which are defined with XML (check toolbox XML code from step 3). Workspace is the area where you can drag and drop the blocks.

2. Create a web page and CSS styles for it

Next step is about creating a simple HTML web page and if you want it to look nice, use some CSS styles for it. You can use my web page as an example and my CSS style file can be found from  css folder.

  • Create index.html file
  • Build a simple HTML page to the file
  • Save index.html file to the root directory of the Blockly source code
  • Create a folder called ‘css’ to the root directory
  • Create style.css file and save it to created ‘css’ directory
  • Add CSS styles to that file if needed

3. Inject Blockly to your web page

The last things you need to do is to import couple js files to your web page, add toolbox to your page, make a room for you toolbox with empty div tag and finally inject Blockly into an empty div by using a short script. You can read also detailed instructions from the web page of Blockly: Fixed-sized Workspace .

That’s it and you will have a really simple web page with Blockly blocks and workspace on it. Please follow the next steps to finalize your page:

  • Add next lines indside of the <head> tags of your web page

<script src=blockly_compressed.js></script>

<script src=blocks_compressed.js></script>

<script src=msg/js/en.js></script>

  • Modify the path of js files if needed (in the case your index.html isn’t in root directory)
  • Add an empty <div> tag to your index.html file inside of the <body> tags

<div id=blocklyDiv style=height: 480px; width: 600px;></div>

<xml id=toolbox style=display: none>

<block type=controls_if></block>

<block type=controls_repeat_ext></block>

<block type=logic_compare></block>

<block type=math_number></block>

<block type=math_arithmetic></block>

<block type=text></block>

<block type=text_print></block>

</xml>

  • Add the following script at the bottom of the page or it should be called by the onload event

<script>

var workspacePlayground = Blockly.inject(blocklyDiv,

{toolbox: document.getElementById(toolbox)});

</script>

 

Results and the next topic

In the below picture, you can see the code besides the web page. The first steps are done and next thing is to create something to right side of the web page. It could be e.g. some coding problem for the user, like in Code.org or something else. The purpose of blocks are that user can drag and drop those to the workspace area and then a show area (will be placed to the right side of the web page) is a stage which contains the  coding problem to be solved with the block programming.

Code of blockly and web page

Leave a Reply

Your email address will not be published. Required fields are marked *