StringStartOrEnd Factory, LinkedQuestion Class and Component, Globe Animation

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",

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>

app/src/apps/Examinations/components/LinkedQuestion/index.js

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

app/src/apps/Examinations/components/LinkedQuestion/styles.scss

@@ -0,0 +1,120 @@
+.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: 3rem;
+  display: flex;
+  flex-direction: row;
+  font-size: 1.25rem;
+}
+
+.linked-question-prompts {
+  min-height: 90%;
+  margin: 5% 0;
+  width: 50%;
+  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-body {
+  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.correct {
+  background: rgb(70, 255, 60);
+}
+
+.select-wrapper.incorrect {
+  background: rgb(255, 69, 69);
+}
+
+.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-options {
+  width: 50%;
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+.linked-question-options li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.linked-question-options li p {
+  font-weight: bold;
+  margin-right: 1rem;
+}