LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Small improvements to the playing-experience, mainly with range-answers

Browse Source
This commit is contained in:
Mawoka
2022-08-31 17:32:06 +02:00
parent 69b1e0f66f
commit 16c596d23d
3 changed files with 39 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/play/end.svelte
+4 -1
View File
@@ -64,6 +64,9 @@
} }
}; };
let winners = getWinnersSorted(); let winners = getWinnersSorted();
$: {
console.log(winners, winners_arr);
}
</script> </script>
<div> <div>
@@ -75,7 +78,7 @@
{$t('play_page.1st_place')}: <span class="underline">{winners_arr[0]}</span> {$t('play_page.1st_place')}: <span class="underline">{winners_arr[0]}</span>
<span <span
>{$t('play_page.with_out_of', { >{$t('play_page.with_out_of', {
correct_questions: winners[winners_arr[1]] ?? 0, correct_questions: winners[winners_arr[0]] ?? 0,
total_question_count: quiz_data.questions.length total_question_count: quiz_data.questions.length
})}</span })}</span
> >
frontend/src/lib/play/question.svelte
+11 -9
View File
@@ -93,15 +93,17 @@
{#await import('svelte-range-slider-pips')} {#await import('svelte-range-slider-pips')}
<Spinner /> <Spinner />
{:then c} {:then c}
<svelte:component <div class:pointer-events-none={selected_answer !== undefined}>
this={c.default} <svelte:component
bind:values={slider_value} this={c.default}
bind:min={question.answers.min} bind:values={slider_value}
bind:max={question.answers.max} bind:min={question.answers.min}
pips bind:max={question.answers.max}
float pips
all="label" float
/> all="label"
/>
</div>
<div class="flex justify-center"> <div class="flex justify-center">
<button <button
class="w-1/2 text-3xl bg-amber-700 my-2 disabled:opacity-60 border border-white" class="w-1/2 text-3xl bg-amber-700 my-2 disabled:opacity-60 border border-white"
frontend/src/lib/play/show_results.svelte
+24 -2
View File
@@ -7,6 +7,7 @@
import type { Answer, QuizData } from '$lib/quiz_types'; import type { Answer, QuizData } from '$lib/quiz_types';
import { getLocalization } from '$lib/i18n'; import { getLocalization } from '$lib/i18n';
import { QuizQuestionType } from '../quiz_types.js'; import { QuizQuestionType } from '../quiz_types.js';
import Spinner from '$lib/Spinner.svelte';
const { t } = getLocalization(); const { t } = getLocalization();
export let results: Array<Answer>; export let results: Array<Answer>;
@@ -22,6 +23,12 @@
for (let i = 0; i < results.length; i++) { for (let i = 0; i < results.length; i++) {
data_store[results[i].answer] += 1; data_store[results[i].answer] += 1;
} }
let slider_values = [
game_data.questions[parseInt(question_index)].answers.min_correct ?? 0,
game_data.questions[parseInt(question_index)].answers.max_correct ?? 0
];
console.log(slider_values, game_data.questions[parseInt(question_index)].answers);
</script> </script>
<!-- Show the results from the results object --> <!-- Show the results from the results object -->
@@ -84,11 +91,26 @@
</table> </table>
</div> </div>
{:else if game_data.questions[parseInt(question_index)].type === QuizQuestionType.RANGE} {:else if game_data.questions[parseInt(question_index)].type === QuizQuestionType.RANGE}
<p class="text-center"> <!--<p class="text-center">
Every number between {game_data.questions[parseInt(question_index)].answers Every number between {game_data.questions[parseInt(question_index)].answers
.min_correct} and {game_data.questions[parseInt(question_index)].answers .min_correct} and {game_data.questions[parseInt(question_index)].answers
.max_correct} was correct. .max_correct} was correct.
</p> </p>-->
{#await import('svelte-range-slider-pips')}
<Spinner />
{:then c}
<div class="grayscale pointer-events-none w-full">
<svelte:component
this={c.default}
bind:values={slider_values}
bind:min={game_data.questions[parseInt(question_index)].answers.min}
bind:max={game_data.questions[parseInt(question_index)].answers.max}
pips
float
all="label"
/>
</div>
{/await}
{/if} {/if}
</div> </div>
</div> </div>