diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 5d85c3ceda1fbbf509889e8b80cc236244438398..8f01580d937ff1d1bda030af87af02379523f478 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -22,7 +22,7 @@ const SubmitButton = styled.button`
   top: 16px;
 `;
 
-const t = `<p class="paragraph"></p><div id="" class="multiple-choice"><div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32"><p class="paragraph">question </p></div><div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" correctanswer="false" feedback="feedback 1"><p class="paragraph">answer 1</p></div><div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" correctanswer="false" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div>`;
+const t = `<p class="paragraph"></p><div id="" class="multiple-choice"><div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32"><p class="paragraph">question </p></div><div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1"><p class="paragraph">answer 1</p></div><div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="false" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div>`;
 
 const Hhmi = () => {
   const [submited, isSubmited] = useState(false);
@@ -39,9 +39,9 @@ const Hhmi = () => {
         customValues={{ showFeedBack: submited }}
         fileUpload={file => renderImage(file)}
         value={t}
-        // readonly
+        readonly
         layout={HhmiLayout}
-        onChange={source => console.log(source)}
+        // onChange={source => console.log(source)}
       />
     </>
   );
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
index 157a61c4f7b84e238f163e59aba150f2898a7a33..c013fc7b771ec7db52d68fe79fbdd8f255bbc3e2 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
@@ -76,6 +76,9 @@ export default ({ node, view, getPos }) => {
     view: { main },
   } = context;
 
+  // eslint-disable-next-line react/destructuring-assignment
+  const customProps = context.view.main.props.customValues;
+
   const isEditable = main.props.editable(editable => {
     return editable;
   });
@@ -176,7 +179,9 @@ export default ({ node, view, getPos }) => {
           <QuestionData>
             <EditorComponent getPos={getPos} node={node} view={view} />
           </QuestionData>
-          <FeedbackComponent getPos={getPos} node={node} view={view} />
+          {!(readOnly && !customProps.showFeedBack) && (
+            <FeedbackComponent getPos={getPos} node={node} view={view} />
+          )}
         </QuestionWrapper>
       </QuestionControlsWrapper>
       <IconsWrapper>
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
index 24f3e99817b92f445b2a834425c3e34d4ee9e412..fe92035249017cfeb6e6aeb3b66df528acb7eb1a 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
@@ -19,10 +19,16 @@ const StyledSwitch = styled(Switch)`
 const CustomSwitch = ({ node, getPos }) => {
   const context = useContext(WaxContext);
   const [checked, setChecked] = useState(false);
+  const [checkedAnswerMode, setCheckedAnswerMode] = useState(false);
   const {
+    view,
     view: { main },
   } = context;
 
+  const isEditable = view.main.props.editable(editable => {
+    return editable;
+  });
+
   useEffect(() => {
     const allNodes = getNodes(main);
     allNodes.forEach(singNode => {
@@ -34,6 +40,11 @@ const CustomSwitch = ({ node, getPos }) => {
 
   const handleChange = () => {
     setChecked(!checked);
+    setCheckedAnswerMode(!checkedAnswerMode);
+
+    const key = isEditable ? 'correct' : 'answer';
+    const value = isEditable ? !checked : !checkedAnswerMode;
+
     main.dispatch(
       main.state.tr.setSelection(
         NodeSelection.create(main.state.doc, getPos()),
@@ -63,7 +74,7 @@ const CustomSwitch = ({ node, getPos }) => {
       ) {
         tr.setNodeMarkup(getPos(), undefined, {
           ...element.attrs,
-          correct: !checked,
+          [key]: value,
         });
       } else if (
         element.type.name === 'multiple_choice_single_correct' &&
@@ -71,7 +82,7 @@ const CustomSwitch = ({ node, getPos }) => {
       ) {
         tr.setNodeMarkup(parentPosition + position + 1, undefined, {
           ...element.attrs,
-          correct: false,
+          [key]: false,
         });
       }
     });
@@ -81,7 +92,7 @@ const CustomSwitch = ({ node, getPos }) => {
 
   return (
     <StyledSwitch
-      checked={checked}
+      checked={isEditable ? checked : checkedAnswerMode}
       checkedChildren="YES"
       label="Correct?"
       labelPosition="left"
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
index fda49323887bd92fb5d38c27d16780a5c0f2320e..7303a884752de59126663b088a21e960206148d6 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/prop-types */
 import React, { useContext } from 'react';
 import styled from 'styled-components';
@@ -76,6 +77,8 @@ export default ({ node, view, getPos }) => {
     view: { main },
   } = context;
 
+  const customProps = context.view.main.props.customValues;
+
   const isEditable = main.props.editable(editable => {
     return editable;
   });
@@ -176,7 +179,9 @@ export default ({ node, view, getPos }) => {
           <QuestionData>
             <EditorComponent getPos={getPos} node={node} view={view} />
           </QuestionData>
-          <FeedbackComponent getPos={getPos} node={node} view={view} />
+          {!(readOnly && !customProps.showFeedBack) && (
+            <FeedbackComponent getPos={getPos} node={node} view={view} />
+          )}
         </QuestionWrapper>
       </QuestionControlsWrapper>
       <IconsWrapper>
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js
index 8b3de43187bdc8de9c88d78d7440d14955abc689..e30e3475446dc7bc721300eef8602df4f45dba6f 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js
@@ -26,10 +26,17 @@ const StyledSwitch = styled(Switch)`
 const CustomSwitch = ({ node, getPos }) => {
   const context = useContext(WaxContext);
   const [checked, setChecked] = useState(false);
+  const [checkedAnswerMode, setCheckedAnswerMode] = useState(false);
+
   const {
+    view,
     view: { main },
   } = context;
 
+  const isEditable = view.main.props.editable(editable => {
+    return editable;
+  });
+
   useEffect(() => {
     const allNodes = getNodes(main);
     allNodes.forEach(singNode => {
@@ -41,13 +48,17 @@ const CustomSwitch = ({ node, getPos }) => {
 
   const handleChange = () => {
     setChecked(!checked);
+    setCheckedAnswerMode(!checkedAnswerMode);
+    const key = isEditable ? 'correct' : 'answer';
+    const value = isEditable ? !checked : !checkedAnswerMode;
     const allNodes = getNodes(main);
+
     allNodes.forEach(singleNode => {
       if (singleNode.node.attrs.id === node.attrs.id) {
         main.dispatch(
           main.state.tr.setNodeMarkup(getPos(), undefined, {
             ...singleNode.node.attrs,
-            correct: !checked,
+            [key]: value,
           }),
         );
       }
@@ -56,7 +67,7 @@ const CustomSwitch = ({ node, getPos }) => {
 
   return (
     <StyledSwitch
-      checked={checked}
+      checked={isEditable ? checked : checkedAnswerMode}
       checkedChildren="True"
       label="True/false?"
       labelPosition="left"
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
index 37091b159e253a7567eb69b1d7c15d287ba50473..665837da3a54e1e7d2b617015f20a702d5ef183b 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/prop-types */
 import React, { useContext } from 'react';
 import styled from 'styled-components';
@@ -76,6 +77,8 @@ export default ({ node, view, getPos }) => {
     view: { main },
   } = context;
 
+  const customProps = context.view.main.props.customValues;
+
   const isEditable = main.props.editable(editable => {
     return editable;
   });
@@ -176,7 +179,9 @@ export default ({ node, view, getPos }) => {
           <QuestionData>
             <EditorComponent getPos={getPos} node={node} view={view} />
           </QuestionData>
-          <FeedbackComponent getPos={getPos} node={node} view={view} />
+          {!(readOnly && !customProps.showFeedBack) && (
+            <FeedbackComponent getPos={getPos} node={node} view={view} />
+          )}
         </QuestionWrapper>
       </QuestionControlsWrapper>
       <IconsWrapper>
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js
index 91169bd3572dd983e03b03114e259bdaaa3d28a5..4826676bafeb8be8c6439cd3c44ec7996dd0ff38 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js
@@ -19,10 +19,17 @@ const StyledSwitch = styled(Switch)`
 const CustomSwitch = ({ node, getPos }) => {
   const context = useContext(WaxContext);
   const [checked, setChecked] = useState(false);
+  const [checkedAnswerMode, setCheckedAnswerMode] = useState(false);
+
   const {
+    view,
     view: { main },
   } = context;
 
+  const isEditable = view.main.props.editable(editable => {
+    return editable;
+  });
+
   useEffect(() => {
     const allNodes = getNodes(main);
     allNodes.forEach(singNode => {
@@ -34,6 +41,10 @@ const CustomSwitch = ({ node, getPos }) => {
 
   const handleChange = () => {
     setChecked(!checked);
+    setCheckedAnswerMode(!checkedAnswerMode);
+    const key = isEditable ? 'correct' : 'answer';
+    const value = isEditable ? !checked : !checkedAnswerMode;
+
     main.dispatch(
       main.state.tr.setSelection(
         NodeSelection.create(main.state.doc, getPos()),
@@ -63,7 +74,7 @@ const CustomSwitch = ({ node, getPos }) => {
       ) {
         tr.setNodeMarkup(getPos(), undefined, {
           ...element.attrs,
-          correct: !checked,
+          [key]: value,
         });
       } else if (
         element.type.name === 'true_false_single_correct' &&
@@ -71,7 +82,7 @@ const CustomSwitch = ({ node, getPos }) => {
       ) {
         tr.setNodeMarkup(parentPosition + position + 1, undefined, {
           ...element.attrs,
-          correct: false,
+          [key]: false,
         });
       }
     });
@@ -81,7 +92,7 @@ const CustomSwitch = ({ node, getPos }) => {
 
   return (
     <StyledSwitch
-      checked={checked}
+      checked={isEditable ? checked : checkedAnswerMode}
       checkedChildren="True"
       label="True/false?"
       labelPosition="left"
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
index 446f801fba977b7744352fbf109be9797b45a93d..b4f746399e4f0447da87af02d24c1c09e2a95894 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
@@ -48,24 +48,18 @@ const CustomSwitch = ({ node, getPos }) => {
   const handleChange = () => {
     setChecked(!checked);
     setCheckedAnswerMode(!checkedAnswerMode);
+    const key = isEditable ? 'correct' : 'answer';
+    const value = isEditable ? !checked : !checkedAnswerMode;
     const allNodes = getNodes(main);
+
     allNodes.forEach(singleNode => {
       if (singleNode.node.attrs.id === node.attrs.id) {
-        if (isEditable) {
-          main.dispatch(
-            main.state.tr.setNodeMarkup(getPos(), undefined, {
-              ...singleNode.node.attrs,
-              correct: !checked,
-            }),
-          );
-        } else {
-          main.dispatch(
-            main.state.tr.setNodeMarkup(getPos(), undefined, {
-              ...singleNode.node.attrs,
-              answer: !checkedAnswerMode,
-            }),
-          );
-        }
+        main.dispatch(
+          main.state.tr.setNodeMarkup(getPos(), undefined, {
+            ...singleNode.node.attrs,
+            [key]: value,
+          }),
+        );
       }
     });
   };