Stories on maker education and innovation 

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

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

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<title>Blockly Demo #1</title>

<script type="text/javascript" src="blockly_compressed.js"></script>
<script type="text/javascript" src="blocks_compressed.js"></script>
<script type="text/javascript" src="javascript_compressed.js"></script>
<script type="text/javascript" src="msg/js/en.js"></script>

<script>
function getCodeFromPuzzle()
{
    var code = Blockly.JavaScript.workspaceToCode();
    var txtCode = document.getElementById("txtCode");
    txtCode.value = code;
}

function runPuzzle()
{
  Blockly.JavaScript.addReservedWords('code');
  var code = Blockly.JavaScript.workspaceToCode();
  try {
    eval(code);
  } catch (e) {
    alert(e);
  }
}
</script>

</head>

<body>

<b>Puzzle:</b>
<div id="blocklyDiv" style="height: 500px; width: 500px;"></div>
<xml id="toolbox" style="display: none">
    <block type="controls_whileUntil"></block>
    <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>
<script type="text/javascript">
Blockly.inject(document.getElementById('blocklyDiv'),{path: './', toolbox: document.getElementById('toolbox')});
</script>



<b>Code from Puzzle:</b>
<input type="button" value="Get Code From Puzzle" onclick="getCodeFromPuzzle();">
<input type="button" value="Run Puzzle" onclick="runPuzzle();">
<br>
<textarea id="txtCode" style="width:500px; height:200px;"></textarea>

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

1
2
3
4
<script type="text/javascript" src="blockly_compressed.js"></script>
<script type="text/javascript" src="blocks_compressed.js"></script>
<script type="text/javascript" src="javascript_compressed.js"></script>
<script type="text/javascript" src="msg/js/en.js"></script>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<b>Puzzle:</b>
<div id="blocklyDiv" style="height: 500px; width: 500px;"></div>
<xml id="toolbox" style="display: none">
    <block type="controls_whileUntil"></block>
    <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>
<script type="text/javascript">
Blockly.inject(document.getElementById('blocklyDiv'),{path: './', toolbox: document.getElementById('toolbox')});
</script>

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.

1
2
3
4
5
6
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

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
© Inspired To Educate
credit