From 6cb3e18dce046aabfc0e02402f9616e3617c199f Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Mon, 11 Jul 2022 08:29:15 -0400
Subject: [PATCH 01/18] Add submit button to the Test.svelte

---
 app/src/apps/Examinations/Test.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/src/apps/Examinations/Test.svelte b/app/src/apps/Examinations/Test.svelte
index dd5b8659..8527f80d 100644
--- a/app/src/apps/Examinations/Test.svelte
+++ b/app/src/apps/Examinations/Test.svelte
@@ -4,6 +4,7 @@
   import { Header, Question } from "./components";
   import Test from "./lib/examinations/Test";
   import "./styles.scss";
+  import Button from "../../components/Button/Button.svelte";
 
   export let data;
 
@@ -27,4 +28,5 @@
   {#each test.questions as question, questionIndex}
     <Question {question} number={questionIndex + 1} on:update={updateTest} />
   {/each}
+  <Button label={"Submit"}/>
 </div>

From d8258272e19cdcf742efa3a687085a0750a308e0 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Mon, 11 Jul 2022 08:32:12 -0400
Subject: [PATCH 02/18] Add submitted property to the Examination class

---
 app/src/apps/Examinations/lib/Examination.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/src/apps/Examinations/lib/Examination.js b/app/src/apps/Examinations/lib/Examination.js
index 5e44def0..03e9acb9 100644
--- a/app/src/apps/Examinations/lib/Examination.js
+++ b/app/src/apps/Examinations/lib/Examination.js
@@ -3,6 +3,7 @@ import { MultipleChoiceQuestion } from "./questions/MultipleChoiceQuestion";
 class Examination {
   title;
   author;
+  submitted = false;
 
   constructor(title, author) {
     this.title = title;
@@ -21,6 +22,11 @@ class Examination {
     // ex: if question is a multiple choice question... create a multiple choice question
     throw "Not implemented";
   }
+
+  // Change state of examination to submitted
+  submit() {
+    this.submitted = true;
+  }
 }
 
 export { Examination };

From ee8aaa777089e7fedc5706ac44fb62a670267cf6 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Mon, 11 Jul 2022 12:03:47 -0400
Subject: [PATCH 03/18] Update examination state when test is submitted

---
 app/src/apps/Examinations/Test.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/src/apps/Examinations/Test.svelte b/app/src/apps/Examinations/Test.svelte
index 8527f80d..9a14926d 100644
--- a/app/src/apps/Examinations/Test.svelte
+++ b/app/src/apps/Examinations/Test.svelte
@@ -21,12 +21,17 @@
   afterUpdate(() => {
     mathjaxTypeset();
   });
+
+  const submit = () => {
+    test.submit();
+    updateTest();
+  }
 </script>
 
 <div class="test-application">
   <Header title={test.title} description={"description"} />
   {#each test.questions as question, questionIndex}
-    <Question {question} number={questionIndex + 1} on:update={updateTest} />
+    <Question {question} number={questionIndex + 1} submitted={test.submitted} on:update={updateTest} />
   {/each}
-  <Button label={"Submit"}/>
+  <Button label={"Submit"} on:click={submit}/>
 </div>

From 52fa216b9cc31d0d590e7888104c1e516f6de977 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Mon, 11 Jul 2022 12:07:05 -0400
Subject: [PATCH 04/18] Pass submitted state to MultipleChoiceQuestion

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

diff --git a/app/src/apps/Examinations/components/Question/Question.svelte b/app/src/apps/Examinations/components/Question/Question.svelte
index ec00a8a8..ca40913d 100644
--- a/app/src/apps/Examinations/components/Question/Question.svelte
+++ b/app/src/apps/Examinations/components/Question/Question.svelte
@@ -5,6 +5,7 @@
 
   export let question;
   export let number;
+  export let submitted;
 
   const dispatch = createEventDispatcher();
 
@@ -14,5 +15,5 @@
 </script>
 
 {#if question instanceof MultipleChoiceQuestionObject}
-  <MultipleChoiceQuestion {question} {number} on:update={updateExamination} />
+  <MultipleChoiceQuestion {question} {number} {submitted} on:update={updateExamination} />
 {/if}

From 8de890e7067dbea95535a0b7856d606994d566fc Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Mon, 11 Jul 2022 12:08:19 -0400
Subject: [PATCH 05/18] Pass submitted state and option correctness to
 MultipleChoiceOption

---
 .../MultipleChoiceQuestion/MultipleChoiceQuestion.svelte       | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/src/apps/Examinations/components/MultipleChoiceQuestion/MultipleChoiceQuestion.svelte b/app/src/apps/Examinations/components/MultipleChoiceQuestion/MultipleChoiceQuestion.svelte
index 3963c109..1a3744fd 100644
--- a/app/src/apps/Examinations/components/MultipleChoiceQuestion/MultipleChoiceQuestion.svelte
+++ b/app/src/apps/Examinations/components/MultipleChoiceQuestion/MultipleChoiceQuestion.svelte
@@ -5,6 +5,7 @@
 
   export let question;
   export let number;
+  export let submitted;
 
   const LETTER_OPTIONS = {
     0: "a",
@@ -33,6 +34,8 @@
         <MultipleChoiceOption
           letter={LETTER_OPTIONS[optionIndex]}
           selected={question.selectedOptionIndex === optionIndex}
+          {submitted}
+          correct={option.correct}
         >
           {@html option.body}</MultipleChoiceOption
         >

From f32a12981a61c905a42cfb4f6ad926dbd41808ed Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Mon, 11 Jul 2022 12:08:50 -0400
Subject: [PATCH 06/18] Select proper background color based on conditions

---
 .../MultipleChoiceOption/MultipleChoiceOption.svelte  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/src/apps/Examinations/components/MultipleChoiceOption/MultipleChoiceOption.svelte b/app/src/apps/Examinations/components/MultipleChoiceOption/MultipleChoiceOption.svelte
index ddbedbf9..6fa195bc 100644
--- a/app/src/apps/Examinations/components/MultipleChoiceOption/MultipleChoiceOption.svelte
+++ b/app/src/apps/Examinations/components/MultipleChoiceOption/MultipleChoiceOption.svelte
@@ -3,10 +3,19 @@
 
   export let letter;
   export let selected;
+  export let submitted;
+  export let correct;
+
+  // logic to select proper background color
+  $: bgColor = (selected && !submitted && "rgb(60, 203, 255)") ||
+               (selected && submitted && !correct && "rgb(255, 69, 69)") ||
+               (submitted && correct && "rgb(70, 255, 60)") || 
+               "transparent";
 </script>
 
 <div
-  class="multiple-choice-option {selected && 'multiple-choice-option-selected'}"
+  class="multiple-choice-option"
+  style="background-color: {bgColor}"
 >
   <div class="multiple-choice-option-letter">({letter})</div>
   <div class="multiple-choice-option-body">

From f24aebce4b4f43a2dfd5b12dcf80edf8211a3705 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Mon, 11 Jul 2022 12:21:38 -0400
Subject: [PATCH 07/18] Fix prettier formatting error

---
 app/src/apps/Examinations/Test.svelte              | 11 ++++++++---
 .../MultipleChoiceOption.svelte                    | 14 ++++++--------
 .../components/Question/Question.svelte            |  7 ++++++-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/src/apps/Examinations/Test.svelte b/app/src/apps/Examinations/Test.svelte
index 9a14926d..74bc2660 100644
--- a/app/src/apps/Examinations/Test.svelte
+++ b/app/src/apps/Examinations/Test.svelte
@@ -25,13 +25,18 @@
   const submit = () => {
     test.submit();
     updateTest();
-  }
+  };
 </script>
 
 <div class="test-application">
   <Header title={test.title} description={"description"} />
   {#each test.questions as question, questionIndex}
-    <Question {question} number={questionIndex + 1} submitted={test.submitted} on:update={updateTest} />
+    <Question
+      {question}
+      number={questionIndex + 1}
+      submitted={test.submitted}
+      on:update={updateTest}
+    />
   {/each}
-  <Button label={"Submit"} on:click={submit}/>
+  <Button label={"Submit"} on:click={submit} />
 </div>
diff --git a/app/src/apps/Examinations/components/MultipleChoiceOption/MultipleChoiceOption.svelte b/app/src/apps/Examinations/components/MultipleChoiceOption/MultipleChoiceOption.svelte
index 6fa195bc..b212ed81 100644
--- a/app/src/apps/Examinations/components/MultipleChoiceOption/MultipleChoiceOption.svelte
+++ b/app/src/apps/Examinations/components/MultipleChoiceOption/MultipleChoiceOption.svelte
@@ -7,16 +7,14 @@
   export let correct;
 
   // logic to select proper background color
-  $: bgColor = (selected && !submitted && "rgb(60, 203, 255)") ||
-               (selected && submitted && !correct && "rgb(255, 69, 69)") ||
-               (submitted && correct && "rgb(70, 255, 60)") || 
-               "transparent";
+  $: bgColor =
+    (selected && !submitted && "rgb(60, 203, 255)") ||
+    (selected && submitted && !correct && "rgb(255, 69, 69)") ||
+    (submitted && correct && "rgb(70, 255, 60)") ||
+    "transparent";
 </script>
 
-<div
-  class="multiple-choice-option"
-  style="background-color: {bgColor}"
->
+<div class="multiple-choice-option" style="background-color: {bgColor}">
   <div class="multiple-choice-option-letter">({letter})</div>
   <div class="multiple-choice-option-body">
     <slot />
diff --git a/app/src/apps/Examinations/components/Question/Question.svelte b/app/src/apps/Examinations/components/Question/Question.svelte
index ca40913d..ef37bb05 100644
--- a/app/src/apps/Examinations/components/Question/Question.svelte
+++ b/app/src/apps/Examinations/components/Question/Question.svelte
@@ -15,5 +15,10 @@
 </script>
 
 {#if question instanceof MultipleChoiceQuestionObject}
-  <MultipleChoiceQuestion {question} {number} {submitted} on:update={updateExamination} />
+  <MultipleChoiceQuestion
+    {question}
+    {number}
+    {submitted}
+    on:update={updateExamination}
+  />
 {/if}

From 9c8239e8bd83cc443ddc1600675e150781836131 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Wed, 20 Jul 2022 13:08:59 -0400
Subject: [PATCH 08/18] Create factory for StringStartOrEnd questions

---
 .../lib/factories/StringStartOrEnd.js         | 138 ++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 app/src/apps/Examinations/lib/factories/StringStartOrEnd.js

diff --git a/app/src/apps/Examinations/lib/factories/StringStartOrEnd.js b/app/src/apps/Examinations/lib/factories/StringStartOrEnd.js
new file mode 100644
index 00000000..5fc97555
--- /dev/null
+++ b/app/src/apps/Examinations/lib/factories/StringStartOrEnd.js
@@ -0,0 +1,138 @@
+import Factory from "../Factory";
+import { MultipleChoiceQuestion } from "../questions";
+
+const MIN_STRING_SIZE = 3;
+const MAX_STRING_SIZE = 16;
+const MIN_ALPHABET_SIZE = 2;
+const MAX_ALPHABET_SIZE = 6;
+const FULL_ALPHABET = "abcdefghijklmnopqrstuvwxyz";
+
+class StringStartOrEnd extends Factory {
+  create() {
+    const content = this.generateQuestionContent();
+    const body = this.generateQuestionBody(content);
+    const options = this.generateQuestionOptions(content);
+    const question = new MultipleChoiceQuestion(body, options);
+    return question;
+  }
+
+  getRandomAlphabetSize() {
+    return (
+      Math.floor(Math.random() * (MAX_ALPHABET_SIZE - MIN_ALPHABET_SIZE + 1)) +
+      MIN_ALPHABET_SIZE
+    );
+  }
+
+  getRandomStringLength() {
+    return (
+      Math.floor(Math.random() * (MAX_STRING_SIZE - MIN_STRING_SIZE + 1)) +
+      MIN_STRING_SIZE
+    );
+  }
+
+  // Generates random string based on the given alphabet and desired string length
+  getRandomString(alphabet, length) {
+    let result = "";
+    for (let i = 0; i < length; ++i)
+      result += alphabet.at(Math.floor(Math.random() * alphabet.length));
+    return result;
+  }
+
+  getSubstrings(strLength, alphabetSize) {
+    // generate available alphabet
+    let alphabet = FULL_ALPHABET.slice(0, alphabetSize);
+
+    // start substring length is at max 2 characters shorter than the total length of the string
+    let startSubstrLength = Math.floor(Math.random() * (strLength - 2)) + 1;
+    // end substring length will depend on the start substring length
+    let endSubstrLength =
+      Math.floor(Math.random() * (strLength - startSubstrLength - 1)) + 1;
+
+    let startSubstr = this.getRandomString(alphabet, startSubstrLength);
+    let endSubstr = this.getRandomString(alphabet, endSubstrLength);
+    return [startSubstr, endSubstr];
+  }
+
+  generateQuestionContent() {
+    const strLength = this.getRandomStringLength();
+    const alphabetSize = this.getRandomAlphabetSize();
+    const [startSubstr, endSubstr] = this.getSubstrings(
+      strLength,
+      alphabetSize
+    );
+    return { strLength, alphabetSize, startSubstr, endSubstr };
+  }
+
+  generateQuestionBody(questionContent) {
+    const { strLength, alphabetSize, startSubstr, endSubstr } = questionContent;
+    let alphabetString = FULL_ALPHABET.slice(0, alphabetSize)
+      .split("")
+      .join(", ");
+    return String.raw`Consider strings of length ${strLength} over the alphabet $\{${alphabetString}\}$. How many such strings are there that start with $${startSubstr}$ or end with $${endSubstr}$?`;
+  }
+
+  generateQuestionOptions(questionContent) {
+    const { strLength, alphabetSize, startSubstr, endSubstr } = questionContent;
+
+    let options = [];
+
+    options.push(this.generateOptionOne(strLength, alphabetSize, startSubstr));
+    options.push(
+      this.generateOptionTwo(strLength, alphabetSize, startSubstr, endSubstr)
+    );
+    options.push(
+      this.generateOptionThree(strLength, alphabetSize, startSubstr, endSubstr)
+    );
+    options.push(
+      this.generateOptionFour(strLength, alphabetSize, startSubstr, endSubstr)
+    );
+
+    options.sort(() => Math.random() - 0.5);
+
+    return options;
+  }
+
+  generateOptionOne(strLength, alphabetSize, startSubstr) {
+    // this generates the number of strings that start with the given substring
+    let result = alphabetSize ** (strLength - startSubstr.length);
+    return {
+      body: String.raw`$ {${result}} $`,
+      correct: false,
+    };
+  }
+
+  generateOptionTwo(strLength, alphabetSize, startSubstr, endSubstr) {
+    // this generates a falsy value that counts strings that start AND end with the given substrings
+    let result =
+      alphabetSize ** (strLength - startSubstr.length - endSubstr.length);
+    return {
+      body: String.raw`$ {${result}} $`,
+      correct: false,
+    };
+  }
+
+  generateOptionThree(strLength, alphabetSize, startSubstr, endSubstr) {
+    // this generates the correct answer
+    let result =
+      alphabetSize ** (strLength - startSubstr.length) +
+      alphabetSize ** (strLength - endSubstr.length) -
+      alphabetSize ** (strLength - startSubstr.length - endSubstr.length);
+    return {
+      body: String.raw`$ {${result}} $`,
+      correct: true,
+    };
+  }
+
+  generateOptionFour(strLength, alphabetSize, startSubstr, endSubstr) {
+    // this generates a falsy value that double counts strings that start AND end with the given substrings
+    let result =
+      alphabetSize ** (strLength - startSubstr.length) +
+      alphabetSize ** (strLength - endSubstr.length);
+    return {
+      body: String.raw`$ {${result}} $`,
+      correct: false,
+    };
+  }
+}
+
+export { StringStartOrEnd };

From c4eba58a162a32744eb70e070b285e6909ab11a2 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Wed, 20 Jul 2022 13:40:29 -0400
Subject: [PATCH 09/18] Remove unncessary import

---
 app/src/apps/Examinations/Test.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/apps/Examinations/Test.svelte b/app/src/apps/Examinations/Test.svelte
index b5abf217..04cc48e8 100644
--- a/app/src/apps/Examinations/Test.svelte
+++ b/app/src/apps/Examinations/Test.svelte
@@ -5,7 +5,6 @@
   import { Header, Question } from "./components";
   import Test from "./lib/examinations/Test";
   import "./styles.scss";
-  import Button from "../../components/Button/Button.svelte";
 
   export let data;
 

From 5087d11ccdebbaf1fc89d9a8cbc368d8c25ce044 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Sat, 23 Jul 2022 11:06:03 -0400
Subject: [PATCH 10/18] Remove duplicate submit method

---
 app/src/apps/Examinations/lib/Examination.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/app/src/apps/Examinations/lib/Examination.js b/app/src/apps/Examinations/lib/Examination.js
index a775b15b..38706191 100644
--- a/app/src/apps/Examinations/lib/Examination.js
+++ b/app/src/apps/Examinations/lib/Examination.js
@@ -26,11 +26,6 @@ class Examination {
   submit() {
     this.submitted = true;
   }
-
-  // Change state of examination to submitted
-  submit() {
-    this.submitted = true;
-  }
 }
 
 export { Examination };

From 19fdece50cac3def3e6f2424f6f7db3bddc95485 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Thu, 28 Jul 2022 16:37:31 -0400
Subject: [PATCH 11/18] Add LinkedQuestion component

---
 .../LinkedQuestion/LinkedQuestion.svelte      | 70 ++++++++++++++
 app/src/components/LinkedQuestion/index.js    |  1 +
 app/src/components/LinkedQuestion/styles.scss | 92 +++++++++++++++++++
 3 files changed, 163 insertions(+)
 create mode 100644 app/src/components/LinkedQuestion/LinkedQuestion.svelte
 create mode 100644 app/src/components/LinkedQuestion/index.js
 create mode 100644 app/src/components/LinkedQuestion/styles.scss

diff --git a/app/src/components/LinkedQuestion/LinkedQuestion.svelte b/app/src/components/LinkedQuestion/LinkedQuestion.svelte
new file mode 100644
index 00000000..9942eb38
--- /dev/null
+++ b/app/src/components/LinkedQuestion/LinkedQuestion.svelte
@@ -0,0 +1,70 @@
+<script>
+	import './styles.scss';
+	// An example of how question content can be passed down through props.
+	export let questionNumber = 4;
+	export let questionText =
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.';
+	export let prompts = [
+		{ prompt: 'Prompt A' },
+		{ prompt: 'Prompt B' },
+		{ prompt: 'Prompt C' },
+		{ prompt: 'Prompt D' }
+	];
+	export let answers = [
+		{ answer: 'Answer A' },
+		{ answer: 'Answer B' },
+		{ answer: 'Answer C' },
+		{ answer: 'Answer D' },
+		{ answer: 'Answer E' }
+	];
+
+	// An example of how answers can be obtained
+	let userSelection = prompts.reduce((accumulator, currentPrompt) => {
+		return { ...accumulator, [currentPrompt.prompt]: '' };
+	}, {});
+
+	// This function will update the connection between prompts and answers
+	const selectAnswer = (event, prompt) => {
+		userSelection[prompt.prompt] = event.target.value;
+	};
+</script>
+
+<div class="linked-question">
+	<h2>Question {questionNumber}</h2>
+	<p class="linked-question-text">{questionText}</p>
+	<div class="linked-question-body">
+		<div class="linked-question-prompts">
+			{#each prompts as prompt}
+				<div class="linked-question-prompt">
+					<div class="select-wrapper">
+						<select on:change={(event) => selectAnswer(event, prompt)}>
+							<option value="" selected />
+							{#each answers as answer, index}
+								<option value={answer.answer}>{index + 1}</option>
+							{/each}
+						</select>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+						</svg>
+					</div>
+					<p>{prompt.prompt}</p>
+				</div>
+			{/each}
+		</div>
+		<ul class="linked-question-answers">
+			{#each answers as answer, index}
+				<li>
+					<p>{index + 1}.</p>
+					{answer.answer}
+				</li>
+			{/each}
+		</ul>
+	</div>
+</div>
diff --git a/app/src/components/LinkedQuestion/index.js b/app/src/components/LinkedQuestion/index.js
new file mode 100644
index 00000000..48192932
--- /dev/null
+++ b/app/src/components/LinkedQuestion/index.js
@@ -0,0 +1 @@
+export { default as LinkedQuestion } from './LinkedQuestion.svelte';
diff --git a/app/src/components/LinkedQuestion/styles.scss b/app/src/components/LinkedQuestion/styles.scss
new file mode 100644
index 00000000..cfb49f76
--- /dev/null
+++ b/app/src/components/LinkedQuestion/styles.scss
@@ -0,0 +1,92 @@
+.linked-question {
+	font-family: 'Helvetica Neue', serif;
+	margin-left: 0.25rem;
+	width: 50rem;
+}
+
+.linked-question h2 {
+	margin-bottom: 0.5rem;
+}
+
+.linked-question-text {
+	font-size: 1.25rem;
+	margin-top: 0;
+	margin-left: 1rem;
+}
+
+.linked-question-body {
+	margin-left: 2rem;
+	display: flex;
+	flex-direction: row;
+	font-size: 1.25rem;
+}
+
+.linked-question-prompts {
+	width: 50%;
+	margin: auto 0;
+}
+
+.linked-question-prompt {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.linked-question-prompt p {
+	margin-left: 1rem;
+}
+
+// Style div surrounding each select element
+.select-wrapper {
+	background-color: transparent;
+	width: 4.5rem;
+	height: 2.5rem;
+	font-family: inherit;
+	font-size: 1.25rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	border-radius: 0.35rem;
+}
+
+.select-wrapper select {
+	width: 100%;
+	height: 100%;
+	padding-left: 15%;
+	background: transparent;
+	font-family: inherit;
+	font-size: inherit;
+	border: 2px solid rgb(157, 157, 157);
+	border-radius: inherit;
+	appearance: none;
+	z-index: 1;
+}
+
+.select-wrapper svg {
+	width: 20px;
+	height: 20px;
+	margin-left: -40%;
+}
+
+.select-wrapper select:focus {
+	border-radius: inherit;
+	border: 3px solid rgb(31, 107, 249);
+}
+
+.linked-question-answers {
+	width: 50%;
+	list-style: none;
+	margin: 0;
+	padding-left: 0;
+}
+
+.linked-question-answers li {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.linked-question-answers li p {
+	font-weight: bold;
+	margin-right: 1rem;
+}

From 162b38f54f033fe35227edd33bcd93eb41447cf8 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Thu, 28 Jul 2022 16:47:20 -0400
Subject: [PATCH 12/18] Fix formatting error

---
 app/src/components/LinkedQuestion/styles.scss | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/app/src/components/LinkedQuestion/styles.scss b/app/src/components/LinkedQuestion/styles.scss
index cfb49f76..78b3fc7b 100644
--- a/app/src/components/LinkedQuestion/styles.scss
+++ b/app/src/components/LinkedQuestion/styles.scss
@@ -1,92 +1,92 @@
 .linked-question {
-	font-family: 'Helvetica Neue', serif;
-	margin-left: 0.25rem;
-	width: 50rem;
+  font-family: "Helvetica Neue", serif;
+  margin-left: 0.25rem;
+  width: 50rem;
 }
 
 .linked-question h2 {
-	margin-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .linked-question-text {
-	font-size: 1.25rem;
-	margin-top: 0;
-	margin-left: 1rem;
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-left: 1rem;
 }
 
 .linked-question-body {
-	margin-left: 2rem;
-	display: flex;
-	flex-direction: row;
-	font-size: 1.25rem;
+  margin-left: 2rem;
+  display: flex;
+  flex-direction: row;
+  font-size: 1.25rem;
 }
 
 .linked-question-prompts {
-	width: 50%;
-	margin: auto 0;
+  width: 50%;
+  margin: auto 0;
 }
 
 .linked-question-prompt {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .linked-question-prompt p {
-	margin-left: 1rem;
+  margin-left: 1rem;
 }
 
 // Style div surrounding each select element
 .select-wrapper {
-	background-color: transparent;
-	width: 4.5rem;
-	height: 2.5rem;
-	font-family: inherit;
-	font-size: 1.25rem;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	border-radius: 0.35rem;
+  background-color: transparent;
+  width: 4.5rem;
+  height: 2.5rem;
+  font-family: inherit;
+  font-size: 1.25rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 0.35rem;
 }
 
 .select-wrapper select {
-	width: 100%;
-	height: 100%;
-	padding-left: 15%;
-	background: transparent;
-	font-family: inherit;
-	font-size: inherit;
-	border: 2px solid rgb(157, 157, 157);
-	border-radius: inherit;
-	appearance: none;
-	z-index: 1;
+  width: 100%;
+  height: 100%;
+  padding-left: 15%;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  border: 2px solid rgb(157, 157, 157);
+  border-radius: inherit;
+  appearance: none;
+  z-index: 1;
 }
 
 .select-wrapper svg {
-	width: 20px;
-	height: 20px;
-	margin-left: -40%;
+  width: 20px;
+  height: 20px;
+  margin-left: -40%;
 }
 
 .select-wrapper select:focus {
-	border-radius: inherit;
-	border: 3px solid rgb(31, 107, 249);
+  border-radius: inherit;
+  border: 3px solid rgb(31, 107, 249);
 }
 
 .linked-question-answers {
-	width: 50%;
-	list-style: none;
-	margin: 0;
-	padding-left: 0;
+  width: 50%;
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
 }
 
 .linked-question-answers li {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .linked-question-answers li p {
-	font-weight: bold;
-	margin-right: 1rem;
+  font-weight: bold;
+  margin-right: 1rem;
 }

From 6a99bb1228a4171247c2fb115a8cc0f65948efb9 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Thu, 28 Jul 2022 16:51:03 -0400
Subject: [PATCH 13/18] Fix formatting error

---
 .../LinkedQuestion/LinkedQuestion.svelte      | 94 +++++++++----------
 app/src/components/LinkedQuestion/index.js    |  2 +-
 2 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/app/src/components/LinkedQuestion/LinkedQuestion.svelte b/app/src/components/LinkedQuestion/LinkedQuestion.svelte
index 9942eb38..9164f0bc 100644
--- a/app/src/components/LinkedQuestion/LinkedQuestion.svelte
+++ b/app/src/components/LinkedQuestion/LinkedQuestion.svelte
@@ -5,22 +5,22 @@
 	export let questionText =
 		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.';
 	export let prompts = [
-		{ prompt: 'Prompt A' },
-		{ prompt: 'Prompt B' },
-		{ prompt: 'Prompt C' },
-		{ prompt: 'Prompt D' }
+		{prompt: 'Prompt A'},
+		{prompt: 'Prompt B'},
+		{prompt: 'Prompt C'},
+		{prompt: 'Prompt D'}
 	];
 	export let answers = [
-		{ answer: 'Answer A' },
-		{ answer: 'Answer B' },
-		{ answer: 'Answer C' },
-		{ answer: 'Answer D' },
-		{ answer: 'Answer E' }
+		{answer: 'Answer A'},
+		{answer: 'Answer B'},
+		{answer: 'Answer C'},
+		{answer: 'Answer D'},
+		{answer: 'Answer E'}
 	];
 
 	// An example of how answers can be obtained
 	let userSelection = prompts.reduce((accumulator, currentPrompt) => {
-		return { ...accumulator, [currentPrompt.prompt]: '' };
+		return {...accumulator, [currentPrompt.prompt]: ''};
 	}, {});
 
 	// This function will update the connection between prompts and answers
@@ -30,41 +30,41 @@
 </script>
 
 <div class="linked-question">
-	<h2>Question {questionNumber}</h2>
-	<p class="linked-question-text">{questionText}</p>
-	<div class="linked-question-body">
-		<div class="linked-question-prompts">
-			{#each prompts as prompt}
-				<div class="linked-question-prompt">
-					<div class="select-wrapper">
-						<select on:change={(event) => selectAnswer(event, prompt)}>
-							<option value="" selected />
-							{#each answers as answer, index}
-								<option value={answer.answer}>{index + 1}</option>
-							{/each}
-						</select>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-6 w-6"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-							stroke-width="2"
-						>
-							<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-						</svg>
-					</div>
-					<p>{prompt.prompt}</p>
-				</div>
-			{/each}
-		</div>
-		<ul class="linked-question-answers">
-			{#each answers as answer, index}
-				<li>
-					<p>{index + 1}.</p>
-					{answer.answer}
-				</li>
-			{/each}
-		</ul>
-	</div>
+  <h2>Question {questionNumber}</h2>
+  <p class="linked-question-text">{questionText}</p>
+  <div class="linked-question-body">
+    <div class="linked-question-prompts">
+      {#each prompts as prompt}
+        <div class="linked-question-prompt">
+          <div class="select-wrapper">
+            <select on:change={(event) => selectAnswer(event, prompt)}>
+              <option value="" selected/>
+              {#each answers as answer, index}
+                <option value={answer.answer}>{index + 1}</option>
+              {/each}
+            </select>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
+            </svg>
+          </div>
+          <p>{prompt.prompt}</p>
+        </div>
+      {/each}
+    </div>
+    <ul class="linked-question-answers">
+      {#each answers as answer, index}
+        <li>
+          <p>{index + 1}.</p>
+          {answer.answer}
+        </li>
+      {/each}
+    </ul>
+  </div>
 </div>
diff --git a/app/src/components/LinkedQuestion/index.js b/app/src/components/LinkedQuestion/index.js
index 48192932..ef5086f8 100644
--- a/app/src/components/LinkedQuestion/index.js
+++ b/app/src/components/LinkedQuestion/index.js
@@ -1 +1 @@
-export { default as LinkedQuestion } from './LinkedQuestion.svelte';
+export { default as LinkedQuestion } from "./LinkedQuestion.svelte";

From a51c9af94713bf971e391de69322490b2f81bb61 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Thu, 28 Jul 2022 16:55:30 -0400
Subject: [PATCH 14/18] Fix formatting error

---
 .../LinkedQuestion/LinkedQuestion.svelte      | 72 ++++++++++---------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/app/src/components/LinkedQuestion/LinkedQuestion.svelte b/app/src/components/LinkedQuestion/LinkedQuestion.svelte
index 9164f0bc..a750d5fb 100644
--- a/app/src/components/LinkedQuestion/LinkedQuestion.svelte
+++ b/app/src/components/LinkedQuestion/LinkedQuestion.svelte
@@ -1,32 +1,32 @@
 <script>
-	import './styles.scss';
-	// An example of how question content can be passed down through props.
-	export let questionNumber = 4;
-	export let questionText =
-		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.';
-	export let prompts = [
-		{prompt: 'Prompt A'},
-		{prompt: 'Prompt B'},
-		{prompt: 'Prompt C'},
-		{prompt: 'Prompt D'}
-	];
-	export let answers = [
-		{answer: 'Answer A'},
-		{answer: 'Answer B'},
-		{answer: 'Answer C'},
-		{answer: 'Answer D'},
-		{answer: 'Answer E'}
-	];
+  import "./styles.scss";
+  // An example of how question content can be passed down through props.
+  export let questionNumber = 4;
+  export let questionText =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";
+  export let prompts = [
+    { prompt: "Prompt A" },
+    { prompt: "Prompt B" },
+    { prompt: "Prompt C" },
+    { prompt: "Prompt D" },
+  ];
+  export let answers = [
+    { answer: "Answer A" },
+    { answer: "Answer B" },
+    { answer: "Answer C" },
+    { answer: "Answer D" },
+    { answer: "Answer E" },
+  ];
 
-	// An example of how answers can be obtained
-	let userSelection = prompts.reduce((accumulator, currentPrompt) => {
-		return {...accumulator, [currentPrompt.prompt]: ''};
-	}, {});
+  // An example of how answers can be obtained
+  let userSelection = prompts.reduce((accumulator, currentPrompt) => {
+    return { ...accumulator, [currentPrompt.prompt]: "" };
+  }, {});
 
-	// This function will update the connection between prompts and answers
-	const selectAnswer = (event, prompt) => {
-		userSelection[prompt.prompt] = event.target.value;
-	};
+  // This function will update the connection between prompts and answers
+  const selectAnswer = (event, prompt) => {
+    userSelection[prompt.prompt] = event.target.value;
+  };
 </script>
 
 <div class="linked-question">
@@ -38,20 +38,24 @@
         <div class="linked-question-prompt">
           <div class="select-wrapper">
             <select on:change={(event) => selectAnswer(event, prompt)}>
-              <option value="" selected/>
+              <option value="" selected />
               {#each answers as answer, index}
                 <option value={answer.answer}>{index + 1}</option>
               {/each}
             </select>
             <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
             >
-              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M19 9l-7 7-7-7"
+              />
             </svg>
           </div>
           <p>{prompt.prompt}</p>

From 43789037071c17689293f4e278c14dfbe2af0b18 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Fri, 12 Aug 2022 12:13:07 -0400
Subject: [PATCH 15/18] Create LinkedQuestion class

---
 .../lib/questions/LinkedQuestion.js           | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 app/src/apps/Examinations/lib/questions/LinkedQuestion.js

diff --git a/app/src/apps/Examinations/lib/questions/LinkedQuestion.js b/app/src/apps/Examinations/lib/questions/LinkedQuestion.js
new file mode 100644
index 00000000..b77f9b36
--- /dev/null
+++ b/app/src/apps/Examinations/lib/questions/LinkedQuestion.js
@@ -0,0 +1,70 @@
+import { Question } from "../Question";
+
+class LinkedQuestion extends Question {
+  prompts = [];
+  options = [];
+  answers = [];
+
+  constructor(body, answers, labId) {
+    super(body, labId);
+    this.answers = this.constructAnswers(answers);
+    // Randomly sort prompts and options after creation
+    this.prompts.sort(() => 0.5 - Math.random());
+    this.options.sort(() => 0.5 - Math.random());
+  }
+
+  constructAnswers(answers) {
+    // Extract prompts and options and return mapping between them
+    return answers
+      .map((answer) => {
+        const option = new LinkedQuestionOption(answer.option.body);
+        this.options.push(option);
+
+        if (answer.prompt) {
+          const prompt = new LinkedQuestionPrompt(
+            answer.prompt.body,
+            undefined
+          );
+          this.prompts.push(prompt);
+          return {
+            prompt,
+            option,
+          };
+        }
+
+        return null;
+      })
+      .filter((answer) => answer);
+  }
+
+  // Checks user answers and marks each prompt as correct/incorrect
+  checkAnswers(userAnswers) {
+    userAnswers.forEach((userAnswer) => {
+      const correctAnswer = this.answers.find(
+        (answer) => answer.prompt === userAnswer.prompt
+      );
+      userAnswer.prompt.correct = userAnswer.option === correctAnswer.option;
+      return userAnswer;
+    });
+  }
+}
+
+class LinkedQuestionOption {
+  body;
+
+  constructor(body) {
+    this.body = body;
+  }
+}
+
+class LinkedQuestionPrompt {
+  body;
+  correct;
+
+  constructor(body, correct) {
+    this.body = body;
+    this.correct = correct;
+  }
+}
+
+export { LinkedQuestion };

From 58404e2da6317c135bcca7ac923341d8aa4112a2 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Fri, 12 Aug 2022 12:21:20 -0400
Subject: [PATCH 16/18] Move and update LinkedQuestion component

---
 .../LinkedQuestion/LinkedQuestion.svelte      | 80 +++++++++++++++++++
 .../components/LinkedQuestion/styles.scss     | 40 ++++++++--
 .../apps/Examinations/lib/questions/index.js  |  1 +
 .../LinkedQuestion/LinkedQuestion.svelte      | 74 -----------------
 4 files changed, 115 insertions(+), 80 deletions(-)
 create mode 100644 app/src/apps/Examinations/components/LinkedQuestion/LinkedQuestion.svelte
 rename app/src/{ => apps/Examinations}/components/LinkedQuestion/styles.scss (66%)
 delete mode 100644 app/src/components/LinkedQuestion/LinkedQuestion.svelte

diff --git a/app/src/apps/Examinations/components/LinkedQuestion/LinkedQuestion.svelte b/app/src/apps/Examinations/components/LinkedQuestion/LinkedQuestion.svelte
new file mode 100644
index 00000000..a364f7de
--- /dev/null
+++ b/app/src/apps/Examinations/components/LinkedQuestion/LinkedQuestion.svelte
@@ -0,0 +1,80 @@
+<script>
+  import "./styles.scss";
+
+  export let number;
+  export let question;
+  export let submitted;
+
+  let userAnswers = [];
+
+  // Creates mapping between prompts and user answers
+  const selectAnswer = (event, prompt) => {
+    userAnswers.push({
+      prompt,
+      option: question.options.at(+event.target.value),
+    });
+  };
+
+  // Returns index of the correct option for given prompt
+  const getPromptAnswer = (prompt) => {
+    let correctAnswer = question.answers.find(
+      (answer) => answer.prompt === prompt
+    );
+    return question.options.indexOf(correctAnswer.option);
+  };
+</script>
+
+<div class="linked-question">
+  <h2>Question {number}</h2>
+  <div class="linked-question-text">{@html question.body}</div>
+  <div class="linked-question-body">
+    <div class="linked-question-prompts">
+      {#each question.prompts as prompt}
+        <div class="linked-question-prompt">
+          {#if submitted && !prompt.correct}
+            <div class="correct-option">{getPromptAnswer(prompt) + 1}</div>
+          {/if}
+          <div
+            class={`select-wrapper ${
+              prompt.correct
+                ? "correct"
+                : prompt.correct === false
+                ? "incorrect"
+                : ""
+            }`}
+          >
+            <select on:change={(event) => selectAnswer(event, prompt)}>
+              <option value="" selected />
+              {#each question.options as _, index}
+                <option value={index}>{index + 1}</option>
+              {/each}
+            </select>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </div>
+          <div class="linked-question-prompt-body">{@html prompt.body}</div>
+        </div>
+      {/each}
+    </div>
+    <ul class="linked-question-options">
+      {#each question.options as option, index}
+        <li>
+          <p>{index + 1}.</p>
+          <div>{@html option.body}</div>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>
diff --git a/app/src/components/LinkedQuestion/styles.scss b/app/src/apps/Examinations/components/LinkedQuestion/styles.scss
similarity index 66%
rename from app/src/components/LinkedQuestion/styles.scss
rename to app/src/apps/Examinations/components/LinkedQuestion/styles.scss
index 78b3fc7b..61c044df 100644
--- a/app/src/components/LinkedQuestion/styles.scss
+++ b/app/src/apps/Examinations/components/LinkedQuestion/styles.scss
@@ -15,24 +15,44 @@
 }
 
 .linked-question-body {
-  margin-left: 2rem;
+  margin-left: 3rem;
   display: flex;
   flex-direction: row;
   font-size: 1.25rem;
 }
 
 .linked-question-prompts {
+  min-height: 90%;
+  margin: 5% 0;
   width: 50%;
-  margin: auto 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
 }
 
 .linked-question-prompt {
   display: flex;
   flex-direction: row;
   align-items: center;
+  position: relative;
+}
+
+.linked-question-prompt div.correct-option {
+  position: absolute;
+  font-weight: bold;
+  height: 100%;
+  top: 0;
+  left: -15%;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgb(56, 232, 51);
+  font-size: 1.35rem;
 }
 
-.linked-question-prompt p {
+.linked-question-prompt-body {
   margin-left: 1rem;
 }
 
@@ -49,6 +69,14 @@
   border-radius: 0.35rem;
 }
 
+.select-wrapper.correct {
+  background: rgb(70, 255, 60);
+}
+
+.select-wrapper.incorrect {
+  background: rgb(255, 69, 69);
+}
+
 .select-wrapper select {
   width: 100%;
   height: 100%;
@@ -73,20 +101,20 @@
   border: 3px solid rgb(31, 107, 249);
 }
 
-.linked-question-answers {
+.linked-question-options {
   width: 50%;
   list-style: none;
   margin: 0;
   padding-left: 0;
 }
 
-.linked-question-answers li {
+.linked-question-options li {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 
-.linked-question-answers li p {
+.linked-question-options li p {
   font-weight: bold;
   margin-right: 1rem;
 }
diff --git a/app/src/apps/Examinations/lib/questions/index.js b/app/src/apps/Examinations/lib/questions/index.js
index e4a856f0..c7d440ad 100644
--- a/app/src/apps/Examinations/lib/questions/index.js
+++ b/app/src/apps/Examinations/lib/questions/index.js
@@ -1,3 +1,4 @@
 export { DesmosAsymtopicAnalysisQuestion } from "./DesmosAsymtopicAnalysisQuestion";
 export { MultipleChoiceQuestion } from "./MultipleChoiceQuestion";
 export { WrittenQuestion } from "./WrittenQuestion";
+export { LinkedQuestion } from "./LinkedQuestion";
diff --git a/app/src/components/LinkedQuestion/LinkedQuestion.svelte b/app/src/components/LinkedQuestion/LinkedQuestion.svelte
deleted file mode 100644
index a750d5fb..00000000
--- a/app/src/components/LinkedQuestion/LinkedQuestion.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script>
-  import "./styles.scss";
-  // An example of how question content can be passed down through props.
-  export let questionNumber = 4;
-  export let questionText =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";
-  export let prompts = [
-    { prompt: "Prompt A" },
-    { prompt: "Prompt B" },
-    { prompt: "Prompt C" },
-    { prompt: "Prompt D" },
-  ];
-  export let answers = [
-    { answer: "Answer A" },
-    { answer: "Answer B" },
-    { answer: "Answer C" },
-    { answer: "Answer D" },
-    { answer: "Answer E" },
-  ];
-
-  // An example of how answers can be obtained
-  let userSelection = prompts.reduce((accumulator, currentPrompt) => {
-    return { ...accumulator, [currentPrompt.prompt]: "" };
-  }, {});
-
-  // This function will update the connection between prompts and answers
-  const selectAnswer = (event, prompt) => {
-    userSelection[prompt.prompt] = event.target.value;
-  };
-</script>
-
-<div class="linked-question">
-  <h2>Question {questionNumber}</h2>
-  <p class="linked-question-text">{questionText}</p>
-  <div class="linked-question-body">
-    <div class="linked-question-prompts">
-      {#each prompts as prompt}
-        <div class="linked-question-prompt">
-          <div class="select-wrapper">
-            <select on:change={(event) => selectAnswer(event, prompt)}>
-              <option value="" selected />
-              {#each answers as answer, index}
-                <option value={answer.answer}>{index + 1}</option>
-              {/each}
-            </select>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              stroke-width="2"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
-          </div>
-          <p>{prompt.prompt}</p>
-        </div>
-      {/each}
-    </div>
-    <ul class="linked-question-answers">
-      {#each answers as answer, index}
-        <li>
-          <p>{index + 1}.</p>
-          {answer.answer}
-        </li>
-      {/each}
-    </ul>
-  </div>
-</div>

From 7fd1c645cd86e40b0ca8ba7f509103c834bc53c5 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Fri, 12 Aug 2022 12:34:48 -0400
Subject: [PATCH 17/18] Add export file to LinkedQuestion component

---
 app/src/apps/Examinations/components/LinkedQuestion/index.js | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 app/src/apps/Examinations/components/LinkedQuestion/index.js

diff --git a/app/src/apps/Examinations/components/LinkedQuestion/index.js b/app/src/apps/Examinations/components/LinkedQuestion/index.js
new file mode 100644
index 00000000..ef5086f8
--- /dev/null
+++ b/app/src/apps/Examinations/components/LinkedQuestion/index.js
@@ -0,0 +1 @@
+export { default as LinkedQuestion } from "./LinkedQuestion.svelte";

From 41cb3de5a1ff3a0566d63529a5ce2715ef3979d7 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Fri, 12 Aug 2022 14:18:54 -0400
Subject: [PATCH 18/18] Add GlobeAnimation component to the home page

---
 app/package-lock.json                         | 51 ++++++++++++++-----
 app/package.json                              |  1 +
 .../GlobeAnimation/GlobeAnimation.svelte      | 25 +++++++++
 app/src/components/GlobeAnimation/index.js    |  1 +
 app/src/pages/index.astro                     |  3 +-
 5 files changed, 68 insertions(+), 13 deletions(-)
 create mode 100644 app/src/components/GlobeAnimation/GlobeAnimation.svelte
 create mode 100644 app/src/components/GlobeAnimation/index.js

diff --git a/app/package-lock.json b/app/package-lock.json
index 15a6809c..6631c71e 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -8,6 +8,7 @@
       "name": "@example/basics",
       "version": "0.0.1",
       "dependencies": {
+        "@lottiefiles/svelte-lottie-player": "^0.2.0",
         "commander": "^9.3.0",
         "d3": "^7.6.1",
         "mathjax": "^3.2.1",
@@ -549,6 +550,14 @@
       "integrity": "sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==",
       "dev": true
     },
+    "node_modules/@lottiefiles/svelte-lottie-player": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/svelte-lottie-player/-/svelte-lottie-player-0.2.0.tgz",
+      "integrity": "sha512-sV8YkO8hCDGq67LCCqjT+JW6cAbVCIw9wtgrOWz+Ao6Q8cD7ZvdsCiipSIMIH55Ja6MWwEXP4N4nKD+jL3XQLg==",
+      "dependencies": {
+        "lottie-web": "^5.7.8"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3649,6 +3658,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.9.6",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.9.6.tgz",
+      "integrity": "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA=="
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -4885,9 +4899,9 @@
       }
     },
     "node_modules/node-fetch": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.5.tgz",
-      "integrity": "sha512-u7zCHdJp8JXBwF09mMfo2CL6kp37TslDl1KP3hRGTlCInBtag+UO3LGVy+NF0VzvnL3PVMpA2hXh1EtECFnyhQ==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.10.tgz",
+      "integrity": "sha512-MhuzNwdURnZ1Cp4XTazr69K0BTizsBroX7Zx3UgDSVcZYKF/6p0CBe4EUb/hLqmzVhl0UpYfgRljQ4yxE+iCxA==",
       "dev": true,
       "dependencies": {
         "data-uri-to-buffer": "^4.0.0",
@@ -6331,9 +6345,9 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.48.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.48.0.tgz",
-      "integrity": "sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
       "engines": {
         "node": ">= 8"
       }
@@ -7658,6 +7672,14 @@
       "integrity": "sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==",
       "dev": true
     },
+    "@lottiefiles/svelte-lottie-player": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/svelte-lottie-player/-/svelte-lottie-player-0.2.0.tgz",
+      "integrity": "sha512-sV8YkO8hCDGq67LCCqjT+JW6cAbVCIw9wtgrOWz+Ao6Q8cD7ZvdsCiipSIMIH55Ja6MWwEXP4N4nKD+jL3XQLg==",
+      "requires": {
+        "lottie-web": "^5.7.8"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -9888,6 +9910,11 @@
       "integrity": "sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==",
       "dev": true
     },
+    "lottie-web": {
+      "version": "5.9.6",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.9.6.tgz",
+      "integrity": "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA=="
+    },
     "lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -10711,9 +10738,9 @@
       "dev": true
     },
     "node-fetch": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.5.tgz",
-      "integrity": "sha512-u7zCHdJp8JXBwF09mMfo2CL6kp37TslDl1KP3hRGTlCInBtag+UO3LGVy+NF0VzvnL3PVMpA2hXh1EtECFnyhQ==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.10.tgz",
+      "integrity": "sha512-MhuzNwdURnZ1Cp4XTazr69K0BTizsBroX7Zx3UgDSVcZYKF/6p0CBe4EUb/hLqmzVhl0UpYfgRljQ4yxE+iCxA==",
       "dev": true,
       "requires": {
         "data-uri-to-buffer": "^4.0.0",
@@ -11743,9 +11770,9 @@
       "dev": true
     },
     "svelte": {
-      "version": "3.48.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.48.0.tgz",
-      "integrity": "sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ=="
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA=="
     },
     "svelte-hmr": {
       "version": "0.14.12",
diff --git a/app/package.json b/app/package.json
index da09a3de..3b5e634d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -17,6 +17,7 @@
     "svelte": "^3.48.0"
   },
   "dependencies": {
+    "@lottiefiles/svelte-lottie-player": "^0.2.0",
     "commander": "^9.3.0",
     "d3": "^7.6.1",
     "mathjax": "^3.2.1",
diff --git a/app/src/components/GlobeAnimation/GlobeAnimation.svelte b/app/src/components/GlobeAnimation/GlobeAnimation.svelte
new file mode 100644
index 00000000..30cb8f79
--- /dev/null
+++ b/app/src/components/GlobeAnimation/GlobeAnimation.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { onMount } from "svelte";
+
+  let LottiePlayer;
+
+  onMount(async () => {
+    const module = await import("@lottiefiles/svelte-lottie-player");
+    LottiePlayer = module.LottiePlayer;
+  });
+</script>
+
+{#if LottiePlayer}
+  <div class="lottie">
+    <LottiePlayer
+      src="/lottie/animation.json"
+      autoplay={true}
+      loop={true}
+      controls={false}
+      renderer="svg"
+      background="transparent"
+      height={950}
+      width={950}
+    />
+  </div>
+{/if}
diff --git a/app/src/components/GlobeAnimation/index.js b/app/src/components/GlobeAnimation/index.js
new file mode 100644
index 00000000..f7ec60dd
--- /dev/null
+++ b/app/src/components/GlobeAnimation/index.js
@@ -0,0 +1 @@
+export { default as GlobeAnimation } from "./GlobeAnimation.svelte";
diff --git a/app/src/pages/index.astro b/app/src/pages/index.astro
index 6d9180d4..5eb58762 100644
--- a/app/src/pages/index.astro
+++ b/app/src/pages/index.astro
@@ -2,6 +2,7 @@
 import BaseLayout from "../layouts/BaseLayout.astro";
 import HomeLayout from "../layouts/HomeLayout.astro";
 import { Button } from "../components";
+import { GlobeAnimation } from "../components/GlobeAnimation";
 ---
 
 <BaseLayout title="DiscreteMath.ca">
@@ -22,7 +23,7 @@ import { Button } from "../components";
         <Button label="comp 2804" />
       </a>
     </div>
-    <div>"globe animation here"</div>
+    <GlobeAnimation client:load />
   </HomeLayout>
 </BaseLayout>