Browse Source

Add "confirmation dialog" to show solution

fix #47
mj-deploy
Standa Lukeš 4 years ago
parent
commit
1d72fe222b
  1. 20
      frontend/src/SolutionCaptcha.svelte
  2. 26
      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>

26
frontend/src/TaskDisplay.svelte

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