Small fixes js

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+./dist

README.md

@@ -1,9 +1,72 @@
 # Web Accessibility Project
 
-A basic web server template focused on web accessibility practices.
+# What?
+- Show quiz from API based on user preferences (filter/etc)
+- When in chosen quiz view, show questions and answers
+- Show score after finished a quiz
 
-### Installation
+- Scorelist (stretch ev)
 
-1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.
+# Views
+#### Landing page/start
 
-2. Clone your forked repository
+# Welcome message
+- Show a navigation of filters
+- Start game
+- Enter player name
+- See top list (?)
+
+# A quiz page
+- Question
+- Answers
+- Show correct/incorrect answer when chosen submitting an answer
+- Next question button
+- Show total quiz time
+- Remaining time on the question?
+- Navigation back to welcome page
+- Stop?
+
+# Results page
+- Final score
+- Restart game/back to homepage
+- Leaderboard
+
+# Functionality
+- Choose a category/other filter (?)
+- Fetch data based on chosen filters
+- List of questions
+- Choose instant feedback during the quiz (correct/incorrect answer)
+- Enter player name
+- Player score
+- Timer (?)
+- Start / Stop game
+- 
+
+# Tech
+- Tailwind
+- Typescript
+- API
+- CSS + HTML
+
+# Requirement
+- Accessible
+- Keyboard, focus, ARIA, Color contrast etc (check scope)
+
+### TODO 
+1) 
+- Setup HTML
+- Set up Tailwind
+- Setup API
+- Fetch based on user input
+- Put to Github issues/Project
+
+2) 
+- JS to render quiz
+- JS to render questions
+- JS to respond on user choose correct or wrong
+- JS to show timer
+- JS to start stop
+- Setup Postgres for user + topscore
+
+
+? - Design as we go? 

css/styles.css

@@ -0,0 +1,49 @@
+@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap');
+
+html {
+}
+
+body {
+  font-family: "Chivo", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  margin: 0;
+  box-sizing: border-box;
+  background-color: rgba(16, 22, 38, 1);
+  color: white;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: none;
+  box-sizing: border-box;
+  border: 0 solid;
+}
+
+header {
+
+}
+
+/*------ Celebration Modal  ------*/
+
+#celebration-modal {
+  border: none;
+  background: rgba(16, 22, 38, 0.9);
+  border-radius: 16px;
+  color: white;
+  padding: 2rem;
+  max-width: 400px;
+  width: 100%;
+}
+
+#celebration-modal::backdrop {
+  backdrop-filter: blur(8px);
+  background-color: rgba(0, 0, 0, 0.45);
+}
+
+/* TO DO: differentiate from regular click focus */
+:focus {
+  outline: 3px solid rgba(110,157,231,1);
+  outline-offset: 2px;
+}

dist/script.d.ts

@@ -0,0 +1,56 @@
+interface fetchedObjectFormat {
+    category: string;
+    correct_answer: string;
+    difficulty: string;
+    incorrect_answers: string[];
+    question: string;
+    type: string;
+}
+interface questionObjectFormat {
+    question: string;
+    category: string;
+    difficulty: string;
+    allAnswers: string[];
+    correctAnswer: string;
+}
+interface quizSettingsFormat {
+    amount: number;
+    category: number;
+    difficulty: string;
+    player: string;
+}
+declare const questionArray: questionObjectFormat[];
+declare let storedQuestionArray: questionObjectFormat[];
+declare let index: number;
+declare let chosenAnswer: string;
+declare let accumulatedScore: number;
+declare const filterForm: HTMLElement;
+declare const quizContainer: HTMLElement;
+declare const question: HTMLElement;
+declare const answers: HTMLElement;
+declare const conclusionDiv: HTMLElement;
+declare const startButton: HTMLElement;
+declare const submitAnswerButton: HTMLElement;
+declare const nextQuestionBtn: HTMLElement;
+declare const finishQuizBtn: HTMLElement;
+declare const playAgainBtn: HTMLElement;
+declare const scoreboardSection: HTMLElement;
+declare const celebrationDialog: HTMLElement;
+declare const fetchQuizAPI: () => Promise<void>;
+declare const celebrationModal: () => void;
+declare const decodeString: (string: string) => string;
+declare const incrementIndex: () => void;
+declare const renderStepper: () => void;
+declare const shuffleAnswers: (array: string[]) => void;
+declare const insertQuestionsAndAnswers: (array: questionObjectFormat, index: number) => void;
+declare const checkAnswer: (chosenAnswer: string, index: number) => void;
+declare const countAndSaveScore: () => void;
+declare const SCORE_API_URL = "https://postgres.daniellauding.se/quiz_scores";
+declare const fetchScores: () => Promise<void>;
+declare let allScores: any[];
+declare function initScoreFilters(): Promise<void>;
+declare const postScore: (username: string, category: number, score: number, difficulty: string, amount: number) => Promise<any>;
+declare let timerId: number | null;
+declare function stopQuestionTimer(): void;
+declare function startQuestionTimer(durationMs?: number): void;
+//# sourceMappingURL=script.d.ts.map