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

✨ Quiz is no loner stored in player's browser and more improvements under the hood

Browse Source
This commit is contained in:
Mawoka
2022-09-19 19:21:24 +02:00
parent 8039269cf3
commit 2c02f2ef54
9 changed files with 209 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/admin.svelte
+36 -9
View File
@@ -43,6 +43,10 @@
});
timer_res = '0';
};
const show_solutions = () => {
socket.emit('show_solutions', {});
timer_res = '0';
};
const get_final_results = () => {
socket.emit('get_final_results', {});
@@ -67,6 +71,7 @@
let timer_interval = setInterval(() => {
if (timer_res === '0') {
clearInterval(timer_interval);
socket.emit('show_solutions', {});
return;
} else {
seconds--;
@@ -85,6 +90,7 @@
circular_prgoress = 0;
}
}
$: console.log(quiz_data.questions.length, 'length of quiz');
</script>
{#if game_mode === 'kahoot'}
@@ -100,13 +106,32 @@
</div>
{/if}
<div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
<button
on:click={() => {
set_question_number(selected_question + 1);
}}
>Next Question ({selected_question + 2}
)
</button>
{#if selected_question + 1 === quiz_data.questions.length && timer_res === '0'}
{#if JSON.stringify(final_results) === JSON.stringify([null])}
<button on:click={get_final_results}>Get final results</button>
{/if}
{:else if timer_res === '0' || selected_question === -1}
<button
on:click={() => {
set_question_number(selected_question + 1);
}}
>Next Question ({selected_question + 2})
</button>
{#if question_results === null && selected_question !== -1}
<button on:click={get_question_results}>Show results</button>
{/if}
{:else if selected_question !== -1}
<button on:click={show_solutions}>Stop time and show solutions</button>
{:else}
<p>!OK!</p>
<button
on:click={() => {
set_question_number(selected_question + 1);
}}
>Next Question ({selected_question + 2}
)
</button>
{/if}
</div>
</div>
{#if timer_res !== '0' && selected_question >= 0}
@@ -228,10 +253,12 @@
{#if game_mode === 'normal'}
<div class="w-full flex justify-center">
<button
on:click={get_question_results}
on:click={() => {
timer_res = '0';
}}
id="GetQuestionResultsAndStopTime"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
>{$t('admin_page.get_results_and_stop_time')}</button
>{$t('admin_page.stop_time')}</button
>
</div>
{/if}
frontend/src/lib/play/end.svelte
+13 -6
View File
@@ -9,7 +9,7 @@
const { t } = getLocalization();
export let quiz_data: QuizData;
export let question_count: number;
export let final_results: Array<null> | Array<Array<PlayerAnswer>>;
interface PlayerAnswer {
@@ -23,7 +23,7 @@
const getWinnersSorted = () => {
let winners = {};
let q_count = quiz_data.questions.length;
let q_count = question_count;
console.log(
JSON.stringify(final_results),
JSON.stringify(final_results) === '{}',
@@ -42,9 +42,15 @@
try {
for (let i = 0; i < q_count; i++) {
let q_res = final_results[i];
if (q_res === null) {
if (!q_res) {
continue;
} else {
q_res = final_results[String(i)];
if (!q_res) {
continue;
}
}
console.log(q_res);
for (let j = 0; j < q_res.length; j++) {
let res = q_res[j];
if (res['right']) {
@@ -68,6 +74,7 @@
data_available = true;
return close_to_res;
} catch (e) {
console.log(e);
data_available = false;
}
};
@@ -93,7 +100,7 @@
<span
>{$t('play_page.with_out_of', {
correct_questions: winners_arr[0][1] ?? 0,
total_question_count: quiz_data.questions.length
total_question_count: question_count
})}</span
>
</p>
@@ -106,7 +113,7 @@
<span
>{$t('play_page.with_out_of', {
correct_questions: winners_arr[1][1] ?? 0,
total_question_count: quiz_data.questions.length
total_question_count: question_count
})}</span
>
</p>
@@ -120,7 +127,7 @@
<span>
{$t('play_page.with_out_of', {
correct_questions: winners_arr[2][1] ?? 0,
total_question_count: quiz_data.questions.length
total_question_count: question_count
})}
</span>
</p>
frontend/src/lib/play/question.svelte
+55 -29
View File
@@ -17,13 +17,23 @@
export let question: Question;
export let game_mode;
export let question_index: string | number;
export let solution;
if (typeof question_index === 'string') {
question_index = parseInt(question_index);
$: console.log(question_index, question, 'hi!');
console.log(question);
if (question.type === undefined) {
question.type = QuizQuestionType.ABCD;
} else {
throw new Error('question_index must be a string or number');
question.type = QuizQuestionType[question.type];
}
/* if (typeof question_index === 'string') {
question_index = parseInt(question_index);
} else {
throw new Error('question_index must be a string or number');
}*/
let timer_res = question.time;
let selected_answer: string;
@@ -44,6 +54,12 @@
timer(question.time);
$: {
if (solution !== undefined) {
timer_res = '0';
}
}
const selectAnswer = (answer: string) => {
selected_answer = answer;
//timer_res = '0';
@@ -75,6 +91,8 @@
circular_prgoress = 0;
}
}
$: console.log(solution);
</script>
<div class="flex flex-col justify-center w-screen h-1/6">
@@ -149,31 +167,39 @@
{/await}
{/if}
{:else if question.type === QuizQuestionType.ABCD}
<div class="flex flex-wrap">
{#each question.answers as answer}
{#if answer.right}
<button
class="w-1/2 text-3xl bg-green-600 border border-white"
disabled
class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
>
{:else}
<button
class="w-1/2 text-3xl bg-red-500 border border-white"
disabled
class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
>
{/if}
{/each}
</div>
{#if solution === undefined}
<Spinner />
{:else}
<div class="flex flex-wrap">
{#each solution.answers as answer}
{#if answer.right}
<button
class="w-1/2 text-3xl bg-green-600 border border-white"
disabled
class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
>
{:else}
<button
class="w-1/2 text-3xl bg-red-500 border border-white"
disabled
class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
>
{/if}
{/each}
</div>
{/if}
{:else if question.type === QuizQuestionType.RANGE}
<p class="text-center">
Every number between {question.answers.min_correct} and {question.answers.max_correct} was correct.
You got {selected_answer}, so you have been
{#if question.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= question.answers.max_correct}
correct
{:else}
wrong.
{/if}
</p>
{#if solution === undefined}
<Spinner />
{:else}
<p class="text-center">
Every number between {solution.answers.min_correct} and {solution.answers.max_correct} was
correct. You got {selected_answer}, so you have been
{#if solution.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= solution.answers.max_correct}
correct
{:else}
wrong.
{/if}
</p>
{/if}
{/if}
frontend/src/lib/play/show_results.svelte
+12 -14
View File
@@ -4,7 +4,7 @@
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
-->
<script lang="ts">
import type { Answer, QuizData } from '$lib/quiz_types';
import type { Answer, Question, QuizData } from '$lib/quiz_types';
import { getLocalization } from '$lib/i18n';
import { QuizQuestionType } from '../quiz_types.js';
import Spinner from '$lib/Spinner.svelte';
@@ -12,10 +12,11 @@
const { t } = getLocalization();
export let results: Array<Answer>;
export let game_data: QuizData;
export let solution: Question;
export let question_index: string;
let data_store = {};
const question = game_data.questions[parseInt(question_index)].answers;
const question = solution.answers;
for (let i = 0; i < question.length; i++) {
data_store[question[i].answer] = 0;
}
@@ -24,11 +25,8 @@
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);
let slider_values = [solution.answers.min_correct ?? 0, solution.answers.max_correct ?? 0];
console.log(slider_values, solution.answers);
</script>
<!-- Show the results from the results object -->
@@ -38,7 +36,7 @@
<div>
<h2 class="text-center text-3xl mb-8">{$t('words.result', { count: 2 })}</h2>
<div class="w-screen flex justify-center">
{#if game_data.questions[parseInt(question_index)].type === QuizQuestionType.ABCD}
{#if solution.type === QuizQuestionType.ABCD}
<div class="relative overflow-x-auto shadow-md rounded-lg">
<table class="w-fit text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="bg-gray-50 dark:bg-gray-700">
@@ -64,7 +62,7 @@
</tr>
</thead>
<tbody>
{#each game_data.questions[parseInt(question_index)].answers as answer}
{#each solution.answers as answer}
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td
class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
@@ -90,10 +88,10 @@
</tbody>
</table>
</div>
{:else if game_data.questions[parseInt(question_index)].type === QuizQuestionType.RANGE}
{:else if solution.type === QuizQuestionType.RANGE}
<!--<p class="text-center">
Every number between {game_data.questions[parseInt(question_index)].answers
.min_correct} and {game_data.questions[parseInt(question_index)].answers
Every number between {solution.answers
.min_correct} and {solution.answers
.max_correct} was correct.
</p>-->
{#await import('svelte-range-slider-pips')}
@@ -103,8 +101,8 @@
<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}
bind:min={solution.answers.min}
bind:max={solution.answers.max}
pips
float
all="label"