diff --git a/src/app.css b/src/app.css index c5f29de..3f50d36 100644 --- a/src/app.css +++ b/src/app.css @@ -35,4 +35,23 @@ .card:hover { background-color: rgba(0, 0, 0, 0.1); } + + .choiceCard { + border: 1px solid black; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + height: fit-content; + padding: 32px; + /* font-size: larger; + font-weight: bold; + cursor: pointer; */ + } + + .choice-answer { + background-color: rgb(87, 255, 87); + box-shadow: 0 0 20px 5px rgb(87, 255, 87); + border: 1px solid rgb(50, 141, 50); + } } diff --git a/src/lib/AudioMultipleChoiceQuestionComponent.svelte b/src/lib/AudioMultipleChoiceQuestionComponent.svelte index bf51c1b..cb63f32 100644 --- a/src/lib/AudioMultipleChoiceQuestionComponent.svelte +++ b/src/lib/AudioMultipleChoiceQuestionComponent.svelte @@ -48,31 +48,10 @@ {#if showQuestion}
{#each _choices as choice} -
+
{choice}
{/each}
{/if}
- - diff --git a/src/lib/ImageMultipleChoiceQuestionComponent.svelte b/src/lib/ImageMultipleChoiceQuestionComponent.svelte new file mode 100644 index 0000000..7d195db --- /dev/null +++ b/src/lib/ImageMultipleChoiceQuestionComponent.svelte @@ -0,0 +1,76 @@ + + +
+ {#if showQuestion} +
+
{question.data.question}
+
+
+ {path +
+
+ {#each _choices as choice} +
+ {choice} +
+ {/each} +
+ {/if} +
+ + diff --git a/src/lib/MultipleChoiceQuestionComponent.svelte b/src/lib/MultipleChoiceQuestionComponent.svelte index 800053e..fc73f62 100644 --- a/src/lib/MultipleChoiceQuestionComponent.svelte +++ b/src/lib/MultipleChoiceQuestionComponent.svelte @@ -37,31 +37,10 @@
{#each _choices as choice} -
+
{choice}
{/each}
{/if}
- - diff --git a/src/lib/games/games.ts b/src/lib/games/games.ts index 755c8f6..abe520b 100644 --- a/src/lib/games/games.ts +++ b/src/lib/games/games.ts @@ -37,11 +37,18 @@ const games: Games = [ }, { points: 300, - type: "IMAGE", + type: "IMAGE_MULTIPLE_CHOICE", data: { question: "Question 3?", image: "test/secondImage.jpg", - answer: "Answer 3" + choices: [ + "Choice 1", + "Choice 2", + "Choice 3", + "Choice 4", + "Choice 5", + "Choice 6" + ] } }, { @@ -1237,6 +1244,7 @@ export type QuestionType = | "SIMPLE" | "MULTIPLE_CHOICE" | "IMAGE" + | "IMAGE_MULTIPLE_CHOICE" | "AUDIO" | "AUDIO_MULTIPLE_CHOICE"; @@ -1273,6 +1281,15 @@ export type ImageQuestion = Question & { }; }; +export type ImageMultipleChoiceQuestion = Question & { + type: "IMAGE_MULTIPLE_CHOICE"; + data: { + question: string; + image: string; + choices: string[]; + }; +}; + export type AudioQuestion = Question & { type: "AUDIO"; data: { @@ -1300,6 +1317,11 @@ export function isMultipleChoiceQuestion(question: Question): question is Multip export function isImageQuestion(question: Question): question is ImageQuestion { return (question as ImageQuestion).type === "IMAGE"; } +export function isImageMultipleChoiceQuestion( + question: Question +): question is ImageMultipleChoiceQuestion { + return (question as ImageMultipleChoiceQuestion).type === "IMAGE_MULTIPLE_CHOICE"; +} export function isAudioQuestion(question: Question): question is AudioQuestion { return (question as AudioQuestion).type === "AUDIO"; } @@ -1315,6 +1337,7 @@ export type Category = { | SimpleQuestion | MultipleChoiceQuestion | ImageQuestion + | ImageMultipleChoiceQuestion | AudioQuestion | AudioMultipleChoiceQuestion )[]; diff --git a/src/routes/connected/display/running/[game]/[wall]/[category]/[question]/+page.svelte b/src/routes/connected/display/running/[game]/[wall]/[category]/[question]/+page.svelte index 42626a5..c3e5dbf 100644 --- a/src/routes/connected/display/running/[game]/[wall]/[category]/[question]/+page.svelte +++ b/src/routes/connected/display/running/[game]/[wall]/[category]/[question]/+page.svelte @@ -6,6 +6,7 @@ import { isAudioMultipleChoiceQuestion, isAudioQuestion, + isImageMultipleChoiceQuestion, isImageQuestion, isMultipleChoiceQuestion, isSimpleQuestion @@ -17,6 +18,7 @@ import ImageQuestionComponent from "$lib/ImageQuestionComponent.svelte"; import AudioQuestionComponent from "$lib/AudioQuestionComponent.svelte"; import AudioMultipleChoiceQuestionComponent from "$lib/AudioMultipleChoiceQuestionComponent.svelte"; + import ImageMultipleChoiceQuestionComponent from "$lib/ImageMultipleChoiceQuestionComponent.svelte"; console.log("wall:", page.params.wall); @@ -134,6 +136,13 @@ {:else if isImageQuestion(question)} + {:else if isImageMultipleChoiceQuestion(question)} + {:else if isAudioQuestion(question)} {:else if isAudioMultipleChoiceQuestion(question)} diff --git a/src/routes/connected/games/[game]/+page.svelte b/src/routes/connected/games/[game]/+page.svelte index 9c11d16..123e22d 100644 --- a/src/routes/connected/games/[game]/+page.svelte +++ b/src/routes/connected/games/[game]/+page.svelte @@ -8,7 +8,8 @@ isImageQuestion, type Game, isAudioQuestion, - isAudioMultipleChoiceQuestion + isAudioMultipleChoiceQuestion, + isImageMultipleChoiceQuestion } from "$lib/games/games"; import ws from "$lib/websocket.svelte"; import { page } from "$app/state"; @@ -22,6 +23,7 @@ import ImageQuestionComponent from "$lib/ImageQuestionComponent.svelte"; import AudioQuestionComponent from "$lib/AudioQuestionComponent.svelte"; import AudioMultipleChoiceQuestionComponent from "$lib/AudioMultipleChoiceQuestionComponent.svelte"; + import ImageMultipleChoiceQuestionComponent from "$lib/ImageMultipleChoiceQuestionComponent.svelte"; let startDisabled = $state(true); @@ -370,6 +372,13 @@ showQuestion={true} isBuzzed={false} /> + {:else if isImageMultipleChoiceQuestion(gameManager.question)} + {:else if isAudioQuestion(gameManager.question)}