diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index f4e92b1b8e35744edd1b6dd1641c9949bb359128..c5e19cc8930fdd998a2f7a1b2c5e32fc9ebf55eb 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -29,19 +29,7 @@ const SubmitButton = styled.button`
`;
const t = `<p class="paragraph"></p>
-<div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" 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="true" feedback="feedback 2">
- <p class="paragraph">answer 2</p>
- </div>
-</div>
-<div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback"><p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" anser="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" anser="">answer 4; answer5;</span></p></div>`;
-
+<div id="1c3b3bc9-8a82-4fae-9f00-5f3a2605d891" class="matching-container" answers="" feedback=""><p class="paragraph"><div class="matching-option" id="5677a6df-7211-481f-b0d7-94565c87bdbd" correct="false" answer="false"></div></p><p class="paragraph"></p></div><p class="paragraph">s</p><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" 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="true" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback"><p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" anser="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" anser="">answer 4; answer5;</span></p></div>`;
const Hhmi = () => {
const [submited, isSubmited] = useState(false);
const [readOnly, isReadOnly] = useState(false);
diff --git a/wax-prosemirror-services/src/MatchingService/components/ContainerEditor.js b/wax-prosemirror-services/src/MatchingService/components/ContainerEditor.js
index 5d3a1f9665cd628882aa96daf6a17dde706de277..bab0922f637b0b73c27bc26469c73e67bd6a1fa2 100644
--- a/wax-prosemirror-services/src/MatchingService/components/ContainerEditor.js
+++ b/wax-prosemirror-services/src/MatchingService/components/ContainerEditor.js
@@ -18,6 +18,10 @@ const EditorWrapper = styled.div`
}
p {
margin: 0;
+
+ br {
+ display: none;
+ }
}
}
`;
diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
index 1cc9281f8dff07dc3e775f0e3be9e3c895b71547..0dbe38759842ce8ba15bd0d055e2356c68667b7e 100644
--- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
@@ -28,12 +28,12 @@ const DropdownStyled = styled(Dropdown)`
}
.Dropdown-menu {
- width: 122%;
+ width: 102%;
display: flex;
flex-direction: column;
align-items: flex-start;
.Dropdown-option {
- width: 120%;
+ width: 100%;
}
}
`;
@@ -74,9 +74,9 @@ const DropComponent = ({ options }) => {
key={uuidv4()}
onChange={option => onChange(option)}
options={dropDownOptions}
- placeholder="Choose Option"
+ placeholder="Select option"
select
- value="test"
+ value="Select option"
/>
</Wrapper>
),
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
index 8d28d8b6c718d5f50bbece958788fa4d081a8806..b9025fa7889eab0a34487296bc8a61448310912f 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
@@ -37,11 +37,6 @@ const Option = styled.div`
width: 100%;
`;
-const CreateOptions = styled.div`
- display: flex;
- border: 1px solid black;
-`;
-
const ActionButton = styled.button`
height: 24px;
border: none;
@@ -55,8 +50,16 @@ const StyledIconAction = styled(Icon)`
width: 24px;
`;
+const CreateOptions = styled.div`
+ display: flex;
+ flex-direction: column;
+ padding: 10px;
+`;
+
const OptionArea = styled.div`
display: flex;
+ flex-direction: row;
+ width: 100%;
`;
const AddOption = styled.div`
@@ -68,8 +71,8 @@ export default ({ node, view, getPos }) => {
const {
pmViews: { main },
} = context;
- const [inputList, setInputList] = useState([]);
- const addAnswerRef = useRef(null);
+ const [options, setOptions] = useState([]);
+ const addOptionRef = useRef(null);
const customProps = main.props.customValues;
@@ -79,21 +82,15 @@ export default ({ node, view, getPos }) => {
const readOnly = !isEditable;
- const Input = () => {
- return (
- <input
- placeholder="Your answer here"
- ref={addAnswerRef}
- type="text"
- value=""
- />
- );
- };
-
const addOption = event => {
- setInputList(inputList.concat(<Input key={inputList.length} />));
+ // if (options.length === 0) {
+ // setOptions(options.push(addOptionRef.current.value));
+ // } else {
+ // }
+ setOptions(prevOptions => [...prevOptions, addOptionRef.current.value]);
};
+ const addAnswer = event => {};
return (
<MatchingWrapper>
<span>Matching</span>
@@ -103,7 +100,7 @@ export default ({ node, view, getPos }) => {
<Option>
{!readOnly && (
<ActionButton
- onClick={() => addOption(node.attrs.id)}
+ onClick={() => addAnswer(node.attrs.id)}
type="button"
>
<StyledIconAction name="plusSquare" />
@@ -112,27 +109,19 @@ export default ({ node, view, getPos }) => {
<ContainerEditor getPos={getPos} node={node} view={view} />
<DropDownComponent />
</Option>
- <Option>
- {!readOnly && (
- <ActionButton
- onClick={() => addOption(node.attrs.id)}
- type="button"
- >
- <StyledIconAction name="plusSquare" />
- </ActionButton>
- )}
- <ContainerEditor getPos={getPos} node={node} view={view} />
- <DropDownComponent />
- </Option>
- {inputList}
</InputsContainer>
</QuestionWrapper>
- <CreateOptions>
- <OptionArea>Options Area</OptionArea>
- <AddOption>
- <input type="text"></input>
- </AddOption>
- </CreateOptions>
+ {!readOnly && (
+ <CreateOptions>
+ <OptionArea>Options: {options}</OptionArea>
+ <AddOption>
+ <input placeholder="Add Option" ref={addOptionRef} type="text" />
+ <button onClick={addOption} type="button">
+ Add
+ </button>
+ </AddOption>
+ </CreateOptions>
+ )}
{!(readOnly && !customProps.showFeedBack) && (
<FeedbackComponent
getPos={getPos}