diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index abd0628fb70695fdd171c22a2956784070ef3345..d19991a2ed8613a7f85ed0fed95a7dc6ef294736 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -70,7 +70,7 @@ const Editors = () => {
       case 'ncbi':
         return <NCBI />;
       default:
-        return <Editoria />;
+        return <HHMI />;
     }
   };
 
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 09c338aa8b24e039827db5350327ba3330ae5cec..7e8606366978019dcdd6d1dcd4ee2350864cd8f8 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -68,7 +68,7 @@ const Hhmi = () => {
         value={t}
         readonly={readOnly}
         layout={HhmiLayout}
-        onChange={source => console.log(source)}
+        // onChange={source => console.log(source)}
       />
     </>
   );
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapContainerNodeView.js b/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapContainerNodeView.js
new file mode 100644
index 0000000000000000000000000000000000000000..dec3f753bdf9c2a074293d884f0e4692fbfeffe7
--- /dev/null
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapContainerNodeView.js
@@ -0,0 +1,63 @@
+import AbstractNodeView from '../PortalService/AbstractNodeView';
+
+export default class FillTheGapContainerNodeView extends AbstractNodeView {
+  constructor(
+    node,
+    view,
+    getPos,
+    decorations,
+    createPortal,
+    Component,
+    context,
+  ) {
+    super(node, view, getPos, decorations, createPortal, Component, context);
+
+    this.node = node;
+    this.outerView = view;
+    this.getPos = getPos;
+    this.context = context;
+  }
+
+  static name() {
+    return 'fill_the_gap_container';
+  }
+
+  update(node) {
+    this.node = node;
+    if (this.context.view[node.attrs.id]) {
+      const { state } = this.context.view[node.attrs.id];
+      const start = node.content.findDiffStart(state.doc.content);
+      if (start != null) {
+        let { a: endA, b: endB } = node.content.findDiffEnd(state.doc.content);
+        const overlap = start - Math.min(endA, endB);
+        if (overlap > 0) {
+          endA += overlap;
+          endB += overlap;
+        }
+        this.context.view[node.attrs.id].dispatch(
+          state.tr
+            .replace(start, endB, node.slice(start, endA))
+            .setMeta('fromOutside', true),
+        );
+      }
+    }
+
+    return true;
+  }
+
+  selectNode() {
+    this.context.view[this.node.attrs.id].focus();
+  }
+
+  stopEvent(event) {
+    return (
+      this.context.view[this.node.attrs.id] !== undefined &&
+      event.target !== undefined &&
+      this.context.view[this.node.attrs.id].dom.contains(event.target)
+    );
+  }
+
+  ignoreMutation() {
+    return true;
+  }
+}
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapNodeView.js b/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapNodeView.js
index 59b626c9ee42bb8793e788f28f9e2a0198308178..701c2cf6c6b24688f1d56ce32fcd59f827e298b3 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapNodeView.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapNodeView.js
@@ -1,6 +1,6 @@
 import AbstractNodeView from '../PortalService/AbstractNodeView';
 
-export default class MultipleChoiceNodeView extends AbstractNodeView {
+export default class FillTheGapNodeView extends AbstractNodeView {
   constructor(
     node,
     view,
@@ -23,7 +23,6 @@ export default class MultipleChoiceNodeView extends AbstractNodeView {
   }
 
   update(node) {
-    // if (!node.sameMarkup(this.node)) return false;
     this.node = node;
     if (this.context.view[node.attrs.id]) {
       const { state } = this.context.view[node.attrs.id];
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapQuestionService.js b/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapQuestionService.js
index 81726572c493dabadd777268ee86f06d4ecac43d..28c8b6c31be721a5b6de2237cf9a51dbd4f3e03c 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapQuestionService.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapQuestionService.js
@@ -3,7 +3,9 @@ import FillTheGapQuestion from './FillTheGapQuestion';
 import fillTheGapContainerNode from './schema/fillTheGapContainerNode';
 import fillTheGapNode from './schema/fillTheGapNode';
 import CreateGapService from './CreateGapService/CreateGapService';
+import FillTheGapContainerNodeView from './FillTheGapContainerNodeView';
 import FillTheGapNodeView from './FillTheGapNodeView';
+import FillTheGapContainerComponent from './components/FillTheGapContainerComponent';
 import GapComponent from './components/GapComponent';
 import './fillTheGap.css';
 
@@ -21,6 +23,12 @@ class FillTheGapQuestionService extends Service {
       fill_the_gap: fillTheGapNode,
     });
 
+    addPortal({
+      nodeView: FillTheGapContainerNodeView,
+      component: FillTheGapContainerComponent,
+      context: this.app,
+    });
+
     addPortal({
       nodeView: FillTheGapNodeView,
       component: GapComponent,
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd78988749e1109bb47b41592885ae4d098277b0
--- /dev/null
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
@@ -0,0 +1,12 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import EditorComponent from './EditorComponent';
+
+export default ({ node, view, getPos }) => {
+  return (
+    <>
+      <EditorComponent getPos={getPos} node={node} view={view} />
+      <div>feedback</div>
+    </>
+  );
+};
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/schema/fillTheGapContainerNode.js b/wax-prosemirror-services/src/FillTheGapQuestionService/schema/fillTheGapContainerNode.js
index 129fb2856ea97200faa6538b04fbdadd3f6ba96e..8d4ad8c2d94062fe214899b35f9c69c6be3833f7 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/schema/fillTheGapContainerNode.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/schema/fillTheGapContainerNode.js
@@ -1,6 +1,8 @@
+import { v4 as uuidv4 } from 'uuid';
+
 const fillTheGapContainerNode = {
   attrs: {
-    id: { default: '' },
+    id: { default: uuidv4() },
     class: { default: 'fill-the-gap' },
   },
   group: 'block questions',
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/schema/multipleChoiceContainerNode.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/schema/multipleChoiceContainerNode.js
index 387bb6298bd8b81cc3feb4ac32441ccc2e9a1e4d..c2199029b959a0941c1964ab970c233767652b24 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/schema/multipleChoiceContainerNode.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/schema/multipleChoiceContainerNode.js
@@ -1,6 +1,8 @@
+import { v4 as uuidv4 } from 'uuid';
+
 const multipleChoiceContainerNode = {
   attrs: {
-    id: { default: '' },
+    id: { default: uuidv4() },
     class: { default: 'multiple-choice' },
   },
   group: 'block questions',