Rotimi Best
41e29014ef
* Merge main into turbo-monrepo * feat: rename apps * feat: remove supbase videos and serve all from project * feat: move supabase to root * feat: update README * docs: update link
63 lines
2.1 KiB
Svelte
63 lines
2.1 KiB
Svelte
<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-neutral-800 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 dark:text-white" />
|
|
{:else}
|
|
<CheckmarkOutlineIcon size={24} class="carbon-icon dark:text-white" />
|
|
{/if}
|
|
</IconButton>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|