feat: add mock data for strapi fetch

isakmolsson · Mar 28, 2023 · 44f4e5a · 44f4e5a
1 parent 99373a8
commit 44f4e5a
Show file tree

Hide file tree

Showing 6 changed files with 233 additions and 158 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,29 +1,31 @@
 <script lang="ts">
 	import type { UserAnswers } from '../types/QuizQuestions';
-	import { quizQuestions } from '../utils/quizQuestions';
+	import { quizQuestions } from '../utils/quizQuestion';
 	import NextButton from './NextButton.svelte';
 	import ProgressBar from './ProgressBar.svelte';
 	import Quiz from './Quiz.svelte';
 	import Score from './Score.svelte';
 
 	const appName = 'VG NyhetsQuiz';
 
-	let userAnswers: UserAnswers = new Array(quizQuestions.length).fill(null);
+	const quizQuestionsData = quizQuestions.data;
+
+	let userAnswers: UserAnswers = new Array(quizQuestionsData.length).fill(null);
 	let currentScore = 0;
 	let currentQuestionIndex = 0;
 
-	quizQuestions.forEach((question) => {
-		question.answers.sort(() => Math.random() - 0.5);
+	quizQuestionsData.forEach((question) => {
+		question.attributes.options.sort(() => Math.random() - 0.5);
 	});
 
 	function handleAnswerSelect(answerIndex: number) {
 		if (userAnswers[currentQuestionIndex] !== null) {
 			return;
 		}
 
-		const answer = quizQuestions[currentQuestionIndex].answers[answerIndex];
+		const answer = quizQuestionsData[currentQuestionIndex].attributes.options[answerIndex];
 
-		if (answer.isCorrect) {
+		if (answer === quizQuestionsData[currentQuestionIndex].attributes.correct_answer) {
 			currentScore++;
 		}
 
@@ -41,14 +43,19 @@
 	</title>
 </svelte:head>
 
-<ProgressBar value={(currentQuestionIndex / quizQuestions.length) * 100} />
-{#if currentQuestionIndex < quizQuestions.length}
-	<Quiz {quizQuestions} {currentQuestionIndex} {handleAnswerSelect} {userAnswers} />
+<ProgressBar value={(currentQuestionIndex / quizQuestionsData.length) * 100} />
+{#if currentQuestionIndex < quizQuestionsData.length}
+	<Quiz
+		quizQuestions={quizQuestionsData}
+		{currentQuestionIndex}
+		{handleAnswerSelect}
+		{userAnswers}
+	/>
 	<NextButton
 		handleClick={() => nextQuestion()}
 		{currentQuestionIndex}
-		totalAmountQuestions={quizQuestions.length}
+		totalAmountQuestions={quizQuestionsData.length}
 	/>
 {/if}
 
-<Score {currentScore} quizLength={quizQuestions.length} />
+<Score {currentScore} quizLength={quizQuestionsData.length} />
diff --git a/src/routes/Question.svelte b/src/routes/Question.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
-	import type { QuizQuestion, UserAnswer } from '../types/QuizQuestions';
+	import type { QuizQuestinonsData, UserAnswer } from '../types/QuizQuestions';
 	import CheckmarkIcon from './Icons/CheckmarkIcon.svelte';
 
-	export let question: QuizQuestion;
+	export let question: QuizQuestinonsData;
 	export let handleAnswerSelect: (answerIndex: number) => void;
 	export let isAnswered: boolean;
 	export let userAnswer: UserAnswer;
 
 	$: userAnswer, console.log(userAnswer);
 </script>
 
-<h1 class="text-xl pb-2">{question.question}</h1>
+<h1 class="text-xl pb-2">{question.attributes.question}</h1>
 <div class="flex flex-col gap-2">
-	{#each question.answers as answer, index}
+	{#each question.attributes.options as answer, index}
 		<button
 			class="
-            p-4 flex row gap-4 rounded-xl border {userAnswer === index
+            p-4 flex text-left items-center row gap-4 rounded-xl border {userAnswer === index
 				? 'border-[#1b1b1d]'
 				: 'border-[#3C3C43]/29'} {userAnswer !== null && userAnswer !== undefined
-				? answer.isCorrect
+				? answer === question.attributes.correct_answer
 					? 'bg-green-50'
 					: 'bg-red-50'
 				: 'bg-white'}"
@@ -28,7 +28,7 @@
 			{#if userAnswer === index}
 				<CheckmarkIcon />
 			{/if}
-			{answer.text}
+			{answer}
 		</button>
 	{/each}
 </div>
diff --git a/src/routes/Quiz.svelte b/src/routes/Quiz.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { QuizQuestinons, UserAnswers } from '../types/QuizQuestions';
+	import type { QuizQuestinonsData, UserAnswers } from '../types/QuizQuestions';
 	import Question from './Question.svelte';
 
-	export let quizQuestions: QuizQuestinons;
+	export let quizQuestions: QuizQuestinonsData[];
 	export let handleAnswerSelect: (answerIndex: number) => void;
 	export let userAnswers: UserAnswers;
 	export let currentQuestionIndex: number;

diff --git a/src/types/QuizQuestions.ts b/src/types/QuizQuestions.ts
@@ -2,15 +2,34 @@ export type UserAnswers = UserAnswer[];
 
 export type UserAnswer = number | null;
 
-export type QuizQuestinons = QuizQuestion[];
+export interface QuizQuestinons {
+	data: QuizQuestinonsData[];
+	meta: Meta;
+}
 
-export interface QuizQuestion {
-	question: string;
-	answers: Answer[];
+interface Meta {
+	pagination: Pagination;
+}
+
+interface Pagination {
+	page: number;
+	pageSize: number;
+	pageCount: number;
+	total: number;
 }
 
-interface Answer {
-	text: string;
-	isCorrect: boolean;
+export interface QuizQuestinonsData {
 	id: number;
+	attributes: QuizQuestinonsAtributes;
+}
+
+interface QuizQuestinonsAtributes {
+	question: string;
+	hint: string;
+	correct_answer: string;
+	options: string[];
+	createdAt: string;
+	updatedAt: string;
+	publishedAt: string;
+	article_id: string;
 }
diff --git a/src/utils/quizQuestion.ts b/src/utils/quizQuestion.ts
@@ -0,0 +1,180 @@
+import type { QuizQuestinons } from '../types/QuizQuestions';
+
+export const quizQuestions: QuizQuestinons = {
+	data: [
+		{
+			id: 12,
+			attributes: {
+				question: 'Hva gjorde Durek Verrett som brøt avtalen med kongehuset?',
+				hint: 'Det involverer en Instagram-video og kong Harald.',
+				correct_answer: 'Repostet en Instagram-video der kong Harald nevnes',
+				options: [
+					'Repostet en Instagram-video der kong Harald nevnes',
+					'Snakket om kongehuset i et intervju',
+					'Brukte prinsessetittelen i en reklame',
+					'Deltok i en kommersiell aktivitet med kongehuset'
+				],
+				createdAt: '2023-03-28T11:21:07.761Z',
+				updatedAt: '2023-03-28T11:21:07.761Z',
+				publishedAt: '2023-03-28T11:21:07.760Z',
+				article_id: 'nQM5va'
+			}
+		},
+		{
+			id: 17,
+			attributes: {
+				question: "Hva var årsaken til Elin Kjos' død?",
+				hint: 'Sykdommen ble oppdaget for tre år siden.',
+				correct_answer: 'Aggressiv lungekreft',
+				options: ['Hjerteinfarkt', 'Bilulykke', 'Aggressiv lungekreft', 'Ukjent årsak'],
+				createdAt: '2023-03-28T11:30:45.271Z',
+				updatedAt: '2023-03-28T11:30:45.271Z',
+				publishedAt: '2023-03-28T11:30:45.270Z',
+				article_id: 'onVnrB'
+			}
+		},
+		{
+			id: 18,
+			attributes: {
+				question: 'Hva skjedde med bilen som krasjet inn i William Bolsøys eiendom på Åros?',
+				hint: 'Se etter hva som skjedde med bilen etter krasjet',
+				correct_answer: 'Bilen krasjet delvis i husveggen og hang fra muren og hekken',
+				options: [
+					'Bilen krasjet i en annen bil',
+					'Bilen krasjet i et tre',
+					'Bilen krasjet delvis i husveggen og hang fra muren og hekken',
+					'Bilen krasjet i en lyktestolpe'
+				],
+				createdAt: '2023-03-28T11:30:45.279Z',
+				updatedAt: '2023-03-28T11:30:45.279Z',
+				publishedAt: '2023-03-28T11:30:45.279Z',
+				article_id: 'WRaxm2'
+			}
+		},
+		{
+			id: 19,
+			attributes: {
+				question:
+					'Hva sa president Vladimir Putin i sin tale til innenriksdepartementet denne uken?',
+				hint: 'Talen omhandler undertrykkelse av provokasjoner og ulovlige aksjoner.',
+				correct_answer: 'Putin krever umiddelbart å undertrykke provokasjoner og ulovlige aksjoner',
+				options: [
+					'Putin oppfordrer til dialog med Vesten',
+					'Putin annonserer økonomiske reformer',
+					'Putin krever umiddelbart å undertrykke provokasjoner og ulovlige aksjoner',
+					'Putin ber om internasjonal støtte i krigen'
+				],
+				createdAt: '2023-03-28T11:30:45.286Z',
+				updatedAt: '2023-03-28T11:30:45.286Z',
+				publishedAt: '2023-03-28T11:30:45.285Z',
+				article_id: 'nQVLWo'
+			}
+		},
+		{
+			id: 20,
+			attributes: {
+				question: 'Hva har Russlands president Vladimir Putin nylig besluttet å gjøre i Belarus?',
+				hint: 'Det involverer kjernefysiske våpen og har skapt bekymring i Ukraina og EU.',
+				correct_answer: 'Utplassere atomvåpen',
+				options: [
+					'Utplassere atomvåpen',
+					'Inngå en handelsavtale',
+					'Stasjonere fredsbevarende styrker',
+					'Bygge en ny ambassade'
+				],
+				createdAt: '2023-03-28T11:30:45.292Z',
+				updatedAt: '2023-03-28T11:30:45.292Z',
+				publishedAt: '2023-03-28T11:30:45.292Z',
+				article_id: 'rlVejw'
+			}
+		},
+		{
+			id: 21,
+			attributes: {
+				question: 'Hva skjedde med Mina (16) i fotgjengerfeltet i Trondheimsveien?',
+				hint: 'Hendelsen involverte en bil og et fotgjengerfelt',
+				correct_answer: 'Hun ble påkjørt og sjåføren stakk av',
+				options: [
+					'Hun ble påkjørt og sjåføren stakk av',
+					'Hun falt og skadet seg selv',
+					'Hun ble nesten påkjørt, men sjåføren stoppet i tide',
+					'Hun hjalp en annen person som ble påkjørt'
+				],
+				createdAt: '2023-03-28T11:30:45.298Z',
+				updatedAt: '2023-03-28T11:30:45.298Z',
+				publishedAt: '2023-03-28T11:30:45.297Z',
+				article_id: 'GM5GGm'
+			}
+		},
+		{
+			id: 22,
+			attributes: {
+				question: 'Hvilken høyprofilert etterforskning ledet Pål-Fredrik Hjort Kraby?',
+				hint: 'Etterforskningen involverte en norsk terrorist',
+				correct_answer: 'Etterforskningen mot Anders Behring Breivik',
+				options: [
+					'Etterforskningen mot Anders Behring Breivik',
+					'Etterforskningen av NOKAS-ranet',
+					'Etterforskningen av Orderud-saken',
+					'Etterforskningen av Baneheia-saken'
+				],
+				createdAt: '2023-03-28T11:30:45.307Z',
+				updatedAt: '2023-03-28T11:30:45.307Z',
+				publishedAt: '2023-03-28T11:30:45.307Z',
+				article_id: 'XbajkB'
+			}
+		},
+		{
+			id: 23,
+			attributes: {
+				question: 'Hva ble Martin Ødegaard kåret til på en galla i London?',
+				hint: 'Gallaen fant sted i London.',
+				correct_answer: 'Årets beste spiller i den engelske hovedstaden',
+				options: [
+					'Årets beste spiller i den engelske hovedstaden',
+					'Årets beste Arsenal-spiller',
+					'Årets beste norske fotballspiller',
+					'Årets mest populære fotballspiller'
+				],
+				createdAt: '2023-03-28T11:30:45.315Z',
+				updatedAt: '2023-03-28T11:30:45.315Z',
+				publishedAt: '2023-03-28T11:30:45.315Z',
+				article_id: 'MoaAXm'
+			}
+		},
+		{
+			id: 24,
+			attributes: {
+				question: 'Hva er Durek Verretts forhold til prinsesse Märtha Louise?',
+				hint: 'Forholdet deres ble offentlig kjent i 2019',
+				correct_answer: 'De er forlovet',
+				options: ['De er søsken', 'De er venner', 'De er kolleger', 'De er forlovet'],
+				createdAt: '2023-03-28T11:30:45.325Z',
+				updatedAt: '2023-03-28T11:30:45.325Z',
+				publishedAt: '2023-03-28T11:30:45.324Z',
+				article_id: 'xgVMlj'
+			}
+		},
+		{
+			id: 25,
+			attributes: {
+				question: 'Hva kan skje hvis medlemmene i Handel og kontor ikke får høyere kjøpekraft?',
+				hint: 'Forbundsleder Christopher Beckham nevner et virkemiddel.',
+				correct_answer: 'Streik',
+				options: ['Streik', 'Boikott av Norgesgruppen', 'Demonstrasjoner', 'Ingen endringer'],
+				createdAt: '2023-03-28T11:30:45.333Z',
+				updatedAt: '2023-03-28T11:30:45.333Z',
+				publishedAt: '2023-03-28T11:30:45.332Z',
+				article_id: 'wAVVA4'
+			}
+		}
+	],
+	meta: {
+		pagination: {
+			page: 1,
+			pageSize: 999999,
+			pageCount: 1,
+			total: 11
+		}
+	}
+};