Blockly Example of Multiple Workspaces

Question

I'm attempting to create a platform that allows students to play code challenges head-to-head using blockly. I'm imagining something like:

The documentation mentions "Multiple workspaces" with block factory, but I feel like I might be reinventing the wheel here, so before I get started, does something like this already exist? Ideally, hooked up to app engine so students could grab code from any other student and test to see how their code compares?

score 1 · Accepted Answer · answered Oct 17 '17 at 22:32

Yes, it exists! We use this in the Developer Tools to give both an editor and the preview. Two demos to look at are the Multi-Playground (src) and the Mirrored Workspaces (src).

You'll notice in the multi-playground, we just call Blockly.inject(..) on each div:

function start() {
  // ...
  startBlocklyInstance('VertStartLTR', false, false, 'start', toolbox);
  startBlocklyInstance('VertStartRTL', true, false, 'start', toolbox);
  startBlocklyInstance('VertEndLTR', false, false, 'end', toolbox);
  startBlocklyInstance('VertEndRTL', true, false, 'end', toolbox);
  startBlocklyInstance('HorizontalStartLTR', false, true, 'start', toolbox);
  startBlocklyInstance('HorizontalStartRTL', true, true, 'start', toolbox);
  startBlocklyInstance('HorizontalEndLTR', false, true, 'end', toolbox);
  startBlocklyInstance('HorizontalEndRTL', true, true, 'end', toolbox);
}

function startBlocklyInstance(suffix, rtl, horizontalLayout, position,
    toolbox) {
  options.rtl = rtl;
  options.toolbox = toolbox;
  options.horizontalLayout = horizontalLayout;
  options.toolboxPosition = position;
  Blockly.inject('blocklyDiv' + suffix, options);
}

Blockly Example of Multiple Workspaces

1 Answers1