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.
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:
Let’s get started!
Steps you need to do
- 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
The 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
- 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>
- Add a toolbox to you index.html file, read more about toolbox from the original documentation
<xml id=“toolbox“ style=“display: none“>
- Add the following script at the bottom of the page or it should be called by the onload event
var workspacePlayground = Blockly.inject(‘blocklyDiv‘,
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.