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

✨ More progress on frontend for game results

Browse Source
This commit is contained in:
Mawoka
2023-02-05 21:33:10 +01:00
parent bce22c43fc
commit 36688bb552
5 changed files with 173 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/results/+page.svelte
+12 -8
View File
@@ -15,15 +15,15 @@
<table class="w-full">
<tr class="border-b-2 dark:border-gray-500 text-left border-gray-300">
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
>Quiz Title</th
>
>Quiz Title
</th>
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
>Date Played</th
>
>Date Played
</th>
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
>Player count</th
>
<th>Note</th>
>Player count
</th>
<th class="mx-auto p-1">Note</th>
</tr>
{#each data.results as result}
<tr class="text-left">
@@ -38,7 +38,11 @@
<td class="border-r dark:border-gray-500 p-1 border-gray-300"
>{Object.keys(result.player_scores).length}</td
>
<td>{result.note}</td>
<td class:p-1={result.note}>
{#if result.note}
{result.note}
{/if}
</td>
</tr>
{/each}
</table>
frontend/src/routes/results/[result_id]/+page.svelte
+6 -1
View File
@@ -6,6 +6,7 @@
<script lang="ts">
import type { PageData } from './$types';
import PlayerOverview from './player_overview.svelte';
import QuestionOverview from './question_overview.svelte';
export let data: PageData;
@@ -65,7 +66,11 @@
</button>
</div>
</div>
{#if selected_tab === SelectedTab.Overview}{:else if selected_tab === SelectedTab.Questions}{:else if selected_tab === SelectedTab.Players}
{#if selected_tab === SelectedTab.Overview}{:else if selected_tab === SelectedTab.Questions}
<div>
<QuestionOverview quiz={data.results.quiz} answers={data.results.answers} />
</div>
{:else if selected_tab === SelectedTab.Players}
<div>
<PlayerOverview
custom_field={data.results.custom_field_data}
frontend/src/routes/results/[result_id]/player_overview.svelte
+3 -2
View File
@@ -12,6 +12,7 @@
};
let usernames = Object.keys(scores);
console.log(custom_field);
</script>
<div class="w-full">
@@ -22,7 +23,7 @@
>Player name</th
>
<th class="p-1 mx-auto">Player Score</th>
{#if custom_field}
{#if Object.keys(custom_field).length !== 0}
<th class="border-l dark:border-gray-500 p-1 mx-auto border-gray-300"
>Custom field</th
>
@@ -32,7 +33,7 @@
<tr class="text-left">
<td class="border-r dark:border-gray-500 p-1 border-gray-300">{uname}</td>
<td class="p-1">{scores[uname]}</td>
{#if custom_field}
{#if custom_field[uname]}
<td class="border-l dark:border-gray-500 p-1 border-gray-300"
>{custom_field[uname]}</td
>
frontend/src/routes/results/[result_id]/question_overview.svelte
+58 -1
View File
@@ -5,6 +5,8 @@
-->
<script lang="ts">
import type { QuizData } from '$lib/quiz_types';
import { fly } from 'svelte/transition';
import QuestionTab from './question_tab_thing.svelte';
export let quiz: QuizData;
export let answers: {
@@ -13,5 +15,60 @@
right: boolean;
tike_taken: number;
score: number;
}[];
}[][];
const get_average_score = (q_index: number): number => {
const q_answers = answers[q_index];
let summed_up_scores = 0;
for (const answer of q_answers) {
summed_up_scores = summed_up_scores + answer.score;
}
return summed_up_scores / q_answers.length;
};
const get_number_of_correct_answers = (q_index: number): number => {
const q_answers = answers[q_index];
let correct_answer = 0;
for (const answer of q_answers) {
if (answer.right) {
correct_answer++;
}
}
return correct_answer;
};
const toggle_dropdown = (q_index: number) => {
if (question_open === q_index) {
question_open = false;
} else {
question_open = q_index;
}
};
let question_open: number | boolean = false;
</script>
<div class="w-full flex justify-center">
<div class="w-11/12 flex flex-col w-full">
{#each quiz.questions as question, i}
<div>
<div class="w-full bg-white bg-opacity-60 p-2 rounded grid grid-cols-3 z-40">
<button
class="text-center underline text-xl"
on:click={() => {
toggle_dropdown(i);
}}>{question.question}</button
>
<p class="text-center text-sm my-auto">Average Score: {get_average_score(i)}</p>
<p class="text-center text-sm my-auto">
{get_number_of_correct_answers(i)} correct Answer(s)
</p>
</div>
{#if question_open === i}
<div transition:fly={{ y: -10 }}>
<QuestionTab {question} answers={answers[i]} />
</div>
{/if}
</div>
{/each}
</div>
</div>
frontend/src/routes/results/[result_id]/question_tab_thing.svelte
+94
View File
@@ -0,0 +1,94 @@
<!--
- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
-->
<script lang="ts">
export let question;
interface Answer {
username: string;
answer: string;
right: boolean;
time_taken: number;
score: number;
}
export let answers: Answer[];
console.log(question);
const get_answer_count_for_answer = (answer: string): number => {
let count = 0;
for (const a of answers) {
if (a.answer === answer) {
count++;
}
}
return count;
};
const get_answers_for_answer = (answer: string): Array<Answer> => {
let ret_answers = [];
for (const a of answers) {
if (a.answer === answer) {
ret_answers.push(a);
}
}
return ret_answers;
};
</script>
<div class="flex justify-center">
<div class="bg-white p-2 -z-10 w-10/12 rounded">
<div class="flex flex-col">
{#each question.answers as answer}
<div class="grid grid-cols-4">
<p>{answer.answer}</p>
<div class="col-span-3 flex w-full border-l border-gray-500 px-1">
<div class="my-auto w-full mr-1">
<span
class="h-1 block bg-green-600 my-auto"
style="width: {(get_answer_count_for_answer(answer.answer) /
answers.length) *
100}%"
/>
</div>
<p>{get_answer_count_for_answer(answer.answer)}</p>
</div>
</div>
{/each}
</div>
<div class="mt-2">
<table class="w-full text-left">
<tr class="border-b-2 dark:border-gray-500 text-left border-gray-300">
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
>Player Name</th
>
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300">Score</th>
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
>Time Taken</th
>
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300">Answer</th
>
<th class="p-1">Correct?</th>
</tr>
{#each answers as answer}
<tr>
<td class="border-r dark:border-gray-500 p-1 border-gray-300"
>{answer.username}</td
>
<td class="border-r dark:border-gray-500 p-1 border-gray-300"
>{answer.score}</td
>
<td class="border-r dark:border-gray-500 p-1 border-gray-300"
>{answer.time_taken}</td
>
<td class="border-r dark:border-gray-500 p-1 border-gray-300"
>{answer.answer}</td
>
<td class="p-1">{answer.right}</td>
</tr>
{/each}
</table>
</div>
</div>
</div>