Browse Source

Add "confirmation dialog" to show solution

fix #47
mj-deploy
Standa Lukeš 3 years ago
parent
commit
1d72fe222b
  1. 20
      frontend/src/SolutionCaptcha.svelte
  2. 34
      frontend/src/TaskDisplay.svelte

20
frontend/src/SolutionCaptcha.svelte

@ -0,0 +1,20 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
const a = Math.floor(Math.random() * 80) + 20
const b = Math.floor(Math.random() * 80) + 20
let ok = true
const eventDispatcher = createEventDispatcher()
function newValue(val: number) {
ok = a + b == val
if (ok) {
eventDispatcher("done")
}
}
</script>
<div>
<p>Úlohu zatím nemáš vyřešenou, opravdu si chceš vyzradit řešení?</p>
{a} + {b} = <input type=text pattern={"" + a + b} on:input={e => newValue(+e.currentTarget.value)}>
</div>

34
frontend/src/TaskDisplay.svelte

@ -5,14 +5,17 @@
import App from "./App.svelte";
import { taskStatuses } from "./task-status-cache";
import type { TaskDescriptor } from "./tasks";
import Odevzdavatko from "./Odevzdavatko.svelte";
import Odevzdavatko from "./Odevzdavatko.svelte";
import SolutionCaptcha from "./SolutionCaptcha.svelte";
export let task: TaskDescriptor | null | undefined
let wantsSolution = false
export let showSolution: boolean = false
$: {
task
showSolution = false
wantsSolution = false
}
let referenceId: string | null
@ -33,6 +36,14 @@ import Odevzdavatko from "./Odevzdavatko.svelte";
updateLoginUrl()
window.addEventListener("onhashchange", updateLoginUrl)
function maybeShowSolution() {
if (status && status.points > status.maxPoints - 0.01) {
showSolution = true
} else {
wantsSolution = true
}
}
</script>
<style>
div {
@ -97,18 +108,21 @@ import Odevzdavatko from "./Odevzdavatko.svelte";
<hr class="clearfloat" />
<div class="solution">
{#if !showSolution}
{#if showSolution}
<h4>Řešení</h4>
{#await grabSolution(nonNull(referenceId))}
Načítám...
{:then solution}
{@html solution.description}
{/await}
{:else if wantsSolution}
<SolutionCaptcha on:done={() => showSolution = true} />
{:else}
<a href="javascript:;"
on:click|preventDefault|stopPropagation={() => showSolution = true}>
on:click|preventDefault|stopPropagation={maybeShowSolution}>
Zobrazit řešení úlohy
</a>
{:else}
<h4>Řešení</h4>
{#await grabSolution(nonNull(referenceId))}
Načítám...
{:then solution}
{@html solution.description}
{/await}
{/if}
</div>