diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..beca215 Binary files /dev/null and b/.DS_Store differ diff --git a/about.html b/about.html index 5adbad6..3a9fdea 100644 --- a/about.html +++ b/about.html @@ -1,10 +1,84 @@ - - - - - About - - - - + + + + + + About + + + + + + + + + + +
+ + +
+ + +
+
+
+

About us

+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus molestiae aliquam a eveniet est, voluptate + aliquid nesciunt non eaque, expedita deleniti, dignissimos adipisci illo quibusdam voluptas ad earum aut + sapiente!

+
+ +
+ + + + + \ No newline at end of file diff --git a/css/color-palette.css b/css/color-palette.css new file mode 100644 index 0000000..995f2a6 --- /dev/null +++ b/css/color-palette.css @@ -0,0 +1,52 @@ +:root { + --primary: #fdeb3f; + --primary-hover: ; + --primary-fixed: ; + + --secondary: ; + --secondary-hover: ; + --secondary-fixed: ; + + --complementary: ; + --complementary-hover: ; + --complementary-fixed: ; + + --aditional: ; + --aditional-hover: ; + --aditional-fixed: ; + + --font-primary: ; + --font-primary-hover: ; + --font-primary-fixed: ; + + --font-secondary: ; + --font-secondary-hover: ; + --font-secondary-fixed: ; +} + +.dark-mode { + --primary: #6c2727; + --primary-hover: ; + --primary-fixed: ; + + --secondary: ; + --secondary-hover: ; + --secondary-fixed: ; + + --complementary: ; + --complementary-hover: ; + --complementary-fixed: ; + + --aditional: ; + --aditional-hover: ; + --aditional-fixed: ; + + --font-primary: ; + --font-primary-hover: ; + --font-primary-fixed: ; + + --font-secondary: ; + --font-secondary-hover: ; + --font-secondary-fixed: ; + +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index e69de29..f08cf70 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,335 @@ +:root { + --primary: #fdeb3f; + --primary-hover: ; + --primary-fixed: ; + + --secondary: #000000; + --secondary-hover: ; + --secondary-fixed: ; + + --complementary: #FFFFFF; + --complementary-hover: ; + --complementary-fixed: ; + + --aditional: ; + --aditional-hover: ; + --aditional-fixed: ; + + --font-primary: #000000; + --font-primary-hover: ; + --font-primary-fixed: ; + + --font-secondary: ; + --font-secondary-hover: ; + --font-secondary-fixed: ; +} + +.dark-mode { + --primary: #6c2727; + --primary-hover: ; + --primary-fixed: ; + + --secondary: ; + --secondary-hover: ; + --secondary-fixed: ; + + --complementary: ; + --complementary-hover: ; + --complementary-fixed: ; + + --aditional: ; + --aditional-hover: ; + --aditional-fixed: ; + + --font-primary: ; + --font-primary-hover: ; + --font-primary-fixed: ; + + --font-secondary: ; + --font-secondary-hover: ; + --font-secondary-fixed: ; + +} + +* { + box-sizing: border-box; + margin: none; +} + +body { + background-color: var(--primary); + font-family: 'Futura', Helvetica, sans-serif; + margin: 0; +} + +/* Skip link styling */ +.skip-link { + position: absolute; + top: -40px; + right: 0; + padding: 8px; + z-index: 100; + transition: top 0.3s; + background-color: var(--complementary); + outline: 4px solid var(--secondary); + text-transform: uppercase; + font-weight: bold; +} + +.skip-link:hover { + border-bottom: none; + text-decoration: underline; +} + +.skip-link:focus { + top: 0; +} + + +/* Styling for nav in header and footer */ + +header { + margin: 5px; + position: fixed; + z-index: 10; + background-color: var(--primary); + +} + +nav { + padding: 12px; + +} + +#menu-icon { + font-size: 40px; + cursor: pointer; + display: block; + padding: 12px; +} + +#nav-links { + display: none; + width: 100%; + background: transparent; + font-size: 24px; +} + +#nav-links.active { + display: flex; + flex-direction: column; + padding: 0px 12px; +} + +ul { + padding: 0; + margin: 0; +} + +li { + list-style: none; + font-weight: bold; + text-transform: uppercase; + padding: 6px; +} + +a { + text-decoration: none; + color: var(--secondary); +} + +#nav-links a:hover { + border-bottom: 4px solid var(--secondary); +} + +main { + margin: 0 auto; +} + +.hide { + display: none; + /* transition: transform 1s ease; */ + +} + +.offset { + transform: translateX(100dvh); +} + +.card { + justify-content: center; + background-color: var(--primary); + position: absolute; + padding: 16px; + width: 100dvw; + height: 100dvh; + transition: transform .7s ease-in-out; +} + + + +.front { + z-index: 0; +} + +/* styling for each section */ +section { + border: 4px solid var(--secondary); + display: flex; + flex-direction: column; + /* justify-content: space-evenly; */ + text-align: center; + gap: 12px; +} + +.speech-bubble { + display: flex; + justify-content: center; + background-image: url("../img/speech-bubble2.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + width: 100%; + height: auto; + min-height: 250px; + +} + +.title-text { + display: flex; + flex-direction: column; + justify-content: center; + max-width: 200px; + +} + +h1, +h2, +h3, +p { + padding: 0; + margin: 0; +} + +h1 { + font-size: 22px; +} + +h2, +h3 { + font-size: 18px; +} + +button { + font-family: 'Futura', Helvetica, sans-serif; + font-size: 16px; + border: 2px solid var(--secondary); + border-radius: 8px; + background-color: var(--complementary); + box-shadow: 2px 3px 0px var(--secondary); + padding: 8px 12px; + text-transform: uppercase; + font-weight: 600; + letter-spacing: 0.5px; + margin: 8px; + transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out; +} + +button:hover { + box-shadow: none; + transform: translateY(2px); +} + +button:active { + box-shadow: inset 1.5px 2px 0px var(--secondary); + transform: translateY(2px) scale(0.98); +} + +/* Quiz questions form layout */ + +form { + padding: 8px 24px; +} + +fieldset { + border: none; + border: 0; + padding: 0; + margin: 0; + min-width: 0; +} + +.radio-button-group { + display: flex; + flex-direction: column; + gap: 2px; +} + +input[type="radio"] { + /* visibility: hidden; */ + height: 0; +} + +.options { + cursor: pointer; + user-select: none; + /* Sofies changes */ + margin: 8px 0px; + padding: 8px; + background-color: #FFFFFF; + box-shadow: 2px 3px 0px black; + border: 2px solid black; + border-radius: 4px; + transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out; +} + +input[type="radio"]:checked+.options { + box-shadow: inset 4px 4px 0px black; + transform: translateY(3px) scale(0.98); + font-weight: bold; +} + +.options:hover { + box-shadow: inset 2px 2px 0px black; + transform: translateY(2px); +} + + +/* styling of icons */ +i { + font-size: 24px; + color: #000000; +} + + +footer { + display: none; + flex-direction: row; + justify-items: center; +} + +/* Desktop */ +@media screen and (min-width: 768px) { + #menu-icon { + display: none; + } + + #nav-links { + display: flex; + flex-direction: row; + justify-content: center; + } + + .card { + width: 100dvw; + justify-content: center; + align-items: center; + flex-direction: column; + } + + + .offset { + transform: translateX(0dvh); + } + +} \ No newline at end of file diff --git a/dist/main.js b/dist/main.js new file mode 100644 index 0000000..4d03151 --- /dev/null +++ b/dist/main.js @@ -0,0 +1,152 @@ +"use strict"; +//#region --- DOM Elements ----- +const navLinks = document.querySelector("#nav-links"); +const menuIcon = document.querySelector("#menu-icon"); +const startQuizBtn = document.querySelector("#start-quiz-btn"); +const questionTitle = document.querySelector("#question-title"); +const questionText = document.querySelector("#question-text"); +// const optionA2 = document.querySelector('label[for="question1"]') +const optionA = document.querySelector('label[for="option-a"]'); +const optionB = document.querySelector('label[for="option-b"]'); +const optionC = document.querySelector('label[for="option-c"]'); +const optionD = document.querySelector('label[for="option-d"]'); +const resultTitle = document.querySelector("#result-title"); +const resultExplanation = document.querySelector("#result-explanation"); +const submitAnswerBtn = document.querySelector("#answer-btn"); +const nextQuestionBtn = document.querySelector("#next-question-btn"); +const startPage = document.querySelector("#start-page"); +const quizContainer = document.querySelector("#quiz-container"); +const resultContainer = document.querySelector("#result-container"); +const quizResult = document.querySelector("#quiz-result"); +const quizResultTitle = document.querySelector("#quiz-result-title"); +const quizResultText = document.querySelector("#quiz-result-text"); +const startAgainBtn = document.querySelector("#start-again-btn"); +const selectionForm = document.querySelector("#selection-from"); +const radioButtonGroup = document.querySelector(".radio-button-group"); +const radioButtonCheck = document.querySelectorAll('input[name="question1"]'); +const backBtn = document.querySelector("#back-btn"); +let currentStep = -1; +let userChoice = ""; +let currentQuestion = null; +let score = 0; +//#endregion +//#region --- Functions ----- +//#region --- User Idetifier ----- +const userChoiseIdentifier = () => { + const options = document.querySelectorAll('input[name="question1"]'); + options.forEach(button => { + button.addEventListener("change", (event) => { + userChoice = event.target.value; + console.log(`User selected: ${userChoice} and correct is ${currentQuestion.correctAnswer}`); + }); + }); +}; +userChoiseIdentifier(); +//#endregion +//#region --- Burger Menu ----- +const burgerMenu = () => { + navLinks.classList.toggle("active"); + menuIcon.classList.toggle("fa-bars"); + menuIcon.classList.toggle("fa-times"); +}; +//#endregion +//#region --- Load Next Question ----- +const loadNextQuestion = () => { + userChoice = ""; + currentStep++; + radioButtonCheck.forEach((radio) => { + radio.checked = false; + }); + console.log(currentStep); + if (currentStep >= questions.length) { + quizResultTitle.innerHTML = "Quiz is over"; + quizResultText.innerHTML = `Your score is: ${score} / ${questions.length}`; + resultContainer.style.zIndex = ("0"); + quizResult.style.zIndex = ("1"); + quizResult.classList.remove("hide"); + quizContainer.classList.remove("hide"); + requestAnimationFrame(() => { + quizResult.classList.remove("offset"); + }); + setTimeout(() => { + resultContainer.classList.add("hide"); + resultContainer.classList.add("offset"); + }, 50); + } + else { + currentQuestion = questions[currentStep]; + questionTitle.innerHTML = (`Question ${currentStep + 1}/${questions.length}`); + questionText.innerHTML = (currentQuestion.questionText); + optionA.innerHTML = (currentQuestion.options[0]); + optionB.innerHTML = (currentQuestion.options[1]); + optionC.innerHTML = (currentQuestion.options[2]); + optionD.innerHTML = (currentQuestion.options[3]); + resultContainer.style.zIndex = ("0"); + quizContainer.style.zIndex = ("1"); + quizContainer.classList.remove("hide"); + requestAnimationFrame(() => { + quizContainer.classList.remove("offset"); + }); + setTimeout(() => { + startPage.classList.add("hide"); + resultContainer.classList.add("hide"); + resultContainer.classList.add("offset"); + }, 500); + if (currentStep % questions.length === questions.length - 1) { + submitAnswerBtn.innerHTML = "SEE RESULTS"; + } + } +}; +//#endregion +//#region --- Load answer ----- +const loadNextAnswer = (event) => { + if (event) + event.preventDefault(); + if (userChoice === currentQuestion.correctAnswer) { + console.log("You are correct!"); + resultTitle.innerHTML = currentQuestion.resultTitleWin; + resultExplanation.innerHTML = currentQuestion.resultExplanationWin; + score++; + console.log(score); + } + else if (userChoice === "") { + alert("Please select an answer."); + } + else { + console.log("Sorry, wrong answer."); + resultTitle.innerHTML = currentQuestion.resultTitleLose; + resultExplanation.innerHTML = currentQuestion.resultExplanationLose; + } + quizContainer.style.zIndex = ("0"); + resultContainer.style.zIndex = ("1"); + resultContainer.classList.remove("hide"); + quizContainer.classList.remove("hide"); + requestAnimationFrame(() => { + resultContainer.classList.remove("offset"); + }); + setTimeout(() => { + quizContainer.classList.add("hide"); + quizContainer.classList.add("offset"); + }, 500); +}; +//#endregion +//#region --- Start over ---- +const startAgain = () => { + submitAnswerBtn.innerHTML = "SUBMIT"; + startPage.style.zIndex = ("0"); + startPage.classList.remove("hide"); + startPage.classList.remove("offset"); + quizResult.classList.add("hide"); + currentStep = -1; + score = 0; +}; +//#endregion +//#endregion +//#region --- Event listeners ----- +menuIcon.addEventListener("click", burgerMenu); +startQuizBtn.addEventListener("click", loadNextQuestion); +submitAnswerBtn.addEventListener("click", loadNextAnswer); +nextQuestionBtn.addEventListener("click", loadNextQuestion); +startAgainBtn.addEventListener("click", startAgain); +//#endregion +console.log(questions.length); diff --git a/dist/questions.js b/dist/questions.js new file mode 100644 index 0000000..a854cb6 --- /dev/null +++ b/dist/questions.js @@ -0,0 +1,42 @@ +"use strict"; +//#endregion +//#region --- Object ----- +const questions = [ + { + id: "question1", + currentStep: 1, + questionTitle: "Question ", + questionText: "What is a screen reader?", + options: ["A car", "A digital text reader", "A cat", "A fruite"], + correctAnswer: "B", + resultTitleWin: "Congratulations", + resultExplanationWin: "You got it right!", + resultTitleLose: "Oh no!", + resultExplanationLose: "You got it wrong" + }, + { + id: "question2", + questionTitle: "Question ", + questionText: "What is an alt text? A description of..", + currentStep: 2, + options: ["an image", "a div element", "a header", "a link"], + correctAnswer: "A", + resultTitleWin: "Congratulations", + resultExplanationWin: "You got it right!", + resultTitleLose: "Oh no!", + resultExplanationLose: "You got it wrong" + }, + { + id: "question3", + currentStep: 3, + questionTitle: "Question ", + questionText: "What is the purpose of a 'skip to content' link?", + options: ["to skip advertisements", "to skip the navigation", "to skip to all images", "to skip the footer"], + correctAnswer: "B", + resultTitleWin: "Congratulations", + resultExplanationWin: "You got it right!", + resultTitleLose: "Oh no!", + resultExplanationLose: "You got it wrong" + } +]; +//#endregion diff --git a/img/speech-bubble.png b/img/speech-bubble.png new file mode 100644 index 0000000..b6269aa Binary files /dev/null and b/img/speech-bubble.png differ diff --git a/img/speech-bubble2.png b/img/speech-bubble2.png new file mode 100644 index 0000000..567d94e Binary files /dev/null and b/img/speech-bubble2.png differ diff --git a/index.html b/index.html index a9a33db..f2957a7 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,131 @@ - - - - - Title - - - -

This is the starting point.

- - - + + + + + + Web Accessibility Quiz + + + + + + + + + + + + + + +
+ + +
+ + + +
+ +
+
+
+ +

Web Accessibility Quiz

+
+
+ +

Kort beskrivning. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa adipisci laborum + unde + illum ea, dolores facere + soluta excepturi mollitia hic nisi, doloremque.

+ + + + +
+ + + +
+

+ +
+
+

+
+
+ +
+
+ + +
+ Ledgend text + + + + + + + + + + + +
+ +
+ + +
+ +
+ + + +
+
+
+

+

+
+
+ + + +
+ + + +
+
+
+

+

+
+
+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js deleted file mode 100644 index e69de29..0000000 diff --git a/js/main.ts b/js/main.ts new file mode 100644 index 0000000..a6d2cf2 --- /dev/null +++ b/js/main.ts @@ -0,0 +1,175 @@ +//#region --- DOM Elements ----- +const navLinks = document.querySelector("#nav-links") as HTMLElement +const menuIcon = document.querySelector("#menu-icon") as HTMLElement +const startQuizBtn = document.querySelector("#start-quiz-btn") as HTMLElement +const questionTitle = document.querySelector("#question-title") as HTMLElement +const questionText = document.querySelector("#question-text") as HTMLParagraphElement +// const optionA2 = document.querySelector('label[for="question1"]') +const optionA = document.querySelector('label[for="option-a"]') as HTMLLabelElement +const optionB = document.querySelector('label[for="option-b"]') as HTMLLabelElement +const optionC = document.querySelector('label[for="option-c"]') as HTMLLabelElement +const optionD = document.querySelector('label[for="option-d"]') as HTMLLabelElement +const resultTitle = document.querySelector("#result-title") as HTMLElement +const resultExplanation = document.querySelector("#result-explanation") as HTMLParagraphElement +const submitAnswerBtn = document.querySelector("#answer-btn") as HTMLElement +const nextQuestionBtn = document.querySelector("#next-question-btn") as HTMLElement +const startPage = document.querySelector("#start-page") as HTMLElement +const quizContainer = document.querySelector("#quiz-container") as HTMLElement +const resultContainer = document.querySelector("#result-container") as HTMLElement +const quizResult = document.querySelector("#quiz-result") as HTMLElement +const quizResultTitle = document.querySelector("#quiz-result-title") as HTMLElement +const quizResultText = document.querySelector("#quiz-result-text") as HTMLParagraphElement +const startAgainBtn = document.querySelector("#start-again-btn") as HTMLButtonElement +const selectionForm = document.querySelector("#selection-from") as HTMLFormElement +const radioButtonGroup = document.querySelector(".radio-button-group") as HTMLDivElement +const radioButtonCheck = document.querySelectorAll('input[name="question1"]') as NodeListOf +const backBtn = document.querySelector("#back-btn") as HTMLButtonElement + + +let currentStep: number = -1 +let userChoice: string = "" +let currentQuestion: any = null +let score: number = 0 + +//#endregion + +//#region --- Functions ----- + +//#region --- User Idetifier ----- +const userChoiseIdentifier = (): void => { + const options = document.querySelectorAll('input[name="question1"]') as NodeListOf + options.forEach(button => { + button.addEventListener("change", (event) => { + userChoice = (event.target as HTMLInputElement).value + console.log(`User selected: ${userChoice} and correct is ${currentQuestion.correctAnswer}`) + }) + }) +} + +userChoiseIdentifier() + +//#endregion + +//#region --- Burger Menu ----- +const burgerMenu = (): void => { + navLinks.classList.toggle("active") + menuIcon.classList.toggle("fa-bars") + menuIcon.classList.toggle("fa-times") +} +//#endregion + +//#region --- Load Next Question ----- +const loadNextQuestion = () => { + userChoice = "" + currentStep++ + radioButtonCheck.forEach((radio): void => { + radio.checked = false + } + ) + + console.log(currentStep) + + if (currentStep >= questions.length) { + quizResultTitle.innerHTML = "Quiz is over" + quizResultText.innerHTML = `Your score is: ${score} / ${questions.length}` + resultContainer.style.zIndex = ("0") + quizResult.style.zIndex = ("1") + quizResult.classList.remove("hide") + quizContainer.classList.remove("hide") + requestAnimationFrame(() => { + quizResult.classList.remove("offset") + }) + setTimeout(() => { + resultContainer.classList.add("hide") + resultContainer.classList.add("offset") + }, 50 + ) + + } else { + currentQuestion = questions[currentStep] + questionTitle.innerHTML = (`Question ${currentStep + 1}/${questions.length}`) + questionText.innerHTML = (currentQuestion.questionText) + optionA.innerHTML = (currentQuestion.options[0]) + optionB.innerHTML = (currentQuestion.options[1]) + optionC.innerHTML = (currentQuestion.options[2]) + optionD.innerHTML = (currentQuestion.options[3]) + + resultContainer.style.zIndex = ("0") + quizContainer.style.zIndex = ("1") + quizContainer.classList.remove("hide") + requestAnimationFrame(() => { + quizContainer.classList.remove("offset") + }) + setTimeout(() => { + startPage.classList.add("hide") + resultContainer.classList.add("hide") + resultContainer.classList.add("offset") + }, 500) + + if (currentStep % questions.length === questions.length - 1) { + submitAnswerBtn.innerHTML = "SEE RESULTS" + } + } +} + +//#endregion + +//#region --- Load answer ----- +const loadNextAnswer = (event: Event): void => { + if (event) event.preventDefault() + + if (userChoice === currentQuestion.correctAnswer) { + console.log("You are correct!") + resultTitle.innerHTML = currentQuestion.resultTitleWin + resultExplanation.innerHTML = currentQuestion.resultExplanationWin + score++ + console.log(score) + } else if (userChoice === "") { + alert("Please select an answer.") + } else { + console.log("Sorry, wrong answer.") + resultTitle.innerHTML = currentQuestion.resultTitleLose + resultExplanation.innerHTML = currentQuestion.resultExplanationLose + } + + quizContainer.style.zIndex = ("0") + resultContainer.style.zIndex = ("1") + resultContainer.classList.remove("hide") + quizContainer.classList.remove("hide") + requestAnimationFrame(() => { + resultContainer.classList.remove("offset") + }) + setTimeout(() => { + quizContainer.classList.add("hide") + quizContainer.classList.add("offset") + }, 500 + ) +} +//#endregion + +//#region --- Start over ---- +const startAgain = (): void => { + submitAnswerBtn.innerHTML = "SUBMIT" + startPage.style.zIndex = ("0") + startPage.classList.remove("hide") + startPage.classList.remove("offset") + quizResult.classList.add("hide") + currentStep = -1 + score = 0 +} + +//#endregion + + +//#endregion + +//#region --- Event listeners ----- +menuIcon.addEventListener("click", burgerMenu) +startQuizBtn.addEventListener("click", loadNextQuestion) +submitAnswerBtn.addEventListener("click", loadNextAnswer) +nextQuestionBtn.addEventListener("click", loadNextQuestion) +startAgainBtn.addEventListener("click", startAgain) + +//#endregion + +console.log(questions.length) \ No newline at end of file diff --git a/js/questions.ts b/js/questions.ts new file mode 100644 index 0000000..9015d86 --- /dev/null +++ b/js/questions.ts @@ -0,0 +1,56 @@ +//#region --- Interface ----- +interface Question { + id: string, + currentStep: number, + questionTitle: string, + questionText: string, + options: string[], + correctAnswer: string, + resultTitleWin: string, + resultExplanationWin: string + resultTitleLose: string, + resultExplanationLose: string +} +//#endregion + +//#region --- Object ----- +const questions: Question[] = [ + { + id: "question1", + currentStep: 1, + questionTitle: "Question ", + questionText: "What is a screen reader?", + options: ["A car", "A digital text reader", "A cat", "A fruite"], + correctAnswer: "B", + resultTitleWin: "Congratulations", + resultExplanationWin: "You got it right!", + resultTitleLose: "Oh no!", + resultExplanationLose: "You got it wrong" + }, + { + id: "question2", + questionTitle: "Question ", + questionText: "What is an alt text? A description of..", + currentStep: 2, + options: ["an image", "a div element", "a header", "a link"], + correctAnswer: "A", + resultTitleWin: "Congratulations", + resultExplanationWin: "You got it right!", + resultTitleLose: "Oh no!", + resultExplanationLose: "You got it wrong" + }, + { + id: "question3", + currentStep: 3, + questionTitle: "Question ", + questionText: "What is the purpose of a 'skip to content' link?", + options: ["to skip advertisements", "to skip the navigation", "to skip to all images", "to skip the footer"], + correctAnswer: "B", + resultTitleWin: "Congratulations", + resultExplanationWin: "You got it right!", + resultTitleLose: "Oh no!", + resultExplanationLose: "You got it wrong" + } +] + +//#endregion diff --git a/js/temp-script.js b/js/temp-script.js new file mode 100644 index 0000000..1f60790 --- /dev/null +++ b/js/temp-script.js @@ -0,0 +1,53 @@ +// Reaults varible + + +// const nextCard = () => { +// // Start page +// // Question 1 quiz-container +// // Answer 1 result-container +// // Question 2 +// // Answer 2 +// // Question 3 +// // Answer 3 +// // Resaults quiz-result + +// } + + + + +// const loadPrevoius = () => { +// //Startover +// //Set user score -1 +// //Set current step -- +// } + +// const startOver = () => { +// //Startover +// //Set user score === 0 +// //Set current step === 0 +// } + +// const nextStep = () => { +//Tömma allt +// Next Slide +// How do We do this +// } + +// const score = () => { +// // Add the next object in the array +// // Clear Option A +// // Clear Option B +// // Clear Option C +// // Clear Option D +// // Next Slide +// } + + +//eventlisteners + + +// goBackBtn.addEventListener("click", loadPrevoius) +// restartQuizBtn.addEventListener("click", startOver) + + diff --git a/structure.md b/structure.md new file mode 100644 index 0000000..db83914 --- /dev/null +++ b/structure.md @@ -0,0 +1,70 @@ + +Go to next ... + - Questions 1 + - Load Question A + - Load Question B (Correct) + - Load Question C + - Load Question D + - Store score + - Ansewer 1 + - Load ansewer + - Correct + - incrorect + - Questions 2 + - Load Question A + - Load Question B + - Load Question C + - Load Question D (Corrext) + - Store score + - Ansewer 2 + - Load ansewer + - Correct + - incrorect + - Questions 3 + - Load Question A (Correct) + - Load Question B + - Load Question C + - Load Question D + - Store score + - Ansewer 3 + - Load ansewer + - Correct + - incrorect + - Final Score + - Load resault + - On exit (Set User score = 0) + + + +User score + - Create user + - User score = 0 + +Question Object: +Questions: { +A1: Question A1 +B1: Question B1 +C1: Question C1 +D1: Question D1 +A2: Question A2 +B2: Question B2 +C2: Question C2 +D2: Question D2 +A3: Question A3 +B3: Question B3 +C3: Question C3 +D3: Question D3 +} + + +Correct option + +Wrong option + +Load questions + - + + + + + diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..7a8c196 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "target": "ES6", + "outDir": "./dist", + "strict": true + }, + "include": [ + "**/*.ts" + ], + "exclude": [ + "node_modules" + ] +} \ No newline at end of file