Skip to content
Snippets Groups Projects
Commit 18e81d3a authored by chris's avatar chris
Browse files

submit question: rest of multiple types

parent be77400a
No related branches found
No related tags found
1 merge request!366Questions read only
Hide whitespace changes
Inline Side-by-side
wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
+ 56
− 0
View file @ 18e81d3a
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/prop-types */
import React, { useState, useContext, useEffect } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { Icon } from 'wax-prosemirror-components';
import { NodeSelection } from 'prosemirror-state';
import styled from 'styled-components';
import Switch from '../../components/Switch';
......@@ -16,6 +18,37 @@ const StyledSwitch = styled(Switch)`
}
`;
const AnswerContainer = styled.span`
margin-left: auto;
`;
const Correct = styled.span`
margin-right: 10px;
span {
color: #008000;
`;
const Answer = styled.span`
margin-right: 10px;
span {
color: ${props => (props.isCorrect ? ' #008000' : 'red')};
}
`;
const StyledIconCorrect = styled(Icon)`
fill: #008000;
pointer-events: none;
height: 24px;
width: 24px;
`;
const StyledIconWrong = styled(Icon)`
fill: red;
pointer-events: none;
height: 24px;
width: 24px;
`;
const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext);
const [checked, setChecked] = useState(false);
......@@ -29,6 +62,8 @@ const CustomSwitch = ({ node, getPos }) => {
return editable;
});
const customProps = context.view.main.props.customValues;
useEffect(() => {
const allNodes = getNodes(main);
allNodes.forEach(singNode => {
......@@ -90,6 +125,27 @@ const CustomSwitch = ({ node, getPos }) => {
main.dispatch(tr);
};
if (customProps.showFeedBack) {
const correct = node.attrs.correct ? 'YES' : 'NO';
const answer = node.attrs.answer ? 'YES' : 'NO';
const isCorrect = node.attrs.correct === node.attrs.answer;
return (
<AnswerContainer>
<Correct>
Correct:
<span>{correct}</span>
</Correct>
<Answer isCorrect={isCorrect}>
Answer: <span>{answer}</span>
</Answer>
{isCorrect && <StyledIconCorrect name="done" />}
{!isCorrect && <StyledIconWrong name="close" />}
</AnswerContainer>
);
}
return (
<StyledSwitch
checked={isEditable ? checked : checkedAnswerMode}
......
wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js
+ 56
− 0
View file @ 18e81d3a
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/prop-types */
import React, { useState, useContext, useEffect } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { Icon } from 'wax-prosemirror-components';
import styled from 'styled-components';
import Switch from '../../components/Switch';
......@@ -23,6 +25,37 @@ const StyledSwitch = styled(Switch)`
}
`;
const AnswerContainer = styled.span`
margin-left: auto;
`;
const Correct = styled.span`
margin-right: 10px;
span {
color: #008000;
`;
const Answer = styled.span`
margin-right: 10px;
span {
color: ${props => (props.isCorrect ? ' #008000' : 'red')};
}
`;
const StyledIconCorrect = styled(Icon)`
fill: #008000;
pointer-events: none;
height: 24px;
width: 24px;
`;
const StyledIconWrong = styled(Icon)`
fill: red;
pointer-events: none;
height: 24px;
width: 24px;
`;
const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext);
const [checked, setChecked] = useState(false);
......@@ -33,6 +66,8 @@ const CustomSwitch = ({ node, getPos }) => {
view: { main },
} = context;
const customProps = context.view.main.props.customValues;
const isEditable = view.main.props.editable(editable => {
return editable;
});
......@@ -65,6 +100,27 @@ const CustomSwitch = ({ node, getPos }) => {
});
};
if (customProps.showFeedBack) {
const correct = node.attrs.correct ? 'TRUE' : 'FALSE';
const answer = node.attrs.answer ? 'TRUE' : 'FALSE';
const isCorrect = node.attrs.correct === node.attrs.answer;
return (
<AnswerContainer>
<Correct>
Correct:
<span>{correct}</span>
</Correct>
<Answer isCorrect={isCorrect}>
Answer: <span>{answer}</span>
</Answer>
{isCorrect && <StyledIconCorrect name="done" />}
{!isCorrect && <StyledIconWrong name="close" />}
</AnswerContainer>
);
}
return (
<StyledSwitch
checked={isEditable ? checked : checkedAnswerMode}
......
wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js
+ 56
− 0
View file @ 18e81d3a
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/prop-types */
import React, { useState, useContext, useEffect } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { Icon } from 'wax-prosemirror-components';
import { NodeSelection } from 'prosemirror-state';
import styled from 'styled-components';
import Switch from '../../components/Switch';
......@@ -16,6 +18,37 @@ const StyledSwitch = styled(Switch)`
}
`;
const AnswerContainer = styled.span`
margin-left: auto;
`;
const Correct = styled.span`
margin-right: 10px;
span {
color: #008000;
`;
const Answer = styled.span`
margin-right: 10px;
span {
color: ${props => (props.isCorrect ? ' #008000' : 'red')};
}
`;
const StyledIconCorrect = styled(Icon)`
fill: #008000;
pointer-events: none;
height: 24px;
width: 24px;
`;
const StyledIconWrong = styled(Icon)`
fill: red;
pointer-events: none;
height: 24px;
width: 24px;
`;
const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext);
const [checked, setChecked] = useState(false);
......@@ -26,6 +59,8 @@ const CustomSwitch = ({ node, getPos }) => {
view: { main },
} = context;
const customProps = context.view.main.props.customValues;
const isEditable = view.main.props.editable(editable => {
return editable;
});
......@@ -90,6 +125,27 @@ const CustomSwitch = ({ node, getPos }) => {
main.dispatch(tr);
};
if (customProps.showFeedBack) {
const correct = node.attrs.correct ? 'TRUE' : 'FALSE';
const answer = node.attrs.answer ? 'TRUE' : 'FALSE';
const isCorrect = node.attrs.correct === node.attrs.answer;
return (
<AnswerContainer>
<Correct>
Correct:
<span>{correct}</span>
</Correct>
<Answer isCorrect={isCorrect}>
Answer: <span>{answer}</span>
</Answer>
{isCorrect && <StyledIconCorrect name="done" />}
{!isCorrect && <StyledIconWrong name="close" />}
</AnswerContainer>
);
}
return (
<StyledSwitch
checked={isEditable ? checked : checkedAnswerMode}
......
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