Complete questionnaire builder

src/components/Question/RadioQuestion/index.svelte

@@ -8,12 +8,13 @@
   export let code;
   export let name = "";
   export let options = [];
+  export let answers = [];
   export let onSubmit = () => {};
   export let onPrevious = () => {};
   export let defaultValue = "";
   export let disablePreviousButton = false;
-  export let isLast = false;
   export let isPreview = false;
+  export let nextButtonProps = {};
 
   function getRadioVal(form, name) {
     let val;
@@ -31,14 +32,26 @@
   function handleFormSubmit(event) {
     if (isPreview) return;
     const value = getRadioVal(event.target, name);
-    onSubmit(name, value);
-    event.target.reset();
+    onSubmit(name, [value]);
+    // event.target.reset();
   }
 
   function handlePrevious(event) {
     event.preventDefault();
     onPrevious();
   }
+
+  function getValidationClassName(option) {
+    if (defaultValue.includes(option.id)) {
+      if (answers.includes(option.id)) {
+        return "border-green-700";
+      } else {
+        return "border-red-700";
+      }
+    }
+
+    return "";
+  }
 </script>
 
 <form on:submit|preventDefault={handleFormSubmit}>
@@ -51,14 +64,18 @@
   <div class="ml-4">
     {#each options as option}
       <button
-        class="cursor-pointer text-left my-2 border border-gray-300 p-2 rounded-md cursor-pointer hover:bg-gray-200 w-full"
+        class="cursor-pointer text-left my-2 border-2 border-gray-300 p-2 rounded-md cursor-pointer hover:bg-gray-200 w-full {getValidationClassName(
+          option
+        )}"
         type="button"
       >
         <RadioItem
           {name}
-          value={option.value}
-          checked={option.value === defaultValue}
+          value={option.id}
+          checked={defaultValue.includes(option.id) &&
+            answers.includes(option.id)}
           label={option.label || option.value}
+          disabled={nextButtonProps.disableOptionSelect}
         />
       </button>
     {/each}
@@ -73,9 +90,11 @@
         variant={VARIANTS.OUTLINED}
       />
       <PrimaryButton
-        variant={VARIANTS.OUTLINED}
+        variant={nextButtonProps.isActive
+          ? VARIANTS.CONTAINED
+          : VARIANTS.OUTLINED}
         type="submit"
-        label={isLast ? "Finish" : "Next"}
+        label={nextButtonProps.label}
         {name}
       />
     </div>