多个工作区的块示例

Question

我正在尝试创建一个平台，让学生可以使用 blockly 玩代码挑战 head-to-head。我在想象这样的事情：

文档提到 "Multiple workspaces" 和 block factory，但我觉得我可能在这里重新发明轮子，所以在我开始之前，是否已经存在这样的东西？理想情况下，连接到 App Engine，这样学生就可以从任何其他学生那里获取代码并进行测试，看看他们的代码如何比较？

Answer 1

是的，它存在！我们在开发人员工具中使用它来提供编辑器和预览。要查看的两个演示是 Multi-Playground (src) and the Mirrored Workspaces (src).

你会注意到在 multi-playground 中，我们只是在每个 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);
}

多个工作区的块示例

Blockly Example of Multiple Workspaces

blockly