diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js index 7b19bfe9f1327858e92167fb76f6dda11112b42b..ef6f80331667d7e0ad9df417aefae7958547e81f 100644 --- a/wax-prosemirror-components/index.js +++ b/wax-prosemirror-components/index.js @@ -3,6 +3,7 @@ export { default as Button } from './src/components/Button'; export { default as UndoRedoButton } from './src/components/UndoRedoButton'; export { default as MenuButton } from './src/ui/buttons/MenuButton'; export { default as icons } from './src/icons/icons'; +export { default as Icon } from './src/helpers/Icon'; export { default as TableDropDown } from './src/components/tables/TableDropDown'; export { default as ImageUpload } from './src/components/images/ImageUpload'; export { default as TitleButton } from './src/components/TitleButton'; diff --git a/wax-prosemirror-components/src/components/SaveButton.js b/wax-prosemirror-components/src/components/SaveButton.js index fcbcdb459a570ecca38fa5b77bef65d2d3a90968..33f4490fed7728c73b73b9dafb2ef66f47c75e8c 100644 --- a/wax-prosemirror-components/src/components/SaveButton.js +++ b/wax-prosemirror-components/src/components/SaveButton.js @@ -16,7 +16,7 @@ const SaveButton = ({ view = {}, item }) => { const [isSaving, setIsSaving] = useState(false); - const handleMouseDown = (e, editorState, editorDispatch) => { + const handleMouseDown = () => { // view.props.onChange(state.doc.content); setIsSaving(true); setTimeout(() => { @@ -55,9 +55,7 @@ const SaveButton = ({ view = {}, item }) => { disabled={isDisabled} iconName={iconTodisplay} label={label} - onMouseDown={e => - handleMouseDown(e, main.view.state, main.view.dispatch) - } + onMouseDown={handleMouseDown} title={title} /> ), diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js index b4f746399e4f0447da87af02d24c1c09e2a95894..a3f0ac7552680f06672f80ead3b4141a8cca558f 100644 --- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js +++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js @@ -1,8 +1,10 @@ +/* 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 './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); @@ -32,6 +65,8 @@ const CustomSwitch = ({ node, getPos }) => { view: { main }, } = context; + const customProps = context.view.main.props.customValues; + const isEditable = view.main.props.editable(editable => { return editable; }); @@ -64,6 +99,26 @@ const CustomSwitch = ({ node, getPos }) => { }); }; + 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}