Daily Archives: May 3, 2014

Create Puzzle-Based Code Experiences in Your Apps #javascript #html5

Posted on by
Reply

Scratch - Teaching kids to code

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.

When I saw this for the first time, I wanted to include these puzzle-based coding interfaces into web apps that I create. Here’s the GREAT news. Using the open source JavaScript library entitled Blockly, you can build your own block programming interfaces in YOUR software. Meet Neil Fraser, the talented software engineer from Google, who created Blockly. Blockly was designed to help engage students in learning more about computer programming. When students start to learn to program, they are fighting problems of logic and problems of syntax. By using the puzzle metaphor, students can now focus on learning sequencing, logic, and iteration.

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.
  • Code – Export a Blockly program into JavaScript, Python or XML.

So.. Here’s a sample of how you can use Blockly in YOUR web application.

To start, download the source of Blockly from here:
http://code.google.com/p/blockly

Here’s the code for the sample. You’ll notice that this small application runs completely in the browser using HTML, SVG, and JavaScript.




Blockly Demo #1




Puzzle:


Code from Puzzle:




In the header of your HTML file, include the following JavaScript files.





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.
The final JavaScript method(i.e. Blockly.inject) links your toolbox selections to your design surface.


Puzzle:



As a developer, you would want to capture computer program represented by the blocks and actually run it.
The Blockly framework supports code output in JavaScript, Python, XML, and Dart . In the following code, we capture the puzzle space in JavaScript code.
We place the JavaScript code into a TEXTAREA so the user can review the code. With a little extra effort, you can execute the program.


function getCodeFromPuzzle()
{
var code = Blockly.JavaScript.workspaceToCode();
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