diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/MultipleChoiceSingleContainerComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/MultipleChoiceSingleContainerComponent.js new file mode 100644 index 0000000000000000000000000000000000000000..3a50fea2f5c170c16eed5cc242758c9019d14539 --- /dev/null +++ b/wax-questions-service/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/MultipleChoiceSingleContainerComponent.js @@ -0,0 +1,104 @@ +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; +}; diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/components/MultipleChoiceContainerComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/components/MultipleChoiceContainerComponent.js index f2c35eaeef41abcf71a2c3f9c1f1afdd4d2021ab..ab547475057e888aafea66f7a6d4d441bf706da6 100644 --- a/wax-questions-service/src/MultipleChoiceQuestionService/components/MultipleChoiceContainerComponent.js +++ b/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; `; diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/multipleQuestionStyles.css b/wax-questions-service/src/MultipleChoiceQuestionService/multipleQuestionStyles.css index f35d630133fada470ad4809d2d207459caf3ac0c..4fa9fb66638c89a58d6c379817464cf494eb3b2c 100644 --- a/wax-questions-service/src/MultipleChoiceQuestionService/multipleQuestionStyles.css +++ b/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;