Style "WrittenQuestion" component

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,8 +46,7 @@
       on:update={updateLab}
     />
   {:else}
-    <!-- TODO: add loading animation -->
-    <div>Loading...</div>
+    <LoadingAnimation />
   {/if}
   <Button on:click={submit} label={"Submit"} />
   <Button on:click={handleNextQuestion} label={"Next"} />

app/src/apps/Examinations/components/Question/Question.svelte

@@ -46,3 +46,9 @@
     on:update={updateExamination}
   />
 {/if}
+
+{#if typeof question.labId !== "undefined"}
+  <a href="/discretemath.ca/comp2804/labs/{question.labId}"
+    >Go to the associated Lab!</a
+  >
+{/if}

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;
+}

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.";
     }

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) {

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);
   }
 

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>

app/src/components/LoadingAnimation/index.js

@@ -0,0 +1 @@
+export { default as LoadingAnimation } from "./LoadingAnimation.svelte";

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;
+}

app/src/components/index.js

@@ -1,2 +1,3 @@
 export { Button } from "./Button";
 export { CourseNavbar } from "./CourseNavbar";
+export { LoadingAnimation } from "./LoadingAnimation";