Exemple de blocage de plusieurs espaces de travail

Question

Je tente de créer une plate-forme qui permet aux élèves de jouer des défis de code en tête-à-tête à l'aide de blocs. Je me fais quelque chose comme:

La documentation mentionne « plusieurs espaces de travail » avec block factory, mais je me sens comme je pourrais être réinventer la roue ici, donc avant que je commence, fait quelque chose comme cela existe déjà ? Idéalement, connecté au moteur de l'application pour que les élèves puissent saisir le code de n'importe quel autre élève et faire un test pour voir comment leur code se compare?

Answer 1

Oui, ça existe! Nous utilisons cela dans les outils de développement pour donner à la fois un éditeur et l'aperçu. Deux démos à regarder sont les Multi-Playground (src) et les Mirrored Workspaces (src).

Vous remarquerez dans le multi-terrain de jeu, il suffit d'appeler Blockly.inject(..) sur chaque 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); 
}