How to make multiple blockly blocks working in a single page

265 views
Skip to first unread message

AADYAA SRIVASTAva

unread,
Jul 31, 2021, 6:08:09 AM7/31/21
to Blockly
Hello,
I have recently started learning blockly and started doing  a project to test my learning. So pls help me with this.
 
here I have coded 2 blocks but only one is working the"bot " block.
output .png
For above out put here us the code.
1)INDEX .Html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title Assignment</title>
  <script src="blockly_compressed.js"></script>
  <script src="blocks_compressed.js"></script>
  <script src="javascript_compressed.js"></script>
  <script src="jquery-3.5.1.min.js"></script>
  <script src="msg-en.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <h1>Code with BLOCKS</h1>
  
  <div id="blocklyDiv"></div>
  <div class="game">
    <div>
      <div id="inputBox" class="text-input"></div>
      <div class="button-container">
        <button id="runBtn" class="button primary"><span>Run</span></button>
        <button id="resetBtn" class="button secondary" onclick="Reset()"><span>Reset</span></button>
      </div>
    </div>
  </div>

  <!-- 
    Resource for tool to create custom blocks:
  -->

  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <block type="example_input_text"></block>
  </xml>
<script>
  function Reset (){
    location.reload();
  }
</script>
  <script src="blocks.js"></script>
  <script src="https://unpkg.com/blockly/blockly.min.js"></script>
</body>

</html>

2)Js file
$(document).ready(function () {
  $("#runBtn").click(function () {
    runcode();
  });
  $("#resetBtn").click(function () {
    reset();
  });
});


/*Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
  }
};*/

Blockly.Blocks['example_input_text'] = {
  init: function () {
    this.appendDummyInput()
      .appendField("Bot:")
    this.setNextStatement(true, null);
    this.setColour(250);
    this.setTooltip("");
    this.setHelpUrl("");
  }, 
};

Blockly.JavaScript["example_input_text"] 
init = function (block) {
  var text_input = block.getFieldValue("input");

  var code = `
  var inputTextValue = "${text_input}";
  `;
  return code;
};

var workspace = Blockly.inject("blocklyDiv", {
  media: "media/",
  toolbox: document.getElementById("toolbox"),
});

function redrawUi() {
  if (typeof inputTextValue !== "undefined") {
    $("#inputBox").text(inputTextValue);
  } else {
    $("#inputBox").text("");
  }
}


Blockly.Blocks["example_input_text"] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck(null)
        .appendField("Ask me a  question?")
        .appendField(new Blockly.FieldDropdown([[" What is the date today?","Item 1"], ["What is the time now?","Item 2"], [" How are you?","Item 3"], [" What is JavaScript?","Item 4"], ["What is your name?","Item 5"], ["Ask me a question ","Item 6"]]), "");
        this.setPreviousStatement(true, null);
        this.setColour(270);
     this.setTooltip("");
     this.setHelpUrl("");
      }
    };

Blockly.JavaScript["example_input_text"] = function (block) {
  var text_input = block.getInputTargetBlock('dropdown_text');
  if (featureName) {
    console.log(featureName.getFieldValue("TEXT"));
  }
const featurePrio = element.getInputTargetBlock("dropdown_text");
  if (featurePrio) {
    console.log(featurePrio.getFieldValue("NUM"));
  }


  var code = `
  var inputTextValue = "${text_input}";
  `;
  return code;
};

var workspace = Blockly.inject("blocklyDiv", {
  media: "media",
  toolbox: document.getElementById("toolbox"),
});

function redrawUi() {
  if (typeof inputTextValue !== "undefined") {
    $("#inputBox").text(inputTextValue);
  } else {
    $("#inputBox").text("");
  }
}




function runcode() {
  // Generate JavaScript code and run it.
  var geval = eval;
  try {
    geval(Blockly.JavaScript.workspaceToCode(workspace));
  } catch (e) {
    console.error(e);
  }
  redrawUi();
}

function reset() {
  delete inputTextValue;
  redrawUi();
}


Here is what i aim to get...but im not able to.
desired output.png

desired output2.png


Neil Fraser

unread,
Aug 3, 2021, 5:42:05 AM8/3/21
to Blockly
Both your blocks have the same name:
Blockly.Blocks['example_input_text']

Furthermore, the toolbox XML only specifies one block:
<block type="example_input_text"></block>

Hope this helps.

AADYAA SRIVASTAva

unread,
Aug 3, 2021, 8:48:06 AM8/3/21
to Blockly
Hello 
 I tried that XML part and  changing name but nothing changed .It isn't working properly.

Neil Fraser

unread,
Aug 4, 2021, 2:47:45 PM8/4/21
to Blockly
Can you host your application somewhere that we can look at it?  It would help the debugging process.

Also, are there any errors in your browser's console?
Reply all
Reply to author
Forward
0 new messages