多个工作区的封闭示例

时间:2017-10-15 23:11:50

标签: blockly

我试图创建一个平台,允许学生使用块状方式面对面地进行代码挑战。我想象的是:

enter image description here

文档提及"多个工作区"与block factory,但我觉得我可能在这里重新发明轮子,所以在我开始之前,这样的事情是否已经存在?理想情况下,连接到应用程序引擎,以便学生可以从任何其他学生那里获取代码并测试他们的代码如何比较?

1 个答案:

答案 0 :(得分:1)

是的,它存在!我们在Developer Tools中使用它来同时提供编辑器和预览。要查看的两个演示是Multi-Playgroundsrc)和Mirrored Workspacessrc)。

您会在多操场上注意到,我们只需在每个div上调用Blockly.inject(..)

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);
}