feat: Added questionnaire component.

package-lock.json

@@ -8,6 +8,7 @@
       "name": "sonification-study-framework",
       "version": "0.1.0",
       "dependencies": {
+        "@geist-ui/core": "^2.3.8",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -2390,6 +2391,18 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@geist-ui/core": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/@geist-ui/core/-/core-2.3.8.tgz",
+      "integrity": "sha512-OKwGgTA4+fBM41eQbqDoUj4XBycZbYH7Ynrn6LPO5yKX7zeWPu/R7HN3vB4/oHt34VTDQI5sDNb1SirHvNyB5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@geist-ui/core": "^2.3.8",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/components/questionnaire/QuestionComponent.jsx

@@ -0,0 +1,63 @@
+// QuestionComponent.js
+import React, { useEffect } from "react";
+import { Slider, Input, Radio, Checkbox, Link } from '@geist-ui/core';
+
+export default function QuestionComponent(props) {
+    const { questionData, onUpdateAnswerData } = props;
+
+    useEffect(() => {
+        // Update questionData when component mounts or props change
+        questionData.sData({ "id": props.id, "answerValue": questionData.answerValue });
+    }, [props.id, questionData.answerValue]);
+
+    // Define a function to handle answer data change
+    const handleAnswerChange = (val) => {
+        questionData.sAnswerData(val);
+        onUpdateAnswerData(questionData.gAnswerData()); // Update answerData in parent component
+    };
+
+    // Determine and render answer element based on props
+    var element;
+    if (props.answerType === "slider") {
+        element = (
+            <Slider
+                onChange={handleAnswerChange}
+                max={props.maxElement}
+                initialValue={questionData.gAnswerData()}
+                showMarkers
+                width="75%"
+            />
+        );
+    } else if (props.answerType === "radio") {
+        const btnIndexes = Array.from({ length: props.maxElement }, (_, i) => i + 1);
+        element = (
+            <Radio.Group onChange={handleAnswerChange}>
+                {btnIndexes.map((x) => <Radio key={x} value={x}>{x}</Radio>)}
+            </Radio.Group>
+        );
+    } else if (props.answerType === "checkbox") {
+        const btnIndexes = Array.from({ length: props.maxElement }, (_, i) => i + 1);
+        element = (
+            <Checkbox.Group onChange={handleAnswerChange}>
+                {btnIndexes.map((x) => <Checkbox key={x} value={x}>{x}</Checkbox>)}
+            </Checkbox.Group>
+        );
+    } else {
+        element = (
+            <Input
+                onChange={e => handleAnswerChange(e.target.value)}
+                clearable
+            />
+        );
+    }
+
+    // Render the component
+    return (
+        <div>
+            <p>{props.text}</p>
+            {element}
+            {props.referBack && <Link href={props.referBack} block>←</Link>}
+            <Link href={props.referTo} block>→</Link>
+        </div>
+    );
+}

src/components/questionnaire/QuestionData.jsx

@@ -0,0 +1,36 @@
+import {useState} from "react";
+
+export function useQuestionData() {
+    const [data, setData] = useState({});
+  
+    function setQuestionData(questionData) {
+        setData(questionData);
+    };
+
+    function getQuestionData() {
+        return data;
+    }
+
+    function setAnswerValue(val) {
+        data.answerValue = val;
+        setData(data);
+    }
+
+    function getAnswerValue() {
+        return data.answerValue;
+    }
+  
+    function reset() {
+        setData({});
+    };
+
+    const inputProps = {
+        sData: setQuestionData,
+        gData: getQuestionData,
+        sAnswerData: setAnswerValue,
+        gAnswerData: getAnswerValue,
+        r: reset
+    };
+
+    return inputProps;
+}

src/components/questionnaire/QuestionnaireData.jsx

@@ -0,0 +1,27 @@
+// useQuestionComponent.js
+import { useState, useEffect } from "react";
+import { useQuestionData } from "./QuestionData";
+
+export function useQuestionComponent(answerType, maxElement, text, referBack, referTo) {
+    const [answerData, setAnswerData] = useState(null);
+    const questionData = useQuestionData({});
+
+    useEffect(() => {
+        setAnswerData(questionData.gAnswerData());
+    }, [questionData]);
+
+    const handleUpdateAnswerData = (data) => {
+        setAnswerData(data);
+    };
+
+    return {
+        questionData,
+        answerData,
+        handleUpdateAnswerData, // Pass the function here
+        answerType,
+        maxElement,
+        text,
+        referBack,
+        referTo
+    };
+}

src/pages/TestQuestionnaire.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { useParams } from 'react-router-dom';
+import QuestionComponent from "../components/questionnaire/QuestionComponent";
+import { useQuestionComponent } from "../components/questionnaire/QuestionnaireData";
+
+
+export default function TestQuestionnaire() {
+    const { id } = useParams()
+
+    const q1Props = useQuestionComponent("checkbox", 4, "Lorem Ipsum", "./info", "./q2");
+    const q2Props = useQuestionComponent("slider", 8, "Lorem Ipsum Ye", "./q1", "./info");
+
+    const questionProperties = {"q1": q1Props, "q2": q2Props};
+    const questionProperty = questionProperties[id];
+
+    return (
+        <div>
+            <QuestionComponent {...questionProperty} onUpdateAnswerData={questionProperty.handleUpdateAnswerData} />
+            <p>Current Answer Data: {JSON.stringify(questionProperty.answerData)}</p>
+        </div>
+    );
+}