Google Blockly?

11

I was able to (although kind of poorly) workaround the variable issue by providing my own version of window.prompt, which reads the text content from a text input living in an Observable cell. So things like variable creation and renaming should work. You just need to make sure you have put whatever variable name you want into that input box before you’re going to click on Create variable... or Rename variable... in Blockly.

I think the challenging part is that you almost cannot have a synchronous way to prompt the user for some input. Please let me know if you have better ideas!

I also had a similar workaround for window.alert, so the print() block (which by default generates window.alert) can work.

BTW, here is my workaround code 
{
  const shim = html`
<style>
  .box { box-shadow: 5px 5px 10px #888888; border: 1px solid gray; padding: 20px; margin-top: 20px }
  .caption { border-bottom: 1px solid gray; font-size: 20px; font-weight: bolder; margin-bottom: 10px }
  .title { border-bottom: 1px solid gray; font-size: 18px; font-weight: bolder }
</style>
<div />
`;

  const caption = 'Observable Shim for Blockly';

  const promptBox = html`<div class="box"><div class="caption">${caption}</div>Input value for Blockly's <b>window.prompt</b>: </div>`;
  const input = html`<input type=text />`;
  promptBox.appendChild(input);
  shim.appendChild(promptBox);

  window.alert = (message) => {
    const alertBox = html`<div class="box"><div class="caption">${caption}</div><div><div>Alert from Blockly: <b>${message}</b></div><br /></div>`;
    const okButton = html`<button>Ok</button>`;
    okButton.onclick = () => {
      shim.removeChild(alertBox);
    };
    alertBox.appendChild(okButton);
    shim.appendChild(alertBox);
  };

  window.prompt = (caption, defaultText) => {
    return input.value;
  };

  return shim;
}

And here is my notebook (forked from @mootari’s original Hello Blockly notebook):

Besides the above workarounds, I also added the functionalities to run the generated code and import/export blocks (via Blockly XML).

BTW, how can I insert a link of an Observable notebook here with the nice little thumbnail, like what you guys did in this thread? Thank you!

1 Like