From 19bee851c4b34dae4052cbb9bdbef9ff58a79223 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 9 Nov 2023 18:51:53 +0200
Subject: [PATCH] precice answer component
---
.../components/ExactAnswerComponent.js | 6 +--
.../components/PreciseAnswerComponent.js | 53 ++++++++++++++++++-
.../components/RangeAnswerComponent.js | 6 +--
3 files changed, 57 insertions(+), 8 deletions(-)
diff --git a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
index 1fc6c59f6..070b61569 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
@@ -1,7 +1,7 @@
import React, { useRef, useState } from 'react';
import styled from 'styled-components';
-const ExactAnswerContainer = styled.div`
+const AnswerContainer = styled.div`
display: flex;
flex-direction: row;
width: 100%;
@@ -41,7 +41,7 @@ const ExactAnswerComponent = () => {
};
return (
- <ExactAnswerContainer>
+ <AnswerContainer>
<ValueContainer>
<label htmlFor="exactAnswer">
<ValueInnerContainer>
@@ -70,7 +70,7 @@ const ExactAnswerComponent = () => {
</ValueInnerContainer>
</label>
</ValueContainer>
- </ExactAnswerContainer>
+ </AnswerContainer>
);
};
diff --git a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
index 08da4a4c3..2ab9c1a5f 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
@@ -1,8 +1,57 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
import styled from 'styled-components';
+const AnswerContainer = 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 PreciseAnswerComponent = () => {
- return <>Precise Answer Selected</>;
+ const [precise, setPrecise] = useState('');
+
+ const preciseRef = useRef(null);
+
+ const onChangePrecice = () => {
+ setPrecise(preciseRef.current.value);
+ };
+
+ return (
+ <AnswerContainer>
+ <ValueContainer>
+ <label htmlFor="preciseAnswer">
+ <ValueInnerContainer>
+ <span>Precise Answer</span>
+ <input
+ name="preciseAnswer"
+ onChange={onChangePrecice}
+ ref={preciseRef}
+ type="text"
+ value={precise}
+ />
+ </ValueInnerContainer>
+ </label>
+ </ValueContainer>
+ </AnswerContainer>
+ );
};
export default PreciseAnswerComponent;
diff --git a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
index 20a4cd402..8b98b87a1 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
@@ -1,7 +1,7 @@
import React, { useRef, useState } from 'react';
import styled from 'styled-components';
-const ExactAnswerContainer = styled.div`
+const AnswerContainer = styled.div`
display: flex;
flex-direction: row;
width: 100%;
@@ -41,7 +41,7 @@ const RangeAnswerComponent = () => {
};
return (
- <ExactAnswerContainer>
+ <AnswerContainer>
<ValueContainer>
<label htmlFor="minAnswer">
<ValueInnerContainer>
@@ -70,7 +70,7 @@ const RangeAnswerComponent = () => {
</ValueInnerContainer>
</label>
</ValueContainer>
- </ExactAnswerContainer>
+ </AnswerContainer>
);
};
--
GitLab