diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
index 96a890fe077ad0c53cfe07e2f4f7d7315ecab39e..60245232850ce6971f63518aa056c1db18d29331 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
@@ -16,6 +16,7 @@ const checkifEmpty = view => {
 };
 
 const createQuestion = (state, dispatch, tr) => {
+  console.log(state.selection);
   const { empty, $from, $to } = state.selection;
   let content = Fragment.empty;
   if (!empty && $from.sameParent($to) && $from.parent.inlineContent)
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
index 651acb0b01d18c16844cbc75df7dcf4a0081add2..f16d47f0c17edca41fbed7441f5d80931834ea1b 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import { TextSelection } from 'prosemirror-state';
 import { WaxContext } from 'wax-prosemirror-core';
 import { PlusSquareOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Fragment } from 'prosemirror-model';
+import { v4 as uuidv4 } from 'uuid';
 
 import EditorComponent from './EditorComponent';
 import FeedbackComponent from './FeedbackComponent';
@@ -81,19 +83,18 @@ export default ({ node, view, getPos }) => {
     view: { main },
   } = context;
 
-  const [showExplanation, setShowExplanation] = useState(false);
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
   const [feadBack, setFeedBack] = useState('');
 
   const feedBackRef = useRef(null);
 
-  const onChangeExplanationInput = () => {
+  const feedBackInput = () => {
     setFeedBack(feedBackRef.current.value);
   };
 
-  const clickMe = () => {
-    setShowExplanation(!showExplanation);
-  };
-
   const handleKeyDown = e => {
     if (e.key === 'Backspace') {
       context.view.main.dispatch(
@@ -114,14 +115,12 @@ export default ({ node, view, getPos }) => {
     });
   };
 
-  const setNoYesValues = () => {};
-
-  const addOption = () => {};
+  const addOption = () => {
+    console.log(node);
+  };
 
   const questionNumber = 1;
-  const questionText = '';
-  const readOnly = false;
-  const feedBackInput = '';
+  const readOnly = isEditable;
   const showAddIcon = true;
   const showRemoveIcon = true;
 
@@ -140,6 +139,7 @@ export default ({ node, view, getPos }) => {
           <FeedBack>
             <FeedBackLabel>Feedback</FeedBackLabel>
             <FeedBackInput
+              onKeyDown={handleKeyDown}
               onChange={feedBackInput}
               placeholder="Insert feedback"
               ref={feedBackRef}
@@ -166,29 +166,5 @@ export default ({ node, view, getPos }) => {
         </IconsWrapper>
       </QuestionControlsWrapper>
     </Wrapper>
-
-    // <QuestionWrapper>
-    //   <CorrectLabel>Correct?</CorrectLabel>
-    //   <QuestionWrapperInner>
-    //     <Question>
-    //       <EditorComponent node={node} view={view} getPos={getPos} />
-    //       <ChooseAnswer>
-    //         <SwitchComponent />
-    //       </ChooseAnswer>
-    //     </Question>
-    //     <button onClick={clickMe}>Show Explanation</button>
-    //     {showExplanation && (
-    //       <input
-    //         type="text"
-    //         onKeyDown={handleKeyDown}
-    //         ref={explanationRef}
-    //         onChange={onChangeExplanationInput}
-    //         placeholder="type your explanation"
-    //         value={explanationValue}
-    //       ></input>
-    //     )}
-    //     <button onClick={removeOption}> X </button>
-    //   </QuestionWrapperInner>
-    // </QuestionWrapper>
   );
 };