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

✨ Made old-school mode no longer be old-school

Browse Source
This commit is contained in:
Mawoka
2022-12-14 18:42:02 +01:00
parent 3be5cd5f66
commit 6ec2970846
4 changed files with 132 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/admin.svelte
+80 -155
View File
@@ -99,63 +99,59 @@
} }
</script> </script>
{#if game_mode === 'kahoot'} <div
<div class="fixed top-0 w-full h-10 z-20 grid grid-cols-2"
class="fixed top-0 w-full h-10 z-20 grid grid-cols-2" style="background: {bg_color ? bg_color : 'transparent'}"
style="background: {bg_color ? bg_color : 'transparent'}" class:text-black={bg_color}
class:text-black={bg_color} >
> <p class="mr-auto ml-0 col-start-1 col-end-1">
<p class="mr-auto ml-0 col-start-1 col-end-1"> {selected_question === -1 ? '0' : selected_question + 1}
{selected_question === -1 ? '0' : selected_question + 1} /{quiz_data.questions.length}
/{quiz_data.questions.length} </p>
</p> <div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
<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' && question_results !== null}
{#if selected_question + 1 === quiz_data.questions.length && timer_res === '0' && question_results !== null} {#if JSON.stringify(final_results) === JSON.stringify([null])}
{#if JSON.stringify(final_results) === JSON.stringify([null])} <button on:click={get_final_results} class="admin-button"
<button on:click={get_final_results} class="admin-button" >Get final results
>Get final results
</button>
{/if}
{:else if timer_res === '0' || selected_question === -1}
{#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} class="admin-button"
>Show results
</button>
{/if}
{:else if selected_question !== -1}
<button on:click={show_solutions} class="admin-button"
>Stop time and show solutions
</button> </button>
{:else} {/if}
<!-- <button {:else if timer_res === '0' || selected_question === -1}
{#if (selected_question + 1 !== quiz_data.questions.length && question_results !== null) || selected_question === -1}
<button
on:click={() => { on:click={() => {
set_question_number(selected_question + 1); set_question_number(selected_question + 1);
}} }}
class='admin-button' class="admin-button"
>Next Question ({selected_question + 2} >Next Question ({selected_question + 2})
) </button>
</button>-->
{/if} {/if}
</div> {#if question_results === null && selected_question !== -1}
<button on:click={get_question_results} class="admin-button">Show results </button>
{/if}
{:else if selected_question !== -1}
<button on:click={show_solutions} class="admin-button"
>Stop time and show solutions
</button>
{:else}
<!-- <button
on:click={() => {
set_question_number(selected_question + 1);
}}
class='admin-button'
>Next Question ({selected_question + 2}
)
</button>-->
{/if}
</div> </div>
{#if timer_res !== '0' && selected_question >= 0} </div>
<span {#if timer_res !== '0' && selected_question >= 0}
class="fixed top-0 bg-red-500 h-8 transition-all mt-10" <span
style="width: {(100 / quiz_data.questions[selected_question].time) * class="fixed top-0 bg-red-500 h-8 transition-all mt-10"
parseInt(timer_res)}vw" style="width: {(100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)}vw"
/> />
{/if}
{/if} {/if}
<div class:pt-28={game_mode === 'kahoot'} class="w-full h-full">
<div class="w-full h-full pt-28">
{#if timer_res !== undefined && !final_results_clicked && !question_results} {#if timer_res !== undefined && !final_results_clicked && !question_results}
<div class="flex flex-col justify-center w-screen h-1/6"> <div class="flex flex-col justify-center w-screen h-1/6">
<h1 class="text-6xl text-center"> <h1 class="text-6xl text-center">
@@ -179,50 +175,29 @@
/> />
</div> </div>
{/if} {/if}
{#if game_mode === 'kahoot'} {#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING}
{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING} <div class="grid grid-cols-2 gap-2 w-full p-4">
<div class="grid grid-cols-2 gap-2 w-full p-4"> {#each quiz_data.questions[selected_question].answers as answer, i}
{#each quiz_data.questions[selected_question].answers as answer, i} <div
<div class="rounded-lg h-fit flex"
class="rounded-lg h-fit flex" style="background-color: {answer.color ?? '#B45309'}"
style="background-color: {answer.color ?? '#B45309'}" class:opacity-50={!answer.right &&
class:opacity-50={!answer.right && timer_res === '0' &&
timer_res === '0' && quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
quiz_data.questions[selected_question].type === >
QuizQuestionType.ABCD} <img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
<span class="text-center text-2xl px-2 py-4 w-full text-black"
>{answer.answer}</span
> >
<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} /> <span class="pl-4 w-10" />
<span </div>
class="text-center text-2xl px-2 py-4 w-full text-black" {/each}
class:text-4xl={answer.right && </div>
timer_res === '0' &&
quiz_data.questions[selected_question].type ===
QuizQuestionType.ABCD}
class:underline={answer.right &&
timer_res === '0' &&
quiz_data.questions[selected_question].type ===
QuizQuestionType.ABCD}>{answer.answer}</span
>
<span class="pl-4 w-10" />
</div>
{/each}
</div>
{/if}
{/if} {/if}
{/if} {/if}
<br /> <br />
{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify([null])} {#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify([null])}
{#if question_results === null} {#if question_results === null}{:else if question_results === undefined}
{#if game_mode === 'normal'}
<div class="w-full flex justify-center">
<button
on:click={get_question_results}
id="GetQuestionResults"
class="admin-button">{$t('admin_page.get_results')}</button
>
</div>
{/if}
{:else if question_results === undefined}
{#if !final_results_clicked} {#if !final_results_clicked}
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
<h1 class="text-3xl">{$t('admin_page.no_answers')}</h1> <h1 class="text-3xl">{$t('admin_page.no_answers')}</h1>
@@ -249,73 +224,23 @@
/> />
{/await} {/await}
{/if} {/if}
{:else if timer_res !== undefined} {:else if timer_res !== undefined}{/if}
{#if game_mode === 'normal'}
<div class="w-full flex justify-center">
<button
on:click={() => {
timer_res = '0';
}}
id="GetQuestionResultsAndStopTime"
class="admin-button">{$t('admin_page.stop_time')}</button
>
</div>
{/if}
{/if}
<br /> <br />
{#if get_question_title(selected_question + 1, quiz_data) !== '' && selected_question + 1 !== 0} {#if get_question_title(selected_question + 1, quiz_data) !== '' && selected_question + 1 !== 0}{:else if selected_question + 1 === 0}
{#if game_mode === 'normal'} <div class="flex flex-col justify-center w-screen h-full">
<div class="w-full flex justify-center"> <h1 class="text-7xl text-center">{@html quiz_data.title}</h1>
<button <p class="text-3xl pt-8 text-center">{@html quiz_data.description}</p>
class="admin-button" {#if quiz_data.cover_image}
disabled={!(timer_res === undefined || timer_res === '0')} <div class="flex justify-center align-middle items-center">
id="SetQuestionNumber" <div class="h-[30vh] m-auto w-auto mt-12">
on:click={() => { <img
set_question_number(selected_question + 1); class="max-h-full max-w-full block"
}} src={quiz_data.cover_image}
>{$t('admin_page.show_next_question')}: {@html get_question_title( alt="Not provided"
selected_question + 1, />
quiz_data
)}</button
>
</div>
{/if}
{:else if selected_question + 1 === 0}
{#if game_mode === 'normal'}
<div class="w-full flex justify-center">
<button
on:click={() => {
set_question_number(0);
}}
class="admin-button"
>
{$t('admin_page.start_by_showing_first_question')}
</button>
</div>
{:else}
<div class="flex flex-col justify-center w-screen h-full">
<h1 class="text-7xl text-center">{@html quiz_data.title}</h1>
<p class="text-3xl pt-8 text-center">{@html quiz_data.description}</p>
{#if quiz_data.cover_image}
<div class="flex justify-center align-middle items-center">
<div class="h-[30vh] m-auto w-auto mt-12">
<img
class="max-h-full max-w-full block"
src={quiz_data.cover_image}
alt="Not provided"
/>
</div>
</div> </div>
{/if} </div>
</div> {/if}
{/if} </div>
{:else if final_results_clicked === false}
{#if game_mode === 'normal'}
<div class="w-screen flex justify-center">
<button on:click={get_final_results} class="admin-button"
>{$t('admin_page.get_final_results')}</button
>
</div>
{/if}
{/if} {/if}
</div> </div>
frontend/src/lib/play/question.svelte
+50 -54
View File
@@ -95,79 +95,75 @@
} }
} }
const get_div_height = (): string => {
if (game_mode === 'normal') {
if (question.image) {
return '66.666667';
} else {
return '83.333333';
}
} else {
return '100';
}
};
$: console.log(slider_value, 'values'); $: console.log(slider_value, 'values');
</script> </script>
<div class="h-screen w-screen"> <div class="h-screen w-screen">
<div class="flex flex-col justify-center w-screen h-1/6"> {#if game_mode === 'normal'}
<h1 class="text-3xl text-center text-black dark:text-white mt-2"> <div
{@html question.question} class="flex flex-col justify-start w-screen"
</h1> style="height: {question.image ? '33.333333' : '16.666667'}%"
<div class="mx-auto my-2"> >
{#if game_mode !== 'kahoot'} <h1 class="text-3xl text-center text-black dark:text-white mt-2">
<CircularTimer {@html question.question}
bind:text={timer_res} </h1>
bind:progress={circular_prgoress} {#if question.image !== null && game_mode !== 'kahoot'}
color="#ef4444" <div class="max-h-full">
/> <img
src={question.image}
class="object-cover mx-auto mb-8 max-h-[90%]"
alt="Content for Question"
/>
</div>
{/if} {/if}
</div> </div>
</div>
{#if question.image !== null && game_mode !== 'kahoot'}
<div>
<img
src={question.image}
class="h-2/5 object-cover mx-auto mb-8"
alt="Content for Question"
/>
</div>
{/if} {/if}
{#if timer_res !== '0'} {#if timer_res !== '0'}
{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING} {#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING}
{#if game_mode === 'normal'} <div class="w-full relative" style="height: {get_div_height()}%">
<div class="grid grid-cols-2 gap-2 w-full p-4"> <div
{#each question.answers as answer} class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl"
>
<CircularTimer
bind:text={timer_res}
bind:progress={circular_prgoress}
color="#ef4444"
/>
</div>
<div class="grid grid-cols-2 gap-2 w-full p-4 h-full">
{#each question.answers as answer, i}
<button <button
class="rounded-lg h-fit flex align-middle justify-center disabled:opacity-60 p-3" class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3"
style="background-color: {answer.color ?? '#B45309'}" style="background-color: {answer.color ?? '#B45309'}"
disabled={selected_answer !== undefined} disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button on:click={() => selectAnswer(answer.answer)}
> >
{#if game_mode === 'kahoot'}
<img class="w-10 inline-block" alt="Icon" src={kahoot_icons[i]} />
{:else}
<p class="m-auto">{answer.answer}</p>
{/if}
</button>
{/each} {/each}
</div> </div>
{:else if game_mode === 'kahoot'} </div>
<div class="h-5/6 w-full relative">
<div
class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl"
>
<CircularTimer
bind:text={timer_res}
bind:progress={circular_prgoress}
color="#ef4444"
/>
</div>
<div class="grid grid-cols-2 gap-2 w-full p-4 h-full">
{#each question.answers as answer, i}
<button
class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3"
style="background-color: {answer.color ?? '#B45309'}"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}
>
<img class="w-10 inline-block" alt="Icon" src={kahoot_icons[i]} />
</button>
{/each}
</div>
</div>
{:else}
<p>Error</p>
{/if}
{:else if question.type === QuizQuestionType.RANGE} {:else if question.type === QuizQuestionType.RANGE}
{#await import('svelte-range-slider-pips')} {#await import('svelte-range-slider-pips')}
<Spinner /> <Spinner />
{:then c} {:then c}
<div class:pointer-events-none={selected_answer !== undefined}> <div class:pointer-events-none={selected_answer !== undefined} class="mt-14">
<svelte:component <svelte:component
this={c.default} this={c.default}
bind:values={slider_value} bind:values={slider_value}
frontend/src/routes/admin/+page.svelte
-10
View File
@@ -139,17 +139,7 @@
>{$t('admin_page.export_results')}</button >{$t('admin_page.export_results')}</button
> >
</div> </div>
<!--{#if game_mode === 'kahoot'}-->
<FinalResults bind:data={player_scores} bind:show_final_results /> <FinalResults bind:data={player_scores} bind:show_final_results />
<!-- {:else}
{#await import('$lib/play/end.svelte') then c}
<svelte:component
this={c.default}
bind:final_results
bind:question_count={quiz_data.questions.length}
/>
{/await}
{/if}-->
{/if} {/if}
{#if !success} {#if !success}
<input placeholder="game id" bind:value={game_token} /> <input placeholder="game id" bind:value={game_token} />
frontend/src/routes/play/+page.svelte
+2 -2
View File
@@ -7,7 +7,7 @@
import Question from '$lib/play/question.svelte'; import Question from '$lib/play/question.svelte';
// import ShowResults from '$lib/play/show_results.svelte'; // import ShowResults from '$lib/play/show_results.svelte';
import { navbarVisible } from '$lib/stores'; import { navbarVisible } from '$lib/stores';
import ShowEndScreen from '$lib/play/end.svelte'; import ShowEndScreen from '$lib/play/admin/final_results.svelte';
import KahootResults from '$lib/play/results_kahoot.svelte'; import KahootResults from '$lib/play/results_kahoot.svelte';
import { getLocalization } from '$lib/i18n'; import { getLocalization } from '$lib/i18n';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
@@ -151,7 +151,7 @@
{#if !gameMeta.started && gameData === undefined} {#if !gameMeta.started && gameData === undefined}
<JoinGame {game_pin} bind:game_mode bind:username /> <JoinGame {game_pin} bind:game_mode bind:username />
{:else if JSON.stringify(final_results) !== JSON.stringify([null])} {:else if JSON.stringify(final_results) !== JSON.stringify([null])}
<ShowEndScreen bind:final_results bind:question_count={gameData.question_count} /> <ShowEndScreen bind:data={scores} show_final_results={true} />
{:else if gameData !== undefined && question_index === ''} {:else if gameData !== undefined && question_index === ''}
<ShowTitle <ShowTitle
bind:title={gameData.title} bind:title={gameData.title}