From 6186f11cdfc0c7342bd93974e4c5336f1f5772a4 Mon Sep 17 00:00:00 2001
From: Bining Long <bininglong@gmail.com>
Date: Thu, 21 Jul 2022 20:17:27 +0000
Subject: [PATCH 1/7] Create loading animation component

---
 app/src/apps/Examinations/Lab.svelte | 110 ++++++++++++++++++++++++++-
 1 file changed, 108 insertions(+), 2 deletions(-)

diff --git a/app/src/apps/Examinations/Lab.svelte b/app/src/apps/Examinations/Lab.svelte
index f6d8d5d3..40b2c57b 100644
--- a/app/src/apps/Examinations/Lab.svelte
+++ b/app/src/apps/Examinations/Lab.svelte
@@ -45,8 +45,114 @@
       on:update={updateLab}
     />
   {:else}
-    <!-- TODO: add loading animation -->
-    <div>Loading...</div>
+    <div class="ball-grid-beat">
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+    </div>
+
+    <style>
+      .ball-grid-beat > div {
+        -webkit-animation-fill-mode: both;
+        -webkit-animation-iteration-count: infinite;
+        height: 15px;
+        border-radius: 100%;
+        display: inline-block;
+        background-color: rgb(255, 171, 64);
+        margin: 2px;
+      }
+      @-webkit-keyframes ball-grid-beat {
+        50% {
+          opacity: 0.7;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+      @keyframes ball-grid-beat {
+        50% {
+          opacity: 0.7;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+      .ball-grid-beat {
+        width: 57px;
+        margin-top: 250px;
+        margin-left: 500px;
+      }
+      .ball-grid-beat > div:nth-child(1) {
+        -webkit-animation-delay: 0.15s;
+        animation-delay: 0.15s;
+        -webkit-animation-duration: 1.45s;
+        animation-duration: 1.45s;
+      }
+      .ball-grid-beat > div:nth-child(2) {
+        -webkit-animation-delay: -20ms;
+        animation-delay: -20ms;
+        -webkit-animation-duration: 0.97s;
+        animation-duration: 0.97s;
+      }
+      .ball-grid-beat > div:nth-child(3) {
+        -webkit-animation-delay: 0.66s;
+        animation-delay: 0.66s;
+        -webkit-animation-duration: 1.23s;
+        animation-duration: 1.23s;
+      }
+      .ball-grid-beat > div:nth-child(4) {
+        -webkit-animation-delay: 0.64s;
+        animation-delay: 0.64s;
+        -webkit-animation-duration: 1.24s;
+        animation-duration: 1.24s;
+      }
+      .ball-grid-beat > div:nth-child(5) {
+        -webkit-animation-delay: -0.19s;
+        animation-delay: -0.19s;
+        -webkit-animation-duration: 1.13s;
+        animation-duration: 1.13s;
+      }
+      .ball-grid-beat > div:nth-child(6) {
+        -webkit-animation-delay: 0.69s;
+        animation-delay: 0.69s;
+        -webkit-animation-duration: 1.42s;
+        animation-duration: 1.42s;
+      }
+      .ball-grid-beat > div:nth-child(7) {
+        -webkit-animation-delay: 0.58s;
+        animation-delay: 0.58s;
+        -webkit-animation-duration: 1.14s;
+        animation-duration: 1.14s;
+      }
+      .ball-grid-beat > div:nth-child(8) {
+        -webkit-animation-delay: 0.21s;
+        animation-delay: 0.21s;
+        -webkit-animation-duration: 1.17s;
+        animation-duration: 1.17s;
+      }
+      .ball-grid-beat > div:nth-child(9) {
+        -webkit-animation-delay: -0.18s;
+        animation-delay: -0.18s;
+        -webkit-animation-duration: 0.65s;
+        animation-duration: 0.65s;
+      }
+      .ball-grid-beat > div {
+        width: 15px;
+        animation-fill-mode: both;
+        float: right;
+        -webkit-animation-name: ball-grid-beat;
+        animation-name: ball-grid-beat;
+        animation-iteration-count: infinite;
+        -webkit-animation-delay: 0;
+        animation-delay: 0;
+      }
+    </style>
   {/if}
   <Button on:click={submit} label={"Submit"} />
   <Button on:click={handleNextQuestion} label={"Next"} />

From 678de543301006b29a984c5400b185fbf5a28c82 Mon Sep 17 00:00:00 2001
From: Bining Long <bininglong@gmail.com>
Date: Thu, 21 Jul 2022 21:37:13 +0000
Subject: [PATCH 2/7] Move to components folder

---
 app/src/apps/Examinations/Lab.svelte          | 110 +-----------------
 .../LoadingAnimation/LoadingAnimation.svelte  |  15 +++
 app/src/components/LoadingAnimation/index.js  |   1 +
 .../components/LoadingAnimation/styles.scss   |  94 +++++++++++++++
 4 files changed, 112 insertions(+), 108 deletions(-)
 create mode 100644 app/src/components/LoadingAnimation/LoadingAnimation.svelte
 create mode 100644 app/src/components/LoadingAnimation/index.js
 create mode 100644 app/src/components/LoadingAnimation/styles.scss

diff --git a/app/src/apps/Examinations/Lab.svelte b/app/src/apps/Examinations/Lab.svelte
index 40b2c57b..8907c939 100644
--- a/app/src/apps/Examinations/Lab.svelte
+++ b/app/src/apps/Examinations/Lab.svelte
@@ -3,6 +3,7 @@
   import { mathjaxLoad, mathjaxTypeset } from "../../utilities";
   import { Question } from "./components";
   import { Button } from "../../components";
+  import { LoadingAnimation } from "../../components/LoadingAnimation";
   import Lab from "./lib/examinations/Lab";
 
   export let data;
@@ -45,114 +46,7 @@
       on:update={updateLab}
     />
   {:else}
-    <div class="ball-grid-beat">
-      <div />
-      <div />
-      <div />
-      <div />
-      <div />
-      <div />
-      <div />
-      <div />
-      <div />
-    </div>
-
-    <style>
-      .ball-grid-beat > div {
-        -webkit-animation-fill-mode: both;
-        -webkit-animation-iteration-count: infinite;
-        height: 15px;
-        border-radius: 100%;
-        display: inline-block;
-        background-color: rgb(255, 171, 64);
-        margin: 2px;
-      }
-      @-webkit-keyframes ball-grid-beat {
-        50% {
-          opacity: 0.7;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-      @keyframes ball-grid-beat {
-        50% {
-          opacity: 0.7;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-      .ball-grid-beat {
-        width: 57px;
-        margin-top: 250px;
-        margin-left: 500px;
-      }
-      .ball-grid-beat > div:nth-child(1) {
-        -webkit-animation-delay: 0.15s;
-        animation-delay: 0.15s;
-        -webkit-animation-duration: 1.45s;
-        animation-duration: 1.45s;
-      }
-      .ball-grid-beat > div:nth-child(2) {
-        -webkit-animation-delay: -20ms;
-        animation-delay: -20ms;
-        -webkit-animation-duration: 0.97s;
-        animation-duration: 0.97s;
-      }
-      .ball-grid-beat > div:nth-child(3) {
-        -webkit-animation-delay: 0.66s;
-        animation-delay: 0.66s;
-        -webkit-animation-duration: 1.23s;
-        animation-duration: 1.23s;
-      }
-      .ball-grid-beat > div:nth-child(4) {
-        -webkit-animation-delay: 0.64s;
-        animation-delay: 0.64s;
-        -webkit-animation-duration: 1.24s;
-        animation-duration: 1.24s;
-      }
-      .ball-grid-beat > div:nth-child(5) {
-        -webkit-animation-delay: -0.19s;
-        animation-delay: -0.19s;
-        -webkit-animation-duration: 1.13s;
-        animation-duration: 1.13s;
-      }
-      .ball-grid-beat > div:nth-child(6) {
-        -webkit-animation-delay: 0.69s;
-        animation-delay: 0.69s;
-        -webkit-animation-duration: 1.42s;
-        animation-duration: 1.42s;
-      }
-      .ball-grid-beat > div:nth-child(7) {
-        -webkit-animation-delay: 0.58s;
-        animation-delay: 0.58s;
-        -webkit-animation-duration: 1.14s;
-        animation-duration: 1.14s;
-      }
-      .ball-grid-beat > div:nth-child(8) {
-        -webkit-animation-delay: 0.21s;
-        animation-delay: 0.21s;
-        -webkit-animation-duration: 1.17s;
-        animation-duration: 1.17s;
-      }
-      .ball-grid-beat > div:nth-child(9) {
-        -webkit-animation-delay: -0.18s;
-        animation-delay: -0.18s;
-        -webkit-animation-duration: 0.65s;
-        animation-duration: 0.65s;
-      }
-      .ball-grid-beat > div {
-        width: 15px;
-        animation-fill-mode: both;
-        float: right;
-        -webkit-animation-name: ball-grid-beat;
-        animation-name: ball-grid-beat;
-        animation-iteration-count: infinite;
-        -webkit-animation-delay: 0;
-        animation-delay: 0;
-      }
-    </style>
+    <LoadingAnimation />
   {/if}
   <Button on:click={submit} label={"Submit"} />
   <Button on:click={handleNextQuestion} label={"Next"} />
diff --git a/app/src/components/LoadingAnimation/LoadingAnimation.svelte b/app/src/components/LoadingAnimation/LoadingAnimation.svelte
new file mode 100644
index 00000000..c54cd7a4
--- /dev/null
+++ b/app/src/components/LoadingAnimation/LoadingAnimation.svelte
@@ -0,0 +1,15 @@
+<script>
+  import "./styles.scss";
+</script>
+
+<div class="ball-grid-beat">
+  <div />
+  <div />
+  <div />
+  <div />
+  <div />
+  <div />
+  <div />
+  <div />
+  <div />
+</div>
diff --git a/app/src/components/LoadingAnimation/index.js b/app/src/components/LoadingAnimation/index.js
new file mode 100644
index 00000000..000598b0
--- /dev/null
+++ b/app/src/components/LoadingAnimation/index.js
@@ -0,0 +1 @@
+export { default as LoadingAnimation } from "./LoadingAnimation.svelte";
diff --git a/app/src/components/LoadingAnimation/styles.scss b/app/src/components/LoadingAnimation/styles.scss
new file mode 100644
index 00000000..0e099b03
--- /dev/null
+++ b/app/src/components/LoadingAnimation/styles.scss
@@ -0,0 +1,94 @@
+.ball-grid-beat > div {
+  -webkit-animation-fill-mode: both;
+  -webkit-animation-iteration-count: infinite;
+  height: 15px;
+  border-radius: 100%;
+  display: inline-block;
+  background-color: rgb(255, 171, 64);
+  margin: 2px;
+}
+@-webkit-keyframes ball-grid-beat {
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes ball-grid-beat {
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.ball-grid-beat {
+  width: 57px;
+  margin-top: 250px;
+  margin-left: 500px;
+}
+.ball-grid-beat > div:nth-child(1) {
+  -webkit-animation-delay: 0.15s;
+  animation-delay: 0.15s;
+  -webkit-animation-duration: 1.45s;
+  animation-duration: 1.45s;
+}
+.ball-grid-beat > div:nth-child(2) {
+  -webkit-animation-delay: -20ms;
+  animation-delay: -20ms;
+  -webkit-animation-duration: 0.97s;
+  animation-duration: 0.97s;
+}
+.ball-grid-beat > div:nth-child(3) {
+  -webkit-animation-delay: 0.66s;
+  animation-delay: 0.66s;
+  -webkit-animation-duration: 1.23s;
+  animation-duration: 1.23s;
+}
+.ball-grid-beat > div:nth-child(4) {
+  -webkit-animation-delay: 0.64s;
+  animation-delay: 0.64s;
+  -webkit-animation-duration: 1.24s;
+  animation-duration: 1.24s;
+}
+.ball-grid-beat > div:nth-child(5) {
+  -webkit-animation-delay: -0.19s;
+  animation-delay: -0.19s;
+  -webkit-animation-duration: 1.13s;
+  animation-duration: 1.13s;
+}
+.ball-grid-beat > div:nth-child(6) {
+  -webkit-animation-delay: 0.69s;
+  animation-delay: 0.69s;
+  -webkit-animation-duration: 1.42s;
+  animation-duration: 1.42s;
+}
+.ball-grid-beat > div:nth-child(7) {
+  -webkit-animation-delay: 0.58s;
+  animation-delay: 0.58s;
+  -webkit-animation-duration: 1.14s;
+  animation-duration: 1.14s;
+}
+.ball-grid-beat > div:nth-child(8) {
+  -webkit-animation-delay: 0.21s;
+  animation-delay: 0.21s;
+  -webkit-animation-duration: 1.17s;
+  animation-duration: 1.17s;
+}
+.ball-grid-beat > div:nth-child(9) {
+  -webkit-animation-delay: -0.18s;
+  animation-delay: -0.18s;
+  -webkit-animation-duration: 0.65s;
+  animation-duration: 0.65s;
+}
+.ball-grid-beat > div {
+  width: 15px;
+  animation-fill-mode: both;
+  float: right;
+  -webkit-animation-name: ball-grid-beat;
+  animation-name: ball-grid-beat;
+  animation-iteration-count: infinite;
+  -webkit-animation-delay: 0;
+  animation-delay: 0;
+}

From e452a7ff3953c9705c5d2a292d13d37f400a4cb7 Mon Sep 17 00:00:00 2001
From: Bining Long <bininglong@gmail.com>
Date: Fri, 15 Jul 2022 01:23:00 +0000
Subject: [PATCH 3/7] Link question to associated lab

---
 .../apps/Examinations/components/Question/Question.svelte   | 6 ++++++
 app/src/apps/Examinations/lib/Examination.js                | 6 +++++-
 app/src/apps/Examinations/lib/Question.js                   | 4 +++-
 .../Examinations/lib/questions/MultipleChoiceQuestion.js    | 4 ++--
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/src/apps/Examinations/components/Question/Question.svelte b/app/src/apps/Examinations/components/Question/Question.svelte
index b25b578e..2bc29504 100644
--- a/app/src/apps/Examinations/components/Question/Question.svelte
+++ b/app/src/apps/Examinations/components/Question/Question.svelte
@@ -46,3 +46,9 @@
     on:update={updateExamination}
   />
 {/if}
+
+{#if question.labId === "how-many-functions"}
+  <a href="/discretemath.ca/comp2804/labs/how-many-functions"
+    >Go to the associated Lab!</a
+  >
+{/if}
diff --git a/app/src/apps/Examinations/lib/Examination.js b/app/src/apps/Examinations/lib/Examination.js
index 38706191..cf8ddfb3 100644
--- a/app/src/apps/Examinations/lib/Examination.js
+++ b/app/src/apps/Examinations/lib/Examination.js
@@ -17,7 +17,11 @@ class Examination {
   constructQuestion(question) {
     switch (question.type) {
       case "MultipleChoice":
-        return new MultipleChoiceQuestion(question.body, question.options);
+        return new MultipleChoiceQuestion(
+          question.body,
+          question.lab,
+          question.options
+        );
       default:
         throw "ERROR: Unsupported question type.";
     }
diff --git a/app/src/apps/Examinations/lib/Question.js b/app/src/apps/Examinations/lib/Question.js
index b7d82f0e..d93eb04d 100644
--- a/app/src/apps/Examinations/lib/Question.js
+++ b/app/src/apps/Examinations/lib/Question.js
@@ -1,8 +1,10 @@
 class Question {
   body;
+  labId;
 
-  constructor(body) {
+  constructor(body, labId) {
     this.body = body;
+    this.labId = labId;
   }
 
   updateOption(event) {
diff --git a/app/src/apps/Examinations/lib/questions/MultipleChoiceQuestion.js b/app/src/apps/Examinations/lib/questions/MultipleChoiceQuestion.js
index 133c88b4..334343f5 100644
--- a/app/src/apps/Examinations/lib/questions/MultipleChoiceQuestion.js
+++ b/app/src/apps/Examinations/lib/questions/MultipleChoiceQuestion.js
@@ -4,8 +4,8 @@ class MultipleChoiceQuestion extends Question {
   selectedOptionIndex = -1;
   options = [];
 
-  constructor(body, options) {
-    super(body);
+  constructor(body, labId, options) {
+    super(body, labId);
     this.options = this.constructOptions(options);
   }
 

From 92ebb004bceebc15bd20c21c8d91adb5f0f89ed6 Mon Sep 17 00:00:00 2001
From: Bining Long <bininglong@gmail.com>
Date: Fri, 15 Jul 2022 18:44:27 +0000
Subject: [PATCH 4/7] Change if statement condition

---
 app/src/apps/Examinations/components/Question/Question.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/apps/Examinations/components/Question/Question.svelte b/app/src/apps/Examinations/components/Question/Question.svelte
index 2bc29504..80d3f778 100644
--- a/app/src/apps/Examinations/components/Question/Question.svelte
+++ b/app/src/apps/Examinations/components/Question/Question.svelte
@@ -47,8 +47,8 @@
   />
 {/if}
 
-{#if question.labId === "how-many-functions"}
-  <a href="/discretemath.ca/comp2804/labs/how-many-functions"
+{#if typeof question.labId !== 'undefined'}
+  <a href="/discretemath.ca/comp2804/labs/{question.labId}"
     >Go to the associated Lab!</a
   >
 {/if}

From 194aec5fa64b832134271f51fff371522233d932 Mon Sep 17 00:00:00 2001
From: Bining Long <bininglong@gmail.com>
Date: Fri, 15 Jul 2022 18:49:17 +0000
Subject: [PATCH 5/7] Run prettier

---
 app/src/apps/Examinations/components/Question/Question.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/apps/Examinations/components/Question/Question.svelte b/app/src/apps/Examinations/components/Question/Question.svelte
index 80d3f778..fb3dd2fc 100644
--- a/app/src/apps/Examinations/components/Question/Question.svelte
+++ b/app/src/apps/Examinations/components/Question/Question.svelte
@@ -47,7 +47,7 @@
   />
 {/if}
 
-{#if typeof question.labId !== 'undefined'}
+{#if typeof question.labId !== "undefined"}
   <a href="/discretemath.ca/comp2804/labs/{question.labId}"
     >Go to the associated Lab!</a
   >

From d9e878412c3ec04de853ac1b6e1a0f5a29d52fc6 Mon Sep 17 00:00:00 2001
From: Bining Long <bininglong@gmail.com>
Date: Thu, 21 Jul 2022 22:37:27 +0000
Subject: [PATCH 6/7] Small change

---
 app/src/components/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/components/index.js b/app/src/components/index.js
index cee4d49d..610530f5 100644
--- a/app/src/components/index.js
+++ b/app/src/components/index.js
@@ -1,2 +1,3 @@
 export { Button } from "./Button";
 export { CourseNavbar } from "./CourseNavbar";
+export { LoadingAnimation } from "./LoadingAnimation";

From 4970e44d7f17d41c0b21c9bd372d9ee1495dc591 Mon Sep 17 00:00:00 2001
From: Bining Long <bininglong@gmail.com>
Date: Wed, 27 Jul 2022 19:32:17 +0000
Subject: [PATCH 7/7] Style "WrittenQuestion" component

---
 .../components/WrittenQuestion/styles.scss             | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/src/apps/Examinations/components/WrittenQuestion/styles.scss b/app/src/apps/Examinations/components/WrittenQuestion/styles.scss
index e69de29b..5a3d8016 100644
--- a/app/src/apps/Examinations/components/WrittenQuestion/styles.scss
+++ b/app/src/apps/Examinations/components/WrittenQuestion/styles.scss
@@ -0,0 +1,10 @@
+input {
+  height: 2rem;
+  width: 66rem;
+  text-indent: 10px;
+  border-style: solid;
+  border-radius: 0.6rem;
+  border-width: 0.1rem;
+  border-color: #c0c0c0;
+  margin: 1rem 0rem;
+}