DateForm, RatingForm

frontend/src/commons/ADateForm.tsx

-import React from "react";
-
-export const ADateForm = () => {
+import React, { useState } from "react";
+import { DateType, AnswerType } from "../types";
+type Props = {
+  element: DateType;
+  response: AnswerType;
+  handleAnswer: () => void;
+};
+export const ADateForm = ({ element, response, handleAnswer }: Props) => {
+  const [answer, setAnswer] = useState("");
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.currentTarget;
+    response.answers.map((a) => {
+      if (a.questionId === element._id) {
+        a.answer = value;
+      }
+    });
+    setAnswer(value);
+    handleAnswer();
+  };
   return (
     <div className="justify-start w-11/12 m-3 py-4">
-      <input type="date"></input>
+      <input
+        type="date"
+        onChange={handleChange}
+        required={element.isRequired}
+      ></input>
     </div>
   );
 };

frontend/src/commons/AQuestion.tsx

@@ -64,18 +64,22 @@ export const AQuestion = ({
             addFiles={addFiles}
           />
         );
-      // case "rating":
-      //   return (
-      //     <ARatingForm
-      //       handleQuestion={handleQuestion}
-      //       element={element}
-      //       currentId={currentId}
-      //     />
-      //   );
       case "rating":
-        return <ARatingForm element={question} />;
+        return (
+          <ARatingForm
+            element={question}
+            response={response}
+            handleAnswer={handleAnswer}
+          />
+        );
       case "date":
-        return <ADateForm />;
+        return (
+          <ADateForm
+            element={question}
+            response={response}
+            handleAnswer={handleAnswer}
+          />
+        );
       default:
         return <></>;
     }

frontend/src/commons/ARatingForm.tsx

 import React, { useState } from "react";
-import { RatingType } from "../types";
+import { RatingType, AnswerType } from "../types";
 
 type Props = {
   element: RatingType;
+  response: AnswerType;
+  handleAnswer: () => void;
 };
 
-export const ARatingForm = ({ element }: Props) => {
+export const ARatingForm = ({ element, response, handleAnswer }: Props) => {
   const [selectedchoice, setSelectedchoice] = useState("");
+  const [answer, setAnswer] = useState("");
+
   function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
     event.preventDefault();
+    const { name } = event.currentTarget;
+    response.answers.map((a) => {
+      if (a.questionId === element._id) {
+        a.answer = name;
+      }
+    });
+    setAnswer(name);
     setSelectedchoice(event.currentTarget.name);
+    handleAnswer();
   }
   return (
     <div className="flex w-full justify-center space-x-12 my-3">

frontend/src/types/index.ts

@@ -31,6 +31,7 @@ export interface BasicQuestionType {
 }
 
 export interface EssayType extends BasicQuestionType {}
+export interface DateType extends BasicQuestionType {}
 
 export interface RadioType extends BasicQuestionType {
   content: {