Questionnaire progress, preview questions, select answer

src/components/Course/components/Lecture/Homework/EditMode.svelte

@@ -5,9 +5,13 @@
     handleRemoveOption,
     handleRemoveQuestion,
     handleCode,
+    handleAnswerSelect,
   } from "./store/index";
   import Delete24 from "carbon-icons-svelte/lib/Delete24";
   import AddFilled24 from "carbon-icons-svelte/lib/AddFilled24";
+  import CheckmarkFilled24 from "carbon-icons-svelte/lib/CheckmarkFilled24";
+  import CheckmarkOutline24 from "carbon-icons-svelte/lib/CheckmarkOutline24";
+  // import Subtract24 from "carbon-icons-svelte/lib/Subtract24";
 
   import TextField from "../../../../Form/TextField.svelte";
   import TextArea from "../../../../Form/TextArea.svelte";
@@ -104,45 +108,71 @@
       {/if}
 
       <div class="flex flex-col mt-2">
-        {#each question.options as option}
+        {#if QUESTION_TYPE.RADIO === question.type}
-          {#if QUESTION_TYPE.RADIO === question.type}
+          {#each question.options as option}
             <RadioItem
               isEditable={true}
               name={question.title || "radio-name"}
               bind:label={option.value}
             >
-              <div slot="iconbutton">
+              <div slot="iconbutton" class="flex items-center">
                 <IconButton
                   value={option.id}
                   onClick={handleRemoveOption(question.id, option.id)}
                 >
                   <Delete24 class="carbon-icon" />
                 </IconButton>
+                <IconButton
+                  value={option.id}
+                  onClick={handleAnswerSelect(question.id, option.id)}
+                  buttonClassName={question.answers.includes(option.id) &&
+                    "success"}
+                >
+                  {#if question.answers.includes(option.id)}
+                    <CheckmarkFilled24 class="carbon-icon" />
+                  {:else}
+                    <CheckmarkOutline24 class="carbon-icon" />
+                  {/if}
+                </IconButton>
               </div>
             </RadioItem>
-          {/if}
+          {/each}
+        {/if}
 
-          {#if QUESTION_TYPE.CHECKBOX === question.type}
+        {#if QUESTION_TYPE.CHECKBOX === question.type}
+          {#each question.options as option}
             <Checkbox
               isEditable={true}
               name={question || "checkbox-name"}
               bind:label={option.value}
             >
-              <div slot="iconbutton">
+              <div slot="iconbutton" class="flex items-center">
                 <IconButton
                   value={option.id}
                   onClick={handleRemoveOption(question.id, option.id)}
                 >
                   <Delete24 class="carbon-icon" />
                 </IconButton>
+                <IconButton
+                  value={option.id}
+                  onClick={handleAnswerSelect(question.id, option.id)}
+                  buttonClassName={question.answers.includes(option.id) &&
+                    "success"}
+                >
+                  {#if question.answers.includes(option.id)}
+                    <CheckmarkFilled24 class="carbon-icon" />
+                  {:else}
+                    <CheckmarkOutline24 class="carbon-icon" />
+                  {/if}
+                </IconButton>
               </div>
             </Checkbox>
-          {/if}
+          {/each}
+        {/if}
 
-          {#if QUESTION_TYPE.TEXTAREA === question.type}
+        {#if QUESTION_TYPE.TEXTAREA === question.type}
-            <TextArea bind:value={option.value} />
+          <TextArea bind:value={question.value} />
-          {/if}
+        {/if}
-        {/each}
       </div>
 
       {#if QUESTION_TYPE.TEXTAREA !== question.type}

src/components/Course/components/Lecture/Homework/ViewMode.svelte

@@ -2,16 +2,19 @@
   import { questionnaire } from "./store/index";
   import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
   import CheckboxQuestion from "../../../../Question/CheckboxQuestion/index.svelte";
+  import TextareaQuestion from "../../../../Question/TextareaQuestion/index.svelte";
   import PrimaryButton from "../../../../PrimaryButton/index.svelte";
+  import Progress from "../../../../Progress/index.svelte";
+
+  import { QUESTION_TYPE } from "../../../../Question/constants";
+
+  export let preview;
 
-  import {
-    QUESTION_TYPE,
-    QUESTION_TYPES,
-  } from "../../../../Question/constants";
-  import Checkbox from "../../../../Form/Checkbox.svelte";
   let answers = {};
   let currentQuestionIndex = 0;
   let currentQuestion = {};
+  let renderProps = {};
+  let progressValue = 0;
 
   const { questions, title, description } = $questionnaire;
 
@@ -20,7 +23,7 @@
   }
 
   function onSubmit(name, value) {
-    if (!value) return;
+    // if (!value) return;
     answers = {
       ...answers,
       [name]: value,
@@ -28,28 +31,81 @@
     currentQuestionIndex += 1;
   }
 
-  function onCheckboxSubmit(name, value) {
-    if (!value) return;
-
-    answers = {
-      ...answers,
-      [name]: value,
-    };
-
-    currentQuestionIndex += 1;
-  }
-
-  $: {
-    currentQuestion = questions[currentQuestionIndex - 1];
-    console.log("currentQuestion", currentQuestion);
-  }
-
   function onPrevious() {
     currentQuestionIndex -= 1;
   }
+
+  function getRenderProps(question, questionIndex) {
+    return {
+      title: questionIndex + ". " + question.title,
+      name: `${question.id}`,
+      options: question.options,
+      code: question.code,
+      defaultValue:
+        question.type === QUESTION_TYPE.TEXTAREA
+          ? question.value || ""
+          : answers[question.id] || [],
+      onSubmit,
+      onPrevious,
+      disablePreviousButton: questionIndex === 1,
+      isLast: questionIndex === questions.length,
+      isPreview: preview,
+    };
+  }
+
+  function getProgressValue(currentQuestionIndex) {
+    if (!currentQuestion) {
+      return 100;
+    }
+
+    return (
+      Math.round(((currentQuestionIndex - 1) / questions.length) * 100) || 0
+    );
+  }
+
+  $: {
+    currentQuestion = questions[currentQuestionIndex - 1];
+
+    if (currentQuestion) {
+      renderProps = getRenderProps(currentQuestion, currentQuestionIndex);
+    }
+  }
+
+  $: progressValue = getProgressValue(currentQuestionIndex);
 </script>
 
-{#if currentQuestionIndex === 0}
+<!-- <svelte:window on:keydown={handleKeydown} /> -->
+
+{#if !preview && currentQuestionIndex > 0}
+  <Progress value={progressValue} />
+{/if}
+
+{#if preview}
+  {#each questions as currentQuestion, currentQuestionIndex}
+    {#if currentQuestionIndex === 0}
+      <div class="mb-2">
+        <h2 class="my-1">{title}</h2>
+        <p>{description}</p>
+      </div>
+    {:else if !currentQuestion}
+      <pre>
+      <code>{JSON.stringify(answers)}</code>
+    </pre>
+    {:else if QUESTION_TYPE.RADIO === currentQuestion.type}
+      <RadioQuestion
+        {...getRenderProps(currentQuestion, currentQuestionIndex)}
+      />
+    {:else if QUESTION_TYPE.CHECKBOX === currentQuestion.type}
+      <CheckboxQuestion
+        {...getRenderProps(currentQuestion, currentQuestionIndex)}
+      />
+    {:else if QUESTION_TYPE.TEXTAREA === currentQuestion.type}
+      <TextareaQuestion
+        {...getRenderProps(currentQuestion, currentQuestionIndex)}
+      />
+    {/if}
+  {/each}
+{:else if currentQuestionIndex === 0}
   <div>
     <h2 class="my-1">{title}</h2>
     <p>{description}</p>
@@ -66,27 +122,9 @@
     <code>{JSON.stringify(answers)}</code>
   </pre>
 {:else if QUESTION_TYPE.RADIO === currentQuestion.type}
-  <RadioQuestion
+  <RadioQuestion {...renderProps} />
-    title={currentQuestionIndex + ". " + currentQuestion.title}
-    name={`${currentQuestion.id}`}
-    options={currentQuestion.options}
-    code={currentQuestion.code}
-    defaultValue={answers[`${currentQuestion.id}`] || false}
-    {onSubmit}
-    {onPrevious}
-    disablePreviousButton={currentQuestionIndex === 1}
-    isLast={currentQuestionIndex === questions.length}
-  />
 {:else if QUESTION_TYPE.CHECKBOX === currentQuestion.type}
-  <CheckboxQuestion
+  <CheckboxQuestion {...renderProps} />
-    title={currentQuestionIndex + ". " + currentQuestion.title}
+{:else if QUESTION_TYPE.TEXTAREA === currentQuestion.type}
-    name={`${currentQuestion.id}`}
+  <TextareaQuestion {...renderProps} />
-    options={currentQuestion.options}
-    code={currentQuestion.code}
-    defaultValue={answers[currentQuestion.id] || []}
-    onSubmit={onCheckboxSubmit}
-    {onPrevious}
-    disablePreviousButton={currentQuestionIndex === 1}
-    isLast={currentQuestionIndex === questions.length}
-  />
 {/if}

src/components/Course/components/Lecture/Homework/index.svelte

@@ -20,7 +20,7 @@
         label={mode === MODES.edit ? "Save" : "Edit"}
         onClick={() => (mode = mode === MODES.edit ? MODES.view : MODES.edit)}
       />
-      {#if mode === MODES.edit}
+      {#if mode === MODES.edit || preview}
         <PrimaryButton
           variant={VARIANTS.OUTLINED}
           label={preview ? "Edit" : "Preview"}
@@ -40,7 +40,7 @@
     {/if}
   </svelte:fragment>
 
-  {#if mode === MODES.edit}
+  {#if mode === MODES.edit && !preview}
     <EditMode />
   {:else}
     <ViewMode {preview} />

src/components/Course/components/Lecture/Homework/store/index.js

@@ -31,6 +31,7 @@ export const questionnaire = writable({
           value: "Traversy Media",
         },
       ],
+      answers: [],
     },
     {
       id: "vue-founder",
@@ -59,6 +60,7 @@ export const questionnaire = writable({
           value: "Bill Gates",
         },
       ],
+      answers: [],
     },
     {
       id: "svelte-founder",
@@ -82,6 +84,7 @@ export const questionnaire = writable({
           value: "Coding Train",
         },
       ],
+      answers: [2],
     },
     {
       id: "angular-founder",
@@ -103,6 +106,7 @@ export function handleAddQuestion() {
           ...QUESTION_TEMPLATE,
           id: questions.length + 1,
           value: "",
+          answers: [],
           options: [
             {
               id: 1,
@@ -151,11 +155,6 @@ export function handleRemoveOption(questionId, optionId) {
         ...q,
         questions: questions.map((question) => {
           if (question.id === questionId) {
-            console.log(
-              "filter",
-              optionId,
-              question.options.filter((option) => option.id !== optionId)
-            );
             return {
               ...question,
               options: [
@@ -194,7 +193,7 @@ export function handleCode(questionId, shouldAdd = true) {
         if (question.id === questionId) {
           return {
             ...question,
-            code: shouldAdd ? "" : undefined,
+            code: shouldAdd ? (question.code || "") : undefined,
           };
         }
 
@@ -203,3 +202,40 @@ export function handleCode(questionId, shouldAdd = true) {
     };
   });
 }
+
+export function handleAnswerSelect(questionId, optionId) {
+  return () => {
+    questionnaire.update((q) => {
+      const { questions } = q;
+
+      return {
+        ...q,
+        questions: questions.map((question) => {
+          if (question.id === questionId) {
+            const selectOption = question.options.find(option => option.id === optionId);
+            const newAnswers = [];
+
+            if (question.answers.includes(selectOption.id)) {
+              newAnswers.push(
+                ...question.answers.filter(answer => answer !== selectOption.id)
+              )
+            } else {
+              newAnswers.push(
+                ...question.answers,
+                selectOption.id
+              )
+            }
+
+            return {
+              ...question,
+              answers: newAnswers
+            };
+          }
+
+          return question;
+        }),
+      };
+    });
+
+  }
+}

src/components/PageBody/index.svelte

@@ -3,7 +3,7 @@
   //   border border-gray-300 rounded-md p-3 bg-blue-200 bg-opacity-25
 </script>
 
-<div class="root mt-4 mx-auto max-w-3xl relative">
+<div class="root mt-4 mx-auto max-w-3xl relative pb-5">
   {#if $$slots.header}
     <div
       class="head flex bg-white items-center justify-between sticky right-0 w-full py-3"

src/components/Progress/index.svelte

@@ -0,0 +1,16 @@
+<script>
+  export let value = 0;
+</script>
+
+<div class="w-full h-3 rounded-md bg-gray-300 relative">
+  <span
+    class="progress absolute top-0 left-0 rounded-md bg-blue-700 h-full"
+    style="width: {value}%;"
+  />
+</div>
+
+<style>
+  .progress {
+    transition: width 0.5s linear;
+  }
+</style>

src/components/Question/CheckboxQuestion/index.svelte

@@ -1,5 +1,6 @@
 <script>
   import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import { VARIANTS } from "../../PrimaryButton/constants";
   import CodeSnippet from "../../CodeSnippet/index.svelte";
   import Checkbox from "../../Form/Checkbox.svelte";
 
@@ -12,6 +13,7 @@
   export let defaultValue = [];
   export let disablePreviousButton = false;
   export let isLast = false;
+  export let isPreview = false;
 
   function getRadioVal(form, name) {
     let values = [];
@@ -27,6 +29,7 @@
   }
 
   function handleFormSubmit(event) {
+    if (isPreview) return;
     const values = getRadioVal(event.target, name);
     onSubmit(name, values);
     event.target.reset();
@@ -48,7 +51,7 @@
   <div class="ml-4">
     {#each options as option}
       <button
-        class="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 border-gray-300 p-2 rounded-md cursor-pointer hover:bg-gray-200 w-full"
         type="button"
       >
         <Checkbox
@@ -60,12 +63,20 @@
       </button>
     {/each}
   </div>
-  <div class="mt-3 flex items-center justify-between w-full">
+  {#if !isPreview}
-    <PrimaryButton
+    <div class="mt-3 flex items-center justify-between w-full">
-      onClick={handlePrevious}
+      <PrimaryButton
-      label="Previous"
+        onClick={handlePrevious}
-      isDisabled={disablePreviousButton}
+        label="Previous"
-    />
+        isDisabled={disablePreviousButton}
-    <PrimaryButton type="submit" label={isLast ? "Finish" : "Next"} {name} />
+        variant={VARIANTS.OUTLINED}
-  </div>
+      />
+      <PrimaryButton
+        variant={VARIANTS.OUTLINED}
+        type="submit"
+        label={isLast ? "Finish" : "Next"}
+        {name}
+      />
+    </div>
+  {/if}
 </form>

src/components/Question/RadioQuestion/index.svelte

@@ -1,5 +1,6 @@
 <script>
   import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import { VARIANTS } from "../../PrimaryButton/constants";
   import RadioItem from "../../Form/RadioItem.svelte";
   import CodeSnippet from "../../CodeSnippet/index.svelte";
 
@@ -12,6 +13,7 @@
   export let defaultValue = "";
   export let disablePreviousButton = false;
   export let isLast = false;
+  export let isPreview = false;
 
   function getRadioVal(form, name) {
     let val;
@@ -27,6 +29,7 @@
   }
 
   function handleFormSubmit(event) {
+    if (isPreview) return;
     const value = getRadioVal(event.target, name);
     onSubmit(name, value);
     event.target.reset();
@@ -48,7 +51,7 @@
   <div class="ml-4">
     {#each options as option}
       <button
-        class="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 border-gray-300 p-2 rounded-md cursor-pointer hover:bg-gray-200 w-full"
         type="button"
       >
         <RadioItem
@@ -60,12 +63,21 @@
       </button>
     {/each}
   </div>
-  <div class="mt-3 flex items-center justify-between w-full">
+
-    <PrimaryButton
+  {#if !isPreview}
-      onClick={handlePrevious}
+    <div class="mt-3 flex items-center justify-between w-full">
-      label="Previous"
+      <PrimaryButton
-      isDisabled={disablePreviousButton}
+        onClick={handlePrevious}
-    />
+        label="Previous"
-    <PrimaryButton type="submit" label={isLast ? "Finish" : "Next"} {name} />
+        isDisabled={disablePreviousButton}
-  </div>
+        variant={VARIANTS.OUTLINED}
+      />
+      <PrimaryButton
+        variant={VARIANTS.OUTLINED}
+        type="submit"
+        label={isLast ? "Finish" : "Next"}
+        {name}
+      />
+    </div>
+  {/if}
 </form>

src/components/Question/TextareaQuestion/index.svelte

@@ -0,0 +1,61 @@
+<script>
+  import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import { VARIANTS } from "../../PrimaryButton/constants";
+  import CodeSnippet from "../../CodeSnippet/index.svelte";
+  import TextArea from "../../Form/TextArea.svelte";
+
+  export let title = "";
+  export let code;
+  export let name = "";
+  export let onSubmit = () => {};
+  export let onPrevious = () => {};
+  export let defaultValue = "";
+  export let disablePreviousButton = false;
+  export let isLast = false;
+  export let isPreview = false;
+
+  function handleFormSubmit(event) {
+    if (isPreview) return;
+
+    onSubmit(name, defaultValue);
+    event.target.reset();
+  }
+
+  function handlePrevious(event) {
+    event.preventDefault();
+    onPrevious();
+  }
+</script>
+
+<form on:submit|preventDefault={handleFormSubmit}>
+  <h2>{title}</h2>
+
+  {#if code}
+    <CodeSnippet {code} />
+  {/if}
+
+  <div class="ml-4">
+    <TextArea
+      bind:value={defaultValue}
+      rows="5"
+      placeholder="Write your answer here"
+    />
+  </div>
+
+  {#if !isPreview}
+    <div class="mt-3 flex items-center justify-between w-full">
+      <PrimaryButton
+        variant={VARIANTS.OUTLINED}
+        onClick={handlePrevious}
+        label="Previous"
+        isDisabled={disablePreviousButton}
+      />
+      <PrimaryButton
+        variant={VARIANTS.OUTLINED}
+        type="submit"
+        label={isLast ? "Finish" : "Next"}
+        {name}
+      />
+    </div>
+  {/if}
+</form>

src/components/Question/constants.js

@@ -22,8 +22,8 @@ export const QUESTION_TYPES = [
 export const QUESTION_TEMPLATE = {
   id: 1,
   title: "",
-  code: "",
   type: QUESTION_TYPE.RADIO,
+  answers: [],
   options: [
     {
       id: 1,

src/components/Tailwindcss.svelte

@@ -60,4 +60,8 @@
   button.active :global(svg.carbon-icon) {
     fill: var(--main-primary-color);
   }
+
+  button.success :global(svg.carbon-icon) {
+    fill: green;
+  }
 </style>