CLASSROOMIO-T-80: Replace sapper with sveltekit

2023-08-02 19:35:27 +01:00
parent 8ffdf319b3
commit 7dfbb05451
320 changed files with 5207 additions and 18330 deletions
@@ -0,0 +1,63 @@
+<script>
+  import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
+  import { optionImage } from '$lib/utils/constants/quiz';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+
+  export let currentQuestion = {
+    label: '',
+  };
+  export let currentError = {};
+  export let optionHasError = () => false;
+  export let isPreview = false;
+</script>
+
+{#if isPreview}
+  <h1 class="text-white mb-5 font-bold">{currentQuestion.label}</h1>
+{:else}
+  <TextField
+    placeholder="Start typing your question"
+    bind:value={currentQuestion.label}
+    className="w-full my-4"
+    errorMessage={currentError.isLabelEmpty && 'This field is required'}
+    isRequired={true}
+    bgColor="bg-white"
+  />
+{/if}
+
+<!-- Options -->
+<div class="flex justify-between w-full flex-wrap">
+  {#each currentQuestion.options || [] as option}
+    <div class="w-2/5 bg-white dark:bg-gray-700 rounded p-5 mb-5 relative">
+      <img src={optionImage[option.id]} alt={option.id} />
+
+      {#if isPreview}
+        <p class="mt-5">{option.label}</p>
+      {:else}
+        <TextField
+          bind:value={option.label}
+          placeholder="Type answer"
+          bgColor="bg-white"
+          className="mt-3"
+          isDisabled={currentQuestion.type === 'boolean'}
+          errorMessage={optionHasError(option.id, currentError.options) &&
+            'Please enter a label'}
+        />
+        <div class="flex justify-end absolute top-2 right-2">
+          <IconButton
+            value={option.id}
+            onClick={() => (option.isCorrect = !option.isCorrect)}
+            buttonClassName={option.isCorrect && 'success'}
+          >
+            {#if option.isCorrect}
+              <CheckmarkFilledIcon size={24} class="carbon-icon" />
+            {:else}
+              <CheckmarkOutlineIcon size={24} class="carbon-icon" />
+            {/if}
+          </IconButton>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>