Skip to content
Snippets Groups Projects
Commit 38fd6e97 authored by chris's avatar chris
Browse files

true false container components

parent 256a9330
No related branches found
No related tags found
1 merge request!526new wrapper component
......@@ -23,7 +23,11 @@ export default class MultipleChoiceSingleCorrectContainerNodeView extends Questi
}
stopEvent(event) {
if (event.target.type === 'text') {
if (
!event.target.type ||
event.target.type === 'button' ||
event.target.type === 'text'
) {
return true;
}
const innerView = this.context.pmViews[this.node.attrs.id];
......
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;
};
......@@ -4,6 +4,7 @@ import trueFalseNode from './schema/trueFalseNode';
import questionTrueFalseNode from './schema/questionTrueFalseNode';
import trueFalseContainerNode from './schema/trueFalseContainerNode';
import AnswerComponent from './components/AnswerComponent';
import MultipleChoiceContainerComponent from '../components/MultipleChoiceContainerComponent';
import TrueFalseContainerNodeView from './TrueFalseContainerNodeView';
import TrueFalseNodeView from './TrueFalseNodeView';
import QuestionTrueFalseNodeView from './QuestionTrueFalseNodeView';
......@@ -27,11 +28,11 @@ class TrueFalseQuestionService extends Service {
question_node_true_false: questionTrueFalseNode,
});
// addPortal({
// nodeView: TrueFalseContainerNodeView,
// component: QuestionComponent,
// context: this.app,
// });
addPortal({
nodeView: TrueFalseContainerNodeView,
component: MultipleChoiceContainerComponent,
context: this.app,
});
addPortal({
nodeView: QuestionTrueFalseNodeView,
......
......@@ -3,6 +3,7 @@ import TrueFalseSingleCorrectQuestion from './TrueFalseSingleCorrectQuestion';
import trueFalseSingleCorrectNode from './schema/trueFalseSingleCorrectNode';
import trueFalseSingleCorrectContainerNode from './schema/trueFalseSingleCorrectContainerNode';
import questionTrueFalseSingleNode from './schema/questionTrueFalseSingleNode';
import MultipleChoiceContainerComponent from '../components/MultipleChoiceContainerComponent';
import AnswerComponent from './components/AnswerComponent';
import TrueFalseSingleCorrectContainerNodeView from './TrueFalseSingleCorrectContainerNodeView';
import TrueFalseSingleCorrectNodeView from './TrueFalseSingleCorrectNodeView';
......@@ -29,11 +30,11 @@ class TrueFalseSingleCorrectQuestionService extends Service {
true_false_single_correct: trueFalseSingleCorrectNode,
});
// addPortal({
// nodeView: TrueFalseSingleCorrectContainerNodeView,
// component: QuestionComponent,
// context: this.app,
// });
addPortal({
nodeView: TrueFalseSingleCorrectContainerNodeView,
component: MultipleChoiceContainerComponent,
context: this.app,
});
addPortal({
nodeView: QuestionTrueFalseSingleNodeView,
......
......@@ -98,7 +98,9 @@ const getNodes = view => {
allNodes.forEach(node => {
if (
node.node.type.name === 'multiple_choice_container' ||
node.node.type.name === 'multiple_choice_single_correct_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);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment