index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Accessible Blockly Demo</title>
  6. <!-- Load Blockly -->
  7. <script src="../../blockly_compressed.js"></script>
  8. <script src="../../blocks_compressed.js"></script>
  9. <script src="../../javascript_compressed.js"></script>
  10. <script src="../../msg/js/en.js"></script>
  11. <script src="../../msg/messages.js"></script>
  12. <script src="../../accessible/messages.js"></script>
  13. <!-- Load accessibleBlockly -->
  14. <script src="../../accessible/libs/es6-shim.min.js"></script>
  15. <script src="../../accessible/libs/angular2-polyfills.min.js"></script>
  16. <script src="../../accessible/libs/Rx.umd.min.js"></script>
  17. <script src="../../accessible/libs/angular2-all.umd.min.js"></script>
  18. <script src="../../accessible/utils.service.js"></script>
  19. <script src="../../accessible/audio.service.js"></script>
  20. <script src="../../accessible/notifications.service.js"></script>
  21. <script src="../../accessible/clipboard.service.js"></script>
  22. <script src="../../accessible/tree.service.js"></script>
  23. <script src="../../accessible/translate.pipe.js"></script>
  24. <script src="../../accessible/field-segment.component.js"></script>
  25. <script src="../../accessible/toolbox-tree.component.js"></script>
  26. <script src="../../accessible/toolbox.component.js"></script>
  27. <script src="../../accessible/workspace-tree.component.js"></script>
  28. <script src="../../accessible/workspace.component.js"></script>
  29. <script src="../../accessible/app.component.js"></script>
  30. <link rel="stylesheet" href="../../accessible/media/accessible.css">
  31. <style>
  32. body {
  33. background-color: #fff;
  34. font-family: sans-serif;
  35. }
  36. h1 {
  37. font-weight: normal;
  38. font-size: 140%;
  39. }
  40. *:focus {
  41. background: yellow;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <h1>
  47. <a href="https://developers.google.com/blockly/">Blockly</a> &gt;
  48. <a href="../index.html">Demos</a> &gt; Accessible Blockly
  49. </h1>
  50. <p>This is a simple demo of a version of Blockly designed for screen readers.</p>
  51. <p>
  52. In Blockly, you can move blocks from the toolbox to the workspace and join
  53. them to create programs. To navigate between components, use Tab or
  54. Shift-Tab. When you're on a block, move right to access its submenus, and
  55. move up or down to go to the next or previous block in the sequence.
  56. </p>
  57. <!--
  58. <p>&rarr; More info on <a href="https://developers.google.com/blockly/">accessible Blockly</a>&hellip;</p>
  59. -->
  60. <blockly-app></blockly-app>
  61. <script>
  62. var ACCESSIBLE_GLOBALS = {
  63. // Prefix of path to sound files.
  64. mediaPathPrefix: '../../accessible/media/',
  65. // Additional buttons for the workspace toolbar that
  66. // go before the "Clear Workspace" button.
  67. toolbarButtonConfig: []
  68. };
  69. document.addEventListener('DOMContentLoaded', function() {
  70. ng.platform.browser.bootstrap(blocklyApp.AppView);
  71. });
  72. </script>
  73. <xml id="blockly-toolbox-xml" style="display: none">
  74. <category name="Logic" colour="210">
  75. <block type="controls_if"></block>
  76. <block type="logic_compare"></block>
  77. <block type="logic_operation"></block>
  78. <block type="logic_negate"></block>
  79. <block type="logic_boolean"></block>
  80. <block type="logic_ternary"></block>
  81. </category>
  82. <category name="Loops" colour="120">
  83. <block type="controls_repeat_ext">
  84. <value name="TIMES">
  85. <block type="math_number">
  86. <field name="NUM">10</field>
  87. </block>
  88. </value>
  89. </block>
  90. <block type="controls_whileUntil"></block>
  91. <block type="controls_for">
  92. <value name="FROM">
  93. <block type="math_number">
  94. <field name="NUM">1</field>
  95. </block>
  96. </value>
  97. <value name="TO">
  98. <block type="math_number">
  99. <field name="NUM">10</field>
  100. </block>
  101. </value>
  102. <value name="BY">
  103. <block type="math_number">
  104. <field name="NUM">1</field>
  105. </block>
  106. </value>
  107. </block>
  108. <block type="controls_forEach"></block>
  109. <block type="controls_flow_statements"></block>
  110. </category>
  111. <category name="Math" colour="230">
  112. <block type="math_number" gap="32"></block>
  113. <block type="math_arithmetic">
  114. <value name="A">
  115. <block type="math_number">
  116. <field name="NUM">1</field>
  117. </block>
  118. </value>
  119. <value name="B">
  120. <block type="math_number">
  121. <field name="NUM">1</field>
  122. </block>
  123. </value>
  124. </block>
  125. <block type="math_single">
  126. <value name="NUM">
  127. <block type="math_number">
  128. <field name="NUM">9</field>
  129. </block>
  130. </value>
  131. </block>
  132. <block type="math_trig">
  133. <value name="NUM">
  134. <block type="math_number">
  135. <field name="NUM">45</field>
  136. </block>
  137. </value>
  138. </block>
  139. <block type="math_constant"></block>
  140. <block type="math_number_property">
  141. <value name="NUMBER_TO_CHECK">
  142. <block type="math_number">
  143. <field name="NUM">0</field>
  144. </block>
  145. </value>
  146. </block>
  147. <block type="math_change">
  148. <value name="DELTA">
  149. <block type="math_number">
  150. <field name="NUM">1</field>
  151. </block>
  152. </value>
  153. </block>
  154. <block type="math_round">
  155. <value name="NUM">
  156. <block type="math_number">
  157. <field name="NUM">3.1</field>
  158. </block>
  159. </value>
  160. </block>
  161. <block type="math_on_list"></block>
  162. <block type="math_modulo">
  163. <value name="DIVIDEND">
  164. <block type="math_number">
  165. <field name="NUM">64</field>
  166. </block>
  167. </value>
  168. <value name="DIVISOR">
  169. <block type="math_number">
  170. <field name="NUM">10</field>
  171. </block>
  172. </value>
  173. </block>
  174. <block type="math_constrain">
  175. <value name="VALUE">
  176. <block type="math_number">
  177. <field name="NUM">50</field>
  178. </block>
  179. </value>
  180. <value name="LOW">
  181. <block type="math_number">
  182. <field name="NUM">1</field>
  183. </block>
  184. </value>
  185. <value name="HIGH">
  186. <block type="math_number">
  187. <field name="NUM">100</field>
  188. </block>
  189. </value>
  190. </block>
  191. <block type="math_random_int">
  192. <value name="FROM">
  193. <block type="math_number">
  194. <field name="NUM">1</field>
  195. </block>
  196. </value>
  197. <value name="TO">
  198. <block type="math_number">
  199. <field name="NUM">100</field>
  200. </block>
  201. </value>
  202. </block>
  203. <block type="math_random_float"></block>
  204. </category>
  205. <category name="Text" colour="160">
  206. <block type="text"></block>
  207. <block type="text_join"></block>
  208. <block type="text_append">
  209. <value name="TEXT">
  210. <block type="text"></block>
  211. </value>
  212. </block>
  213. <block type="text_length">
  214. <value name="VALUE">
  215. <block type="text">
  216. <field name="TEXT">abc</field>
  217. </block>
  218. </value>
  219. </block>
  220. <block type="text_isEmpty">
  221. <value name="VALUE">
  222. <block type="text">
  223. <field name="TEXT"></field>
  224. </block>
  225. </value>
  226. </block>
  227. <block type="text_indexOf">
  228. <value name="VALUE">
  229. <block type="variables_get">
  230. <field name="VAR">text</field>
  231. </block>
  232. </value>
  233. <value name="FIND">
  234. <block type="text">
  235. <field name="TEXT">abc</field>
  236. </block>
  237. </value>
  238. </block>
  239. <block type="text_charAt">
  240. <value name="VALUE">
  241. <block type="variables_get">
  242. <field name="VAR">text</field>
  243. </block>
  244. </value>
  245. </block>
  246. <block type="text_getSubstring">
  247. <value name="STRING">
  248. <block type="variables_get">
  249. <field name="VAR">text</field>
  250. </block>
  251. </value>
  252. </block>
  253. <block type="text_changeCase">
  254. <value name="TEXT">
  255. <block type="text">
  256. <field name="TEXT">abc</field>
  257. </block>
  258. </value>
  259. </block>
  260. <block type="text_trim">
  261. <value name="TEXT">
  262. <block type="text">
  263. <field name="TEXT">abc</field>
  264. </block>
  265. </value>
  266. </block>
  267. <block type="text_print">
  268. <value name="TEXT">
  269. <block type="text">
  270. <field name="TEXT">abc</field>
  271. </block>
  272. </value>
  273. </block>
  274. <block type="text_prompt_ext">
  275. <value name="TEXT">
  276. <block type="text">
  277. <field name="TEXT">abc</field>
  278. </block>
  279. </value>
  280. </block>
  281. </category>
  282. <category name="Lists" colour="260">
  283. <block type="lists_create_with">
  284. <mutation items="0"></mutation>
  285. </block>
  286. <block type="lists_create_with"></block>
  287. <block type="lists_repeat">
  288. <value name="NUM">
  289. <block type="math_number">
  290. <field name="NUM">5</field>
  291. </block>
  292. </value>
  293. </block>
  294. <block type="lists_length"></block>
  295. <block type="lists_isEmpty"></block>
  296. <block type="lists_indexOf">
  297. <value name="VALUE">
  298. <block type="variables_get">
  299. <field name="VAR">list</field>
  300. </block>
  301. </value>
  302. </block>
  303. <block type="lists_getIndex">
  304. <value name="VALUE">
  305. <block type="variables_get">
  306. <field name="VAR">list</field>
  307. </block>
  308. </value>
  309. </block>
  310. <block type="lists_setIndex">
  311. <value name="LIST">
  312. <block type="variables_get">
  313. <field name="VAR">list</field>
  314. </block>
  315. </value>
  316. </block>
  317. <block type="lists_getSublist">
  318. <value name="LIST">
  319. <block type="variables_get">
  320. <field name="VAR">list</field>
  321. </block>
  322. </value>
  323. </block>
  324. <block type="lists_split">
  325. <value name="DELIM">
  326. <block type="text">
  327. <field name="TEXT">,</field>
  328. </block>
  329. </value>
  330. </block>
  331. </category>
  332. </xml>
  333. </body>
  334. </html>