82 lines
1.8 KiB
Svelte
82 lines
1.8 KiB
Svelte
<script>
|
|
import {onMount} from "svelte";
|
|
import randomize from "../../rand.ts";
|
|
|
|
export let question;
|
|
export let showResult = false;
|
|
|
|
export let isCorrect = false;
|
|
|
|
let fields = [];
|
|
|
|
onMount(()=>{
|
|
fields = randomize(Object.keys(question.fields).map(e => ({
|
|
key: e,
|
|
value: question.fields[e]
|
|
})));
|
|
})
|
|
|
|
$: values = Object.keys(question.values).map(e => ({
|
|
key: e,
|
|
value: question.values[e]
|
|
}))
|
|
|
|
let selected = {};
|
|
// $: isCorrect = selected === question.correct;
|
|
|
|
$: console.log(
|
|
"Selected:",
|
|
selected,
|
|
"showResult:",
|
|
showResult,
|
|
"isCorrect",
|
|
isCorrect
|
|
);
|
|
|
|
$: {
|
|
isCorrect = fields.every(field=>selected[field.key] === question.correct[field.key]);
|
|
}
|
|
|
|
</script>
|
|
|
|
{#each fields as field (field.key)}
|
|
<div class="input-group">
|
|
<label>{field.value}</label>
|
|
<select class="inp" bind:value={selected[field.key]}>
|
|
<option value={undefined}>-- select --</option>
|
|
{#each values as value}
|
|
<option value={value.key}>{value.value}</option>
|
|
{/each}
|
|
</select>
|
|
{#if showResult}
|
|
<div class="should">{question.values[question.correct[field.key]]}</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
|
|
<style>
|
|
.should {
|
|
color: var(--primary) !important;
|
|
margin-left: 1rem;
|
|
}
|
|
</style>
|
|
|
|
<!-- {#each options as option}
|
|
<div
|
|
key={option.key}
|
|
class:should={showResult && option.key === question.correct }
|
|
>
|
|
<label class="input-checkbox" for={option.key}>{@html option.value.replace(/\n/g, "<br>")}
|
|
<input
|
|
type="radio"
|
|
id={option.key}
|
|
checked={option.key===selected}
|
|
on:click={(evt)=>showResult ?
|
|
evt.preventDefault() : selected = option.key}
|
|
>
|
|
<span></span>
|
|
</label>
|
|
<br/>
|
|
</div>
|
|
{/each} -->
|