Thanks to programs like Scratch, MIT App Inventor, Hopscotch and others, students and novice programmers are getting introduced to ideas like sequencing, planning, simple logic, and loops. Instead of creating lines of code, students are introduced to the concepts of computer programming through the metaphor of puzzle pieces. In Scratch, students create amazing games and media experiences by snapping together puzzle pieces.
Samples from Blockly website:
- Puzzle – Learn how blocks work while solving this simple country quiz.
- Maze – Use Blockly to solve a maze.
- Turtle – Drawing with Blockly.
- Graph – Blockly’s graphing calculator.
So.. Here’s a sample of how you can use Blockly in YOUR web application.
To start, download the source of Blockly from here:
Code from Puzzle:
In the body of your HTML document, enter the following code. The “blocklyDiv” DIV defines the size of the space that will contain your blockly experience.
The xml document with the “id” of “toolbox” defines the types of blocks that will be available in your design space. To keep things simple,
I have only included a few programming blocks for “if” statements, printing to the web browser, and loops to get your imagination going.
As a developer, you would want to capture computer program represented by the blocks and actually run it.
var txtCode = document.getElementById("txtCode");
txtCode.value = code;
So… how do you create your own blocks? How do I do additional customizations? Check out the Blockly Wiki for those details.
Check out other helpful resources from InspiredToEducate.NET
- 17 Fun Tools To Teach Kids To Code by @ChrisBetcher
- Benefits of Teaching Kids To Code That No One Is Talking About
- theClubhou.se: Growing an Awesome City through a Culture of Making
- Learn to Build Your Own Conversational Bot using ChatScript
- Using candy to teach DNA structure
- Books and Tools To Get Started in Video Game Programming
- Simple Minecraft Programming Using ScriptCraftJS