From 4124a1fc0268cf0903b11bcba0899c0b1a0042cf Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 10 Jul 2021 19:16:10 +0000
Subject: [PATCH] Restructure course routes + list of exercises

---
 package-lock.json                             |  16 ++
 package.json                                  |   1 +
 src/client.js                                 |   7 +-
 .../Course/components/HomeTask.svelte         |   8 -
 .../components/Lecture/Classwork.svelte       |   1 -
 .../{Homework => Exercises}/EditMode.svelte   |   0
 .../Exercise.svelte}                          |   4 +-
 .../components/Lecture/Exercises/List.svelte  |  66 +++++++
 .../{Homework => Exercises}/ViewMode.svelte   |  30 ++--
 .../components/Lecture/Exercises/constants.js |   4 +
 .../components/Lecture/Exercises/index.svelte |  13 ++
 .../Lecture/Exercises/store/answers.js        |  21 +++
 .../{Homework => Exercises}/store/index.js    |   0
 .../components/Lecture/Home/index.svelte      | 149 ----------------
 .../Lecture/Homework/store/answers.js         |   9 -
 .../Course/components/Lecture/index.svelte    |  62 +++----
 .../index.svelte}                             |  32 ++--
 .../Course/components/People.svelte           |  76 --------
 .../Course/components/Scoreboard.svelte       |   8 -
 .../Course/components/TimeTable.svelte        |   8 -
 src/components/CourseContainer/index.svelte   |  28 +++
 .../Question/CheckboxQuestion/index.svelte    |   4 +-
 .../Question/RadioQuestion/index.svelte       |   4 +-
 .../Question/TextareaQuestion/index.svelte    |   9 +-
 src/routes/_layout.svelte                     |   3 +-
 src/routes/courses/[...id]/exercises.svelte   |  18 ++
 src/routes/courses/[...id]/index.svelte       |  61 +------
 .../[...id]/lecture/[...id]/index.svelte      |  27 +++
 .../courses/[...id]/lecture/index.svelte      | 166 ++++++++++++++++++
 src/routes/courses/[...id]/people.svelte      |  88 ++++++++++
 src/routes/courses/[...id]/scoreboard.svelte  |  18 ++
 src/routes/courses/[...id]/timetable.svelte   |  18 ++
 32 files changed, 569 insertions(+), 390 deletions(-)
 delete mode 100644 src/components/Course/components/HomeTask.svelte
 delete mode 100644 src/components/Course/components/Lecture/Classwork.svelte
 rename src/components/Course/components/Lecture/{Homework => Exercises}/EditMode.svelte (100%)
 rename src/components/Course/components/Lecture/{Homework/index.svelte => Exercises/Exercise.svelte} (98%)
 create mode 100644 src/components/Course/components/Lecture/Exercises/List.svelte
 rename src/components/Course/components/Lecture/{Homework => Exercises}/ViewMode.svelte (90%)
 create mode 100644 src/components/Course/components/Lecture/Exercises/constants.js
 create mode 100644 src/components/Course/components/Lecture/Exercises/index.svelte
 create mode 100644 src/components/Course/components/Lecture/Exercises/store/answers.js
 rename src/components/Course/components/Lecture/{Homework => Exercises}/store/index.js (100%)
 delete mode 100644 src/components/Course/components/Lecture/Home/index.svelte
 delete mode 100644 src/components/Course/components/Lecture/Homework/store/answers.js
 rename src/components/Course/components/{CourseNav.svelte => Navigation/index.svelte} (90%)
 delete mode 100644 src/components/Course/components/People.svelte
 delete mode 100644 src/components/Course/components/Scoreboard.svelte
 delete mode 100644 src/components/Course/components/TimeTable.svelte
 create mode 100644 src/components/CourseContainer/index.svelte
 create mode 100644 src/routes/courses/[...id]/exercises.svelte
 create mode 100644 src/routes/courses/[...id]/lecture/[...id]/index.svelte
 create mode 100644 src/routes/courses/[...id]/lecture/index.svelte
 create mode 100644 src/routes/courses/[...id]/people.svelte
 create mode 100644 src/routes/courses/[...id]/scoreboard.svelte
 create mode 100644 src/routes/courses/[...id]/timetable.svelte

diff --git a/package-lock.json b/package-lock.json
index 0b47c2de..a1c8a4bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1702,6 +1702,16 @@
       "integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==",
       "dev": true
     },
+    "carbon-components-svelte": {
+      "version": "0.39.0",
+      "resolved": "https://registry.npmjs.org/carbon-components-svelte/-/carbon-components-svelte-0.39.0.tgz",
+      "integrity": "sha512-pz6P8JwU959YyrjJ9TUxM4O9uVjj51htGFWHAXyH2ou2TcY2t2u8DgRQMAXImAqVpwOKgwTNJ5HhnEzNyFhiSw==",
+      "dev": true,
+      "requires": {
+        "carbon-icons-svelte": "^10.27.0",
+        "flatpickr": "4.6.9"
+      }
+    },
     "carbon-icons-svelte": {
       "version": "10.28.0",
       "resolved": "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.28.0.tgz",
@@ -2214,6 +2224,12 @@
         "pinkie-promise": "^2.0.0"
       }
     },
+    "flatpickr": {
+      "version": "4.6.9",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.9.tgz",
+      "integrity": "sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==",
+      "dev": true
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
diff --git a/package.json b/package.json
index d5cf1fc8..7d92f2af 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@rollup/plugin-node-resolve": "^8.0.0",
     "@rollup/plugin-replace": "^2.2.0",
     "@tailwindcss/typography": "^0.3.1",
+    "carbon-components-svelte": "^0.39.0",
     "carbon-icons-svelte": "^10.21.0",
     "postcss": "^8.0.9",
     "postcss-load-config": "^2.1.0",
diff --git a/src/client.js b/src/client.js
index cec91725..aef11056 100644
--- a/src/client.js
+++ b/src/client.js
@@ -1,5 +1,6 @@
-import * as sapper from '@sapper/app';
+import "carbon-components-svelte/css/all.css";
+import * as sapper from "@sapper/app";
 
 sapper.start({
-	target: document.querySelector('#sapper')
-});
\ No newline at end of file
+  target: document.querySelector("#sapper"),
+});
diff --git a/src/components/Course/components/HomeTask.svelte b/src/components/Course/components/HomeTask.svelte
deleted file mode 100644
index b887b438..00000000
--- a/src/components/Course/components/HomeTask.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  import PageNav from "../../PageNav/index.svelte";
-</script>
-
-<style>
-</style>
-
-<PageNav title="Home tasks" />
diff --git a/src/components/Course/components/Lecture/Classwork.svelte b/src/components/Course/components/Lecture/Classwork.svelte
deleted file mode 100644
index 6405a849..00000000
--- a/src/components/Course/components/Lecture/Classwork.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<div>class work</div>
diff --git a/src/components/Course/components/Lecture/Homework/EditMode.svelte b/src/components/Course/components/Lecture/Exercises/EditMode.svelte
similarity index 100%
rename from src/components/Course/components/Lecture/Homework/EditMode.svelte
rename to src/components/Course/components/Lecture/Exercises/EditMode.svelte
diff --git a/src/components/Course/components/Lecture/Homework/index.svelte b/src/components/Course/components/Lecture/Exercises/Exercise.svelte
similarity index 98%
rename from src/components/Course/components/Lecture/Homework/index.svelte
rename to src/components/Course/components/Lecture/Exercises/Exercise.svelte
index 0f09afb0..3bfddbbb 100644
--- a/src/components/Course/components/Lecture/Homework/index.svelte
+++ b/src/components/Course/components/Lecture/Exercises/Exercise.svelte
@@ -2,11 +2,13 @@
   import { handleAddQuestion } from "./store/index";
   import PrimaryButton from "../../../../PrimaryButton/index.svelte";
   import PageBody from "../../../../PageBody/index.svelte";
-  import EditMode from "./EditMode.svelte";
   import ViewMode from "./ViewMode.svelte";
+  import EditMode from "./EditMode.svelte";
   import MODES from "../../../../../utils/constants/mode.js";
   import { VARIANTS } from "../../../../PrimaryButton/constants";
 
+  export let exerciseId;
+
   let mode = MODES.view;
   let preview = false;
 
diff --git a/src/components/Course/components/Lecture/Exercises/List.svelte b/src/components/Course/components/Lecture/Exercises/List.svelte
new file mode 100644
index 00000000..d50c3695
--- /dev/null
+++ b/src/components/Course/components/Lecture/Exercises/List.svelte
@@ -0,0 +1,66 @@
+<script>
+  import { Modal } from "carbon-components-svelte";
+  import PrimaryButton from "../../../../PrimaryButton/index.svelte";
+  import PageBody from "../../../../PageBody/index.svelte";
+  import TextField from "../../../../Form/TextField.svelte";
+
+  export let path;
+
+  let exercises = [
+    {
+      id: 1,
+      title: "Practice Exercise",
+      link: `${path}&exerciseId=1`,
+    },
+    {
+      id: 2,
+      title: "Home task",
+      link: `${path}&exerciseId=2`,
+    },
+  ];
+  let exerciseEditing;
+  let open = false;
+  let newExercise = {
+    id: 1,
+    title: "",
+    link: "",
+  };
+
+  function handleAddExercise() {
+    open = true;
+  }
+</script>
+
+<Modal
+  size="sm"
+  bind:open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>
+
+<PageBody width="w-11/12 m-auto">
+  <slot:fragment slot="header">
+    <PrimaryButton className="mr-2" label="Add" onClick={handleAddExercise} />
+  </slot:fragment>
+
+  <div class="flex flex-wrap">
+    {#each exercises as exercise, index}
+      <a class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4" href={exercise.link}>
+        {#if exerciseEditing === index}
+          <TextField bind:value={exercise.title} autofocus={true} />
+        {:else}
+          <h3 class="text-xl">{exercise.title}</h3>
+        {/if}
+
+        <p class="mt-4 text-sm">Created Jul 3, 2021</p>
+      </a>
+    {/each}
+  </div>
+</PageBody>
diff --git a/src/components/Course/components/Lecture/Homework/ViewMode.svelte b/src/components/Course/components/Lecture/Exercises/ViewMode.svelte
similarity index 90%
rename from src/components/Course/components/Lecture/Homework/ViewMode.svelte
rename to src/components/Course/components/Lecture/Exercises/ViewMode.svelte
index a599bfb1..6b6c3559 100644
--- a/src/components/Course/components/Lecture/Homework/ViewMode.svelte
+++ b/src/components/Course/components/Lecture/Exercises/ViewMode.svelte
@@ -8,6 +8,7 @@
   import Progress from "../../../../Progress/index.svelte";
   import { removeDuplicate } from "../../../../../utils/functions/removeDuplicate";
   import { QUESTION_TYPE } from "../../../../Question/constants";
+  import { STATUS } from "./constants";
 
   export let preview;
 
@@ -113,10 +114,10 @@
     };
   }
 
-  function getTotalScores(scoresObject) {
+  function getTotalScores() {
     let total = 0;
-    for (const score in scoresObject) {
-      total += score;
+    for (const score in $userQuestionniareAnswers.scores) {
+      total += parseInt($userQuestionniareAnswers.scores[score]);
     }
 
     return total;
@@ -206,19 +207,28 @@
   <div class="flex items-center justify-between">
     <div class="flex flex-col justify-between">
       <h2 class="text-xl mb-2 mt-0">{title}</h2>
-      <span
-        class="bg-green-700 text-white rounded-full py-2 px-6 text-center"
-        title="Status: Pending Review"
-      >
-        Pending Review
-      </span>
+      {#if STATUS.IN_PROGRESS === $userQuestionniareAnswers.status}
+        <span
+          class="bg-yellow-600 text-white rounded-full py-2 px-6 text-center"
+          title="Status: Pending Review"
+        >
+          Pending
+        </span>
+      {:else if STATUS.REVIEWED === $userQuestionniareAnswers.status && getTotalScores() > 0}
+        <span
+          class="bg-green-700 text-white rounded-full py-2 px-6 text-center"
+          title="Status: Pending Review"
+        >
+          Reviewed
+        </span>
+      {/if}
     </div>
 
     <span
       class="border-2 border-gray-700 rounded-full h-24 w-24 flex items-center justify-center text-2xl"
       title="Status: Pending Review"
     >
-      {getTotalScores($userQuestionniareAnswers.scores)}/100
+      {getTotalScores()}/100
     </span>
   </div>
   {#each questions as currentQuestion, currentQuestionIndex}
diff --git a/src/components/Course/components/Lecture/Exercises/constants.js b/src/components/Course/components/Lecture/Exercises/constants.js
new file mode 100644
index 00000000..dc8db2c8
--- /dev/null
+++ b/src/components/Course/components/Lecture/Exercises/constants.js
@@ -0,0 +1,4 @@
+export const STATUS = {
+  IN_PROGRESS: 0,
+  REVIEWED: 1,
+};
\ No newline at end of file
diff --git a/src/components/Course/components/Lecture/Exercises/index.svelte b/src/components/Course/components/Lecture/Exercises/index.svelte
new file mode 100644
index 00000000..bd3e56e3
--- /dev/null
+++ b/src/components/Course/components/Lecture/Exercises/index.svelte
@@ -0,0 +1,13 @@
+<script>
+  import List from "./List.svelte";
+  import Exercise from "./Exercise.svelte";
+
+  export let exerciseId;
+  export let path;
+</script>
+
+{#if exerciseId}
+  <Exercise {exerciseId} />
+{:else}
+  <List {path} />
+{/if}
diff --git a/src/components/Course/components/Lecture/Exercises/store/answers.js b/src/components/Course/components/Lecture/Exercises/store/answers.js
new file mode 100644
index 00000000..2fbdf6e6
--- /dev/null
+++ b/src/components/Course/components/Lecture/Exercises/store/answers.js
@@ -0,0 +1,21 @@
+import { writable } from "svelte/store";
+
+import { STATUS } from "../constants";
+
+// export const userQuestionniareAnswers = writable({
+//   answers: {},
+//   scores: { gates: 60 },
+//   currentQuestionIndex: 5,
+//   isFinished: true,
+//   progressValue: 100,
+//   status: STATUS.REVIEWED,
+// });
+
+export const userQuestionniareAnswers = writable({
+  answers: {},
+  scores: {},
+  currentQuestionIndex: 0,
+  isFinished: false,
+  progressValue: 100,
+  status: STATUS.IN_PROGRESS,
+});
diff --git a/src/components/Course/components/Lecture/Homework/store/index.js b/src/components/Course/components/Lecture/Exercises/store/index.js
similarity index 100%
rename from src/components/Course/components/Lecture/Homework/store/index.js
rename to src/components/Course/components/Lecture/Exercises/store/index.js
diff --git a/src/components/Course/components/Lecture/Home/index.svelte b/src/components/Course/components/Lecture/Home/index.svelte
deleted file mode 100644
index 100ba3da..00000000
--- a/src/components/Course/components/Lecture/Home/index.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script>
-  import Time24 from "carbon-icons-svelte/lib/Time24";
-  import Edit24 from "carbon-icons-svelte/lib/Edit24";
-  import Save24 from "carbon-icons-svelte/lib/Save24";
-  import CheckmarkFilled24 from "carbon-icons-svelte/lib/CheckmarkFilled24";
-  import PageNav from "../../../../PageNav/index.svelte";
-  import PageBody from "../../../../PageBody/index.svelte";
-  import PrimaryButton from "../../../../PrimaryButton/index.svelte";
-  import TextField from "../../../../Form/TextField.svelte";
-  import IconButton from "../../../../IconButton/index.svelte";
-  import Select from "../../../../Form/Select.svelte";
-
-  import { lessons, lecturers, handleAddLesson } from "../store/lessons";
-
-  // export let path;
-
-  let lectureEditing;
-  let ref;
-
-  function formatDate(date) {
-    const d = new Date(date);
-
-    const ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
-    const mo = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(d);
-    const da = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(d);
-
-    return `${ye}-${mo}-${da}`;
-  }
-
-  function addLesson() {
-    handleAddLesson();
-    setTimeout(() => {
-      lectureEditing = $lessons.length - 1;
-      if (ref) {
-        ref.scrollIntoView({ block: "end", behavior: "smooth" });
-      }
-    }, 100);
-  }
-</script>
-
-<PageNav title="Lectures">
-  <div slot="widget">
-    <PrimaryButton label="Add" onClick={addLesson} />
-  </div>
-</PageNav>
-
-<PageBody width="w-11/12 m-auto">
-  <div class="w-4/5 m-auto">
-    {#each $lessons as lecture, index}
-      <div
-        bind:this={ref}
-        class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mr-4 mb-4 flex items-center hover:shadow-2xl shadow-md transition delay-150 duration-300 ease-in-out"
-      >
-        <!-- Complete or Not complete icon -->
-        <div class="absolute -left-6 -top-6 success">
-          <IconButton
-            onClick={() => (lecture.isComplete = !lecture.isComplete)}
-          >
-            {#if lecture.isComplete}
-              <CheckmarkFilled24 class="carbon-icon" />
-            {:else}
-              <span class="text-2xl">🔒</span>
-            {/if}
-          </IconButton>
-        </div>
-
-        <!-- Edit/Save -->
-        <div class="absolute top-2 right-0">
-          {#if lectureEditing === index}
-            <IconButton onClick={() => (lectureEditing = null)}>
-              <Save24 class="carbon-icon" />
-            </IconButton>
-          {:else}
-            <IconButton onClick={() => (lectureEditing = index)}>
-              <Edit24 class="carbon-icon" />
-            </IconButton>
-          {/if}
-        </div>
-
-        <div class="">
-          <h3 class="text-4xl font-bold">{index + 1}</h3>
-        </div>
-        <div class="ml-8 w-4/5">
-          {#if lectureEditing === index}
-            <TextField bind:value={lecture.title} autofocus={true} />
-          {:else}
-            <h3 class="text-3xl font-semibold m-0 flex items-center">
-              <a href={lecture.to} class="hover:underline text-black">
-                {lecture.title}
-              </a>
-            </h3>
-          {/if}
-          <div class="flex items-center mb-2">
-            <div class="flex items-center mr-2">
-              {lecture.resources.map((r) => `${r.value} ${r.label}`).join(", ")}
-            </div>
-          </div>
-
-          <div class="flex items-center justify-between mt-3 w-full">
-            {#if lectureEditing === index}
-              <Select
-                bind:value={lecture.lecturer.name}
-                options={$lecturers}
-                valueKey="text"
-              />
-            {:else}
-              <a
-                href="courses/1/people"
-                class="flex items-center hover:underline text-black"
-              >
-                <img
-                  alt="Placeholder"
-                  class="block rounded-full"
-                  width="24"
-                  height="20"
-                  src={lecture.lecturer.avatar}
-                />
-                <p class="ml-2 text-sm font-bold">{lecture.lecturer.name}</p>
-              </a>
-            {/if}
-
-            <div class="flex items-center">
-              {#if lectureEditing === index}
-                <input
-                  type="date"
-                  name="lecture-date-picker"
-                  class="p-2 rounded-md w-40"
-                  value={formatDate(lecture.date)}
-                  on:input={(e) => (lecture.date = e.target.value)}
-                />
-              {:else}
-                <Time24 class="carbon-icon" />
-                <p class="text-md font-semibold ml-2">
-                  {new Date(lecture.date).toDateString()}
-                </p>
-              {/if}
-            </div>
-          </div>
-        </div>
-      </div>
-    {/each}
-  </div>
-</PageBody>
-
-<style>
-  .group {
-    min-height: 170px;
-  }
-</style>
diff --git a/src/components/Course/components/Lecture/Homework/store/answers.js b/src/components/Course/components/Lecture/Homework/store/answers.js
deleted file mode 100644
index d954a7db..00000000
--- a/src/components/Course/components/Lecture/Homework/store/answers.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { writable } from "svelte/store";
-
-export const userQuestionniareAnswers = writable({
-  answers: {},
-  scores: {},
-  currentQuestionIndex: 5,
-  isFinished: true,
-  progressValue: 100,
-});
diff --git a/src/components/Course/components/Lecture/index.svelte b/src/components/Course/components/Lecture/index.svelte
index 737cf5ee..7fdb15b9 100644
--- a/src/components/Course/components/Lecture/index.svelte
+++ b/src/components/Course/components/Lecture/index.svelte
@@ -1,51 +1,37 @@
 <script>
   import PageNav from "../../../PageNav/index.svelte";
-  import Classwork from "./Classwork.svelte";
-  import Homework from "./Homework/index.svelte";
+  import Exercises from "./Exercises/index.svelte";
   import Readme from "./Readme/index.svelte";
-  import Home from "./Home/index.svelte";
 
   export let path;
   export let tab;
-  // export let lectureId;
-  export let showLectureHome;
+  export let exerciseId;
 </script>
 
-{#if showLectureHome}
-  <Home {path} />
-{:else}
-  <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>
+  <PageNav
+    navItems={[
+      {
+        label: "README.md",
+        isActive: tab === "lectures",
+        href: `${path}?tab=lectures`,
+      },
+      {
+        label: "Exercises",
+        isActive: tab === "exercises",
+        href: `${path}?tab=exercises`,
+      },
+    ]}
+  />
 
-    <div class="course relative">
-      {#if tab === "lectures"}
-        <Readme />
-      {:else if tab === "classwork"}
-        <Classwork />
-      {:else if tab === "hometasks"}
-        <Homework />
-      {/if}
-    </div>
+  <div class="course relative">
+    {#if tab === "lectures"}
+      <Readme />
+    {:else if tab === "exercises"}
+      <Exercises {exerciseId} path={`${path}?tab=exercises`} />
+    {/if}
   </div>
-{/if}
+</div>
 
 <style>
   .course {
diff --git a/src/components/Course/components/CourseNav.svelte b/src/components/Course/components/Navigation/index.svelte
similarity index 90%
rename from src/components/Course/components/CourseNav.svelte
rename to src/components/Course/components/Navigation/index.svelte
index 9b94cd13..31229097 100644
--- a/src/components/Course/components/CourseNav.svelte
+++ b/src/components/Course/components/Navigation/index.svelte
@@ -5,12 +5,16 @@
   import ChevronLeft32 from "carbon-icons-svelte/lib/ChevronLeft32";
   import ChevronRight32 from "carbon-icons-svelte/lib/ChevronRight32";
   import { stores, goto } from "@sapper/app";
-  import Expandable from "../../Expandable/index.svelte";
-  import PageNav from "../../PageNav/index.svelte";
-  import IconButton from "../../IconButton/index.svelte";
-  import { getNavItemRoute, getLectureRoute, getLectureNo } from "../function";
+  import Expandable from "../../../Expandable/index.svelte";
+  import PageNav from "../../../PageNav/index.svelte";
+  import IconButton from "../../../IconButton/index.svelte";
+  import {
+    getNavItemRoute,
+    getLectureRoute,
+    getLectureNo,
+  } from "../../function";
 
-  import { lessons } from "./Lecture/store/lessons";
+  import { lessons } from "../Lecture/store/lessons";
 
   // export let lectureId;
   export let courseId;
@@ -38,13 +42,8 @@
       isLecture: true,
     },
     {
-      label: "People",
-      to: getNavItemRoute(courseId, "people"),
-      hideSortIcon: true,
-    },
-    {
-      label: "Timetable",
-      to: getNavItemRoute(courseId, "timetable"),
+      label: "Exercises",
+      to: getNavItemRoute(courseId, "exercises"),
       hideSortIcon: true,
     },
     {
@@ -53,8 +52,13 @@
       hideSortIcon: true,
     },
     {
-      label: "Hometasks",
-      to: getNavItemRoute(courseId, "hometasks"),
+      label: "People",
+      to: getNavItemRoute(courseId, "people"),
+      hideSortIcon: true,
+    },
+    {
+      label: "Timetable",
+      to: getNavItemRoute(courseId, "timetable"),
       hideSortIcon: true,
     },
   ];
diff --git a/src/components/Course/components/People.svelte b/src/components/Course/components/People.svelte
deleted file mode 100644
index bec26c4e..00000000
--- a/src/components/Course/components/People.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-  import { stores } from "@sapper/app";
-  import PageNav from "../../PageNav/index.svelte";
-  import UserCard from "../../UserCard/index.svelte";
-
-  const { page } = stores();
-
-  const teachers = [
-    {
-      name: "Alexander Pokidin",
-      title: "Senior Software Engineer",
-      avatar:
-        "https://media-exp1.licdn.com/dms/image/C5603AQFWia2m2J0syA/profile-displayphoto-shrink_100_100/0/1517423655318?e=1625702400&v=beta&t=SVGGkisvjOVcbz6Ejtb8pEDzRnqqFxMAMXGZgW-WE70",
-      telegramLink: "https://t.me/seed_of_abraham",
-      mailLink: "mailto:irb.ossystem@gmail.com",
-    },
-    {
-      name: "Andrey Filatov",
-      title: "Fullstack Software Engineer",
-      avatar:
-        "https://media-exp1.licdn.com/dms/image/C5103AQHuKuAX7RdoRw/profile-displayphoto-shrink_100_100/0/1517226025504?e=1625702400&v=beta&t=dReL72K1hYLVXBw_-v5LTDfjHLeDqfRC6IzBYOdqjqc",
-      telegramLink: "https://t.me/seed_of_abraham",
-      mailLink: "mailto:irb.ossystem@gmail.com",
-    },
-    {
-      name: "Sergey Semko",
-      title: "Senior Software Engineer",
-      avatar:
-        "https://media-exp1.licdn.com/dms/image/C5603AQFUEHk5pxnIyA/profile-displayphoto-shrink_100_100/0/1558013476527?e=1625702400&v=beta&t=Y3uBohyYlRvVf_U-1o4elfRGdcTFkKQMH9NqbD5lHlc",
-      telegramLink: "https://t.me/seed_of_abraham",
-      mailLink: "mailto:irb.ossystem@gmail.com",
-    },
-    {
-      name: "Natalia Fedii",
-      title: "Project Manager",
-      avatar:
-        "https://media-exp1.licdn.com/dms/image/C5603AQEi-IuSUG6kTQ/profile-displayphoto-shrink_100_100/0/1517884922407?e=1625702400&v=beta&t=rbj0wEM20msiDSQnTdwr68E4uv9N6xJTvObl3hLuRLc",
-      telegramLink: "https://t.me/seed_of_abraham",
-      mailLink: "mailto:irb.ossystem@gmail.com",
-    },
-  ];
-  const students = [...teachers, ...teachers, ...teachers];
-</script>
-
-<PageNav title="People" disableSticky={true} />
-<div class="m-3">
-  <h3>
-    <a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
-  </h3>
-  <div class="flex flex-wrap">
-    {#each teachers as teacher}
-      <UserCard
-        name={teacher.name}
-        avatarUrl={teacher.avatar}
-        title={teacher.title}
-        telegramLink={teacher.telegramLink}
-        mailLink={teacher.mailLink}
-      />
-    {/each}
-  </div>
-</div>
-
-<div class="m-3">
-  <h3>
-    <a id="students" name="students" href="{$page.path}#students">Students</a>
-  </h3>
-  <div class="flex flex-wrap">
-    {#each students as student}
-      <UserCard
-        name={student.name}
-        avatarUrl={student.avatar}
-        title={student.title}
-      />
-    {/each}
-  </div>
-</div>
diff --git a/src/components/Course/components/Scoreboard.svelte b/src/components/Course/components/Scoreboard.svelte
deleted file mode 100644
index 9ee4f9ba..00000000
--- a/src/components/Course/components/Scoreboard.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  import PageNav from "../../PageNav/index.svelte";
-</script>
-
-<style>
-</style>
-
-<PageNav title="Scoreboard" />
diff --git a/src/components/Course/components/TimeTable.svelte b/src/components/Course/components/TimeTable.svelte
deleted file mode 100644
index 5f17b105..00000000
--- a/src/components/Course/components/TimeTable.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  import PageNav from "../../PageNav/index.svelte";
-</script>
-
-<style>
-</style>
-
-<PageNav title="Time table" />
diff --git a/src/components/CourseContainer/index.svelte b/src/components/CourseContainer/index.svelte
new file mode 100644
index 00000000..5da66182
--- /dev/null
+++ b/src/components/CourseContainer/index.svelte
@@ -0,0 +1,28 @@
+<script>
+  import Navigation from "../Course/components/Navigation/index.svelte";
+  export let courseTitle = "";
+  export let courseId = "";
+</script>
+
+<svelte:head>
+  <title>{courseTitle}</title>
+</svelte:head>
+
+<div class="root">
+  <Navigation {courseId} />
+  <div class="rightBar">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .root {
+    display: flex;
+    border-right: 1px solid var(--border-color);
+    width: 100%;
+  }
+
+  .rightBar {
+    flex-grow: 1;
+  }
+</style>
diff --git a/src/components/Question/CheckboxQuestion/index.svelte b/src/components/Question/CheckboxQuestion/index.svelte
index 5fe80129..72ccae4b 100644
--- a/src/components/Question/CheckboxQuestion/index.svelte
+++ b/src/components/Question/CheckboxQuestion/index.svelte
@@ -1,7 +1,7 @@
 <script>
+  import { CodeSnippet } from "carbon-components-svelte";
   import PrimaryButton from "../../PrimaryButton/index.svelte";
   import { VARIANTS } from "../../PrimaryButton/constants";
-  import CodeSnippet from "../../CodeSnippet/index.svelte";
   import Checkbox from "../../Form/Checkbox.svelte";
 
   export let title = "";
@@ -59,7 +59,7 @@
   <h2>{title}</h2>
 
   {#if code}
-    <CodeSnippet {code} />
+    <CodeSnippet {code} type="multi" />
   {/if}
 
   <div class="ml-4">
diff --git a/src/components/Question/RadioQuestion/index.svelte b/src/components/Question/RadioQuestion/index.svelte
index 1b9f15a3..053c2c6c 100644
--- a/src/components/Question/RadioQuestion/index.svelte
+++ b/src/components/Question/RadioQuestion/index.svelte
@@ -1,8 +1,8 @@
 <script>
+  import { CodeSnippet } from "carbon-components-svelte";
   import PrimaryButton from "../../PrimaryButton/index.svelte";
   import { VARIANTS } from "../../PrimaryButton/constants";
   import RadioItem from "../../Form/RadioItem.svelte";
-  import CodeSnippet from "../../CodeSnippet/index.svelte";
 
   export let title = "";
   export let code;
@@ -59,7 +59,7 @@
   <h2>{title}</h2>
 
   {#if code}
-    <CodeSnippet {code} />
+    <CodeSnippet {code} type="multi" />
   {/if}
 
   <div class="ml-4">
diff --git a/src/components/Question/TextareaQuestion/index.svelte b/src/components/Question/TextareaQuestion/index.svelte
index 4a891b37..81883c54 100644
--- a/src/components/Question/TextareaQuestion/index.svelte
+++ b/src/components/Question/TextareaQuestion/index.svelte
@@ -1,7 +1,8 @@
 <script>
+  import { CodeSnippet } from "carbon-components-svelte";
+  import marked from "marked";
   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 = "";
@@ -32,12 +33,14 @@
   <h2>{title}</h2>
 
   {#if code}
-    <CodeSnippet {code} />
+    <CodeSnippet {code} type="multi" />
   {/if}
 
   <div class="ml-4">
     {#if disabled}
-      <CodeSnippet code={defaultValue} />
+      <div class="bg-gray-200 p-5 rounded-md mb-3">
+        {@html marked(defaultValue)}
+      </div>
     {:else}
       <TextArea
         bind:value={defaultValue}
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 68fc83af..bf2427c7 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -4,6 +4,7 @@
   import LeftNav from "../components/LeftNav/index.svelte";
   // import SideBar from "../components/SideBar/index.svelte";
   import Footer from "../components/Footer/index.svelte";
+  import Apps from "../components/Apps/index.svelte";
 
   export let segment;
 </script>
@@ -15,7 +16,7 @@
 <main class="flex">
   <LeftNav {segment} />
   <slot />
-  <!-- <SideBar /> -->
+  <Apps />
 </main>
 
 <Footer />
diff --git a/src/routes/courses/[...id]/exercises.svelte b/src/routes/courses/[...id]/exercises.svelte
new file mode 100644
index 00000000..1b5a0bdf
--- /dev/null
+++ b/src/routes/courses/[...id]/exercises.svelte
@@ -0,0 +1,18 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lectureId] = params.id;
+
+    return { courseId, courseNavItem, lectureId };
+  }
+</script>
+
+<script>
+  import PageNav from "../../../components/PageNav/index.svelte";
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+
+  export let courseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="Exercises" />
+</CourseContainer>
diff --git a/src/routes/courses/[...id]/index.svelte b/src/routes/courses/[...id]/index.svelte
index ee95f833..2e920a48 100644
--- a/src/routes/courses/[...id]/index.svelte
+++ b/src/routes/courses/[...id]/index.svelte
@@ -7,65 +7,12 @@
 </script>
 
 <script>
-  import { stores } from "@sapper/app";
-  import Lecture from "../../../components/Course/components/Lecture/index.svelte";
-  import HomeTask from "../../../components/Course/components/HomeTask.svelte";
   import Overview from "../../../components/Course/index.svelte";
-  import People from "../../../components/Course/components/People.svelte";
-  import Scoreboard from "../../../components/Course/components/Scoreboard.svelte";
-  import TimeTable from "../../../components/Course/components/TimeTable.svelte";
-  import CourseNav from "../../../components/Course/components/CourseNav.svelte";
-  import Apps from "../../../components/Apps/index.svelte";
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
 
   export let courseId;
-  export let courseNavItem;
-  export let lectureId;
-
-  const { page } = stores();
-  let tab = "";
-  let mode = "";
-
-  $: tab = $page.query.tab || "lectures";
 </script>
 
-<svelte:head>
-  <title>ReactJS</title>
-</svelte:head>
-
-<div class="root">
-  <CourseNav {courseId} />
-  <div class="rightBar">
-    {#if !courseNavItem}
-      <Overview />
-    {:else if courseNavItem === "score"}
-      <Scoreboard />
-    {:else if courseNavItem === "timetable"}
-      <TimeTable />
-    {:else if courseNavItem === "hometasks"}
-      <HomeTask />
-    {:else if courseNavItem === "lecture"}
-      <Lecture
-        path={$page.path}
-        {tab}
-        {lectureId}
-        showLectureHome={!lectureId}
-      />
-    {:else if courseNavItem === "people"}
-      <People />
-    {/if}
-  </div>
-
-  <Apps />
-</div>
-
-<style>
-  .root {
-    display: flex;
-    border-right: 1px solid var(--border-color);
-    width: 100%;
-  }
-
-  .rightBar {
-    flex-grow: 1;
-  }
-</style>
+<CourseContainer title="ReactJS" {courseId}>
+  <Overview />
+</CourseContainer>
diff --git a/src/routes/courses/[...id]/lecture/[...id]/index.svelte b/src/routes/courses/[...id]/lecture/[...id]/index.svelte
new file mode 100644
index 00000000..53df7318
--- /dev/null
+++ b/src/routes/courses/[...id]/lecture/[...id]/index.svelte
@@ -0,0 +1,27 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lectureId] = params.id;
+
+    return { courseId, courseNavItem, lectureId };
+  }
+</script>
+
+<script>
+  import { stores } from "@sapper/app";
+  import Lecture from "../../../../../components/Course/components/Lecture/index.svelte";
+  import CourseContainer from "../../../../../components/CourseContainer/index.svelte";
+
+  export let courseId;
+  export let lectureId;
+
+  const { page } = stores();
+  let tab = "";
+  let exerciseId = "";
+
+  $: tab = $page.query.tab || "lectures";
+  $: exerciseId = $page.query.exerciseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <Lecture path={$page.path} {tab} {exerciseId} {lectureId} />
+</CourseContainer>
diff --git a/src/routes/courses/[...id]/lecture/index.svelte b/src/routes/courses/[...id]/lecture/index.svelte
new file mode 100644
index 00000000..f1513c31
--- /dev/null
+++ b/src/routes/courses/[...id]/lecture/index.svelte
@@ -0,0 +1,166 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lectureId] = params.id;
+
+    return { courseId, courseNavItem, lectureId };
+  }
+</script>
+
+<script>
+  import { stores } from "@sapper/app";
+  import Time24 from "carbon-icons-svelte/lib/Time24";
+  import Edit24 from "carbon-icons-svelte/lib/Edit24";
+  import Save24 from "carbon-icons-svelte/lib/Save24";
+  import CheckmarkFilled24 from "carbon-icons-svelte/lib/CheckmarkFilled24";
+  import PageNav from "../../../../components/PageNav/index.svelte";
+  import PageBody from "../../../../components/PageBody/index.svelte";
+  import PrimaryButton from "../../../../components/PrimaryButton/index.svelte";
+  import TextField from "../../../../components/Form/TextField.svelte";
+  import IconButton from "../../../../components/IconButton/index.svelte";
+  import Select from "../../../../components/Form/Select.svelte";
+  import CourseContainer from "../../../../components/CourseContainer/index.svelte";
+  import {
+    lessons,
+    lecturers,
+    handleAddLesson,
+  } from "../../../../components/Course/components/Lecture/store/lessons";
+
+  export let courseId;
+
+  let lectureEditing;
+  let ref;
+
+  function formatDate(date) {
+    const d = new Date(date);
+
+    const ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
+    const mo = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(d);
+    const da = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(d);
+
+    return `${ye}-${mo}-${da}`;
+  }
+
+  function addLesson() {
+    handleAddLesson();
+    setTimeout(() => {
+      lectureEditing = $lessons.length - 1;
+      if (ref) {
+        ref.scrollIntoView({ block: "end", behavior: "smooth" });
+      }
+    }, 100);
+  }
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="Lectures">
+    <div slot="widget">
+      <PrimaryButton label="Add" onClick={addLesson} />
+    </div>
+  </PageNav>
+
+  <PageBody width="w-11/12 m-auto">
+    <div class="w-4/5 m-auto">
+      {#each $lessons as lecture, index}
+        <div
+          bind:this={ref}
+          class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mr-4 mb-4 flex items-center hover:shadow-2xl shadow-md transition delay-150 duration-300 ease-in-out"
+        >
+          <!-- Complete or Not complete icon -->
+          <div class="absolute -left-6 -top-6 success">
+            <IconButton
+              onClick={() => (lecture.isComplete = !lecture.isComplete)}
+            >
+              {#if lecture.isComplete}
+                <CheckmarkFilled24 class="carbon-icon" />
+              {:else}
+                <span class="text-2xl">🔒</span>
+              {/if}
+            </IconButton>
+          </div>
+
+          <!-- Edit/Save -->
+          <div class="absolute top-2 right-0">
+            {#if lectureEditing === index}
+              <IconButton onClick={() => (lectureEditing = null)}>
+                <Save24 class="carbon-icon" />
+              </IconButton>
+            {:else}
+              <IconButton onClick={() => (lectureEditing = index)}>
+                <Edit24 class="carbon-icon" />
+              </IconButton>
+            {/if}
+          </div>
+
+          <div class="">
+            <h3 class="text-3xl font-bold">{index + 1}.</h3>
+          </div>
+          <div class="ml-8 w-4/5">
+            {#if lectureEditing === index}
+              <TextField bind:value={lecture.title} autofocus={true} />
+            {:else}
+              <h3 class="text-3xl font-semibold m-0 flex items-center">
+                <a href={lecture.to} class="hover:underline text-black">
+                  {lecture.title}
+                </a>
+              </h3>
+            {/if}
+            <div class="flex items-center mb-2">
+              <div class="flex items-center mr-2">
+                {lecture.resources
+                  .map((r) => `${r.value} ${r.label}`)
+                  .join(", ")}
+              </div>
+            </div>
+
+            <div class="flex items-center justify-between mt-3 w-full">
+              {#if lectureEditing === index}
+                <Select
+                  bind:value={lecture.lecturer.name}
+                  options={$lecturers}
+                  valueKey="text"
+                />
+              {:else}
+                <a
+                  href="courses/1/people"
+                  class="flex items-center hover:underline text-black"
+                >
+                  <img
+                    alt="Placeholder"
+                    class="block rounded-full"
+                    width="24"
+                    height="20"
+                    src={lecture.lecturer.avatar}
+                  />
+                  <p class="ml-2 text-sm font-bold">{lecture.lecturer.name}</p>
+                </a>
+              {/if}
+
+              <div class="flex items-center">
+                {#if lectureEditing === index}
+                  <input
+                    type="date"
+                    name="lecture-date-picker"
+                    class="p-2 rounded-md w-40"
+                    value={formatDate(lecture.date)}
+                    on:input={(e) => (lecture.date = e.target.value)}
+                  />
+                {:else}
+                  <Time24 class="carbon-icon" />
+                  <p class="text-md font-semibold ml-2">
+                    {new Date(lecture.date).toDateString()}
+                  </p>
+                {/if}
+              </div>
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </PageBody>
+</CourseContainer>
+
+<style>
+  .group {
+    min-height: 170px;
+  }
+</style>
diff --git a/src/routes/courses/[...id]/people.svelte b/src/routes/courses/[...id]/people.svelte
new file mode 100644
index 00000000..d1d7c60a
--- /dev/null
+++ b/src/routes/courses/[...id]/people.svelte
@@ -0,0 +1,88 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lectureId] = params.id;
+
+    return { courseId, courseNavItem, lectureId };
+  }
+</script>
+
+<script>
+  import { stores } from "@sapper/app";
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+  import PageNav from "../../../components/PageNav/index.svelte";
+  import UserCard from "../../../components/UserCard/index.svelte";
+
+  const { page } = stores();
+
+  const teachers = [
+    {
+      name: "Alexander Pokidin",
+      title: "Senior Software Engineer",
+      avatar: "https://i.pravatar.cc/150?img=1",
+
+      telegramLink: "https://t.me/seed_of_abraham",
+      mailLink: "mailto:irb.ossystem@gmail.com",
+    },
+    {
+      name: "Andrey Filatov",
+      title: "Fullstack Software Engineer",
+      avatar: "https://i.pravatar.cc/150?img=2",
+
+      telegramLink: "https://t.me/seed_of_abraham",
+      mailLink: "mailto:irb.ossystem@gmail.com",
+    },
+    {
+      name: "Sergey Semko",
+      title: "Senior Software Engineer",
+      avatar: "https://i.pravatar.cc/150?img=3",
+
+      telegramLink: "https://t.me/seed_of_abraham",
+      mailLink: "mailto:irb.ossystem@gmail.com",
+    },
+    {
+      name: "Natalia Fedii",
+      title: "Project Manager",
+      avatar: "https://i.pravatar.cc/150?img=4",
+
+      telegramLink: "https://t.me/seed_of_abraham",
+      mailLink: "mailto:irb.ossystem@gmail.com",
+    },
+  ];
+  const students = [...teachers, ...teachers, ...teachers];
+  export let courseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="People" disableSticky={true} />
+  <div class="m-3">
+    <h3>
+      <a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
+    </h3>
+    <div class="flex flex-wrap">
+      {#each teachers as teacher}
+        <UserCard
+          name={teacher.name}
+          avatarUrl={teacher.avatar}
+          title={teacher.title}
+          telegramLink={teacher.telegramLink}
+          mailLink={teacher.mailLink}
+        />
+      {/each}
+    </div>
+  </div>
+
+  <div class="m-3">
+    <h3>
+      <a id="students" name="students" href="{$page.path}#students">Students</a>
+    </h3>
+    <div class="flex flex-wrap">
+      {#each students as student}
+        <UserCard
+          name={student.name}
+          avatarUrl={student.avatar}
+          title={student.title}
+        />
+      {/each}
+    </div>
+  </div>
+</CourseContainer>
diff --git a/src/routes/courses/[...id]/scoreboard.svelte b/src/routes/courses/[...id]/scoreboard.svelte
new file mode 100644
index 00000000..0a164959
--- /dev/null
+++ b/src/routes/courses/[...id]/scoreboard.svelte
@@ -0,0 +1,18 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lectureId] = params.id;
+
+    return { courseId, courseNavItem, lectureId };
+  }
+</script>
+
+<script>
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+  import PageNav from "../../../components/PageNav/index.svelte";
+
+  export let courseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="Scoreboard" />
+</CourseContainer>
diff --git a/src/routes/courses/[...id]/timetable.svelte b/src/routes/courses/[...id]/timetable.svelte
new file mode 100644
index 00000000..ecf10855
--- /dev/null
+++ b/src/routes/courses/[...id]/timetable.svelte
@@ -0,0 +1,18 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lectureId] = params.id;
+
+    return { courseId, courseNavItem, lectureId };
+  }
+</script>
+
+<script>
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+  import PageNav from "../../../components/PageNav/index.svelte";
+
+  export let courseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="Timetable" />
+</CourseContainer>