blockly - 多个工作区的块状示例

Question

我正在尝试创建一个平台，允许学生使用 blockly 进行面对面的代码挑战。我在想像：

文档提到了带有块工厂的“多个工作区” ，但我觉得我可能在这里重新发明轮子，所以在我开始之前，这样的东西是否已经存在？理想情况下，连接到应用程序引擎，以便学生可以从任何其他学生那里获取代码并测试以查看他们的代码比较如何？

Answer 1

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

你会注意到在 multi-playground 中，我们只调用Blockly.inject(..)每个 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);
}