From 42f15d351b1886259b968ff8726d90d6bca30756 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 17 Jan 2024 11:57:44 +0200
Subject: [PATCH] fix multiple chocie
---
.../components/AnswerComponent.js | 1 +
.../components/AnswerComponent.js | 1 +
.../components/AnswerComponent.js | 1 +
.../components/AnswerComponent.js | 1 +
.../components/EditorComponent.js | 80 +++++++++++++++++--
.../multipleQuestionStyles.css | 2 +-
6 files changed, 79 insertions(+), 7 deletions(-)
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
index e7005a3d1..f6d0ff46a 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
@@ -13,6 +13,7 @@ const Wrapper = styled.div`
display: flex;
flex-direction: row;
width: 100%;
+ padding: 0px 0px 20px 20px;
`;
const InfoRow = styled.div`
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
index 8c7af5e73..24ed51abc 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
@@ -13,6 +13,7 @@ const Wrapper = styled.div`
display: flex;
flex-direction: row;
width: 100%;
+ padding: 0px 0px 20px 20px;
`;
const InfoRow = styled.div`
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
index 818aca43e..e23cd6afd 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
@@ -13,6 +13,7 @@ const Wrapper = styled.div`
display: flex;
flex-direction: row;
width: 100%;
+ padding: 0px 0px 20px 20px;
`;
const InfoRow = styled.div`
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/components/AnswerComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/components/AnswerComponent.js
index 46b205872..37ec01ca8 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/components/AnswerComponent.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/components/AnswerComponent.js
@@ -13,6 +13,7 @@ const Wrapper = styled.div`
display: flex;
flex-direction: row;
width: 100%;
+ padding: 0px 0px 20px 20px;
`;
const InfoRow = styled.div`
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
index e9de0a2d4..d4ea6c206 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
@@ -9,7 +9,12 @@ import { StepMap } from 'prosemirror-transform';
import { keymap } from 'prosemirror-keymap';
import { baseKeymap, chainCommands } from 'prosemirror-commands';
import { undo, redo } from 'prosemirror-history';
-import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
+import {
+ WaxContext,
+ ComponentPlugin,
+ DocumentHelpers,
+ Icon,
+} from 'wax-prosemirror-core';
import {
splitListItem,
liftListItem,
@@ -18,13 +23,18 @@ import {
import Placeholder from '../plugins/placeholder';
import FakeCursorPlugin from '../../MultipleDropDownService/plugins/FakeCursorPlugin';
+const DeleteArea = styled.div`
+ border-bottom: 3px solid #f5f5f7;
+ height: 30px;
+`;
+
const EditorWrapper = styled.div`
border: none;
display: flex;
flex: 2 1 auto;
width: 100%;
justify-content: left;
-
+ padding: ${props => (props.showDelete ? '0px 20px 10px 20px' : `0px`)};
.ProseMirror {
white-space: break-spaces;
width: 100%;
@@ -60,6 +70,21 @@ const EditorWrapper = styled.div`
}
`;
+const ActionButton = styled.button`
+ background: transparent;
+ cursor: pointer;
+ margin-top: 16px;
+ border: none;
+ position: relative;
+ bottom: 14px;
+ float: right;
+`;
+
+const StyledIconActionRemove = styled(Icon)`
+ height: 24px;
+ width: 24px;
+`;
+
let WaxOverlays = () => true;
const QuestionEditorComponent = ({
@@ -236,12 +261,55 @@ const QuestionEditorComponent = ({
}
};
+ const removeQuestion = () => {
+ console.log('delete');
+ const allNodes = getNodes(context.pmViews.main);
+
+ allNodes.forEach(singleNode => {
+ context.pmViews.main.dispatch(
+ context.pmViews.main.state.tr.delete(
+ singleNode.pos,
+ singleNode.pos + singleNode.node.nodeSize,
+ ),
+ );
+ });
+ };
+
return (
- <EditorWrapper>
- <div ref={editorRef} />
- <WaxOverlays activeViewId={questionId} />
- </EditorWrapper>
+ <>
+ {showDelete && (
+ <DeleteArea>
+ <ActionButton
+ aria-label="delete this question"
+ onClick={removeQuestion}
+ type="button"
+ >
+ <StyledIconActionRemove name="deleteOutlinedQuestion" />
+ </ActionButton>
+ </DeleteArea>
+ )}
+ <EditorWrapper showDelete={showDelete}>
+ <div ref={editorRef} />
+ <WaxOverlays activeViewId={questionId} />
+ </EditorWrapper>
+ </>
);
};
export default QuestionEditorComponent;
+
+const getNodes = view => {
+ const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+ const fillTheGapContainerNodes = [];
+ allNodes.forEach(node => {
+ if (
+ node.node.type.name === 'multiple_choice_container' ||
+ node.node.type.name === 'multiple_choice_single_correct_container' ||
+ node.node.type.name === 'true_false_container' ||
+ node.node.type.name === 'true_false_single_correct_container'
+ ) {
+ fillTheGapContainerNodes.push(node);
+ }
+ });
+ return fillTheGapContainerNodes;
+};
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/multipleQuestionStyles.css b/wax-questions-service/src/MultipleChoiceQuestionService/multipleQuestionStyles.css
index 2e322bc92..f0817a82d 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/multipleQuestionStyles.css
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/multipleQuestionStyles.css
@@ -5,7 +5,7 @@
.true-false,
.true-false-single-correct {
border: 3px solid #f5f5f7;
- padding: 20px;
+ /* padding: 20px; */
margin: 38px;
/* margin: 12px 2px 12px 12px; */
/* padding-top: 0px; */
--
GitLab