Styling updates

src/components/Course/components/CourseNav.svelte

@@ -43,6 +43,55 @@
   }
 </script>
 
+<div class="root">
+  <PageNav title="React.JS" />
+  <div>
+    <Expandable
+      label="Overview"
+      handleClick={handleMainGroupClick("/courses/1")}
+      isGroupActive={$page.path === "/courses/1"}
+      hideSortIcon
+    />
+    <Expandable label="Lectures">
+      {#each lectures as lecture, index}
+        <a
+          class="item {(lecture.link === $page.path ||
+            !$page.path.length > 3) &&
+            'active'} pl-7 py-2"
+          href={lecture.link}
+        >
+          <span class="course-counter"> {getLectureNo(index)} </span>
+          <span>{lecture.title}</span>
+        </a>
+      {/each}
+    </Expandable>
+    <Expandable
+      label="People"
+      handleClick={handleMainGroupClick("/courses/1/people")}
+      isGroupActive={$page.path === "/courses/1/people"}
+      hideSortIcon
+    />
+    <Expandable
+      label="Timetable"
+      handleClick={handleMainGroupClick("/courses/1/timetable")}
+      isGroupActive={$page.path === "/courses/1/timetable"}
+      hideSortIcon
+    />
+    <Expandable
+      label="Scoreboard"
+      handleClick={handleMainGroupClick("/courses/1/score")}
+      isGroupActive={$page.path === "/courses/1/score"}
+      hideSortIcon
+    />
+    <Expandable
+      label="Home tasks"
+      handleClick={handleMainGroupClick("/courses/1/hometasks")}
+      isGroupActive={$page.path === "/courses/1/hometasks"}
+      hideSortIcon
+    />
+  </div>
+</div>
+
 <style lang="scss">
   .root {
     height: 90vh;
@@ -70,49 +119,9 @@
   }
 
   .item {
+    font-size: 0.875rem;
     &:hover {
       background-color: #cae2f9;
     }
   }
 </style>
-
-<div class="root">
-  <PageNav title="React.JS" />
-  <div>
-    <Expandable
-      label="Overview"
-      handleClick={handleMainGroupClick('/courses/1')}
-      isGroupActive={$page.path === '/courses/1'}
-      hideSortIcon />
-    <Expandable label="Lectures">
-      {#each lectures as lecture, index}
-        <a
-          class="item {(lecture.link === $page.path || !$page.path.length > 3) && 'active'} pl-7 py-2"
-          href={lecture.link}>
-          <span class="course-counter"> {getLectureNo(index)} </span>
-          <span>{lecture.title}</span>
-        </a>
-      {/each}
-    </Expandable>
-    <Expandable
-      label="People"
-      handleClick={handleMainGroupClick('/courses/1/people')}
-      isGroupActive={$page.path === '/courses/1/people'}
-      hideSortIcon />
-    <Expandable
-      label="Timetable"
-      handleClick={handleMainGroupClick('/courses/1/timetable')}
-      isGroupActive={$page.path === '/courses/1/timetable'}
-      hideSortIcon />
-    <Expandable
-      label="Scoreboard"
-      handleClick={handleMainGroupClick('/courses/1/score')}
-      isGroupActive={$page.path === '/courses/1/score'}
-      hideSortIcon />
-    <Expandable
-      label="Home tasks"
-      handleClick={handleMainGroupClick('/courses/1/hometasks')}
-      isGroupActive={$page.path === '/courses/1/hometasks'}
-      hideSortIcon />
-  </div>
-</div>

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

@@ -1,44 +1,106 @@
 <script>
-  import yaml from "js-yaml";
   import RadioQuestion from "../../../RadioQuestion/index.svelte";
   import PrimaryButton from "../../../PrimaryButton/index.svelte";
-  import EditMode from "../../../EditMode/index.svelte";
-  import { generateQuestion } from "./functions";
 
-  export let mode;
-
-  let someYamlFile = `
-    about: This is the description of the home task
-    questions:
-    - title: Where is the founder of react?
-      type: radio
-      options:
-        - label: Mark Zukerberg
-        - label: Trake Towa
-        - label: Emeka Igwe
-          answer: true
-    - title: Who is the founder of react?
-      type: radio
-      options:
-        - label: Evan Vue
-          answer: true
-        - label: Richard Brandson
-        - label: Collison True
-  `;
-  const questionnaire = yaml.load(someYamlFile, "utf8");
-  const questions = generateQuestion(questionnaire.questions);
   let answers = {};
   let currentQuestionIndex = 0;
   let currentQuestion = {};
 
+  const questions = [
+    {
+      name: "react-founder",
+      type: "radio",
+      title: "Who is the creator of React.js",
+      options: [
+        {
+          label: "Dan Abrahmov",
+          value: "danabrahmov",
+        },
+        {
+          label: "Google",
+          value: "google",
+        },
+        {
+          label: "Facebook",
+          value: "Facebook",
+        },
+        {
+          label: "Traversy Media",
+          value: "traversymedia",
+        },
+      ],
+    },
+    {
+      name: "vue-founder",
+      type: "radio",
+      title: "Who is the creator of Vue.js",
+      options: [
+        {
+          label: "Evan Vue",
+          value: "evan-vue",
+        },
+        {
+          label: "Mark Zukerberg",
+          value: "mark",
+        },
+        {
+          label: "Prince Charles",
+          value: "prince-charles",
+        },
+        {
+          label: "Bill Gates",
+          value: "gates-bill",
+        },
+      ],
+    },
+    {
+      name: "svelte-founder",
+      type: "radio",
+      title: "Who is the creator of Svelte.js",
+      options: [
+        {
+          label: "Hillary Svelte",
+          value: "danabrahmov",
+        },
+        {
+          label: "Mircosoft",
+          value: "microsoft",
+        },
+        {
+          label: "Elevate",
+          value: "elevate",
+        },
+        {
+          label: "Coding Train",
+          value: "coding-train",
+        },
+      ],
+    },
+    {
+      name: "angular-founder",
+      type: "radio",
+      title: "Who is the creator of Angular.js",
+      options: [
+        {
+          label: "Laryy page",
+          value: "larry-page",
+        },
+        {
+          label: "Google",
+          value: "google",
+        },
+        {
+          label: "Sales Force",
+          value: "sales-force",
+        },
+      ],
+    },
+  ];
+
   function handleStart() {
     currentQuestionIndex += 1;
   }
 
-  function onPrevious() {
-    currentQuestionIndex -= 1;
-  }
-
   function onSubmit(name, value) {
     if (!value) return;
     answers = {
@@ -49,35 +111,41 @@
   }
 
   $: currentQuestion = questions[currentQuestionIndex - 1];
+
+  function onPrevious() {
+    currentQuestionIndex -= 1;
+  }
 </script>
 
-<EditMode value={someYamlFile}>
-  <div slot="preview">
-    {#if currentQuestionIndex === 0}
-      <div>
-        <h2>Home task 1</h2>
-        <p>{questionnaire.about}</p>
+{#if currentQuestionIndex === 0}
+  <div>
+    <h2>Home task 1</h2>
+    <p>
+      You will be to answer 10 questions, it isn't timed so you can take your
+      time to answer. You can also continue from where you left off, you don't
+      need to worry cause everything is automatically syncronized in the cloud.
+    </p>
 
-        <PrimaryButton
-          onClick={handleStart}
-          label="Start"
-          className="my-5"
-          type="button" />
-      </div>
-    {:else if !currentQuestion}
-      <pre>
-      <code>{JSON.stringify(answers)}</code>
-    </pre>
-    {:else}
-      <RadioQuestion
-        title={currentQuestionIndex + '. ' + currentQuestion.title}
-        name={currentQuestion.name}
-        options={currentQuestion.options}
-        defaultValue={answers[currentQuestion.name] || false}
-        {onSubmit}
-        {onPrevious}
-        disablePreviousButton={currentQuestionIndex === 1}
-        isLast={currentQuestionIndex === questions.length} />
-    {/if}
+    <PrimaryButton
+      onClick={handleStart}
+      label="Start"
+      className="my-5"
+      type="button"
+    />
   </div>
-</EditMode>
+{:else if !currentQuestion}
+  <pre>
+    <code>{JSON.stringify(answers)}</code>
+  </pre>
+{:else}
+  <RadioQuestion
+    title={currentQuestionIndex + ". " + currentQuestion.title}
+    name={currentQuestion.name}
+    options={currentQuestion.options}
+    defaultValue={answers[currentQuestion.name] || false}
+    {onSubmit}
+    {onPrevious}
+    disablePreviousButton={currentQuestionIndex === 1}
+    isLast={currentQuestionIndex === questions.length}
+  />
+{/if}

src/components/Form/Select.svelte

@@ -3,8 +3,6 @@
   export let placeholder;
   export let value;
   export let options = [];
-
-  let answer = "Work on ";
 </script>
 
 <label class="block">