isRequired

frontend/src/commons/ACheckbox.tsx

@@ -29,6 +29,7 @@ export const ACheckboxForm = ({ element, response, handleAnswer }: Props) => {
             type="checkbox"
             value={choice.text}
             onChange={handleChange}
+            required={element.isRequired}
           />
           <label className="text-lg">{choice.text}</label>
         </div>

frontend/src/commons/ADropdown.tsx

@@ -25,6 +25,7 @@ export const ADropdownForm = ({ element, handleAnswer, response }: Props) => {
       <select
         className="py-2 hover:bg-themeColor bg-gray-200 rounded"
         onChange={handleChange}
+        required={element.isRequired}
       >
         {element.content.choices.map((choice) => (
           <option value={choice.text}>{choice.text}</option>

frontend/src/commons/AEssayForm.tsx

@@ -28,6 +28,7 @@ export const AEssayForm = ({ element, handleAnswer, response }: Props) => {
         id={element._id}
         onChange={handleChange}
         value={answer}
+        required={element.isRequired}
       ></input>
     </div>
   );

frontend/src/commons/AFileForm.tsx

@@ -33,6 +33,7 @@ export const AFileForm = ({
         name="file"
         className=" w-11/12 h-16"
         onChange={handleChange}
+        required={element.isRequired}
       ></input>
     </div>
   );

frontend/src/commons/ARadioForm.tsx

@@ -31,6 +31,7 @@ export const ARadioForm = ({ element, response, handleAnswer }: Props) => {
             name={element._id}
             onChange={handleChange}
             value={choice.text}
+            required={element.isRequired}
           ></input>
           <label className="text-lg" id={choice.text}>
             {choice.text}