143 lines
3 KiB
Svelte
143 lines
3 KiB
Svelte
<script lang="ts">
|
|
export let props;
|
|
export let question = {
|
|
|
|
description: `
|
|
what is 1 + 1?
|
|
`,
|
|
concepts: [ "addition" ],
|
|
choices: [
|
|
{ text: "1", correct: false },
|
|
{ text: "2", correct: true },
|
|
{ text: "3", correct: false },
|
|
],
|
|
};
|
|
|
|
// State related variables
|
|
let state = "ask";
|
|
let currentChoice: number = -1;
|
|
let wasCorrect = false;
|
|
|
|
let choose = (index: number) => {
|
|
currentChoice = index;
|
|
};
|
|
|
|
let answer = async (sure: boolean) => {
|
|
state = "submitting";
|
|
let resp = await fetch("/api/submit", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
}),
|
|
});
|
|
state = "answer";
|
|
wasCorrect = question.choices[currentChoice].correct;
|
|
};
|
|
|
|
let clearChoice = () => {
|
|
currentChoice = -1;
|
|
};
|
|
|
|
let goBack = () => {
|
|
state = "ask";
|
|
currentChoice = -1;
|
|
};
|
|
</script>
|
|
|
|
<div class="quiz-box">
|
|
{#if state == "ask" }
|
|
<small>Q:</small>
|
|
{:else}
|
|
<small>A:</small>
|
|
{/if}
|
|
|
|
<p>{ question.description }</p>
|
|
<ul class="choices">
|
|
{#each props.choices as choice, index }
|
|
<li>
|
|
<input type="radio"
|
|
name="choice"
|
|
class="box"
|
|
id={"choice" + index}
|
|
checked={currentChoice == index}
|
|
disabled={state != "ask"}
|
|
on:change={() => choose(index)} />
|
|
<label for={"choice" + index}>{ choice.text }</label>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
{#if state == "ask" }
|
|
<div class="answer-buttons">
|
|
{#if currentChoice < 0}
|
|
<button>Skip</button>
|
|
{:else}
|
|
<button on:click={() => clearChoice()}>Clear</button>
|
|
{/if}
|
|
<button on:click={() => answer(false)} disabled={currentChoice < 0}>Not sure</button>
|
|
<button on:click={() => answer(true)} disabled={currentChoice < 0}>I'm sure</button>
|
|
</div>
|
|
{:else}
|
|
{#if wasCorrect }
|
|
<p>you Got it!</p>
|
|
{:else}
|
|
<p>you Failed</p>
|
|
{/if}
|
|
<div> <button on:click={() => goBack()}>Go back</button> </div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss" scoped>
|
|
.quiz-box {
|
|
border: 1px solid gray;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
|
|
.choices {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding-left: 0;
|
|
|
|
li {
|
|
list-style: none;
|
|
flex-grow: 1;
|
|
margin: 12px;
|
|
width: 100%;
|
|
|
|
input.box {
|
|
display: none;
|
|
}
|
|
|
|
label {
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 6px;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
input.box:not(:checked) + label {
|
|
border: 2px solid #ccc;
|
|
}
|
|
|
|
input.box:checked + label {
|
|
border: 2px solid red;
|
|
background-color: lighten(red, 45%);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.answer-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
button {
|
|
margin: 6px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|