Add UI functionality of questionnaire builder

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

@@ -0,0 +1,150 @@
+<script>
+  import Delete24 from "carbon-icons-svelte/lib/Delete24";
+  import AddFilled24 from "carbon-icons-svelte/lib/AddFilled24";
+
+  import TextField from "../../../../Form/TextField.svelte";
+  import Checkbox from "../../../../Form/Checkbox.svelte";
+  import RadioItem from "../../../../Form/RadioItem.svelte";
+  import IconButton from "../../../../IconButton/index.svelte";
+  import Select from "../../../../Form/Select.svelte";
+  import PrimaryButton from "../../../../PrimaryButton/index.svelte";
+  import {
+    QUESTION_TYPE,
+    QUESTION_TYPES,
+  } from "../../../../Question/constants";
+  // import EditContent from "../../../../EditContent/index.svelte";
+  // import readme from "../../readme.js";
+
+  // let value = readme;
+
+  let questions = [
+    {
+      id: 1,
+      title: "",
+      type: QUESTION_TYPE.RADIO,
+      options: [
+        {
+          id: 1,
+          value: "",
+        },
+      ],
+    },
+  ];
+
+  function handleAddOption(id) {
+    return () => {
+      questions = questions.map((question) => {
+        if (question.id === id) {
+          return {
+            ...question,
+            options: [
+              ...question.options,
+              {
+                id: question.options.length + 1,
+                value: "",
+              },
+            ],
+          };
+        }
+
+        return question;
+      });
+    };
+  }
+
+  function handleOptionRemove(questionId, optionId) {
+    return () => {
+      questions = questions.map((question) => {
+        if (question.id === questionId) {
+          return {
+            ...question,
+            options: [
+              ...question.options.filter((option) => option.id !== optionId),
+            ],
+          };
+        }
+
+        return question;
+      });
+    };
+  }
+
+  function handleAddQuestion() {
+    questions = [
+      ...questions,
+      {
+        id: questions.length + 1,
+        title: "",
+        type: QUESTION_TYPE.RADIO,
+        options: [
+          {
+            id: 1,
+            value: "",
+          },
+        ],
+      },
+    ];
+  }
+</script>
+
+{#each questions as question}
+  <div
+    class="border-2 border-gray border-r-2 rounded-md px-4 py-2 mb-4 w-3/5 inline-block"
+  >
+    <div class="flex">
+      <div class="mr-2">
+        <TextField placeholder="Question" bind:value={question.title} />
+      </div>
+      <Select bind:value={question.type} options={QUESTION_TYPES} />
+    </div>
+
+    <div class="flex flex-col">
+      {#each question.options as option}
+        {#if QUESTION_TYPE.RADIO === question.type}
+          <RadioItem
+            isEditable={true}
+            name={question.title || "radio-name"}
+            bind:label={option.value}
+          >
+            <div slot="iconbutton">
+              <IconButton
+                value={option.id}
+                onClick={handleOptionRemove(question.id, option.id)}
+              >
+                <Delete24 class="carbon-icon" />
+              </IconButton>
+            </div>
+          </RadioItem>
+        {/if}
+
+        {#if QUESTION_TYPE.CHECKBOX === question.type}
+          <Checkbox
+            isEditable={true}
+            name={question || "checkbox-name"}
+            bind:label={option.value}
+          >
+            <div slot="iconbutton">
+              <IconButton
+                value={option.id}
+                onClick={handleOptionRemove(question.id)}
+              >
+                <Delete24 class="carbon-icon" />
+              </IconButton>
+            </div>
+          </Checkbox>
+        {/if}
+      {/each}
+    </div>
+
+    <div class="flex items-center">
+      <IconButton onClick={handleAddOption(question.id)}>
+        <AddFilled24 class="carbon-icon" />
+      </IconButton>
+      <p class="italic">Add option</p>
+    </div>
+  </div>
+{/each}
+
+<div class="flex justify-end mt-2">
+  <PrimaryButton onClick={handleAddQuestion} label="Add Question" />
+</div>

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

@@ -1,6 +1,7 @@
 <script>
-  import RadioQuestion from "../../../RadioQuestion/index.svelte";
-  import PrimaryButton from "../../../PrimaryButton/index.svelte";
+  import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
+  import CheckboxQuestion from "../../../../Question/CheckboxQuestion/index.svelte";
+  import PrimaryButton from "../../../../PrimaryButton/index.svelte";
 
   let answers = {};
   let currentQuestionIndex = 0;
@@ -110,6 +111,17 @@
     currentQuestionIndex += 1;
   }
 
+  function onCheckboxSubmit(name, value) {
+    if (!value) return;
+
+    answers = {
+      ...answers,
+      [name]: value,
+    };
+
+    currentQuestionIndex += 1;
+  }
+
   $: currentQuestion = questions[currentQuestionIndex - 1];
 
   function onPrevious() {
@@ -138,7 +150,7 @@
     <code>{JSON.stringify(answers)}</code>
   </pre>
 {:else}
-  <RadioQuestion
+  <!-- <RadioQuestion
     title={currentQuestionIndex + ". " + currentQuestion.title}
     name={currentQuestion.name}
     options={currentQuestion.options}
@@ -147,5 +159,15 @@
     {onPrevious}
     disablePreviousButton={currentQuestionIndex === 1}
     isLast={currentQuestionIndex === questions.length}
+  /> -->
+  <CheckboxQuestion
+    title={currentQuestionIndex + ". " + currentQuestion.title}
+    name={currentQuestion.name}
+    options={currentQuestion.options}
+    defaultValue={answers[currentQuestion.name] || []}
+    onSubmit={onCheckboxSubmit}
+    {onPrevious}
+    disablePreviousButton={currentQuestionIndex === 1}
+    isLast={currentQuestionIndex === questions.length}
   />
 {/if}

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

@@ -0,0 +1,13 @@
+<script>
+  import MODES from "../../../../../utils/constants/mode.js";
+  import EditMode from "./EditMode.svelte";
+  import ViewMode from "./ViewMode.svelte";
+
+  export let mode = "";
+</script>
+
+{#if mode === MODES.edit}
+  <EditMode />
+{:else}
+  <ViewMode />
+{/if}

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

@@ -1,8 +1,16 @@
 <script>
-  import EditContent from "../../../../EditContent/index.svelte";
-  import readme from "../../readme.js";
+  // import EditContent from "../../../../EditContent/index.svelte";
+  import TextField from "../../../../Form/TextField.svelte";
+  // import readme from "../../readme.js";
 
-  let value = readme;
+  // let value = readme;
 </script>
 
-<EditContent {value} placeholder="Start typing your lesson" />
+
+<TextField label="Slide link" />
+<TextField label="Youtube link" />
+<!-- <EditContent
+  writeLabel="Lecture Note"
+  {value}
+  placeholder="Start typing your lesson"
+/> -->

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

@@ -1,17 +1,62 @@
+<!--
+    import marked from "marked";
+    {@html marked(readme, { breaks: true, gfm: true })}
+-->
 <script>
-  import marked from "marked";
+  const activeClassName = "border-blue-700";
+  let slideLink = 'https://docs.google.com/presentation/d/e/2PACX-1vS7mulzY5v1X_D0Gz68M2sggq2zjHCuoyY5JI07hcsOA4svDV5rxhLD9V3ckO_Rz7TK1YniQJtu0CXM/embed?start=false&loop=false&delayms=3000';
+  let currentTab = 1;
 
-  const readme = `
-# Introduction
- Welcome to this course, we are glad you made it here
-
- ## What you'l learn
-
-      1. Build powerful, fast, user-friendly and reactive web apps.
-      2. Provide amazing user experiences by leveraging the power of JavaScript with ease.
-      3. Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now.
-      4. Learn all about React Hooks and React Components.
-`;
+  function handleTabClick(tab) {
+    return () => {
+      currentTab = tab;
+    }
+  }
 </script>
 
-{@html marked(readme, { breaks: true, gfm: true })}
+<div class="flex mb-2">
+  <button
+    on:click={handleTabClick(1)}
+    class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab === 1 && `${activeClassName}`}"
+  >
+    Slide
+  </button>
+  <button
+    on:click={handleTabClick(2)}
+    class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab === 2 && `${activeClassName}`}"
+  >
+    Video
+  </button>
+</div>
+
+<div class="m-2 mb-0 p-0">
+  {#if currentTab === 1}
+    <iframe
+      title="Embeded Slides"
+      src={slideLink}
+      frameborder="0"
+      width="100%"
+      height="569"
+      allowfullscreen="true"
+      mozallowfullscreen="true"
+      webkitallowfullscreen="true"
+    >
+    </iframe>
+  {:else if currentTab === 2}
+    <iframe
+      width="100%"
+      height="569"
+      src="https://www.youtube.com/embed/luM5uobewhA"
+      title="YouTube video player"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen>
+    </iframe>
+  {/if}
+</div>
+
+<style>
+  button {
+    padding: 12px 12px 8px 12px;
+  }
+</style>

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

@@ -4,7 +4,6 @@
   import ViewMode from "./ViewMode.svelte";
 
   export let mode = "";
-  $: console.log("mode", mode);
 </script>
 
 {#if mode === MODES.edit}

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

@@ -1,7 +1,7 @@
 <script>
   import PageNav from "../../../PageNav/index.svelte";
   import Classwork from "./Classwork.svelte";
-  import Homework from "./Homework.svelte";
+  import Homework from "./Homework/index.svelte";
   import Readme from "./Readme/index.svelte";
   import PrimaryContainedButton from "../../../PrimaryContainedButton/index.svelte";
 
@@ -21,29 +21,47 @@
   }
 </script>
 
+<div>
+  <PageNav
+    navItems={[
+      {
+        label: "README.md",
+        isActive: tab === "lectures",
+        href: `${path}?tab=lectures`,
+      },
+      {
+        label: "Class work",
+        isActive: tab === "classwork",
+        href: `${path}?tab=classwork`,
+      },
+      {
+        label: "Hometasks",
+        isActive: tab === "hometasks",
+        href: `${path}?tab=hometasks`,
+      },
+    ]}
+  >
+    <div slot="widget">
+      <PrimaryContainedButton
+        label={modeLabel}
+        handleClick={handleModeChange}
+      />
+    </div>
+  </PageNav>
+
+  <div class="course">
+    {#if tab === "lectures"}
+      <Readme {mode} />
+    {:else if tab === "classwork"}
+      <Classwork />
+    {:else if tab === "hometasks"}
+      <Homework {mode} />
+    {/if}
+  </div>
+</div>
+
 <style>
   .course {
     padding: 0 40px;
   }
 </style>
-
-<div>
-  <PageNav
-    navItems={[{ label: 'README.md', isActive: tab === 'lectures', href: `${path}?tab=lectures` }, { label: 'Class work', isActive: tab === 'classwork', href: `${path}?tab=classwork` }, { label: 'Hometasks', isActive: tab === 'hometasks', href: `${path}?tab=hometasks` }]}>
-    <div slot="widget">
-      <PrimaryContainedButton
-        label={modeLabel}
-        handleClick={handleModeChange} />
-    </div>
-  </PageNav>
-
-  <div class="course">
-    {#if tab === 'lectures'}
-      <Readme {mode} />
-    {:else if tab === 'classwork'}
-      <Classwork />
-    {:else if tab === 'hometasks'}
-      <Homework {mode} />
-    {/if}
-  </div>
-</div>

src/components/EditContent/index.svelte

@@ -1,8 +1,8 @@
 <script>
   import marked from "marked";
-  import PrimaryButton from "../PrimaryButton/index.svelte";
 
   let isWriteMode = true;
+  export let writeLabel = 'Write';
   export let value;
   export let placeholder = ``;
   const activeClassName = "border-b-2 border-blue-700";
@@ -13,12 +13,12 @@
 </script>
 
 <div class="root">
-  <div class="flex justify-center">
+  <div class="flex">
     <button
       on:click={handleTabClick(1)}
       class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
     >
-      Write
+      {writeLabel}
     </button>
     <button
       on:click={handleTabClick(2)}
@@ -27,46 +27,6 @@
       Preview
     </button>
   </div>
-  <div class="block">
-    <span class="text-gray-700">Radio Buttons</span>
-    <div class="mt-2">
-      <div>
-        <label class="inline-flex items-center">
-          <input
-            class="form-radio"
-            type="radio"
-            checked
-            name="radio-direct"
-            value="1"
-          />
-          <span class="ml-2">Option 1</span>
-        </label>
-      </div>
-      <div>
-        <label class="inline-flex items-center">
-          <input
-            class="form-radio"
-            type="radio"
-            name="radio-direct"
-            value="2"
-          />
-          <span class="ml-2">Option 2</span>
-        </label>
-      </div>
-      <div>
-        <label class="inline-flex items-center">
-          <input
-            class="form-radio"
-            type="radio"
-            name="radio-direct"
-            value="3"
-          />
-          <span class="ml-2">Option 3</span>
-        </label>
-      </div>
-    </div>
-  </div>
-
   <div class="m-2 mb-0 p-0">
     {#if isWriteMode}
       <textarea
@@ -113,6 +73,11 @@
     min-height: 200px;
   }
 
+  .form-item {
+    display: flex;
+    align-items: flex-end;
+  }
+
   textarea {
     width: 100%;
     height: 500px;

src/components/Form/Checkbox.svelte

@@ -3,6 +3,7 @@
   export let value;
   export let checked;
   export let name;
+  export let isEditable = false;
 </script>
 
 <label class="inline-flex items-center">
@@ -11,7 +12,19 @@
     class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
     {name}
     {value}
+    disabled={isEditable}
     bind:checked
   />
-  <span class="ml-2">{label}</span>
+  {#if isEditable}
+    <input
+      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+      type="text"
+      placeholder="Your option"
+      bind:value={label}
+    />
+  {:else}
+    <span class="ml-2">{label}</span>
+  {/if}
+
+  <slot name="iconbutton" />
 </label>

src/components/Form/RadioItem.svelte

@@ -3,9 +3,28 @@
   export let value;
   export let checked;
   export let name;
+  export let isEditable = false;
 </script>
 
 <label class="inline-flex items-center">
-  <input class="form-radio" type="radio" {checked} {name} {value} />
-  <span class="ml-2">{label}</span>
+  <input
+    class="form-radio"
+    type="radio"
+    {checked}
+    {name}
+    {value}
+    disabled={isEditable}
+  />
+  {#if isEditable}
+    <input
+      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+      type="text"
+      placeholder="Your option"
+      bind:value={label}
+    />
+  {:else}
+    <span class="ml-2">{label}</span>
+  {/if}
+
+  <slot name="iconbutton" />
 </label>

src/components/Form/Select.svelte

@@ -1,12 +1,11 @@
 <script>
   export let label;
-  export let placeholder;
   export let value;
   export let options = [];
 </script>
 
 <label class="block">
-  <span class="text-gray-700">{label}</span>
+  {#if label} <span class="text-gray-700">{label}</span> {/if}
   <select bind:value class="form-select block w-full mt-1">
     {#each options as option}
       <option value={option.id}>

src/components/Form/TextField.svelte

@@ -5,10 +5,10 @@
   export let onKeyDown;
 </script>
 
-<label class="block">
-  {#if label}<span class="text-gray-700">{label}</span>{/if}
+<label class="block mb-3">
+  {#if label}<h4 class="m-0">{label}</h4>{/if}
   <input
-    class="form-input p-4 mt-1 block w-full rounded-t-lg bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+    class="form-input p-2 mt-1 block w-full bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
     type="text"
     on:keydown={onKeyDown}
     {placeholder}

src/components/Question/CheckboxQuestion/index.svelte

@@ -0,0 +1,60 @@
+<script>
+  import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import Checkbox from "../../Form/Checkbox.svelte";
+
+  export let title = "";
+  export let name = "";
+  export let options = [];
+  export let onSubmit = () => {};
+  export let onPrevious = () => {};
+  export let defaultValue = [];
+  export let disablePreviousButton = false;
+  export let isLast = false;
+
+  function getRadioVal(form, name) {
+    let values = [];
+    const radios = form.elements[name];
+
+    for (let i = 0, len = radios.length; i < len; i++) {
+      if (radios[i].checked) {
+        values.push(radios[i].value);
+      }
+    }
+
+    return values;
+  }
+
+  function handleFormSubmit(event) {
+    const values = getRadioVal(event.target, name);
+    onSubmit(name, values);
+    event.target.reset();
+  }
+
+  function handlePrevious(event) {
+    event.preventDefault();
+    onPrevious();
+  }
+</script>
+
+<form on:submit|preventDefault={handleFormSubmit}>
+  <h2>{title}</h2>
+
+  <div class="ml-4">
+    {#each options as option}
+      <div>
+        <Checkbox
+          {name}
+          value={option.value}
+          checked={defaultValue.includes(option.value)}
+          label={option.label}
+        />
+      </div>
+    {/each}
+  </div>
+  <div class="mt-3">
+    {#if disablePreviousButton === false}
+      <PrimaryButton onClick={handlePrevious} label="Previous" />
+    {/if}
+    <PrimaryButton type="submit" label={isLast ? "Finish" : "Next"} {name} />
+  </div>
+</form>

src/components/Question/RadioQuestion/index.svelte

@@ -1,6 +1,6 @@
 <script>
-  import PrimaryButton from "../PrimaryButton/index.svelte";
-  import RadioItem from "../Form/RadioItem.svelte";
+  import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import RadioItem from "../../Form/RadioItem.svelte";
 
   export let title = "";
   export let name = "";

src/components/Question/constants.js

@@ -0,0 +1,20 @@
+export const QUESTION_TYPE = {
+  RADIO: "RADIO",
+  CHECKBOX: "CHECKBOX",
+  TEXTAREA: "TEXTAREA",
+};
+
+export const QUESTION_TYPES = [
+  {
+    id: QUESTION_TYPE.RADIO,
+    text: "Single answer",
+  },
+  {
+    id: QUESTION_TYPE.CHECKBOX,
+    text: "Multiple answers",
+  },
+  {
+    id: QUESTION_TYPE.TEXTAREA,
+    text: "Paragraph",
+  },
+];