{"id":34587,"date":"2018-04-08T21:15:14","date_gmt":"2018-04-09T05:15:14","guid":{"rendered":"https:\/\/www.techykids.com\/?page_id=34587"},"modified":"2018-04-08T21:15:14","modified_gmt":"2018-04-09T05:15:14","slug":"premium-thymio-play-page","status":"publish","type":"page","link":"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page","title":{"rendered":"Premium Thymio Play Page"},"content":{"rendered":"<p>Main components and learnings from this content.\u00a0 Collaboration, Creativity, Robotics, Coding, 3D Modeling, Product Invention, Project Creation<br \/>\n<img loading=\"lazy\" decoding=\"async\" loading=\"lazy\" class=\" wp-image-34332 alignleft\" src=\"https:\/\/www.techykids.com\/wp-content\/uploads\/2018\/04\/TechyKids-intro-course-150x150.png\" alt=\"\" width=\"105\" height=\"105\" \/><img loading=\"lazy\" decoding=\"async\" loading=\"lazy\" class=\" wp-image-10848 alignleft\" src=\"https:\/\/www.techykids.com\/wp-content\/uploads\/2016\/12\/Screen-Shot-2017-02-21-at-3.35.33-PM-300x300.png\" alt=\"\" width=\"102\" height=\"104\" \/><img loading=\"lazy\" decoding=\"async\" loading=\"lazy\" class=\" wp-image-10891 alignleft\" src=\"https:\/\/www.techykids.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-21-at-7.17.47-PM-150x150.png\" alt=\"\" width=\"101\" height=\"101\" \/><img loading=\"lazy\" decoding=\"async\" loading=\"lazy\" class=\" wp-image-34368 alignleft\" src=\"https:\/\/www.techykids.com\/wp-content\/uploads\/2016\/10\/Inspiration-Invention-Prompt-150x150.png\" alt=\"\" width=\"99\" height=\"99\" \/><img loading=\"lazy\" decoding=\"async\" loading=\"lazy\" class=\" wp-image-34528 alignleft\" src=\"https:\/\/www.techykids.com\/wp-content\/uploads\/2018\/04\/TinkerCad-Course-150x150.png\" alt=\"\" width=\"98\" height=\"99\" \/><img loading=\"lazy\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-17796 alignleft\" src=\"https:\/\/www.techykids.com\/wp-content\/uploads\/2017\/08\/scratch-thymio-course-150x150.png\" alt=\"\" width=\"104\" height=\"103\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div class='custom-techykids-wrapper' >\n\n  <script type=\"text\/javascript\">\n\n    var activeCalculation = {};\n\n    function timeConvertorBlocky(minutes){\n      var hours   = Math.floor( minutes \/ 60);\n      var minutes =  minutes % 60 + ' min';\n      return (hours) ? hours + ' hr ' + minutes : minutes;       \n    }\n    \n      function updateUiCalculation(){\n\n        var totalEstTime    = 0;\n        var totalMatterTags = [];\n        var totalLessonTags = [];\n        var totalTimeLength = 0;\n        var totalYoungest   = '';\n\n        var resetElement = [\n         '.blocky-total-estimate-time'\n        ,'.blocky-total-matter-tag'\n        ,'.blocky-lesson-matter-tag'\n        ,'.blocky-total-time-length'\n        ,'.blocky-total-youngest-grade'];\n\n        jQuery(resetElement.join(',')).html('');\n\n\n       \n        for(var x in activeCalculation){\n          if(\n               typeof(activeCalculation[x]) == 'undefined' \n            || typeof(activeCalculation[x]['blocky_lesson_calculation']) == 'undefined'){\n            return;\n          }\n          var temp = activeCalculation[x]['blocky_lesson_calculation'] || '';\n          if( typeof( temp ) == \"object\" ){\n            var bl_est_time_length      = parseInt(temp['bl_est_time_length']) || 0;\n            var bl_time_length          = parseInt(temp['bl_time_length'])     || 0;\n            var bl_youngest_grade_level = temp['bl_youngest_grade_level']      || '';\n          \n            totalEstTime += bl_est_time_length;\n            totalTimeLength += bl_time_length;\n\n            var intialGrade = parseInt(bl_youngest_grade_level) || 0;\n            if( intialGrade > totalYoungest){\n              totalYoungest = bl_youngest_grade_level;\n            }                                    \n          }\n\n          var bl_matters_tags = activeCalculation[x]['tags']; \n          for(var i=0; i < bl_matters_tags.length ; i++){\n            if( totalMatterTags.indexOf( bl_matters_tags[i] ) == -1 ){\n              totalMatterTags.push( bl_matters_tags[i] );\n            }\n          }\n\n          var bl_lesson_tags = activeCalculation[x]['lessonTag']; \n          for(var i=0; i < bl_lesson_tags.length ; i++){\n            if( totalLessonTags.indexOf( bl_lesson_tags[i] ) == -1 ){\n              totalLessonTags.push( bl_lesson_tags[i] );\n            }\n          }\n\n        }\n\n        updateParam = {\n          'blocky-total-estimate-time' : timeConvertorBlocky(totalEstTime),\n          'blocky-total-matter-tag'    : totalMatterTags.join(', '),\n          'blocky-lesson-matter-tag'   : totalLessonTags.join(', '),\n          'blocky-total-time-length'   : timeConvertorBlocky (totalTimeLength ),\n          'blocky-add-time-length'     : timeConvertorBlocky(totalEstTime + totalTimeLength),\n          'blocky-total-youngest-grade': totalYoungest\n        }\n\n        for(var selector in updateParam){\n          jQuery('.'+selector).html(updateParam[selector]);\n        }\n\n        \/\/ jQuery('.blocky-total-estimate-time').html(timeConvertorBlocky(totalEstTime));\n        \/\/ jQuery('.blocky-total-matter-tag').html(totalMatterTags.join(', '));\n        \/\/ jQuery('.blocky-lesson-matter-tag').html(totalLessonTags.join(', '));\n        \/\/ jQuery('.blocky-total-time-length').html(timeConvertorBlocky (totalTimeLength ));\n        \/\/ jQuery('.blocky-add-time-length').html(timeConvertorBlocky(totalEstTime + totalTimeLength) );\n        \/\/ jQuery('.blocky-total-youngest-grade').html(totalYoungest);\n\n      }\n\n\n\n  jQuery(document).ready(function(){\n\n              Blockly.Blocks[\"lessons\"] = {\n            init: function() {\n              this.appendStatementInput(\"NAME\")\n                  .setCheck(null)\n                  .appendField(\"Lessons\");\n              this.setPreviousStatement(true, null);\n              this.setNextStatement(true, null);\n              this.setColour(30);\n              this.setTooltip(\"Lessons\");\n            }\n          };\n          Blockly.JavaScript[\"lessons\"] = function(block) {\n            return 'temp'+lessons+\";\\n\";\n          };\n                 Blockly.Blocks[\"mediums\"] = {\n            init: function() {\n              this.appendStatementInput(\"NAME\")\n                  .setCheck(null)\n                  .appendField(\"Mediums\");\n              this.setPreviousStatement(true, null);\n              this.setNextStatement(true, null);\n              this.setColour(345);\n              this.setTooltip(\"Mediums\");\n            }\n          };\n          Blockly.JavaScript[\"mediums\"] = function(block) {\n            return 'temp'+mediums+\";\\n\";\n          };\n                 Blockly.Blocks[\"deliverables\"] = {\n            init: function() {\n              this.appendStatementInput(\"NAME\")\n                  .setCheck(null)\n                  .appendField(\"Deliverables\");\n              this.setPreviousStatement(true, null);\n              this.setNextStatement(true, null);\n              this.setColour(120);\n              this.setTooltip(\"Deliverables\");\n            }\n          };\n          Blockly.JavaScript[\"deliverables\"] = function(block) {\n            return 'temp'+deliverables+\";\\n\";\n          };\n                 Blockly.Blocks[\"slides\"] = {\n            init: function() {\n              this.appendStatementInput(\"NAME\")\n                  .setCheck(null)\n                  .appendField(\"Slides\");\n              this.setPreviousStatement(true, null);\n              this.setNextStatement(true, null);\n              this.setColour(60);\n              this.setTooltip(\"Slides\");\n            }\n          };\n          Blockly.JavaScript[\"slides\"] = function(block) {\n            return 'temp'+slides+\";\\n\";\n          };\n               Blockly.Blocks['slide___create_new'] = {\n          init: function() {\n            this.appendDummyInput()\n                .appendField(\"Slide\")\n                .appendField(new Blockly.FieldTextInput(\"Create Yor Own\"), \"NAME\");\n            this.setPreviousStatement(true, null);\n            this.setNextStatement(true, null);\n            this.setColour(65);\n            this.setTooltip('');\n            \/\/this.setHelpUrl('http:\/\/www.example.com\/');\n          }\n        };\n        Blockly.JavaScript['slide___create_new'] = function(block) {\n          return 'slide___create_new'+\";\\n\";\n        };\n           var options = {\n      toolbox: document.getElementById('toolbox'),\n      grid: {\n        spacing: 25,\n        length: 2,\n        color: '#ff0000',\n      },\n      trashcan: true,\n      comments: false,\n      collapse: false,\n      disable: false,\n            zoom: {\n        controls: true,\n        wheel: false,\n        startScale: 0.8,\n        maxScale: 3.0,\n        minScale: 0. ,\n        scaleSpeed: 1.2,\n      },\n    };\n\n      function openInNewTab(url) {\n        var win = window.open(url, '_blank');\n        if(win){\n          win.focus();\n        }else{\n          swal(\"Unable to open Lesson in new tab, allow popup to open Lesson in new tab\")\n        }\n      }\n\n      function bindLessonClickInNewTab(element,blockId){\n        \/*\n        element.addClass('cursor-pointer').click({id: blockId},function(event){\n          blockId = event.data.id;\n          if(blockId && activeCalculation[blockId] && activeCalculation[blockId].permalink){\n            openInNewTab(activeCalculation[blockId].permalink);\n          }\n        });\n        *\/\n        if(blockId && activeCalculation[blockId] && activeCalculation[blockId].permalink){\n\n          \/\/Desktop System\n          element.addClass('cursor-pointer').on('click',{id: blockId},function(event){\n            if(typeof(keyToUrl[blockId]) !== 'undefined' ){\n              return openInNewTab(keyToUrl[blockId]);\n            }\n            openInNewTab(activeCalculation[blockId].permalink);\n          });\n\n          \/\/OnMobile System : Opening the URL in same Tab\n          var touchmoved;\n          element.on('touchend',{id: blockId} , function(e){\n              if(touchmoved != true){\n                window.location.href=activeCalculation[blockId].permalink;\n              }\n          }).on('touchmove', function(e){\n              touchmoved = true;\n          }).on('touchstart', function(){\n              touchmoved = false;\n          });\n\n        }        \n      } \n\n      function bindClickEventToBlocks(blockId){\n        \/\/Adding Click Event\n        if(window.workspace.options.readOnly){\n          var blockDBTemp = window.workspace.blockDB_;\n          \/\/for(x in blockDBTemp){  \n            jQuery(blockDBTemp[blockId].svgPath_).parent().children('g').each(function(){\n              var children = jQuery(this).children();\n              \/\/console.log(children , children.length ,children.prop(\"tagName\") )\n              if(   children.length == 1 \n                 && children.prop(\"tagName\").toLowerCase() == \"image\" \n              ){\n                bindLessonClickInNewTab(children,blockId);\n              }\n            });\n            \n            bindLessonClickInNewTab(jQuery(blockDBTemp[blockId].svgPath_),blockId);\n          \/\/}\n        }\n      }\n\n    var keyToUrl = []\n    window.workspace = Blockly.inject('blocklyDiv', options);\n    var activeBlockyDetails = [];\n    \/\/console.log(activeBlockyDetails);\n    window.workspace.addChangeListener(function(event) {\n    \/\/console.log(event.type);\n    switch(event.type){\n      case Blockly.Events.CREATE:\n\n         for(var i=0; i< event.ids.length ; i++){\n           block = workspace.getBlockById(event.ids[i]);\n           if(typeof(activeBlockyDetails[block.type] ) !== 'undefined'){\n             activeCalculation[event.ids[i]] = activeBlockyDetails[block.type];\n             bindClickEventToBlocks(event.ids[i]);\n             if(typeof(block.helpUrl) !== 'undefined' && typeof(keyToUrl[block.id]) !== 'undefined' ){\n               block.helpUrl = keyToUrl[block.id];\n             }\n           }\n         }\n         updateUiCalculation();\n       break;\n      case Blockly.Events.DELETE:\n        for(var i=0; i< event.ids.length ; i++){\n          delete activeCalculation[event.ids[i]];\n        }\n        updateUiCalculation();\n      break;\n      case Blockly.Events.UI:\n        if(   window.workspace.options.readOnly\n           && event.element == \"click\"\n           && activeCalculation[event.blockId]\n           && activeCalculation[event.blockId].permalink){\n\n          openInNewTab(activeCalculation[event.blockId].permalink);\n        }\n      break;\n    }\n    \n    });   \n\n    var saveBlocksValue = [];\n\n    function saveActiveValue(){\n      var xml = Blockly.Xml.workspaceToDom(workspace);\n      var xml_text = Blockly.Xml.domToText(xml);\n      saveBlocksValue.push(xml_text); \n    }\n\n\n  });\n  <\/script>\n\n    <style type=\"text\/css\">\n      .blocky-listing a.woo-sc-button{\n        margin-bottom:0px;\n      }\n      .blocky-text-right{\n        text-align: right;\n      }\n      .blocky-text-left{\n        text-align: left;\n      }       \n      .blocky-action-bar{\n        margin:30px 0px 10px;\n      }\n      .blocky-add-operation .new-blocky-action,\n      .blocky-edit-operation .update-blocky-action{       \n        display:inline-block;\n      }\n      .blocky-add-operation .update-blocky-action,\n      .blocky-edit-operation .new-blocky-action{\n        display:none;\n      }\n      .blocky-action-bar button{\n        margin-left:15px;\n      }\n      .blocky-hide{\n        display:none;\n      }\n      .cursor-pointer{\n        cursor:pointer;\n      }\n      .hide-action-button .blocky-edit,\n      .hide-action-button .blocky-delete{\n        display:none;\n      }  \n      \n      \/* Create Course \/ Update Course Btn *\/\n\n      .clone-create-course.action-create-block .create-course{\n        display:inline;\n      }\n      .clone-create-course.action-create-block .update-course{\n        display:none;\n      }\n      .clone-create-course.action-update-block .create-course{\n        display:none;\n      }\n      .clone-create-course.action-update-block .update-course{\n        display:inline;\n      }\n\n\n    <\/style>\n\n    <div class=\"blocky-wrapper blocky-add-operation\" style=\"width: 100%;\">\n    <div id=\"blocklyDiv\" style=\"height:600px;\">\n      <xml xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" id=\"toolbox\" style=\"display: none;\">\n              <\/xml>\n    <\/div>\n\n    <div class=\"blocky-action-bar blocky-text-right\">\n              <div class=\"new-blocky-action blocky-text-right\">\n          <button id=\"\" class=\"button blocky-map-save\"> <i class=\"fa fa-plus\"><\/i> Add New <\/button>\n          <button id=\"\" class=\"button red blocky-map-clear\"> <i class=\"fa fa-eraser\"><\/i> Clear <\/button>\n        <\/div>\n        <div class=\"update-blocky-action\">\n          <input type=\"text\" value=\"\" name=\"blocky-update-name\" class=\"input\" placeholder=\"Name of Blocky\">\n          <button id=\"\" class=\"button blocky-map-update\"> <i class=\"fa fa-pencil-square-o\"><\/i> Update Map <\/button>\n          <button id=\"\" class=\"button blocky-update-cancel\"> <i class=\"fa fa-close\"><\/i> Cancel Update <\/button>\n        <\/div>\n                      <div class=\"update-blocky-action clone-create-course action-create-block\">\n                                \n        <\/div>\n    <\/div>\n\n\n\n\n        <!-- Calculation -->\n\n                <style type=\"text\/css\">\n        @media (min-width:600px)  { \n          .blocklyToolboxDiv{\n            margin-top:-30px;\n            padding-bottom: 30px;\n            z-index:2;\n          }\n          .blocky-wrapper{\n            padding-top:30px;\n            position: relative;\n          }\n          .blocky-calculation{\n            position: absolute;\n            top: 0px;\n            left: 0px;\n            background-color: #DDDDDD;\n            width: 100%;\n            z-index: 2;\n          }\n          .blocky-calculation p {\n            float: right;\n            padding: 0px;\n            margin-left: 20px;\n            margin: 0px 2px 0px 20px;\n            line-height: 30px;\n            width:20%;\n          }      \n          .blocklyTreeRoot {\n            padding: 4px 0;\n            margin-top: 30px;\n          }\n\n        }\n        \n\n        <\/style>\n        <div class=\"blocky-calculation\">\n            <p>\n              <strong>Total Time: <\/strong>\n              <span class=\"blocky-add-time-length\"><\/span>\n            <\/p>          \n            <p>\n              <strong>Activity Time: <\/strong>\n              <span class=\"blocky-total-estimate-time\"><\/span>\n            <\/p>    \n            <p>\n              <strong>Lesson Time: <\/strong>\n              <span class=\"blocky-total-time-length\"><\/span>\n            <\/p>  \n            <p>\n              <strong>Grade Level: <\/strong>\n              <span class=\"blocky-total-youngest-grade\"><\/span>\n            <\/p>                         \n        <\/div>\n\n      \n     <!-- Calcuation Number 2 -->\n           <div class=\"\">        \n        <p>\n          <strong>Subject Tags: <\/strong>\n          <span class=\"blocky-total-matter-tag\"><\/span>\n        <\/p>\n      <\/div>\n\n      <div class=\"\">        \n        <p>\n          <strong>Standards: <\/strong>\n          <span class=\"blocky-lesson-matter-tag\"><\/span>\n        <\/p>\n      <\/div>\n\n     \n   \n    <!-- Listing -->\n\n    \n\n\n\n\n  <\/div>\n\n  <script type=\"text\/javascript\">\n     (function($){\n\n      $(document).ready(function(){\n\n\n        var stripSlashes = function(param){\n            return param.replace(\/\\\\(.)\/mg, \"$1\");\n        }\n\n        var currentEditId = -1; \/\/ -1 for add \n\n          var sendRequest = function(param){\n            param = $.extend({\n              success  : function(){},\n              error    : function(){},\n              complete : function(){},\n              data     : {}\n            },param);\n\n            $.ajax( $.extend( {\n              url      :  blockyTechykidsObj.ajax_url,\n              method   : 'post',\n              dataType : 'json'\n            },param,{\n              success : function(response){\n                if(response == \"0\"){\n                  var loginLink  = 'https:\/\/techykids.com\/staging\/3266\/login';\n                  var anchorText = $( document.createElement('a') ).attr('target','_blank').attr('href',loginLink).text('Click Here to login').wrap('<p\/>').parent().html();\/\/This is the fastest way\n                  return swal({\n                    title : \"Authentication error\",\n                    \/\/text  : \" <a target='_blank' href='https:\/\/techykids.com\/staging\/3266\/login' > Click Here to login  <\/a>\",\n                    text  : anchorText, \n                    type  : \"error\",\n                    html  : true,\n                    closeOnConfirm: true,\n                  });\n                }\n                if(response.status == 0){\n                  return param.error(response);\n                }\n                return param.success(response);\n              }             \n            }));\n          };\n\n\n          var showHideTable = function(tableRef){\n            if( tableRef.find('tbody tr').length <= 1){\n              tableRef.addClass('blocky-hide');\n            }else{\n              tableRef.removeClass('blocky-hide');\n            }\n          }\n\n          $('.blocky-wrapper').on('click', '.blocky-map-save', function(e) {\n          \/\/$('.blocky-map-save').click(function(){\n            var parentBlock = $(this).closest('.blocky-wrapper');\n            swal({\n              title: \"Name!\",\n              text: \"Place the name of blocky , so that you can easily manage it:\",\n              type: \"input\",\n              showCancelButton: true,\n              closeOnConfirm: false,\n              animation: \"slide-from-top\",\n              showLoaderOnConfirm: true,\n              inputPlaceholder: \"Write something\"\n            },\n            function(inputValue){\n              if (inputValue === false) return false;\n              if (inputValue === \"\") {\n                swal.showInputError(\"You need to write something!\");\n                return false\n              }\n              var xml = Blockly.Xml.workspaceToDom(window.workspace);\n              var xmlText = Blockly.Xml.domToText(xml);\n              \/\/ fa fa-spinner fa-pulse fa-fw\n              return sendRequest({\n                data : {\n                  'action' : 'blocky_techkids_insert',\n                  'xml'    : xmlText,\n                  'name'   : inputValue\n                },\n                success : function(response){\n\n                  if(response.message && response.message.id ){\n                    \/\/Adding in Listing\n                    var tableRow = '<tr data-id=\"'+response.message.id+'\">'\n                                +'<td>'+response.message.id+'<\/td>'\n                                +'<td>'+response.message.name+'<\/td>'\n                                +'<td>'\n                                  +'<a href=\"\" class=\"woo-sc-button orange blocky-edit\">'\n                                    +'<i class=\"fa fa-edit\"><\/i> <span>Edit<\/span>'\n                                  +'<\/a>'\n                                  +'<a href=\"\" class=\"woo-sc-button red blocky-delete\">'\n                                    +'<i class=\"fa fa-trash\"><\/i> <span>Delete<\/span>'\n                                  +'<\/a>'\n                                +'<\/td>'\n                                +'<\/tr>';\n                    parentBlock.find('.blocky-listing tbody').append(tableRow);\n                    showHideTable(parentBlock.find('.blocky-listing'));\n\n                    \/\/Adding in Drop Down\n                    var optionHTML = '<option value=\"'+response.message.id+'\"> '+response.message.name+'<\/option>';\n                    parentBlock.find('.blocky-listing-dropdown [name=\"active-selected-blocky\"]').append(optionHTML);\n\n                    return swal(\"Nice!\", \"You blocky is saved\");\n                  }\n                  return swal(\"Error\", \"Something went wrong while saving\", \"error\"); \n                },\n                error : function(){\n                  \/\/console.log('error');\n                  swal(\"Error\", \"Something went wrong while saving\", \"error\");\n                },\n                complete:function(){\n                  \/\/console.log('Complete');\n                }             \n              });\n            });\n            return;\n          });\n\n\n\n          \n\n          \/\/Cancel-Update\n          $('.blocky-wrapper').on('click', '.blocky-map-clear', function(e) {\n            currentEditId = -1;\n            $(this).closest('.blocky-wrapper').removeClass('blocky-edit-operation').addClass('blocky-add-operation');\n            Blockly.mainWorkspace.clear();\n          });\n\n          \/\/Cancel-Update\n          $('.blocky-wrapper').on('click', '.blocky-update-cancel', function(e) {\n            currentEditId = -1;\n            var closestParaent = $(this).closest('.blocky-wrapper');\n            closestParaent.removeClass('blocky-edit-operation').addClass('blocky-add-operation');\n            closestParaent.find('input[name=\"blocky-update-name\"]').val('');\n            Blockly.mainWorkspace.clear();\n          });\n\n\n\n          \/\/Create Course Map\n          $('.blocky-wrapper').on('click', '.blocky-map-create-course', function(e){\n\n            e.preventDefault();\n            var currentButton = $(this);\n\n            if(currentEditId == -1){\n              return sweetAlert(\"Oops...\", \"Something went wrong! Please refresh the page\", \"error\");\n            }\n\n            var closestParent = currentButton.closest('.blocky-wrapper');\n            \n            swal({\n              title: \"This request will Create Course for the current Map\",\n              text: \"You can see the Created Course in your listing\",\n              type: \"warning\",\n              showCancelButton: true,\n              confirmButtonColor: \"#DD6B55\",\n              confirmButtonText: \"Yes, Create Course Map!\",\n              cancelButtonText: \"No, cancel!\",\n              closeOnConfirm: false,\n              closeOnCancel: true,\n              showLoaderOnConfirm: true\n            },\n            function(isConfirm){\n\n              \n              if (isConfirm) {\n                return sendRequest({\n                  data : {\n                    'action' : 'blocky_techkids_createCourse',\n                    'xml_id' : currentEditId,\n                    'type'   : currentButton.attr('data-type')\n                  },\n                  success : function(response){\n                    \/\/Open Map In New Window or in same tab\n                    if(response.status == 1 && response.message){\n\n                      var title = \"Course Updated\"; \n                      if($('.clone-create-course').hasClass('action-create-block')){\n                        title = \"Course Created\";\n                      }\n\n                        \n                      if(response.permalink && response.xml_id ){\n                        \/\/ In the case title will have the star added for dropdown.\n                        var nameTd = closestParent.find('.blocky-listing tr[data-id=\"'+response.xml_id+'\"] td:nth-child(2)');\n                        if( !nameTd.find('.fa').length ){ \/\/ No link is added in past\n                          nameTd.append('<a href=\"'+response.permalink+'\" target=\"_blank\">' +\n                           '<i class=\"fa fa-external-link\" aria-hidden=\"true\"><\/i>' +\n                           '<\/a>'\n                          );\n                        }\n\n                        \/\/ In case of list it will add the link.\n\n                        \/\/ Adding * in option if not present\n                        var option = closestParent.find('.blocky-listing-dropdown [name=\"active-selected-blocky\"] option[value=\"'+response.xml_id+'\"\"]');\n                        if(option.length){\n                          var currentName = $.trim( option.html());\n                          if( currentName.charAt(currentName.length-1) != '*' ){\n                            option.html( currentName + '*' );\n                          }\n                        }\n                      }\n\n                      $('.clone-create-course').removeClass('action-create-block').addClass('action-update-block');\n                      return swal({\n                        title : title,\n                        text  : stripSlashes(response.message),\n                        html  : true\n                      });        \n                    }\n                    swal(\"Error\", \"Something went wrong while cloning\", \"error\");\n                  },\n                  error : function(){\n                    swal(\"Error\", \"Something went wrong while cloning\", \"error\");\n                  }             \n                });\n              }\n            });\n\n          });\n\n          \/\/Clone Map\n          $('.blocky-wrapper').on('click', '.blocky-map-clone', function(e){\n\n            e.preventDefault();\n            var currentButton = $(this);\n\n            if(currentEditId == -1){\n              return sweetAlert(\"Oops...\", \"Something went wrong! Please refresh the page\", \"error\");\n            }\n\n            swal({\n              title: \"This request will clone the current Map\",\n              text: \"You can see the cloned Map in your listing\",\n              type: \"warning\",\n              showCancelButton: true,\n              confirmButtonColor: \"#DD6B55\",\n              confirmButtonText: \"Yes, Clone it!\",\n              cancelButtonText: \"No, cancel!\",\n              closeOnConfirm: false,\n              closeOnCancel: true,\n              showLoaderOnConfirm: true\n            },\n            function(isConfirm){\n              if (isConfirm) {\n                return sendRequest({\n                  data : {\n                    'action' : 'blocky_techkids_clone',\n                    'xml_id' : currentEditId\n                  },\n                  success : function(response){\n                   \/\/Open Map In New Window or in same tab\n                   if(response.message){\n                      clonedUrl = \"?_e=\"+response.message;\n                      var win = window.open(clonedUrl, '_blank');\n                      swal(\"Map Cloned\");\n                      if(win)\n                        win.focus();\n                      window.location.href = clonedUrl;\n                      return            \n                   }\n                   swal(\"Error\", \"Something went wrong while cloning\", \"error\");\n                  },\n                  error : function(){\n                    swal(\"Error\", \"Something went wrong while cloning\", \"error\");\n                  }             \n                });\n              }\n            });\n\n          });\n\n\n          \/\/Update Map\n\n          $('.blocky-wrapper').on('click', '.blocky-map-update', function(e) {\n            e.preventDefault();\n            var currentButton = $(this);\n\n            if(currentEditId == -1){\n              return sweetAlert(\"Oops...\", \"Something went wrong! Please refresh the page\", \"error\");\n            }\n\n            swal({\n              title: \"Your previous changes will be overwritten?\",\n              text: \"You will not be able to recover the older blocky map\",\n              type: \"warning\",\n              showCancelButton: true,\n              confirmButtonColor: \"#DD6B55\",\n              confirmButtonText: \"Yes, Update it!\",\n              cancelButtonText: \"No, cancel !\",\n              closeOnConfirm: false,\n              closeOnCancel: true,\n              showLoaderOnConfirm: true\n            },\n            function(isConfirm){\n              if (isConfirm) {\n                var activeEditRow = currentButton.closest('tr');\n                var activeButton  = currentButton;\n                var closestParent = activeButton.closest('.blocky-wrapper');\n\n                var xml = Blockly.Xml.workspaceToDom(window.workspace);\n                var xmlText = Blockly.Xml.domToText(xml);\n\n                return sendRequest({\n                  data : {\n                    'action' : 'blocky_techkids_update',\n                    'xml_id' : currentEditId,\n                    'xml'    : xmlText,\n                    'name'   : closestParent.find('input[name=\"blocky-update-name\"]').val()\n                  },\n                  success : function(response){\n\n                    if(response.message && response.message.id ){\n              \n                      \/\/Reset Map Area\n                      \/\/closestParent.find('input[name=\"blocky-update-name\"]').val('');\n                      \/\/closestParent.removeClass('blocky-edit-operation').addClass('blocky-add-operation');\n\n                      \/\/Updating Existing Record\n                      \/\/Listing\n                      closestParent.find('.blocky-listing tr[data-id=\"'+response.message.id+'\"] td:nth-child(2)').html(response.message.name);\n\n                      \/\/DropDown\n                      closestParent.find('.blocky-listing-dropdown [name=\"active-selected-blocky\"] option[value=\"'+response.message.id+'\"]').html(response.message.name);\n\n                      return swal(\"Blocky Saved\");  \n                    }\n                    $message =  \"Something went wrong while updating Map\";\n\n                    if(typeof(response.message) !== 'undefined'){\n                      $message = response.message;\n                    }\n                    return swal(\"Error\", $message, \"error\");      \n                  },\n                  error : function(){\n                    swal(\"Error\", \"Something went wrong while fetching details\", \"error\");\n                  }             \n                });\n              }\n            });\n          });\n\n\n          \n\n          \/*\n           * Function Name : deleteBlockyUI\n           * \n           *\n           *\/\n\n          var deleteBlockyUI = function(param){\n\n            var activeButton  = param.activeButton;\n            var deleteId      = param.deleteId;\n            swal({\n              title: \"Are you sure?\",\n              text: \"You will not be able to recover this data!\",\n              type: \"warning\",\n              showCancelButton: true,\n              confirmButtonColor: \"#DD6B55\",\n              confirmButtonText: \"Yes, delete it!\",\n              cancelButtonText: \"No, cancel!\",\n              closeOnConfirm: false,\n              closeOnCancel: true,\n              showLoaderOnConfirm: true\n            },\n            function(isConfirm){\n              if (isConfirm) {\n                return sendRequest({\n                  data : {\n                    'action' : 'blocky_techkids_delete',\n                    'xml_id' : deleteId\n                  },\n                  beforeSend : function(){\n                    activeButton.find('i').attr('class','fa fa-spinner fa-pulse fa-fw');\n                    activeButton.find('span').html('');\n                  },\n                  success : param.success,\n                  error : function(){\n                    activeButton.find('i').attr('class','fa fa-refresh');\n                    activeButton.find('span').html('Retry');\n                    swal(\"Error\", \"Sorry , unable to delete blocky)\", \"error\");\n                  }             \n                }); \n              }\n            });\n\n          }\n\n          \/\/Drop Down Delete \n          $('.blocky-wrapper').on('click', '.blocky-listing-dropdown .blocky-delete', function(e) {\n            e.preventDefault();\n            var activeButton = $(this);\n            var deleteId     =  activeButton.closest('.blocky-listing-dropdown').find('[name=\"active-selected-blocky\"]').val();\n            deleteBlockyUI({\n              activeButton : activeButton,\n              deleteId     : deleteId,\n              success      : function(){\n                activeButton.find('i').attr('class','fa fa-edit');\n                activeButton.find('span').html('Delete');\n                var dropDown = activeButton.closest('.blocky-listing-dropdown').find('[name=\"active-selected-blocky\"]');\n                dropDown.val('');\n                dropDown.find('option[value=\"'+deleteId+'\"]').remove();\n                updateDropDownUI();\n                swal(\"Deleted!\", \"Your blocky has been deleted.\", \"success\");                \n              }\n            });\n          })\n\n          \/\/Delete\n          $('.blocky-wrapper').on('click', '.blocky-listing .blocky-delete', function(e) {\n            e.preventDefault();\n            var activeButton = $(this);\n            deleteBlockyUI({\n              activeButton : activeButton,\n              deleteId     : activeButton.closest('tr').attr('data-id'),\n              success      : function(){\n                var parentTable = activeButton.closest('table');\n                activeButton.closest('tr').remove();\n                showHideTable(parentTable);\n                swal(\"Deleted!\", \"Your blocky has been deleted.\", \"success\");                \n              }\n            });\n          });\n\n\n          \/*\n           * Function Name : editBlockyUI\n           * \n           *\n           *\/\n\n          var editBlockyUI = function(param){\n            var activeButton   = param.activeButton;\n            \n            swal({\n              title: \"Are you sure?\",\n              text: \"You current changes will not be saved\",\n              type: \"warning\",\n              showCancelButton: true,\n              confirmButtonColor: \"#DD6B55\",\n              confirmButtonText: \"Yes, Edit it!\",\n              cancelButtonText: \"No, cancel !\",\n              closeOnConfirm: false,\n              closeOnCancel: true,\n              showLoaderOnConfirm: true\n            },\n            function(isConfirm){\n              if (isConfirm) {\n  \n                return sendRequest({\n                  data : {\n                    'action' : 'blocky_techkids_select',\n                    'xml_id' : currentEditId\n                  },\n                  beforeSend : function(){\n                    activeButton.find('i').attr('class','fa fa-spinner fa-pulse fa-fw');\n                    activeButton.find('span').html('');\n                  },\n                  success : function(response){\n                    if(response.message && response.message.id){\n                      currentEditId = response.message.id;\n                      activeButton.find('i').attr('class','fa fa-edit');\n                      activeButton.find('span').html('Edit');\n\n                      \/\/Clean and Load new XML in workspace\n                      Blockly.mainWorkspace.clear();\n                      var xml = Blockly.Xml.textToDom(response.message.xml);\n                      Blockly.Xml.domToWorkspace(xml, window.workspace);                    \n\n                      \/\/Editing Map\n                      var closestParaent = activeButton.closest('.blocky-wrapper');\n                      closestParaent.find('input[name=\"blocky-update-name\"]').val(response.message.name);\n                      closestParaent.removeClass('blocky-add-operation').addClass('blocky-edit-operation');\n                      $('html,body').animate({scrollTop: closestParaent.offset().top});\n                      return swal(\"Blocky Loaded\");\n                    }\n                    return  swal(\"Error\", \"Something went wrong while fetching details\", \"error\");\n                  },\n                  error : function(){\n                    activeButton.find('i').attr('class','fa fa-refresh');\n                    activeButton.find('span').html('Retry');\n                    swal(\"Error\", \"Something went wrong while fetching details\", \"error\");\n                  }             \n                });\n              }\n            });\n          }\n\n          \/\/Drop Down Edit \n          $('.blocky-wrapper').on('click', '.blocky-listing-dropdown .blocky-edit', function(e) {\n            e.preventDefault();\n            var activeButton = $(this);\n            currentEditId    = activeButton.closest('.blocky-listing-dropdown').find('[name=\"active-selected-blocky\"]').val();\n\n            var closestDropdown = activeButton.closest('.blocky-listing-dropdown').find('[name=\"active-selected-blocky\"]');\n            var activeValue     = closestDropdown.val();\n            var optionHTML      = closestDropdown.find('option[value=\"'+activeValue+'\"]').html();\n\n            optionHTML = $.trim(optionHTML); \/\/ Removing spaces\n\n            console.log('optionHTML', optionHTML);\n            console.log(this);\n\n\n            if( optionHTML.charAt(optionHTML.length-1) != '*' ){ \/\/ Has course, update course\n              $('.clone-create-course')\n                .removeClass('action-create-block')\n                .addClass('action-update-block');\n            }\n\n            editBlockyUI({\n              activeButton  : activeButton\n            });\n          })\n\n          \/\/Edit\n          $('.blocky-wrapper').on('click', '.blocky-listing .blocky-edit', function(e) {\n            e.preventDefault();\n            var activeButton = $(this);\n            currentEditId    = activeButton.closest('tr').attr('data-id');\n\n            \/\/ Adding correct class according\n            var nameTd = activeButton.closest('tr[data-id]').find('td:nth-child(2)');\n        \n            $('.clone-create-course')\n              .removeClass('action-update-block')\n              .addClass('action-create-block');\n\n            if( nameTd.find('a').length ){ \/\/ This has course associated with it.\n              $('.clone-create-course')\n                .removeClass('action-create-block')\n                .addClass('action-update-block');\n            }\n\n\n\n\n           \n            editBlockyUI({\n              activeButton  : activeButton\n            });\n          })\n\n\n          \/\/DropDown-Updation\n          var updateDropDownUI = function(){\n            var dropDown  = $('.blocky-listing-dropdown [name=\"active-selected-blocky\"]');\n            var parentBar = dropDown.closest('.blocky-listing-dropdown');\n            if(dropDown.val() == ''){\n              parentBar.find('.lesson-active-status').html( \"\" );\n              return parentBar.addClass('hide-action-button');\n            }\n            var lessonStatus = dropDown.find(\"option:selected\").attr('data-lesson-status') || \"\";\n            console.log('lessonStatus', lessonStatus);\n            parentBar.find('.lesson-active-status').html( lessonStatus );\n            return parentBar.removeClass('hide-action-button');\n            \n          }  \n          \n          updateDropDownUI();\n          $('.blocky-listing-dropdown [name=\"active-selected-blocky\"]').change(updateDropDownUI);\n\n         \n      });\n\n\n\n     })(jQuery);\n  <\/script>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Main components and learnings from this content.\u00a0 Collaboration, Creativity, Robotics, Coding, 3D Modeling, Product Invention, Project Creation &nbsp; &nbsp;<\/p>\n","protected":false},"author":1,"featured_media":34590,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-34587","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Premium Thymio Play Page - TechyKids.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Premium Thymio Play Page - TechyKids.com\" \/>\n<meta property=\"og:description\" content=\"Main components and learnings from this content.\u00a0 Collaboration, Creativity, Robotics, Coding, 3D Modeling, Product Invention, Project Creation &nbsp; &nbsp;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page\" \/>\n<meta property=\"og:site_name\" content=\"TechyKids.com\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page\",\"url\":\"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page\",\"name\":\"Premium Thymio Play Page - TechyKids.com\",\"isPartOf\":{\"@id\":\"https:\/\/techykids.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page#primaryimage\"},\"image\":{\"@id\":\"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2018-04-09T05:15:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/techykids.com\/staging\/3266\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Premium Thymio Play Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/techykids.com\/#website\",\"url\":\"https:\/\/techykids.com\/\",\"name\":\"TechyKids.com\",\"description\":\"Get Inspired.\",\"publisher\":{\"@id\":\"https:\/\/techykids.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/techykids.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/techykids.com\/#organization\",\"name\":\"TechyKids.com\",\"url\":\"https:\/\/techykids.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/techykids.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/techykids.com\/staging\/3266\/wp-content\/uploads\/2013\/05\/techykids1-2.png\",\"contentUrl\":\"https:\/\/techykids.com\/staging\/3266\/wp-content\/uploads\/2013\/05\/techykids1-2.png\",\"width\":300,\"height\":104,\"caption\":\"TechyKids.com\"},\"image\":{\"@id\":\"https:\/\/techykids.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Premium Thymio Play Page - TechyKids.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page","og_locale":"en_US","og_type":"article","og_title":"Premium Thymio Play Page - TechyKids.com","og_description":"Main components and learnings from this content.\u00a0 Collaboration, Creativity, Robotics, Coding, 3D Modeling, Product Invention, Project Creation &nbsp; &nbsp;","og_url":"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page","og_site_name":"TechyKids.com","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page","url":"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page","name":"Premium Thymio Play Page - TechyKids.com","isPartOf":{"@id":"https:\/\/techykids.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page#primaryimage"},"image":{"@id":"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page#primaryimage"},"thumbnailUrl":"","datePublished":"2018-04-09T05:15:14+00:00","breadcrumb":{"@id":"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/techykids.com\/staging\/3266\/premium-thymio-play-page#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/techykids.com\/staging\/3266\/"},{"@type":"ListItem","position":2,"name":"Premium Thymio Play Page"}]},{"@type":"WebSite","@id":"https:\/\/techykids.com\/#website","url":"https:\/\/techykids.com\/","name":"TechyKids.com","description":"Get Inspired.","publisher":{"@id":"https:\/\/techykids.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/techykids.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/techykids.com\/#organization","name":"TechyKids.com","url":"https:\/\/techykids.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techykids.com\/#\/schema\/logo\/image\/","url":"https:\/\/techykids.com\/staging\/3266\/wp-content\/uploads\/2013\/05\/techykids1-2.png","contentUrl":"https:\/\/techykids.com\/staging\/3266\/wp-content\/uploads\/2013\/05\/techykids1-2.png","width":300,"height":104,"caption":"TechyKids.com"},"image":{"@id":"https:\/\/techykids.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/techykids.com\/staging\/3266\/wp-json\/wp\/v2\/pages\/34587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techykids.com\/staging\/3266\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/techykids.com\/staging\/3266\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/techykids.com\/staging\/3266\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techykids.com\/staging\/3266\/wp-json\/wp\/v2\/comments?post=34587"}],"version-history":[{"count":0,"href":"https:\/\/techykids.com\/staging\/3266\/wp-json\/wp\/v2\/pages\/34587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techykids.com\/staging\/3266\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/techykids.com\/staging\/3266\/wp-json\/wp\/v2\/media?parent=34587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}