CLASSROOMIO-T-49

merge CLASSROOMIO-T-49: Quiz CRUD CLASSROOMIO-T-49: Validate quiz question CLASSROOMIO-T-49: Begin work on quiz preview CLASSROOMIO-T-49: Complete quiz page CLASSROOMIO-T-49: Init quiz work CLASSROOMIO-T-49: Quiz CRUD CLASSROOMIO-T-49: Validate quiz question CLASSROOMIO-T-49: Begin work on quiz preview CLASSROOMIO-T-49: Complete quiz page CLASSROOMIO-T-49: Init quiz work Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com> Merge-request: CLASSROOMIO-MR-14 Merged-by: Best Admin <digdippa@gmail.com>
2023-06-17 19:11:29 +00:00
parent b532ea6d29
commit 1e71a91a54
70 changed files with 10601 additions and 497 deletions
@@ -0,0 +1,61 @@
+<script>
+  import { onMount } from 'svelte';
+  import { SyncLoader } from 'svelte-loading-spinners';
+  import PlayContainer from './Container.svelte';
+  import PlayHeader from './Header/index.svelte';
+  import { quizStore, playQuizStore } from '../../../../utils/store/org';
+  import { STEPS } from '../../../../utils/constants/quiz';
+  import { genQuizPin } from '../../../../utils/functions/org';
+  import PrimaryButton from '../../../PrimaryButton/index.svelte';
+  import { VARIANTS } from '../../../PrimaryButton/constants';
+
+  let isGettingPin = true;
+
+  function getPin() {
+    setTimeout(() => {
+      $quizStore.pin = genQuizPin();
+      isGettingPin = false;
+    }, 3000);
+  }
+
+  function goToPlayersStep() {
+    $playQuizStore.step = STEPS.WAIT_FOR_PLAYERS;
+  }
+
+  onMount(() => {
+    getPin();
+  });
+</script>
+
+<PlayContainer>
+  <div slot="header">
+    <PlayHeader startCount={true} showCountDown={true} />
+  </div>
+
+  <div
+    slot="body"
+    class="w-full rounded-md bg-white dark:bg-gray-700 py-7 px-5"
+  >
+    <div class="mb-3">
+      <p>1. Visit</p>
+      <h3>play.classroomio.com</h3>
+    </div>
+    <div class="">
+      <p>2. Enter Pin</p>
+      {#if isGettingPin}
+        <SyncLoader size="50" color="#1d4ed8" unit="px" duration="1s" />
+      {:else}
+        <h3>{$quizStore.pin}</h3>
+      {/if}
+    </div>
+  </div>
+
+  <div slot="footer" class="flex justify-center items-center">
+    <p class="font-bold mr-3">Let's go</p>
+    <PrimaryButton
+      label="View Players"
+      variant={VARIANTS.OUTLINED}
+      onClick={goToPlayersStep}
+    />
+  </div>
+</PlayContainer>