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

✨ Improved buttons in kahoot-mode

Browse Source
This commit is contained in:
Mawoka
2022-09-29 12:15:18 +02:00
parent 1edd06266d
commit 4f220bf810
5 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app.css
+3
View File
@@ -28,4 +28,7 @@
.normal-background {
@apply bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] dark:bg-[#0f2702] dark:from-[#0f2702] dark:via-[#0f2702] dark:to[#0f2702];
}
.admin-button {
@apply 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;
}
}
frontend/src/lib/admin.svelte
+30 -26
View File
@@ -92,7 +92,6 @@
circular_prgoress = 0;
}
}
$: console.log(quiz_data.questions.length, 'length of quiz');
</script>
{#if game_mode === 'kahoot'}
@@ -105,38 +104,47 @@
{selected_question === -1 ? '0' : selected_question + 1}
/{quiz_data.questions.length}
</p>
{#if selected_question >= 0}
{#if selected_question >= 0 && JSON.stringify(final_results) === JSON.stringify([null])}
<div class="flex justify-center flex-col my-auto col-start-2 col-end-2">
<h2 class="text-center">{quiz_data.questions[selected_question].question}</h2>
<p class="w-full text-center">{timer_res}</p>
</div>
{/if}
<div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
{#if selected_question + 1 === quiz_data.questions.length && timer_res === '0'}
{#if selected_question + 1 === quiz_data.questions.length && timer_res === '0' && question_results !== null}
{#if JSON.stringify(final_results) === JSON.stringify([null])}
<button on:click={get_final_results}>Get final results</button>
<button on:click={get_final_results} class="admin-button"
>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 (selected_question + 1 !== quiz_data.questions.length && question_results !== null) || selected_question === -1}
<button
on:click={() => {
set_question_number(selected_question + 1);
}}
class="admin-button"
>Next Question ({selected_question + 2})
</button>
{/if}
{#if question_results === null && selected_question !== -1}
<button on:click={get_question_results}>Show results</button>
<button on:click={get_question_results} class="admin-button"
>Show results</button
>
{/if}
{:else if selected_question !== -1}
<button on:click={show_solutions}>Stop time and show solutions</button>
<button on:click={show_solutions} class="admin-button"
>Stop time and show solutions</button
>
{:else}
<p>!OK!</p>
<button
<!-- <button
on:click={() => {
set_question_number(selected_question + 1);
}}
>Next Question ({selected_question + 2}
class='admin-button'
>Next Question ({selected_question + 2}
)
</button>
</button>-->
{/if}
</div>
</div>
@@ -196,15 +204,14 @@
{/if}
{/if}
<br />
{#if timer_res === '0'}
{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify([null])}
{#if question_results === null}
{#if game_mode === 'normal'}
<div class="w-full flex justify-center">
<button
on:click={get_question_results}
id="GetQuestionResults"
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')}</button
class="admin-button">{$t('admin_page.get_results')}</button
>
</div>
{/if}
@@ -233,8 +240,7 @@
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.stop_time')}</button
class="admin-button">{$t('admin_page.stop_time')}</button
>
</div>
{/if}
@@ -244,7 +250,7 @@
{#if game_mode === 'normal'}
<div class="w-full flex justify-center">
<button
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"
class="admin-button"
disabled={!(timer_res === undefined || timer_res === '0')}
id="SetQuestionNumber"
on:click={() => {
@@ -264,7 +270,7 @@
on:click={() => {
set_question_number(0);
}}
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"
class="admin-button"
>
{$t('admin_page.start_by_showing_first_question')}
</button>
@@ -273,9 +279,7 @@
{:else if final_results_clicked === false}
{#if game_mode === 'normal'}
<div class="w-screen flex justify-center">
<button
on:click={get_final_results}
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"
<button on:click={get_final_results} class="admin-button"
>{$t('admin_page.get_final_results')}</button
>
</div>
frontend/src/lib/dashboard/main_slider.svelte
+1 -1
View File
@@ -10,7 +10,7 @@
import 'swiper/css/navigation';
import { Pagination, EffectCoverflow, Keyboard, Mousewheel, Navigation } from 'swiper';
import { QuizQuestionType } from '$lib/quiz_types.js';
import { getLocalization } from '../i18n';
import { getLocalization } from '$lib/i18n';
import StartGamePopup from './start_game.svelte';
import { onMount } from 'svelte';
frontend/src/routes/admin/+page.svelte
+2 -4
View File
@@ -135,9 +135,7 @@
>
{#if JSON.stringify(final_results) !== JSON.stringify([null])}
<div class="w-screen flex justify-center mt-8">
<button
on:click={request_answer_export}
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"
<button on:click={request_answer_export} class="admin-button"
>{$t('admin_page.export_results')}</button
>
</div>
@@ -189,7 +187,7 @@
{#if players.length > 0}
<div class="flex justify-center w-full mt-4">
<button
class="ml-4 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"
class="ml-4 admin-button"
id="startGame"
on:click={() => {
socket.emit('start_game', '');
frontend/src/routes/view/[quiz_id]/+page.svelte
+2 -5
View File
@@ -85,7 +85,7 @@
<div class="flex justify-center mt-8 mb-4">
{#if logged_in}
<button
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"
class="admin-button"
on:click={() => {
start_game = quiz.id;
}}
@@ -104,10 +104,7 @@
{/if}
</div>
<div class="flex justify-center m-2">
<a
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"
href="/practice?quiz_id={quiz.id}"
>
<a class="admin-button" href="/practice?quiz_id={quiz.id}">
{$t('words.practice')}
</a>
</div>