{"id":1467,"date":"2014-05-03T04:56:32","date_gmt":"2014-05-03T04:56:32","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1467"},"modified":"2014-05-03T11:24:26","modified_gmt":"2014-05-03T11:24:26","slug":"create-puzzle-based-code-experiences-in-your-apps-javascript-html5","status":"publish","type":"post","link":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/create-puzzle-based-code-experiences-in-your-apps-javascript-html5\/","title":{"rendered":"Create Puzzle-Based Code Experiences in Your Apps #javascript #html5"},"content":{"rendered":"\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fcreate-puzzle-based-code-experiences-in-your-apps-javascript-html5%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n<p><img loading=\"lazy\" class=\"alignnone size-large wp-image-624\" title=\"Scratch\" src=\"http:\/\/rosarioconsulting.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/02\/scratch-1024x743.jpg\" alt=\"Scratch - Teaching kids to code\" width=\"608\" height=\"441\" srcset=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/02\/scratch-1024x743.jpg 1024w, http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/02\/scratch-300x217.jpg 300w, http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/02\/scratch.jpg 1035w\" sizes=\"(max-width: 608px) 100vw, 608px\" \/><\/p>\n<p>Thanks to programs like <a href=\"http:\/\/scratch.mit.edu\/\" target=\"_blank\">Scratch<\/a>, <a href=\"http:\/\/appinventor.mit.edu\/explore\/\" target=\"_blank\">MIT App Inventor<\/a>, <a href=\"https:\/\/www.gethopscotch.com\/\" target=\"_blank\">Hopscotch<\/a> 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.<\/p>\n<p>When I saw this for the first time, I wanted to include these puzzle-based coding interfaces into web apps that I create.   Here&#8217;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.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/OYTzXcOtsTs\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Samples from Blockly website:<\/p>\n<ul>\n<li><a href=\"https:\/\/blockly-demo.appspot.com\/static\/apps\/puzzle\/index.html\" rel=\"nofollow\">Puzzle<\/a> &#8211; Learn how blocks work while solving this simple country quiz. <\/li>\n<li><a href=\"https:\/\/blockly-demo.appspot.com\/static\/apps\/maze\/index.html\" rel=\"nofollow\">Maze<\/a> &#8211; Use Blockly to solve a maze. <\/li>\n<li><a href=\"https:\/\/blockly-demo.appspot.com\/static\/apps\/turtle\/index.html\" rel=\"nofollow\">Turtle<\/a> &#8211; Drawing with Blockly. <\/li>\n<li><a href=\"https:\/\/blockly-demo.appspot.com\/static\/apps\/graph\/index.html\" rel=\"nofollow\">Graph<\/a> &#8211; Blockly&#8217;s graphing calculator. <\/li>\n<li><a href=\"https:\/\/blockly-demo.appspot.com\/static\/apps\/code\/index.html\" rel=\"nofollow\">Code<\/a> &#8211; Export a Blockly program into JavaScript, Python or XML. <\/li>\n<\/ul>\n<p>So.. Here&#8217;s a sample of how you can use Blockly in YOUR web application.   <\/p>\n<p><iframe loading=\"lazy\" width=\"500\" height=\"900\" src=\"http:\/\/inspiredtoeducate.net\/blockly\/\"><\/iframe><\/p>\n<p>To start, download the source of Blockly from here:<br \/>\n<a href=\"http:\/\/code.google.com\/p\/blockly\">http:\/\/code.google.com\/p\/blockly<\/a><\/p>\n<p>Here&#8217;s the code for the sample.  You&#8217;ll notice that this small application runs completely in the browser using HTML, SVG, and JavaScript.<\/p>\n<p><code><br \/>\n<html><br \/>\n<head><br \/>\n<title>Blockly Demo #1<\/title><\/p>\n<p><script type=\"text\/javascript\" src=\"blockly_compressed.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"blocks_compressed.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"javascript_compressed.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"msg\/js\/en.js\"><\/script><\/p>\n<p><script>\nfunction getCodeFromPuzzle()\n{\n\tvar code = Blockly.JavaScript.workspaceToCode();\n\tvar txtCode = document.getElementById(\"txtCode\");\n\ttxtCode.value = code;\n}<\/p>\n<p>function runPuzzle()\n{\n  Blockly.JavaScript.addReservedWords('code');\n  var code = Blockly.JavaScript.workspaceToCode();\n  try {\n    eval(code);\n  } catch (e) {\n    alert(e);\n  }\n}\n<\/script><\/p>\n<p><\/head><\/p>\n<p><body><\/p>\n<p><b>Puzzle:<\/b><\/p>\n<div id=\"blocklyDiv\" style=\"height: 500px; width: 500px;\"><\/div>\n<p><xml id=\"toolbox\" style=\"display: none\"><br \/>\n    <block type=\"controls_whileUntil\"><\/block><br \/>\n    <block type=\"controls_if\"><\/block><br \/>\n    <block type=\"controls_repeat_ext\"><\/block><br \/>\n    <block type=\"logic_compare\"><\/block><br \/>\n    <block type=\"math_number\"><\/block><br \/>\n    <block type=\"math_arithmetic\"><\/block><br \/>\n    <block type=\"text\"><\/block><br \/>\n    <block type=\"text_print\"><\/block><br \/>\n<\/xml><br \/>\n<script type=\"text\/javascript\">\nBlockly.inject(document.getElementById('blocklyDiv'),{path: '.\/', toolbox: document.getElementById('toolbox')});\n<\/script><\/p>\n<p><b>Code from Puzzle:<\/b><br \/>\n<input type=\"button\" value=\"Get Code From Puzzle\" onclick=\"getCodeFromPuzzle();\"><br \/>\n<input type=\"button\" value=\"Run Puzzle\" onclick=\"runPuzzle();\"><br \/>\n<br \/>\n<textarea id=\"txtCode\" style=\"width:500px; height:200px;\"><\/textarea><br \/>\n<\/code><\/p>\n<p>In the header of your HTML file, include the following JavaScript files.<br \/>\n<code><br \/>\n<script type=\"text\/javascript\" src=\"blockly_compressed.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"blocks_compressed.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"javascript_compressed.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"msg\/js\/en.js\"><\/script><br \/>\n<\/code><\/p>\n<p>In the body of your HTML document, enter the following code.  The &#8220;blocklyDiv&#8221; DIV defines the size of the space that will contain your blockly experience.<br \/>\nThe xml document with the &#8220;id&#8221; of &#8220;toolbox&#8221; defines the types of blocks that will be available in your design space.   To keep things simple,<br \/>\nI have only included a few programming blocks for &#8220;if&#8221; statements, printing to the web browser, and loops to get your imagination going.<br \/>\nThe final JavaScript method(i.e. Blockly.inject) links your toolbox selections to your design surface.<\/p>\n<p><code><br \/>\n<b>Puzzle:<\/b><\/p>\n<div id=\"blocklyDiv\" style=\"height: 500px; width: 500px;\"><\/div>\n<p><xml id=\"toolbox\" style=\"display: none\"><br \/>\n    <block type=\"controls_whileUntil\"><\/block><br \/>\n    <block type=\"controls_if\"><\/block><br \/>\n    <block type=\"controls_repeat_ext\"><\/block><br \/>\n    <block type=\"logic_compare\"><\/block><br \/>\n    <block type=\"math_number\"><\/block><br \/>\n    <block type=\"math_arithmetic\"><\/block><br \/>\n    <block type=\"text\"><\/block><br \/>\n    <block type=\"text_print\"><\/block><br \/>\n<\/xml><br \/>\n<script type=\"text\/javascript\">\nBlockly.inject(document.getElementById('blocklyDiv'),{path: '.\/', toolbox: document.getElementById('toolbox')});\n<\/script><br \/>\n<\/code><\/p>\n<p>As a developer, you would want to capture computer program represented by the blocks and actually run it.<br \/>\nThe Blockly framework supports code output in JavaScript, Python, XML, and Dart .  In the following code, we capture the puzzle space in JavaScript code.<br \/>\nWe place the JavaScript code into a TEXTAREA so the user can review the code.   With a little extra effort, you can execute the program.<\/p>\n<p><code><br \/>\nfunction getCodeFromPuzzle()<br \/>\n{<br \/>\n\tvar code = Blockly.JavaScript.workspaceToCode();<br \/>\n\tvar txtCode = document.getElementById(\"txtCode\");<br \/>\n\ttxtCode.value = code;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>So&#8230; how do you create your own blocks?  How do I do additional customizations?  Check out the Blockly Wiki for those details.<\/p>\n<p>Check out other helpful resources from InspiredToEducate.NET<\/p>\n<ul>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1238\">17 Fun Tools To Teach Kids To Code by @ChrisBetcher<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=623\">Benefits of Teaching Kids To Code That No One Is Talking About<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1440\">theClubhou.se: Growing an Awesome City through a Culture of Making<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=795\">Learn to Build Your Own Conversational Bot using ChatScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1319\">Easy Data Visualization with Google Charts and JavaScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1022\">Using candy to teach DNA structure<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1336\">Books and Tools To Get Started in Video Game Programming<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1285\">10 Free Resources for Learning JavaScript and HTML5<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1079\">Simple Minecraft Programming Using ScriptCraftJS<\/a><\/li>\n<\/ul>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fcreate-puzzle-based-code-experiences-in-your-apps-javascript-html5%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n","protected":false},"excerpt":{"rendered":"<p>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, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,16,23,11,8],"tags":[],"_links":{"self":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1467"}],"collection":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/comments?post=1467"}],"version-history":[{"count":10,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1467\/revisions"}],"predecessor-version":[{"id":1477,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1467\/revisions\/1477"}],"wp:attachment":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=1467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=1467"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=1467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}