mirror of
https://github.com/google/blockly.git
synced 2026-01-08 17:40:09 +01:00
5c541c6f99
Using 123 as a better indicator to the user this block can represent any number, and the user should replace this value with their own desired number.
332 lines
9.4 KiB
HTML
332 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Accessible Blockly Demo</title>
|
|
|
|
<script src="../../accessible/libs/es6-shim.min.js"></script>
|
|
<script src="../../accessible/libs/angular2-polyfills.min.js"></script>
|
|
<script src="../../accessible/libs/Rx.umd.min.js"></script>
|
|
<script src="../../accessible/libs/angular2-all.umd.min.js"></script>
|
|
|
|
<!-- Load accessibleBlockly -->
|
|
<script src="../../blockly_accessible_compressed.js"></script>
|
|
|
|
<!-- Load Blockly -->
|
|
<script src="../../msg/js/en.js"></script>
|
|
<script src="../../accessible/messages.js"></script>
|
|
<script src="../../blocks_compressed.js"></script>
|
|
|
|
<link rel="stylesheet" href="../../accessible/media/accessible.css">
|
|
<style>
|
|
body {
|
|
background-color: #fff;
|
|
font-family: sans-serif;
|
|
margin-left: 30px;
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 140%;
|
|
}
|
|
|
|
*:focus {
|
|
background: yellow;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>
|
|
<a href="https://developers.google.com/blockly/">Blockly</a> >
|
|
<a href="../index.html">Demos</a> > Accessible Blockly
|
|
</h1>
|
|
|
|
<p>
|
|
This is a demo of a version of Blockly designed for screen readers,
|
|
optimized for NVDA on Firefox. It allows users to create programs in a
|
|
workspace by manipulating groups of blocks.
|
|
<ul>
|
|
<li>To explore a group of blocks, use the arrow keys.</li>
|
|
<li>To navigate between groups, use Tab or Shift-Tab.</li>
|
|
<li>To add new blocks, use the buttons in the menu on the right.</li>
|
|
<li>To delete or add links to existing blocks, press Enter while you're on that block.</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<!--
|
|
<p>→ More info on <a href="https://developers.google.com/blockly/">accessible Blockly</a>…</p>
|
|
-->
|
|
|
|
<blockly-app></blockly-app>
|
|
|
|
<script>
|
|
var ACCESSIBLE_GLOBALS = {
|
|
// Prefix of path to sound files.
|
|
mediaPathPrefix: '../../accessible/media/',
|
|
// Additional buttons for the sidebar.
|
|
customSidebarButtons: []
|
|
};
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
ng.platform.browser.bootstrap(blocklyApp.AppComponent);
|
|
});
|
|
</script>
|
|
|
|
<xml id="blockly-toolbox-xml" style="display: none">
|
|
<category name="Logic" colour="210">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
<block type="logic_operation"></block>
|
|
<block type="logic_negate"></block>
|
|
<block type="logic_boolean"></block>
|
|
<block type="logic_ternary"></block>
|
|
</category>
|
|
<category name="Loops" colour="120">
|
|
<block type="controls_repeat_ext">
|
|
<value name="TIMES">
|
|
<block type="math_number">
|
|
<field name="NUM">10</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="controls_whileUntil"></block>
|
|
<block type="controls_for">
|
|
<value name="FROM">
|
|
<block type="math_number">
|
|
<field name="NUM">1</field>
|
|
</block>
|
|
</value>
|
|
<value name="TO">
|
|
<block type="math_number">
|
|
<field name="NUM">10</field>
|
|
</block>
|
|
</value>
|
|
<value name="BY">
|
|
<block type="math_number">
|
|
<field name="NUM">1</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="controls_forEach"></block>
|
|
<block type="controls_flow_statements"></block>
|
|
</category>
|
|
<category name="Math" colour="230">
|
|
<block type="math_number" gap="32">
|
|
<field name="NUM">123</field>
|
|
</block>
|
|
<block type="math_arithmetic">
|
|
<value name="A">
|
|
<block type="math_number">
|
|
<field name="NUM">1</field>
|
|
</block>
|
|
</value>
|
|
<value name="B">
|
|
<block type="math_number">
|
|
<field name="NUM">1</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="math_single">
|
|
<value name="NUM">
|
|
<block type="math_number">
|
|
<field name="NUM">9</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="math_trig">
|
|
<value name="NUM">
|
|
<block type="math_number">
|
|
<field name="NUM">45</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="math_constant"></block>
|
|
<block type="math_number_property">
|
|
<value name="NUMBER_TO_CHECK">
|
|
<block type="math_number">
|
|
<field name="NUM">0</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="math_round">
|
|
<value name="NUM">
|
|
<block type="math_number">
|
|
<field name="NUM">3.1</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="math_on_list"></block>
|
|
<block type="math_modulo">
|
|
<value name="DIVIDEND">
|
|
<block type="math_number">
|
|
<field name="NUM">64</field>
|
|
</block>
|
|
</value>
|
|
<value name="DIVISOR">
|
|
<block type="math_number">
|
|
<field name="NUM">10</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="math_constrain">
|
|
<value name="VALUE">
|
|
<block type="math_number">
|
|
<field name="NUM">50</field>
|
|
</block>
|
|
</value>
|
|
<value name="LOW">
|
|
<block type="math_number">
|
|
<field name="NUM">1</field>
|
|
</block>
|
|
</value>
|
|
<value name="HIGH">
|
|
<block type="math_number">
|
|
<field name="NUM">100</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="math_random_int">
|
|
<value name="FROM">
|
|
<block type="math_number">
|
|
<field name="NUM">1</field>
|
|
</block>
|
|
</value>
|
|
<value name="TO">
|
|
<block type="math_number">
|
|
<field name="NUM">100</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="math_random_float"></block>
|
|
</category>
|
|
<category name="Text" colour="160">
|
|
<block type="text"></block>
|
|
<block type="text_join"></block>
|
|
<block type="text_append">
|
|
<value name="TEXT">
|
|
<block type="text"></block>
|
|
</value>
|
|
</block>
|
|
<block type="text_length">
|
|
<value name="VALUE">
|
|
<block type="text">
|
|
<field name="TEXT">abc</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_isEmpty">
|
|
<value name="VALUE">
|
|
<block type="text">
|
|
<field name="TEXT"></field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_indexOf">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">text</field>
|
|
</block>
|
|
</value>
|
|
<value name="FIND">
|
|
<block type="text">
|
|
<field name="TEXT">abc</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_charAt">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">text</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_getSubstring">
|
|
<value name="STRING">
|
|
<block type="variables_get">
|
|
<field name="VAR">text</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_changeCase">
|
|
<value name="TEXT">
|
|
<block type="text">
|
|
<field name="TEXT">abc</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_trim">
|
|
<value name="TEXT">
|
|
<block type="text">
|
|
<field name="TEXT">abc</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_print">
|
|
<value name="TEXT">
|
|
<block type="text">
|
|
<field name="TEXT">abc</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_prompt_ext">
|
|
<value name="TEXT">
|
|
<block type="text">
|
|
<field name="TEXT">abc</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
<category name="Lists" colour="260">
|
|
<block type="lists_create_with">
|
|
<mutation items="0"></mutation>
|
|
</block>
|
|
<block type="lists_create_with"></block>
|
|
<block type="lists_repeat">
|
|
<value name="NUM">
|
|
<block type="math_number">
|
|
<field name="NUM">5</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_length"></block>
|
|
<block type="lists_isEmpty"></block>
|
|
<block type="lists_indexOf">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_getIndex">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_setIndex">
|
|
<value name="LIST">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_getSublist">
|
|
<value name="LIST">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_split">
|
|
<value name="DELIM">
|
|
<block type="text">
|
|
<field name="TEXT">,</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
<category name="Variables" colour="330" custom="VARIABLE"></category>
|
|
</xml>
|
|
|
|
</body>
|
|
</html>
|