47 lines
1.2 KiB
Svelte
47 lines
1.2 KiB
Svelte
<script>
|
|
export let question;
|
|
export let showResult = false;
|
|
export let isCorrect = false;
|
|
|
|
|
|
$: options = Object.keys(question.options).map(e => ({ key: e, value: question.options[e] }));
|
|
|
|
let selected = [];
|
|
$: isCorrect = selected.every(val => question.correct[val]);
|
|
|
|
$: console.log("Selected:", selected, "showResult:", showResult, "isCorrect", isCorrect);
|
|
|
|
|
|
function toggle(id) {
|
|
if (selected.indexOf(id) < 0) {
|
|
selected = [...selected, id];
|
|
} else {
|
|
selected = selected.filter(e => e !== id);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<h3>Select {question.correct.length}</h3>
|
|
{#each options as option}
|
|
<div
|
|
key={option.key}
|
|
class:should={showResult && question.correct.indexOf(option.key) >= 0}
|
|
>
|
|
<label class="input-checkbox" for={option.key}>{option.value}
|
|
<input
|
|
type="checkbox"
|
|
id={option.key}
|
|
checked={selected.indexOf(option.key) >= 0}
|
|
on:click={(evt)=>showResult ? evt.preventDefault() : toggle(option.key)}
|
|
>
|
|
<span></span>
|
|
</label>
|
|
<br/>
|
|
</div>
|
|
{/each}
|
|
|
|
<style>
|
|
.should {
|
|
color: var(--primary) !important;
|
|
}
|
|
</style> |