add help icon

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>
+  ),
 };

wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js

 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>