Michael Schimmel
108 lines
6.6 KiB
HTML
108 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Blockly zu Umgangssprache - Mit Schleifen & Zählern</title>
|
|
<style>
|
|
body { font-family: sans-serif; }
|
|
#container { display: flex; }
|
|
#outputArea { margin-left: 20px; }
|
|
#codeOutput { width: 400px; height: 580px; font-size: 14px; white-space: pre-wrap; border: 1px solid #ccc; }
|
|
#blocklyDiv { height: 600px; width: 800px; }
|
|
.button-bar { margin-bottom: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Mein "Umgangssprache"-Generator</h1>
|
|
<p>Bauen Sie links Ihre Blöcke. Rechts erscheint die textliche Beschreibung.</p>
|
|
|
|
<div class="button-bar">
|
|
<button onclick="saveWorkspace()">Speichern</button>
|
|
<button onclick="loadWorkspace()">Letzten Stand laden</button>
|
|
</div>
|
|
|
|
<div id="container">
|
|
<div id="blocklyDiv"></div>
|
|
<div id="outputArea">
|
|
<h2>Erzeugter Text:</h2>
|
|
<textarea id="codeOutput" readonly></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
|
|
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
|
|
<script src="https://unpkg.com/blockly/msg/de.js"></script>
|
|
|
|
<script>
|
|
window.onload = function() {
|
|
|
|
let workspace;
|
|
|
|
// === UNSER UMGANGSSPRACHE-GENERATOR ===
|
|
Blockly.Human = new Blockly.Generator('Human');
|
|
Blockly.Human.ORDER_ATOMIC = 0;
|
|
Blockly.Human.scrub_ = function(block, code, opt_thisOnly) { const nextBlock = block.nextConnection && block.nextConnection.targetBlock(); const nextCode = opt_thisOnly ? '' : Blockly.Human.blockToCode(nextBlock); return code + nextCode; };
|
|
Blockly.Human.prefixLines = function(text, prefix) { return prefix + text.split(/\n(?!$)/).join('\n' + prefix); };
|
|
|
|
// --- Generatoren für die einzelnen Blöcke ---
|
|
Blockly.Human.forBlock['controls_if'] = function(block) { let conditionCode = Blockly.Human.valueToCode(block, 'IF0', Blockly.Human.ORDER_ATOMIC) || 'eine Bedingung erfüllt ist'; let branchCode = Blockly.Human.statementToCode(block, 'DO0') || 'nichts.\n'; let code = `Also, überprüfe, ${conditionCode}.\n`; code += `Wenn das zutrifft, dann mach Folgendes:\n`; code += Blockly.Human.prefixLines(branchCode, ' '); return code; };
|
|
Blockly.Human.forBlock['logic_compare'] = function(block) { const OPERATORS = {'EQ': 'ist gleich', 'NEQ': 'ist nicht gleich', 'LT': 'ist kleiner als', 'LTE': 'ist kleiner oder gleich', 'GT': 'ist größer als', 'GTE': 'ist größer oder gleich'}; const operator = OPERATORS[block.getFieldValue('OP')]; const value_a = Blockly.Human.valueToCode(block, 'A', Blockly.Human.ORDER_ATOMIC) || 'irgendetwas'; const value_b = Blockly.Human.valueToCode(block, 'B', Blockly.Human.ORDER_ATOMIC) || 'irgendetwas anderes'; const code = `ob der Wert von ${value_a} ${operator} als ${value_b}`; return [code, Blockly.Human.ORDER_ATOMIC]; };
|
|
Blockly.Human.forBlock['math_number'] = function(block) { return [String(block.getFieldValue('NUM')), Blockly.Human.ORDER_ATOMIC]; };
|
|
Blockly.Human.forBlock['variables_get'] = function(block) { const varId = block.getFieldValue('VAR'); const variable = block.workspace.getVariableById(varId); const varName = variable ? variable.name : 'unbekannt'; return [`der Variable "${varName}"`, Blockly.Human.ORDER_ATOMIC]; };
|
|
Blockly.Human.forBlock['variables_set'] = function(block) { const varId = block.getFieldValue('VAR'); const variable = block.workspace.getVariableById(varId); const varName = variable ? variable.name : 'unbekannt'; const value = Blockly.Human.valueToCode(block, 'VALUE', Blockly.Human.ORDER_ATOMIC) || 'nichts'; return `Setze die Variable "${varName}" auf den Wert ${value}.\n`; };
|
|
Blockly.Human.forBlock['text_print'] = function(block) { const value = Blockly.Human.valueToCode(block, 'TEXT', Blockly.Human.ORDER_ATOMIC) || '"nichts"'; return `Gib auf dem Bildschirm aus: ${value}\n`; };
|
|
Blockly.Human.forBlock['text'] = function(block) { return [`"${block.getFieldValue('TEXT')}"`, Blockly.Human.ORDER_ATOMIC]; };
|
|
Blockly.Human.forBlock['controls_repeat_ext'] = function(block) { const repeats = Blockly.Human.valueToCode(block, 'TIMES', Blockly.Human.ORDER_ATOMIC) || 'einige Male'; const branch = Blockly.Human.statementToCode(block, 'DO') || 'mache nichts.\n'; let code = `Wiederhole die folgenden Schritte ${repeats} Mal:\n`; code += Blockly.Human.prefixLines(branch, ' '); return code; };
|
|
|
|
// NEU: Generator für den "ändere Variable um"-Block
|
|
Blockly.Human.forBlock['math_change'] = function(block) {
|
|
const varId = block.getFieldValue('VAR');
|
|
const variable = block.workspace.getVariableById(varId);
|
|
const varName = variable ? variable.name : 'unbekannt';
|
|
const delta = Blockly.Human.valueToCode(block, 'DELTA', Blockly.Human.ORDER_ATOMIC) || '0';
|
|
return `Ändere die Variable "${varName}" um den Wert ${delta}.\n`;
|
|
};
|
|
|
|
|
|
// === INITIALISIERUNG VON BLOCKLY ===
|
|
|
|
const toolboxXml = `
|
|
<xml>
|
|
<category name="Logik" colour="%{BKY_LOGIC_HUE}">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
</category>
|
|
<category name="Schleifen" colour="%{BKY_LOOPS_HUE}">
|
|
<block type="controls_repeat_ext">
|
|
<value name="TIMES"><shadow type="math_number"><field name="NUM">10</field></shadow></value>
|
|
</block>
|
|
</category>
|
|
<category name="Text" colour="%{BKY_TEXTS_HUE}">
|
|
<block type="text_print"></block>
|
|
<block type="text"></block>
|
|
</category>
|
|
<category name="Mathematik" colour="%{BKY_MATH_HUE}">
|
|
<block type="math_number"></block>
|
|
<block type="math_change">
|
|
<value name="DELTA"><shadow type="math_number"><field name="NUM">1</field></shadow></value>
|
|
</block>
|
|
</category>
|
|
<category name="Variablen" colour="%{BKY_VARIABLES_HUE}" custom="VARIABLE"></category>
|
|
</xml>`;
|
|
|
|
workspace = Blockly.inject('blocklyDiv', {
|
|
toolbox: toolboxXml
|
|
});
|
|
|
|
// === Funktionen für Speichern und Laden (unverändert) ===
|
|
window.saveWorkspace = function() { const state = Blockly.serialization.workspaces.save(workspace); localStorage.setItem('blocklyWorkspace', JSON.stringify(state)); alert('Arbeitsbereich gespeichert!'); }
|
|
window.loadWorkspace = function() { const stateString = localStorage.getItem('blocklyWorkspace'); if (!stateString) { return; } const state = JSON.parse(stateString); Blockly.serialization.workspaces.load(state, workspace); }
|
|
function updateCode(event) { if (event.type == Blockly.Events.UI) return; const code = Blockly.Human.workspaceToCode(workspace); document.getElementById('codeOutput').value = code; }
|
|
workspace.addChangeListener(updateCode);
|
|
loadWorkspace();
|
|
};
|
|
</script>
|
|
|
|
</body>
|
|
</html> |