diff --git a/wax-prosemirror-core/src/components/icons/icons.js b/wax-prosemirror-core/src/components/icons/icons.js index ce490d2a944ace590da6c574660dd4889f5e8a1d..67df610b0ca14d7b93695fd8d27b5742c66cac94 100644 --- a/wax-prosemirror-core/src/components/icons/icons.js +++ b/wax-prosemirror-core/src/components/icons/icons.js @@ -490,4 +490,10 @@ export default { <path d="M7 10l5 5 5-5z" />{' '} </Svg> ), + help: ({ className }) => ( + <Svg className={className} viewBox="0 -960 960 960"> + <title> help</title> + <path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /> + </Svg> + ), }; diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js index e51d291f9d735aa737615b11ad1b4956e5e3b27a..355d78130887ad54fdd4c0d37915d32fab19f78a 100644 --- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js +++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core'; +import { WaxContext, ComponentPlugin, Icon } from 'wax-prosemirror-core'; import styled from 'styled-components'; import ContainerEditor from './ContainerEditor'; import FeedbackComponent from '../../MultipleChoiceQuestionService/components/FeedbackComponent'; @@ -24,6 +24,16 @@ const FillTheGapWrapper = styled.div` margin-top: 10px; `; +const StyledIconAction = styled(Icon)` + float: right; + position: relative; + top: 2px; + right: 4px; + cursor: pointer; + height: 24px; + width: 24px; +`; + export default ({ node, view, getPos }) => { const context = useContext(WaxContext); const { @@ -42,6 +52,10 @@ export default ({ node, view, getPos }) => { const readOnly = !isEditable; const { feedback } = node.attrs; + const displayInfoMsg = () => { + console.log('click'); + }; + return ( <FillTheGapWrapper> <div> @@ -49,6 +63,17 @@ export default ({ node, view, getPos }) => { {!testMode && !readOnly && ( <FillTheGapContainerTool> <FillTheGapTool /> + <span + onClick={displayInfoMsg} + onKeyPress={() => {}} + role="button" + tabIndex={0} + > + <StyledIconAction name="help" /> + </span> + <span style={{ display: 'inline', position: 'absolute' }}> + enter answers seperated with a semi colon + </span> </FillTheGapContainerTool> )} </div>