multiple choice single correct container

wax-questions-service/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/MultipleChoiceSingleContainerComponent.js

+import React, { useContext } from 'react';
+import { WaxContext, DocumentHelpers, Icon } from 'wax-prosemirror-core';
+import styled from 'styled-components';
+import ContainerEditor from '../../../FillTheGapQuestionService/components/ContainerEditor';
+
+const MultipleChoiceQuestionWrapper = styled.div`
+  border: 3px solid #f5f5f7;
+  margin: 0px 38px 15px 38px;
+  margin-top: 10px;
+`;
+const MultipleChoiceContainerTool = styled.div`
+  border-bottom: 3px solid #f5f5f7;
+  height: 32px;
+`;
+
+const ActionButton = styled.button`
+  background: transparent;
+  cursor: pointer;
+  margin-top: 16px;
+  border: none;
+  position: relative;
+  bottom: 14px;
+  left: 6px;
+  float: right;
+`;
+
+const StyledIconActionRemove = styled(Icon)`
+  height: 24px;
+  width: 24px;
+`;
+
+const MultipleChoiceQuestionContainer = styled.div`
+  border: 3px solid #f5f5f7;
+  margin-bottom: 30px;
+`;
+
+export default ({ node, view, getPos }) => {
+  const context = useContext(WaxContext);
+  const {
+    pmViews: { main },
+  } = context;
+
+  const customProps = main.props.customValues;
+  const { testMode } = customProps;
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  const readOnly = !isEditable;
+
+  const removeQuestion = () => {
+    const allNodes = getNodes(context.pmViews.main);
+
+    allNodes.forEach(singleNode => {
+      if (singleNode.node.attrs.id === node.attrs.id) {
+        context.pmViews.main.dispatch(
+          context.pmViews.main.state.tr.delete(
+            singleNode.pos,
+            singleNode.pos + singleNode.node.nodeSize,
+          ),
+        );
+      }
+    });
+  };
+
+  return (
+    <MultipleChoiceQuestionWrapper>
+      <div>
+        {!testMode && !readOnly && (
+          <MultipleChoiceContainerTool>
+            <ActionButton
+              aria-label="delete this question"
+              onClick={removeQuestion}
+              type="button"
+            >
+              <StyledIconActionRemove name="deleteOutlinedQuestion" />
+            </ActionButton>
+          </MultipleChoiceContainerTool>
+        )}
+      </div>
+      <MultipleChoiceQuestionContainer className="multiple-choice">
+        <ContainerEditor
+          disallowedTools={['MultipleChoice']}
+          getPos={getPos}
+          isNotEditable
+          node={node}
+          view={view}
+        />
+      </MultipleChoiceQuestionContainer>
+    </MultipleChoiceQuestionWrapper>
+  );
+};
+
+const getNodes = view => {
+  const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+  const fillTheGapContainerNodes = [];
+  allNodes.forEach(node => {
+    if (node.node.type.name === 'multiple_choice_container') {
+      fillTheGapContainerNodes.push(node);
+    }
+  });
+  return fillTheGapContainerNodes;
+};

wax-questions-service/src/MultipleChoiceQuestionService/components/MultipleChoiceContainerComponent.js

@@ -30,7 +30,7 @@ const StyledIconActionRemove = styled(Icon)`
 `;
 
 const MultipleChoiceQuestionContainer = styled.div`
-  border: 3px solid #f5f5f7;
+  // border: 3px solid #f5f5f7;
   margin-bottom: 30px;
 `;
 

wax-questions-service/src/MultipleChoiceQuestionService/multipleQuestionStyles.css

@@ -4,10 +4,10 @@
 .multiple-choice-single-correct,
 .true-false,
 .true-false-single-correct {
-  border: 3px solid #f5f5f7;
+  /* border: 3px solid #f5f5f7;
+  padding: 20px; */
   counter-reset: question-item-multiple;
-  margin: 38px;
-  padding: 20px;
+  margin: 12px 2px 12px 12px;
   padding-top: 0px;
 }
 
@@ -28,23 +28,6 @@
   padding: 5px 5px 0 5px;
 }
 
-
-/* .multiple-choice:before {
-  content: 'Multiple Choice' ;
-}
-
-.multiple-choice-single-correct:before {
-  content: 'Multiple Choice Single Correct';
- }
-
-.true-false:before {
-  content: 'True False';
-}
-
-.true-false-single-correct:before {
-  content: 'True False Single Correct';
-} */
-
 .rc-switch {
 	 position: relative;
 	 display: inline-block;