server/frontend/ui/src/components/FlagMCQ.svelte

50 lines
1.7 KiB
Svelte

<script>
import {
Button,
Icon,
} from 'sveltestrap';
import FlagKey from './FlagKey.svelte';
export let refresh_my = null;
export let exercice_id = 0;
export let flag = { };
export let values = { };
export let justifications = { };
</script>
{#if flag.label}
<p class="mb-1">
{flag.label}&nbsp;:
{#if flag.found}
<Icon name="check" class="form-control-feedback text-success" aria-hidden="true" title="QCM réussi à {flag.solved}" />
{/if}
</p>
{/if}
{#if !flag.found || flag.justify}
{#each Object.keys(flag.choices) as cid, index}
<div class="form-check ms-3">
<input class="form-check-input" type="checkbox" id="mcq_{flag.id}_{cid}" bind:checked={values[Number(cid)]} disabled={flag.found}>
<label class="form-check-label" for="mcq_{flag.id}_{cid}">
{#if typeof flag.choices[cid] == "Object"}
{flag.choices[cid].label}
{:else}
{flag.choices[cid]}
{/if}
</label>
{#if values[Number(cid)] && flag.justify && (!flag.choices[cid].justification || !flag.choices[cid].justification.solved)}
<FlagKey
{exercice_id}
flag={flag.choices[cid].justification}
{refresh_my}
bind:values={justifications[flag.choices[cid].justification.id]}
/>
{/if}
{#if flag.choices[cid].justification && flag.choices[cid].justification.solved}
<Icon name="check" class="form-control-feedback text-success" aria-hidden="true" title="Flag trouvé !" />
{/if}
</div>
{/each}
{/if}
<hr>