exact/range elements

wax-questions-service/src/NumericalAnswerService/NumericalAnswerContainerNodeView.js

@@ -27,18 +27,6 @@ export default class NumericalAnswerContainerNodeView extends QuestionsNodeView
   }
 
   stopEvent(event) {
-    if (
-      event.target.type === 'textarea' ||
-      event.target.type === 'button' ||
-      !event.target.type
-    ) {
-      return true;
-    }
-
-    return (
-      this.context.pmViews[this.node.attrs.id] !== undefined &&
-      event.target !== undefined &&
-      this.context.pmViews[this.node.attrs.id].dom.contains(event.target)
-    );
+    return true;
   }
 }

wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js

-import React from 'react';
+import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+const ExactAnswerContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+`;
+
+const ValueContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: 25px;
+  label {
+    font-size: 12px;
+  }
+
+  input:focus {
+    outline: none;
+  }
+`;
+
+const ValueInnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
 const ExactAnswerComponent = () => {
-  return <>Exact Answer Selected</>;
+  const [exact, setExact] = useState('');
+  const [marginError, setMarginError] = useState('');
+
+  const exactRef = useRef(null);
+  const errorRef = useRef(null);
+
+  const onChangeExact = () => {
+    setExact(exactRef.current.value);
+  };
+
+  const onChangeError = () => {
+    setMarginError(errorRef.current.value);
+  };
+
+  return (
+    <ExactAnswerContainer>
+      <ValueContainer>
+        <label htmlFor="exactAnswer">
+          <ValueInnerContainer>
+            <span>Exact Answer</span>
+            <input
+              name="exactAnswer"
+              onChange={onChangeExact}
+              ref={exactRef}
+              type="text"
+              value={exact}
+            />
+          </ValueInnerContainer>
+        </label>
+      </ValueContainer>
+      <ValueContainer>
+        <label htmlFor="errorAnswer">
+          <ValueInnerContainer>
+            <span>Margin of error (%)</span>
+            <input
+              name="errorAnswer"
+              onChange={onChangeError}
+              ref={errorRef}
+              type="text"
+              value={marginError}
+            />
+          </ValueInnerContainer>
+        </label>
+      </ValueContainer>
+    </ExactAnswerContainer>
+  );
 };
 
 export default ExactAnswerComponent;

wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js

@@ -8,7 +8,12 @@ import React, {
   createRef,
 } from 'react';
 import styled from 'styled-components';
-import { WaxContext, Icon, useOnClickOutside } from 'wax-prosemirror-core';
+import {
+  DocumentHelpers,
+  WaxContext,
+  Icon,
+  useOnClickOutside,
+} from 'wax-prosemirror-core';
 
 const Wrapper = styled.div`
   opacity: ${props => (props.disabled ? '0.4' : '1')};
@@ -66,6 +71,7 @@ const StyledIcon = styled(Icon)`
   width: 18px;
   margin-left: auto;
   position: relative;
+  top: 1px;
 `;
 
 const NumericalAnswerDropDownCompontent = ({ nodeId }) => {
@@ -216,4 +222,15 @@ const NumericalAnswerDropDownCompontent = ({ nodeId }) => {
   return NumericalAnswerDropDown;
 };
 
+const getNodes = view => {
+  const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+  const numericalAnswerpContainerNodes = [];
+  allNodes.forEach(node => {
+    if (node.node.type.name === 'numerical_answer_container') {
+      numericalAnswerpContainerNodes.push(node);
+    }
+  });
+  return numericalAnswerpContainerNodes;
+};
+
 export default NumericalAnswerDropDownCompontent;

wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js

 import React from 'react';
+import styled from 'styled-components';
 
 const PreciseAnswerComponent = () => {
   return <>Precise Answer Selected</>;

wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js

-import React from 'react';
+import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+const ExactAnswerContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+`;
+
+const ValueContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: 25px;
+  label {
+    font-size: 12px;
+  }
+
+  input:focus {
+    outline: none;
+  }
+`;
+
+const ValueInnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
 const RangeAnswerComponent = () => {
-  return <>Range Answer Selected</>;
+  const [minValue, setMinValue] = useState('');
+  const [maxValue, setMaxValue] = useState('');
+
+  const minRef = useRef(null);
+  const maxRef = useRef(null);
+
+  const onChangeMin = () => {
+    setMinValue(minRef.current.value);
+  };
+
+  const onChangeMax = () => {
+    setMaxValue(maxRef.current.value);
+  };
+
+  return (
+    <ExactAnswerContainer>
+      <ValueContainer>
+        <label htmlFor="minAnswer">
+          <ValueInnerContainer>
+            <span>Min</span>
+            <input
+              name="minAnswer"
+              onChange={onChangeMin}
+              ref={minRef}
+              type="text"
+              value={minValue}
+            />
+          </ValueInnerContainer>
+        </label>
+      </ValueContainer>
+      <ValueContainer>
+        <label htmlFor="maxAnswer">
+          <ValueInnerContainer>
+            <span>Max</span>
+            <input
+              name="maxAnswer"
+              onChange={onChangeMax}
+              ref={maxRef}
+              type="text"
+              value={maxValue}
+            />
+          </ValueInnerContainer>
+        </label>
+      </ValueContainer>
+    </ExactAnswerContainer>
+  );
 };
 
 export default RangeAnswerComponent;