index.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Blockly Demo: Maximum Block Limit</title>
  6. <script src="../../blockly_compressed.js"></script>
  7. <script src="../../blocks_compressed.js"></script>
  8. <script src="../../msg/js/en.js"></script>
  9. <style>
  10. body {
  11. background-color: #fff;
  12. font-family: sans-serif;
  13. }
  14. h1 {
  15. font-weight: normal;
  16. font-size: 140%;
  17. }
  18. #capacity {
  19. color: red;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
  25. <a href="../index.html">Demos</a> &gt; Maximum Block Limit</h1>
  26. <p>This is a demo of Blockly which has been restricted to a maximum of
  27. five blocks.</p>
  28. <p><b>You have <span id="capacity"></span> block(s) left.</b></p>
  29. <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  30. <xml id="toolbox" style="display: none">
  31. <category name="Logic">
  32. <block type="controls_if"></block>
  33. <block type="logic_compare"></block>
  34. <block type="logic_operation"></block>
  35. <block type="logic_negate"></block>
  36. <block type="logic_boolean"></block>
  37. </category>
  38. <category name="Loops">
  39. <block type="controls_repeat_ext">
  40. <value name="TIMES">
  41. <block type="math_number">
  42. <field name="NUM">10</field>
  43. </block>
  44. </value>
  45. </block>
  46. <block type="controls_whileUntil"></block>
  47. <block type="controls_for">
  48. <field name="VAR">i</field>
  49. <value name="FROM">
  50. <block type="math_number">
  51. <field name="NUM">1</field>
  52. </block>
  53. </value>
  54. <value name="TO">
  55. <block type="math_number">
  56. <field name="NUM">10</field>
  57. </block>
  58. </value>
  59. <value name="BY">
  60. <block type="math_number">
  61. <field name="NUM">1</field>
  62. </block>
  63. </value>
  64. </block>
  65. </category>
  66. <category name="Math">
  67. <block type="math_number"></block>
  68. <block type="math_arithmetic"></block>
  69. <block type="math_single"></block>
  70. </category>
  71. <category name="Text">
  72. <block type="text"></block>
  73. <block type="text_length"></block>
  74. <block type="text_print"></block>
  75. </category>
  76. </xml>
  77. <script>
  78. var workspace = Blockly.inject('blocklyDiv',
  79. {media: '../../media/',
  80. maxBlocks: 5,
  81. toolbox: document.getElementById('toolbox')});
  82. function onchange(event) {
  83. document.getElementById('capacity').textContent =
  84. workspace.remainingCapacity();
  85. }
  86. workspace.addChangeListener(onchange);
  87. onchange();
  88. </script>
  89. </body>
  90. </html>