From 76ded44e9d1a989d8d566ab1920d5b1cecc422cf Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Tue, 25 Mar 2025 14:32:37 +0100 Subject: [PATCH 01/37] starting to set up the html --- index.html | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a9a33db..defb120 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,45 @@ - Title + Accessibility Quiz -

This is the starting point.

+
+ +
+
+

This is the accessibility quiz

+

Quick description of quiz.

+ +
+ +
+

About Us!

+

Meet the team that developed this quiz.

+
+
+ +

Team Member 1

+

+ This is team member 1. They are a developer interested in + accessibility. +

+
+
+
+ +
+
+
+
+
+ + From 77161729db5974012f65ecb6ecc7f67231fb6356 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 09:21:53 +0100 Subject: [PATCH 02/37] finishing setting up the html structure --- index.html | 283 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 273 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index defb120..113ff61 100644 --- a/index.html +++ b/index.html @@ -15,29 +15,292 @@
-

This is the accessibility quiz

-

Quick description of quiz.

- +

Test Your Web Accessibility Knowledge!

+

Put your web accessibility skills to the test with our quick quiz!

+

About Us!

-

Meet the team that developed this quiz.

+

+ Meet the team behind the quiz! We're passionate about web accessibility + and dedicated to creating resources that promote a more inclusive + internet for all.". +

- -

Team Member 1

+ +

Therese

- This is team member 1. They are a developer interested in - accessibility. + Therese is a front-end developer who’s passionate about building + accessible, user-centric designs that make the web easier to + navigate for everyone. +

+
+
+ +

Darius

+

+ Darius specialises in front-end development, crafting clean, + intuitive user interfaces that ensure an inclusive experience across + all devices and platforms +

+
+
+ +

Christina

+

+ Christina focuses on creating responsive, accessible web + experiences, working to ensure that every user, regardless of + ability, can enjoy seamless interaction with websites.

-
-
+

Accessibility Quiz!

+
+
+ 1. What does POUR stand for? +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ 2. What does WCAG stand for? +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + 3. Which HTML attribute provides alternative text for images? + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ 4. What is the purpose of semantic HTML? +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + 5. Which of these is NOT a valid way to make a website more + accessible? + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + 6. Which of these elements is best for screen readers to understand + page structure? + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + 7. Why should you avoid autoplaying videos with sound? + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ 8. How can you make links more accessible? +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ 9. Which feature improves keyboard navigation? +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + 10. Which of these font sizes is best for readability? + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+

Your Results!

+

Great job you got 8/10!

+
+ +
From a1c8209f92f68f5ac838da558e6cbd245ea2f3c3 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 10:00:28 +0100 Subject: [PATCH 03/37] dynamically adding quiz questions --- index.html | 224 ----------------------------------------------------- js/main.js | 127 ++++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+), 224 deletions(-) diff --git a/index.html b/index.html index 113ff61..329b986 100644 --- a/index.html +++ b/index.html @@ -67,230 +67,6 @@

Christina

Accessibility Quiz!

-
- 1. What does POUR stand for? -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- 2. What does WCAG stand for? -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - 3. Which HTML attribute provides alternative text for images? - -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- 4. What is the purpose of semantic HTML? -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - 5. Which of these is NOT a valid way to make a website more - accessible? - -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - 6. Which of these elements is best for screen readers to understand - page structure? - -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - 7. Why should you avoid autoplaying videos with sound? - -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- 8. How can you make links more accessible? -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- 9. Which feature improves keyboard navigation? -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - 10. Which of these font sizes is best for readability? - -
- - -
-
- - -
-
- - -
-
- - -
-
diff --git a/js/main.js b/js/main.js index e69de29..5111987 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,127 @@ +const quizQuestions = [ + { + questionNumber: 1, + question: "What does WCAG stand for?", + altAnswerOne: "Website Compliance and Accessibility Guide", + correctAnswer: "Web Content Accessibility Guidelines", + altAnswerTwo: "Web Coding Accessibility Guide", + altAnswerThree: "Website Content Accessibility Group", + }, + + { + questionNumber: 2, + question: "Which HTML attribute provides alternative text for images?", + altAnswerOne: "title", + correctAnswer: "alt", + altAnswerTwo: "aria-label", + altAnswerThree: "desc", + }, + + { + questionNumber: 3, + question: "What is the purpose of semantic HTML?", + altAnswerOne: + "To improve accessibility and SEO by using meaningful elements", + altAnswerTwo: "To reduce page load time", + correctAnswer: + "To improve accessibility and SEO by using meaningful elements", + altAnswerThree: "To style a webpage without CSS", + }, + + { + questionNumber: 4, + question: + "Which of these is NOT a valid way to make a website more accessible?", + altAnswerOne: "Using only color to convey information", + altAnswerTwo: "Adding captions to videos", + correctAnswer: "Using only color to convey information", + altAnswerThree: "Ensuring good keyboard navigation", + }, + + { + questionNumber: 5, + question: "Which feature improves keyboard navigation?", + altAnswerOne: "Disabling the tab key", + correctAnswer: "Adding tabindex to interactive elements", + altAnswerTwo: "Using only mouse-friendly UI components", + altAnswerThree: "Removing focus outlines", + }, + + { + questionNumber: 6, + question: "Why should you avoid autoplaying videos with sound?", + altAnswerOne: "It can be disruptive and inaccessible to some users", + altAnswerTwo: "It slows down page load times", + correctAnswer: "It can be disruptive and inaccessible to some users", + altAnswerThree: "It's bad for SEO", + }, + + { + questionNumber: 7, + question: "How can you make links more accessible?", + altAnswerOne: "Use descriptive link text instead of 'Click here'", + correctAnswer: "Use descriptive link text instead of 'Click here'", + altAnswerTwo: "Add more links to the same destination", + altAnswerThree: "Only use icons without text", + }, + + { + questionNumber: 8, + question: + "Which of these elements is best for screen readers to understand page structure?", + altAnswerOne: "div, span, b, i", + altAnswerTwo: "header, nav, main, footer", + correctAnswer: "header, nav, main, footer", + altAnswerThree: "section, article, aside, hr", + }, + + { + questionNumber: 9, + question: "What does POUR stand for?", + altAnswerOne: "Provide Offer Uplift and Rebuild", + correctAnswer: "Perceivable Operable Understandable Robust", + altAnswerTwo: "Perceivable Operable Usable Reliable", + altAnswerThree: "Place of Usual Residence", + }, + + { + questionNumber: 10, + question: "Which of these font sizes is best for readability?", + altAnswerOne: "10px for compact design", + altAnswerTwo: "12px for minimalism", + correctAnswer: "At least 16px for body text", + altAnswerThree: "14px for desktop, 10px for mobile", + }, +]; + +// SELECTORS +const quizContainer = document.getElementById("quiz-form"); + +// QUIZ QUESTIONS HTML +quizQuestions.forEach((quizQuestion) => { + let quizAnswers = [ + { label: quizQuestion.altAnswerOne, value: "wrong" }, + { label: quizQuestion.altAnswerTwo, value: "wrong" }, + { label: quizQuestion.correctAnswer, value: "correct" }, + { label: quizQuestion.altAnswerThree, value: "wrong" }, + ]; + + quizAnswers = quizAnswers.sort(() => Math.random() - 0.5); + + quizContainer.innerHTML += `
+ ${quizQuestion.question} + ${quizAnswers + .map((answer, i) => { + return `
+ + +
+ `; + }) + .join("")} +
`; +}); From b8f4ee59436ebfd23ab5a7e25a2b7b87a4b054bb Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 10:03:23 +0100 Subject: [PATCH 04/37] fixing the palcement of the submit button --- index.html | 1 + js/main.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 329b986..912d91c 100644 --- a/index.html +++ b/index.html @@ -67,6 +67,7 @@

Christina

Accessibility Quiz!

+
diff --git a/js/main.js b/js/main.js index 5111987..b3c5f27 100644 --- a/js/main.js +++ b/js/main.js @@ -95,7 +95,7 @@ const quizQuestions = [ ]; // SELECTORS -const quizContainer = document.getElementById("quiz-form"); +const quizContainer = document.getElementById("quiz-container"); // QUIZ QUESTIONS HTML quizQuestions.forEach((quizQuestion) => { From 358bf4a5b23d783624566fc5c29ba12d8b8ecfbd Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 10:04:38 +0100 Subject: [PATCH 05/37] adding quiz instructions --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index 912d91c..acff2b6 100644 --- a/index.html +++ b/index.html @@ -66,6 +66,10 @@

Christina

Accessibility Quiz!

+

+ Answer the following questions, then click the submit button once you're + done. You can only select one answer per question. +

From 2d315cdc87a0ae987d0a7d9c6d89ce9190ad915c Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 10:16:55 +0100 Subject: [PATCH 06/37] fixing the questions object so there are no duplicates --- js/main.js | 41 ++++++++++++++++++++--------------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/js/main.js b/js/main.js index b3c5f27..80a7d89 100644 --- a/js/main.js +++ b/js/main.js @@ -2,8 +2,8 @@ const quizQuestions = [ { questionNumber: 1, question: "What does WCAG stand for?", - altAnswerOne: "Website Compliance and Accessibility Guide", correctAnswer: "Web Content Accessibility Guidelines", + altAnswerOne: "Website Compliance and Accessibility Guide", altAnswerTwo: "Web Coding Accessibility Guide", altAnswerThree: "Website Content Accessibility Group", }, @@ -11,8 +11,8 @@ const quizQuestions = [ { questionNumber: 2, question: "Which HTML attribute provides alternative text for images?", - altAnswerOne: "title", correctAnswer: "alt", + altAnswerOne: "title", altAnswerTwo: "aria-label", altAnswerThree: "desc", }, @@ -20,29 +20,28 @@ const quizQuestions = [ { questionNumber: 3, question: "What is the purpose of semantic HTML?", - altAnswerOne: - "To improve accessibility and SEO by using meaningful elements", - altAnswerTwo: "To reduce page load time", correctAnswer: "To improve accessibility and SEO by using meaningful elements", - altAnswerThree: "To style a webpage without CSS", + altAnswerOne: "To reduce page load time", + altAnswerTwo: "To style a webpage without CSS", + altAnswerThree: "To use generic divs and spans for layout", }, { questionNumber: 4, question: "Which of these is NOT a valid way to make a website more accessible?", - altAnswerOne: "Using only color to convey information", - altAnswerTwo: "Adding captions to videos", correctAnswer: "Using only color to convey information", - altAnswerThree: "Ensuring good keyboard navigation", + altAnswerOne: "Adding captions to videos", + altAnswerTwo: "Ensuring good keyboard navigation", + altAnswerThree: "Providing alternative text for images", }, { questionNumber: 5, question: "Which feature improves keyboard navigation?", - altAnswerOne: "Disabling the tab key", correctAnswer: "Adding tabindex to interactive elements", + altAnswerOne: "Disabling the tab key", altAnswerTwo: "Using only mouse-friendly UI components", altAnswerThree: "Removing focus outlines", }, @@ -50,36 +49,36 @@ const quizQuestions = [ { questionNumber: 6, question: "Why should you avoid autoplaying videos with sound?", - altAnswerOne: "It can be disruptive and inaccessible to some users", - altAnswerTwo: "It slows down page load times", correctAnswer: "It can be disruptive and inaccessible to some users", - altAnswerThree: "It's bad for SEO", + altAnswerOne: "It slows down page load times", + altAnswerTwo: "It's bad for SEO", + altAnswerThree: "It makes the website look unprofessional", }, { questionNumber: 7, question: "How can you make links more accessible?", - altAnswerOne: "Use descriptive link text instead of 'Click here'", correctAnswer: "Use descriptive link text instead of 'Click here'", - altAnswerTwo: "Add more links to the same destination", - altAnswerThree: "Only use icons without text", + altAnswerOne: "Add more links to the same destination", + altAnswerTwo: "Only use icons without text", + altAnswerThree: "Use vague link text like 'Learn more'", }, { questionNumber: 8, question: "Which of these elements is best for screen readers to understand page structure?", - altAnswerOne: "div, span, b, i", - altAnswerTwo: "header, nav, main, footer", correctAnswer: "header, nav, main, footer", - altAnswerThree: "section, article, aside, hr", + altAnswerOne: "div, span, b, i", + altAnswerTwo: "section, article, aside, hr", + altAnswerThree: "p, h1, h2, h3", }, { questionNumber: 9, question: "What does POUR stand for?", - altAnswerOne: "Provide Offer Uplift and Rebuild", correctAnswer: "Perceivable Operable Understandable Robust", + altAnswerOne: "Provide Offer Uplift and Rebuild", altAnswerTwo: "Perceivable Operable Usable Reliable", altAnswerThree: "Place of Usual Residence", }, @@ -87,9 +86,9 @@ const quizQuestions = [ { questionNumber: 10, question: "Which of these font sizes is best for readability?", + correctAnswer: "At least 16px for body text", altAnswerOne: "10px for compact design", altAnswerTwo: "12px for minimalism", - correctAnswer: "At least 16px for body text", altAnswerThree: "14px for desktop, 10px for mobile", }, ]; From f2b2536daae8eef6efe9b29b7b64d03bd1ca3b4a Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 10:21:34 +0100 Subject: [PATCH 07/37] changing the navigation to be a list --- index.html | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index acff2b6..1bdc389 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,22 @@
-
-
+ +

Test Your Web Accessibility Knowledge!

Put your web accessibility skills to the test with our quick quiz!

From 96f985ef1e6560949a7bfa2808b1852a35e26d1f Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 10:24:37 +0100 Subject: [PATCH 08/37] removing an extra inverted comma --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 1bdc389..527e1c4 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@

About Us!

Meet the team behind the quiz! We're passionate about web accessibility and dedicated to creating resources that promote a more inclusive - internet for all.". + internet for all.

From 6595b984033110ec1bf62959cb051c8790000a56 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 10:27:57 +0100 Subject: [PATCH 09/37] adding aria label for the footer nav --- index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 527e1c4..359ba89 100644 --- a/index.html +++ b/index.html @@ -94,7 +94,11 @@

Your Results!

-
+
+
+ +
+
From 0d66ac5aa00965c25b2de14eea0397788bd943e9 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 10:31:02 +0100 Subject: [PATCH 10/37] linking the nav to different parts of the page --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 359ba89..99abe60 100644 --- a/index.html +++ b/index.html @@ -11,25 +11,25 @@ -
+

Test Your Web Accessibility Knowledge!

Put your web accessibility skills to the test with our quick quiz!

-
+

About Us!

Meet the team behind the quiz! We're passionate about web accessibility @@ -73,7 +73,7 @@

Christina

-
+

Accessibility Quiz!

Answer the following questions, then click the submit button once you're From ad035c0b51cf3f369d0e45e42727961f3f32c585 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 10:32:50 +0100 Subject: [PATCH 11/37] adding alt placeholder for images --- index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.html b/index.html index 99abe60..81a2c0d 100644 --- a/index.html +++ b/index.html @@ -40,6 +40,7 @@

About Us!

Therese

@@ -51,6 +52,7 @@

Therese

Darius

@@ -62,6 +64,7 @@

Darius

Christina

From 9710e726f44cbaa64f19afbf19a6d9b915c5e316 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 11:16:21 +0100 Subject: [PATCH 12/37] adding an aria control --- js/main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/main.js b/js/main.js index 80a7d89..27e2fd9 100644 --- a/js/main.js +++ b/js/main.js @@ -114,9 +114,9 @@ quizQuestions.forEach((quizQuestion) => { ${quizAnswers .map((answer, i) => { return `

- +
`; From a97aa5e868ea9c7bd4fa05273372b3b050828da6 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 26 Mar 2025 13:55:12 +0100 Subject: [PATCH 13/37] adding accessibility tags --- index.html | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 81a2c0d..18662fd 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +
+ +

Test Your Web Accessibility Knowledge!

Put your web accessibility skills to the test with our quick quiz!

@@ -99,7 +104,19 @@

Your Results!

From 3a2af4e6c7e90bfa2e7cd624ba89a98b6ca4cdd0 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Thu, 27 Mar 2025 08:53:27 +0100 Subject: [PATCH 14/37] calculating the quiz results and displaying them in when the quiz is submitted --- index.html | 9 ------ js/main.js | 87 +++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 60 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 18662fd..6aa74c1 100644 --- a/index.html +++ b/index.html @@ -93,15 +93,6 @@

Accessibility Quiz!

-
-

Your Results!

-

Great job you got 8/10!

-
- - -
-
- + + -

Test Your Web Accessibility Knowledge!

-

Put your web accessibility skills to the test with our quick quiz!

- -
- -
-

About Us!

-

- Meet the team behind the quiz! We're passionate about web accessibility - and dedicated to creating resources that promote a more inclusive - internet for all. -

-
-
- -

Therese

-

- Therese is a front-end developer who’s passionate about building - accessible, user-centric designs that make the web easier to - navigate for everyone. -

-
-
- -

Darius

-

- Darius specialises in front-end development, crafting clean, - intuitive user interfaces that ensure an inclusive experience across - all devices and platforms -

-
-
- -

Christina

-

- Christina focuses on creating responsive, accessible web - experiences, working to ensure that every user, regardless of - ability, can enjoy seamless interaction with websites. -

-
-
-
- -
-

Accessibility Quiz!

-

- Answer the following questions, then click the submit button once you're - done. You can only select one answer per question. -

-
-
- -
-
- - - - - + \ No newline at end of file From 6828d6a606f7e465afb77f6a7d18be7ed2e3a771 Mon Sep 17 00:00:00 2001 From: Lillebrorgroda Date: Fri, 28 Mar 2025 09:01:21 +0100 Subject: [PATCH 20/37] Added role to img --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 7b2ddaf..643d94d 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,7 @@

About Us!

+ alt="" role="presentation" />

Therese

Therese is a front-end developer who’s passionate about building @@ -58,7 +58,7 @@

Therese

+ alt="" role="presentation" />

Darius

Darius specialises in front-end development, crafting clean, @@ -69,7 +69,7 @@

Darius

+ alt="" role="presentation" />

Christina

Christina focuses on creating responsive, accessible web From e007209262472c055db802c1ee489cb0a401ca74 Mon Sep 17 00:00:00 2001 From: Darius_Carter Date: Fri, 28 Mar 2025 09:49:23 +0100 Subject: [PATCH 21/37] Quiz Co-authored-by: Therese Modig Co-authored-by: Christina Baldwin --- about.html | 10 --- css/styles.css | 175 +++++++++++++++++++++++++++++++++++++++++++++---- index.html | 2 +- 3 files changed, 162 insertions(+), 25 deletions(-) delete mode 100644 about.html diff --git a/about.html b/about.html deleted file mode 100644 index 5adbad6..0000000 --- a/about.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - About - - - - diff --git a/css/styles.css b/css/styles.css index d2de6a3..0c800d8 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,3 +1,8 @@ +* { + margin: 0; + padding: 0; +} + :root { --bg-primary: #ffffff; /* White background */ --color-primary: #333333; /* Dark grey text */ @@ -14,34 +19,49 @@ --bg-secondary: #222222; /* Dark background for footer */ } + body { - background: #f0a500; - color: var(--color-primary); + background: #2e3a59; + color: var(--bg-primary); /* White text */ font-family: sans-serif; margin: 0; line-height: 1.6; } header { - background: var(--color-); /* Featured color */ + background: var(--color-featured); /* Featured color */ padding: 1rem; } -.team-card-paragraph { - font-size: 1rem; +quiz-form{ + font-size: 2rem; +} + +.question{ + background: var(--bg-white); /* Light grey background */ + padding: 1.5rem; + margin: 1rem 0; +} + +quiz-question { + font-size: 0,5rem; background-color: #ffffff; padding: 2rem; margin: 1rem 0; } + nav ul { display: flex; + justify-content: center; /* Centers items horizontally */ + align-items: center; /* Aligns items vertically */ gap: 1rem; list-style: none; - margin: 0; + margin: 0 auto; /* Centers within the parent */ padding: 0; } nav a { + font-size: 1.5rem; color: var(--color-primary); /* Dark text for links */ text-decoration: none; } @@ -58,45 +78,104 @@ nav a:hover { } .hero-section h1 { - color: #f2f2f3; /* Blue heading */ + color: var(--bg-primary); /* Blue heading */ + font-size: 4rem; +} + +.hero-section p { + font-size: 1.5rem; } .about-section { background:#333333 ; /* Light background */ padding: 2rem; + } .about-section h2 { - color: white; + font-size: 3rem; + margin-bottom: 2rem; +} + +.about-section p { + font-size: 1.3rem; + margin-bottom: 2rem; + +} + +.team-cards-container { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 1rem; + padding: 1rem; + background: var(--nf-bg-1); /* Dark blue */ } .team-card { display: grid; grid-template-columns: repeat(2, 1fr);/* fr = relative space */ - + gap: 2rem; background-color: #ffffff; border: 1px solid var(--border-gray); background: var(--bg-4rd); - padding: 1rem; + padding: 2rem; margin: 1rem 0; + justify-content: left; +} + +.team-card h3 { + color: var(--color-primary); + font-size: 2rem; } .team-card img { grid-row: span 2; } +.team-card p { + color: var(--color-primary); + font-size: 1.2rem; + line-height: 1.6; +} + .quiz-section { - background: var(--nf-bg-1); /* Dark blue for quiz */ - padding: 2rem; - color: var(--color-white); /* White text on dark background */ + /* Light grey */ + padding: 3rem; + /* Very dark blue for hero section */ + color: var(--bg-primary); /* Adjust text color for contrast */ + font-size: 1.2rem; +} + +.quiz-section p { + margin-bottom: 2rem; +} + +fieldset { + padding: 1rem; + margin-bottom: 2rem; } .quiz-result-section { - background: var(--nf-bg-3); /* Dark gray */ + background: var(--nf--3); /* Dark gray */ padding: 2rem; color: var(--color-white); /* White text */ } +.quiz-result-section p { + font-size: 1.5rem; + + background: var(--color-featured); + /* Makes text yellow */ + padding: 1rem; + border-radius: 8px; +} + +.quiz-result-section h2 { + color: var(--color-featured); /* Featured color for headings */ + text-align: center; + margin-bottom: 1rem; +} + .btn { background: #f0a500; /* Dark orange */ color: #000000; /* White text */ @@ -121,3 +200,71 @@ footer { text-align: center; padding: 1rem; } + +/* MEDIA QUEREIES */ +@media (max-width: 480px) { + body { + font-size: 0.875rem; + } + + .team-cards-container { + grid-template-columns: repeat(2, 1fr); /* Single column layout */ + } + + .team-card { + /* max-width: 100%; */ + grid-template-columns: 1fr; /* Stack items */ + text-align: center; + } + + .team-card img { + width: 100px; + height: 100px; + } + + .btn { + width: 100%; + } + + nav ul { + flex-direction: column; /* Stack navigation links */ + align-items: center; + } +} + +@media (max-width: 768px) { + .hero-section { + padding: 1.5rem; + } + + .team-cards-container { + grid-template-columns: repeat(2, 1fr); /* Two columns */ + } + + .quiz-section { + padding: 1.5rem; + } + + .quiz-result-section p { + font-size: 1.2rem; + } +} + +@media (min-width: 769px) and (max-width: 1200px) { + .team-cards-container { + grid-template-columns: repeat(3, 1fr); /* Three columns */ + } + + .quiz-section { + margin: 0 auto; + } +} +@media (min-width: 1201px) { + .team-cards-container { + grid-template-columns: repeat(2, 1fr); /* Four columns */ + } + + .quiz-section { + margin: 0 auto; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 6aa74c1..d21f34a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + From 237931fd14f2f6ca4c90222d676c334145763e98 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Fri, 28 Mar 2025 10:06:01 +0100 Subject: [PATCH 22/37] fixing some styling --- css/styles.css | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/css/styles.css b/css/styles.css index 0c800d8..2b45431 100644 --- a/css/styles.css +++ b/css/styles.css @@ -19,7 +19,6 @@ --bg-secondary: #222222; /* Dark background for footer */ } - body { background: #2e3a59; color: var(--bg-primary); /* White text */ @@ -30,21 +29,21 @@ body { header { background: var(--color-featured); /* Featured color */ - padding: 1rem; + padding: 1.5rem; } -quiz-form{ - font-size: 2rem; +quiz-form { + font-size: 2rem; } -.question{ +.question { background: var(--bg-white); /* Light grey background */ padding: 1.5rem; margin: 1rem 0; } -quiz-question { - font-size: 0,5rem; +.quiz-question { + font-size: 0, 5rem; background-color: #ffffff; padding: 2rem; margin: 1rem 0; @@ -72,7 +71,7 @@ nav a:hover { .hero-section { background: var(--nf-bg-2); /* Very dark blue */ - padding: 2rem; + padding: 3rem; text-align: center; color: var(--color-white); /* White text on dark background */ } @@ -80,16 +79,17 @@ nav a:hover { .hero-section h1 { color: var(--bg-primary); /* Blue heading */ font-size: 4rem; + margin-bottom: 3rem; } .hero-section p { font-size: 1.5rem; + margin-bottom: 3rem; } .about-section { - background:#333333 ; /* Light background */ + background: #333333; /* Light background */ padding: 2rem; - } .about-section h2 { @@ -100,11 +100,10 @@ nav a:hover { .about-section p { font-size: 1.3rem; margin-bottom: 2rem; - } .team-cards-container { - display: grid; + display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; padding: 1rem; @@ -113,11 +112,11 @@ nav a:hover { .team-card { display: grid; - grid-template-columns: repeat(2, 1fr);/* fr = relative space */ + grid-template-columns: repeat(2, 1fr); /* fr = relative space */ gap: 2rem; background-color: #ffffff; border: 1px solid var(--border-gray); - background: var(--bg-4rd); + background: var(--bg-4rd); padding: 2rem; margin: 1rem 0; justify-content: left; @@ -139,9 +138,9 @@ nav a:hover { } .quiz-section { - /* Light grey */ + /* Light grey */ padding: 3rem; - /* Very dark blue for hero section */ + /* Very dark blue for hero section */ color: var(--bg-primary); /* Adjust text color for contrast */ font-size: 1.2rem; } @@ -163,9 +162,9 @@ fieldset { .quiz-result-section p { font-size: 1.5rem; - + background: var(--color-featured); - /* Makes text yellow */ + /* Makes text yellow */ padding: 1rem; border-radius: 8px; } @@ -184,6 +183,7 @@ fieldset { border-radius: 8px; cursor: pointer; margin: 0.5rem; + font-size: 1.2rem; } .btn:hover { @@ -267,4 +267,4 @@ footer { .quiz-section { margin: 0 auto; } -} \ No newline at end of file +} From f58672720894e1b578fdbea4ae39f640017766b1 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Fri, 28 Mar 2025 10:08:33 +0100 Subject: [PATCH 23/37] more styling --- css/styles.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/css/styles.css b/css/styles.css index 2b45431..6705452 100644 --- a/css/styles.css +++ b/css/styles.css @@ -36,6 +36,17 @@ quiz-form { font-size: 2rem; } +.skip-link:link, +.skip-link:visited { + color: white; + text-decoration: none; +} + +.skip-link:hover, +.skip-link:active { + color: var(--color-featured); +} + .question { background: var(--bg-white); /* Light grey background */ padding: 1.5rem; @@ -71,7 +82,7 @@ nav a:hover { .hero-section { background: var(--nf-bg-2); /* Very dark blue */ - padding: 3rem; + padding: 5rem; text-align: center; color: var(--color-white); /* White text on dark background */ } From 74ef033c9e15517b93076e7735f709f114401cf1 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Mon, 31 Mar 2025 12:57:58 +0200 Subject: [PATCH 24/37] dynamically changing result text and making the cta-btn scroll to the quiz --- index.html | 203 +++++++++++++++++++++++++++-------------------------- js/main.js | 22 +++++- 2 files changed, 125 insertions(+), 100 deletions(-) diff --git a/index.html b/index.html index ebf0d0d..8d1a238 100644 --- a/index.html +++ b/index.html @@ -1,99 +1,16 @@ - - - - Accessibility Quiz - - + + + + Accessibility Quiz + + - - -

- -
- -
- - -

Test Your Web Accessibility Knowledge!

-

Put your web accessibility skills to the test with our quick quiz!

- -
- -
-

About Us!

-

- Meet the team behind the quiz! We're passionate about web accessibility - and dedicated to creating resources that promote a more inclusive - internet for all. -

-
-
- -

Therese

-

- Therese is a front-end developer who’s passionate about building - accessible, user-centric designs that make the web easier to - navigate for everyone. -

-
-
- -

Darius

-

- Darius specialises in front-end development, crafting clean, - intuitive user interfaces that ensure an inclusive experience across - all devices and platforms -

-
-
- -

Christina

-

- Christina focuses on creating responsive, accessible web - experiences, working to ensure that every user, regardless of - ability, can enjoy seamless interaction with websites. -

-
-
-
- -
-

Accessibility Quiz!

-

- Answer the following questions, then click the submit button once you're - done. You can only select one answer per question. -

-
-
- -
-
- - - - + + +
+ + +

Test Your Web Accessibility Knowledge!

+

+ Put your web accessibility skills to the test with our quick quiz! +

+ +
- \ No newline at end of file +
+

About Us!

+

+ Meet the team behind the quiz! We're passionate about web accessibility + and dedicated to creating resources that promote a more inclusive + internet for all. +

+
+
+ +

Therese

+

+ Therese is a front-end developer who’s passionate about building + accessible, user-centric designs that make the web easier to + navigate for everyone. +

+
+
+ +

Darius

+

+ Darius specialises in front-end development, crafting clean, + intuitive user interfaces that ensure an inclusive experience across + all devices and platforms +

+
+
+ +

Christina

+

+ Christina focuses on creating responsive, accessible web + experiences, working to ensure that every user, regardless of + ability, can enjoy seamless interaction with websites. +

+
+
+
+ +
+

Accessibility Quiz!

+

+ Answer the following questions, then click the submit button once you're + done. You can only select one answer per question. +

+
+
+ +
+
+ + + + + diff --git a/js/main.js b/js/main.js index 8efb7e0..3945ceb 100644 --- a/js/main.js +++ b/js/main.js @@ -97,8 +97,14 @@ const quizQuestions = [ const quizSection = document.querySelector(".quiz-section"); let quizForm; -// QUIZ QUESTIONS +// HERO BUTTON SCROLL +const ctaBtn = document.querySelector(".cta-btn"); +ctaBtn.addEventListener("click", () => { + const quizSection = document.getElementById("quiz-content"); + quizSection.scrollIntoView({ behavior: "smooth" }); +}); +// QUIZ QUESTIONS const displayQuizQuestions = () => { quizSection.innerHTML = `

Accessibility Quiz!

@@ -164,8 +170,20 @@ const displaQuizResults = () => { const correctAnswers = answers.filter((answer) => answer === "correct"); + const result = `${correctAnswers.length} / ${answers.length}`; + + let resultText; + + if (correctAnswers.length >= 5 && correctAnswers.length <= 7) { + resultText = "Almsot there, try again!"; + } else if (correctAnswers.length <= 4) { + resultText = "Not quite there, try again!"; + } else { + resultText = "Great job!"; + } + quizSection.innerHTML = `

Your Results!

-

Great job you got ${correctAnswers.length}/${answers.length}!

+

${resultText} You got ${result}!

From 269abc0f92461886fb8b0ff8d8216702b929c474 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Tue, 1 Apr 2025 13:07:29 +0200 Subject: [PATCH 25/37] getting previous and next buttons to work and display questions individually --- js/main.js | 88 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 65 insertions(+), 23 deletions(-) diff --git a/js/main.js b/js/main.js index 3945ceb..fea0ee3 100644 --- a/js/main.js +++ b/js/main.js @@ -114,42 +114,84 @@ const displayQuizQuestions = () => {

- +
+ + + +
`; quizForm = document.getElementById("quiz-form"); + const nextBtn = document.querySelector(".next-btn"); + const prevBtn = document.querySelector(".prev-btn"); + const submitBtn = document.querySelector(".submit-btn"); + + let currentQuestionIndex = 0; + + const displayCurrentQuestion = () => { + const currentQuizQuestion = quizQuestions[currentQuestionIndex]; - quizQuestions.forEach((quizQuestion) => { let quizAnswers = [ - { label: quizQuestion.altAnswerOne, value: "wrong" }, - { label: quizQuestion.altAnswerTwo, value: "wrong" }, - { label: quizQuestion.correctAnswer, value: "correct" }, - { label: quizQuestion.altAnswerThree, value: "wrong" }, + { label: currentQuizQuestion.altAnswerOne, value: "wrong" }, + { label: currentQuizQuestion.altAnswerTwo, value: "wrong" }, + { label: currentQuizQuestion.correctAnswer, value: "correct" }, + { label: currentQuizQuestion.altAnswerThree, value: "wrong" }, ]; quizAnswers = quizAnswers.sort(() => Math.random() - 0.5); const quizContainer = document.getElementById("quiz-container"); - quizContainer.innerHTML += `
- ${quizQuestion.question} - ${quizAnswers - .map((answer, i) => { - return `
- - -
- `; - }) - .join("")} -
`; + ${currentQuizQuestion.question} + ${quizAnswers + .map((answer, i) => { + return `
+ + +
+ `; + }) + .join("")} + `; + + if (currentQuestionIndex === 0) { + prevBtn.disabled = true; + } else { + prevBtn.disabled = false; + } + + if (currentQuestionIndex === quizQuestions.length - 1) { + nextBtn.disabled = true; + submitBtn.classList.remove("hidden"); + } else { + nextBtn.disabled = false; + submitBtn.classList.add("hidden"); + } + }; + + displayCurrentQuestion(); + + nextBtn.addEventListener("click", () => { + if (currentQuestionIndex < quizQuestions.length - 1) { + currentQuestionIndex++; + displayCurrentQuestion(); + prevBtn.disabled = false; + } + }); + + prevBtn.addEventListener("click", () => { + if (currentQuestionIndex > 0) { + currentQuestionIndex--; + displayCurrentQuestion(); + } }); quizForm.addEventListener("submit", (e) => { From bb7727584b60a392a4860a533906ff06d825b294 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Tue, 1 Apr 2025 17:00:31 +0200 Subject: [PATCH 26/37] preventing next when question hasnt been answered and displaying a message --- js/main.js | 56 ++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 44 insertions(+), 12 deletions(-) diff --git a/js/main.js b/js/main.js index fea0ee3..e2bce39 100644 --- a/js/main.js +++ b/js/main.js @@ -107,8 +107,8 @@ ctaBtn.addEventListener("click", () => { // QUIZ QUESTIONS const displayQuizQuestions = () => { quizSection.innerHTML = ` -

Accessibility Quiz!

-

+

Accessibility Quiz!

+

Answer the following questions, then click the submit button once you're done. You can only select one answer per question.

@@ -143,10 +143,10 @@ const displayQuizQuestions = () => { const quizContainer = document.getElementById("quiz-container"); - quizContainer.innerHTML = `
- ${currentQuizQuestion.question} + ${currentQuizQuestion.question} ${quizAnswers .map((answer, i) => { return `
@@ -160,7 +160,36 @@ const displayQuizQuestions = () => { `; }) .join("")} -
`; + + + `; + + const quizInputs = document.querySelectorAll( + `input[name="q${currentQuizQuestion.questionNumber}"]` + ); + const warningMessage = document.getElementById("warning-message"); + + const updateNextButtonState = () => { + const questionAnswered = Array.from(quizInputs).some( + (input) => input.checked + ); + nextBtn.disabled = !questionAnswered; + + if (!questionAnswered) { + warningMessage.textContent = + "Please select an answer before proceeding."; + } else { + warningMessage.textContent = ""; + } + }; + + updateNextButtonState(); + + quizInputs.forEach((input) => { + input.addEventListener("change", updateNextButtonState); + }); if (currentQuestionIndex === 0) { prevBtn.disabled = true; @@ -169,10 +198,8 @@ const displayQuizQuestions = () => { } if (currentQuestionIndex === quizQuestions.length - 1) { - nextBtn.disabled = true; submitBtn.classList.remove("hidden"); } else { - nextBtn.disabled = false; submitBtn.classList.add("hidden"); } }; @@ -196,15 +223,15 @@ const displayQuizQuestions = () => { quizForm.addEventListener("submit", (e) => { e.preventDefault(); - displaQuizResults(); + displayQuizResults(); }); }; // QUIZ RESULTS -const displaQuizResults = () => { - const quizInputs = document.querySelectorAll(".quiz-input:checked"); +let answers = []; - let answers = []; +const displayQuizResults = () => { + const quizInputs = document.querySelectorAll(".quiz-input:checked"); quizInputs.forEach((quizInput) => { answers.push(quizInput.value); @@ -234,7 +261,12 @@ const displaQuizResults = () => { const retakeQuizBtn = document.querySelector(".retake-btn"); const toHomeBtn = document.querySelector(".home-btn"); - retakeQuizBtn.addEventListener("click", displayQuizQuestions); + retakeQuizBtn.addEventListener("click", () => { + answers = []; + currentQuestionIndex = 0; + displayQuizQuestions(); + }); + toHomeBtn.addEventListener("click", () => { const homeSection = document.getElementById("home-content"); homeSection.scrollIntoView({ behavior: "smooth" }); From 9a484b5f548aaa971d8ace3161314c9a29b06d02 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Tue, 1 Apr 2025 17:04:01 +0200 Subject: [PATCH 27/37] removing tabindex from the fieldset --- js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/main.js b/js/main.js index e2bce39..6d31a8f 100644 --- a/js/main.js +++ b/js/main.js @@ -143,7 +143,7 @@ const displayQuizQuestions = () => { const quizContainer = document.getElementById("quiz-container"); - quizContainer.innerHTML = `
${currentQuizQuestion.question} From 29291aa7dd8482cd9b224c3bebd6f0fcee692975 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 2 Apr 2025 13:27:24 +0200 Subject: [PATCH 28/37] getting the functionalits to work --- index.html | 1 - js/main.js | 56 ++++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 42 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 8d1a238..00e1fed 100644 --- a/index.html +++ b/index.html @@ -95,7 +95,6 @@

Accessibility Quiz!

-
diff --git a/js/main.js b/js/main.js index 6d31a8f..7ff2921 100644 --- a/js/main.js +++ b/js/main.js @@ -92,6 +92,7 @@ const quizQuestions = [ altAnswerThree: "14px for desktop, 10px for mobile", }, ]; +console.log("quizQuestions.length at startup:", quizQuestions.length); // SELECTORS const quizSection = document.querySelector(".quiz-section"); @@ -105,7 +106,20 @@ ctaBtn.addEventListener("click", () => { }); // QUIZ QUESTIONS +let answers = []; + +let currentQuestionIndex = 0; + +const saveAnswer = (questionIndex, selectedAnswer) => { + answers[questionIndex] = selectedAnswer; + console.log( + `Selected Answer for question ${questionIndex + 1}: ${selectedAnswer}` + ); +}; + const displayQuizQuestions = () => { + quizSection.innerHTML = ""; + quizSection.innerHTML = `

Accessibility Quiz!

@@ -115,8 +129,8 @@ const displayQuizQuestions = () => {

- - + +
@@ -127,8 +141,6 @@ const displayQuizQuestions = () => { const prevBtn = document.querySelector(".prev-btn"); const submitBtn = document.querySelector(".submit-btn"); - let currentQuestionIndex = 0; - const displayCurrentQuestion = () => { const currentQuizQuestion = quizQuestions[currentQuestionIndex]; @@ -169,6 +181,15 @@ const displayQuizQuestions = () => { const quizInputs = document.querySelectorAll( `input[name="q${currentQuizQuestion.questionNumber}"]` ); + + quizInputs.forEach((input) => { + input.addEventListener("change", (e) => { + saveAnswer(currentQuestionIndex, e.target.value); + console.log("Answers array after saving each answer:", answers); + updateNextButtonState(); + }); + }); + const warningMessage = document.getElementById("warning-message"); const updateNextButtonState = () => { @@ -192,15 +213,22 @@ const displayQuizQuestions = () => { }); if (currentQuestionIndex === 0) { + prevBtn.textContent = "No previous questions"; prevBtn.disabled = true; } else { + prevBtn.textContent = "Previous question"; prevBtn.disabled = false; } if (currentQuestionIndex === quizQuestions.length - 1) { + nextBtn.textContent = "No more questions"; submitBtn.classList.remove("hidden"); + nextBtn.disabled = true; + submitBtn.disabled = false; } else { + nextBtn.textContent = "Next question"; submitBtn.classList.add("hidden"); + submitBtn.disabled = true; } }; @@ -211,6 +239,8 @@ const displayQuizQuestions = () => { currentQuestionIndex++; displayCurrentQuestion(); prevBtn.disabled = false; + } else if (currentQuestionIndex === quizQuestions.length - 1) { + nextBtn.disabled = true; } }); @@ -221,21 +251,19 @@ const displayQuizQuestions = () => { } }); - quizForm.addEventListener("submit", (e) => { - e.preventDefault(); - displayQuizResults(); + document.addEventListener("click", (e) => { + if (e.target.classList.contains("submit-btn")) { + e.preventDefault(); + console.log("Submit button clicked!"); + console.log("final answers array:", answers); + displayQuizResults(); + } }); }; // QUIZ RESULTS -let answers = []; - const displayQuizResults = () => { - const quizInputs = document.querySelectorAll(".quiz-input:checked"); - - quizInputs.forEach((quizInput) => { - answers.push(quizInput.value); - }); + console.log("Answers array before filtering:", answers); const correctAnswers = answers.filter((answer) => answer === "correct"); From 8bbfca2df367faece056e8552611d9c68e9e92ac Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 2 Apr 2025 13:27:24 +0200 Subject: [PATCH 29/37] ficing the quiz submit results in the carousel --- index.html | 1 - js/main.js | 56 ++++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 42 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 8d1a238..00e1fed 100644 --- a/index.html +++ b/index.html @@ -95,7 +95,6 @@

Accessibility Quiz!

-
diff --git a/js/main.js b/js/main.js index 6d31a8f..7ff2921 100644 --- a/js/main.js +++ b/js/main.js @@ -92,6 +92,7 @@ const quizQuestions = [ altAnswerThree: "14px for desktop, 10px for mobile", }, ]; +console.log("quizQuestions.length at startup:", quizQuestions.length); // SELECTORS const quizSection = document.querySelector(".quiz-section"); @@ -105,7 +106,20 @@ ctaBtn.addEventListener("click", () => { }); // QUIZ QUESTIONS +let answers = []; + +let currentQuestionIndex = 0; + +const saveAnswer = (questionIndex, selectedAnswer) => { + answers[questionIndex] = selectedAnswer; + console.log( + `Selected Answer for question ${questionIndex + 1}: ${selectedAnswer}` + ); +}; + const displayQuizQuestions = () => { + quizSection.innerHTML = ""; + quizSection.innerHTML = `

Accessibility Quiz!

@@ -115,8 +129,8 @@ const displayQuizQuestions = () => {

- - + +
@@ -127,8 +141,6 @@ const displayQuizQuestions = () => { const prevBtn = document.querySelector(".prev-btn"); const submitBtn = document.querySelector(".submit-btn"); - let currentQuestionIndex = 0; - const displayCurrentQuestion = () => { const currentQuizQuestion = quizQuestions[currentQuestionIndex]; @@ -169,6 +181,15 @@ const displayQuizQuestions = () => { const quizInputs = document.querySelectorAll( `input[name="q${currentQuizQuestion.questionNumber}"]` ); + + quizInputs.forEach((input) => { + input.addEventListener("change", (e) => { + saveAnswer(currentQuestionIndex, e.target.value); + console.log("Answers array after saving each answer:", answers); + updateNextButtonState(); + }); + }); + const warningMessage = document.getElementById("warning-message"); const updateNextButtonState = () => { @@ -192,15 +213,22 @@ const displayQuizQuestions = () => { }); if (currentQuestionIndex === 0) { + prevBtn.textContent = "No previous questions"; prevBtn.disabled = true; } else { + prevBtn.textContent = "Previous question"; prevBtn.disabled = false; } if (currentQuestionIndex === quizQuestions.length - 1) { + nextBtn.textContent = "No more questions"; submitBtn.classList.remove("hidden"); + nextBtn.disabled = true; + submitBtn.disabled = false; } else { + nextBtn.textContent = "Next question"; submitBtn.classList.add("hidden"); + submitBtn.disabled = true; } }; @@ -211,6 +239,8 @@ const displayQuizQuestions = () => { currentQuestionIndex++; displayCurrentQuestion(); prevBtn.disabled = false; + } else if (currentQuestionIndex === quizQuestions.length - 1) { + nextBtn.disabled = true; } }); @@ -221,21 +251,19 @@ const displayQuizQuestions = () => { } }); - quizForm.addEventListener("submit", (e) => { - e.preventDefault(); - displayQuizResults(); + document.addEventListener("click", (e) => { + if (e.target.classList.contains("submit-btn")) { + e.preventDefault(); + console.log("Submit button clicked!"); + console.log("final answers array:", answers); + displayQuizResults(); + } }); }; // QUIZ RESULTS -let answers = []; - const displayQuizResults = () => { - const quizInputs = document.querySelectorAll(".quiz-input:checked"); - - quizInputs.forEach((quizInput) => { - answers.push(quizInput.value); - }); + console.log("Answers array before filtering:", answers); const correctAnswers = answers.filter((answer) => answer === "correct"); From 02c8b412f60806eec6f677f99e95839958a2e7ac Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 2 Apr 2025 13:50:11 +0200 Subject: [PATCH 30/37] adding newest styling --- css/styles.css | 208 +++++++++++++++++++------------------------------ 1 file changed, 80 insertions(+), 128 deletions(-) diff --git a/css/styles.css b/css/styles.css index 6705452..04890fe 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2,7 +2,6 @@ margin: 0; padding: 0; } - :root { --bg-primary: #ffffff; /* White background */ --color-primary: #333333; /* Dark grey text */ @@ -18,7 +17,6 @@ --color-white: #ffffff; /* White text */ --bg-secondary: #222222; /* Dark background for footer */ } - body { background: #2e3a59; color: var(--bg-primary); /* White text */ @@ -26,40 +24,26 @@ body { margin: 0; line-height: 1.6; } - header { background: var(--color-featured); /* Featured color */ - padding: 1.5rem; -} - -quiz-form { - font-size: 2rem; -} - -.skip-link:link, -.skip-link:visited { - color: white; - text-decoration: none; -} - -.skip-link:hover, -.skip-link:active { - color: var(--color-featured); + padding: 1rem; } - .question { background: var(--bg-white); /* Light grey background */ padding: 1.5rem; margin: 1rem 0; } - -.quiz-question { - font-size: 0, 5rem; - background-color: #ffffff; - padding: 2rem; - margin: 1rem 0; +.quiz-form { + font-size: 2rem; +} +.quiz-section { + max-width: 800px; + margin: 0 auto; + padding: 3rem; + color: var(--bg-primary); + font-size: 1.2rem; + text-align: center; } - nav ul { display: flex; justify-content: center; /* Centers items horizontally */ @@ -69,85 +53,69 @@ nav ul { margin: 0 auto; /* Centers within the parent */ padding: 0; } - nav a { font-size: 1.5rem; color: var(--color-primary); /* Dark text for links */ text-decoration: none; } - nav a:hover { color: var(--color-orange); /* Highlight on hover */ } - .hero-section { background: var(--nf-bg-2); /* Very dark blue */ - padding: 5rem; + padding: 2rem; text-align: center; color: var(--color-white); /* White text on dark background */ } - .hero-section h1 { color: var(--bg-primary); /* Blue heading */ font-size: 4rem; - margin-bottom: 3rem; } - .hero-section p { font-size: 1.5rem; - margin-bottom: 3rem; } - .about-section { background: #333333; /* Light background */ padding: 2rem; } - .about-section h2 { font-size: 3rem; margin-bottom: 2rem; } - .about-section p { - font-size: 1.3rem; + font-size: 2.5rem; margin-bottom: 2rem; } - .team-cards-container { display: grid; - grid-template-columns: repeat(1, 1fr); + grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1rem; - background: var(--nf-bg-1); /* Dark blue */ + background: var(--nf-bg-3); } - .team-card { - display: grid; - grid-template-columns: repeat(2, 1fr); /* fr = relative space */ - gap: 2rem; - background-color: #ffffff; - border: 1px solid var(--border-gray); + display: grid; /* Keeps content aligned inside */ + flex-direction: column; + align-items: center; + justify-content: center; + padding: 1rem; background: var(--bg-4rd); - padding: 2rem; - margin: 1rem 0; - justify-content: left; + border: 1px solid var(--border-gray); + text-align: center; } - .team-card h3 { color: var(--color-primary); font-size: 2rem; } - .team-card img { grid-row: span 2; + /* Adjusted size for better visibility */ } - .team-card p { color: var(--color-primary); font-size: 1.2rem; line-height: 1.6; } - .quiz-section { /* Light grey */ padding: 3rem; @@ -155,37 +123,69 @@ nav a:hover { color: var(--bg-primary); /* Adjust text color for contrast */ font-size: 1.2rem; } - .quiz-section p { margin-bottom: 2rem; } - +.h2 { + font-size: 2.5rem; + margin-bottom: 2rem; + color: var(--color-connect); /* Dark blue for headings */ +} +.p { + font-size: 1.5rem; + margin-bottom: 2rem; + color: var(--bg-primary); /* Dark blue for headings */ + line-height: 1.6; +} +.quiz-section p { + font-size: 1.5rem; + margin-bottom: 2rem; + color: var(--bg-primary); /* Dark blue for headings */ + line-height: 1.6; +} +legend { + font-size: 2.4em; + color: #ffffff; +} +label { + font-size: 1.5em; + color: #ffffff; +} fieldset { padding: 1rem; margin-bottom: 2rem; } - +.quiz-option { + margin-bottom: 10px; +} .quiz-result-section { - background: var(--nf--3); /* Dark gray */ + font-size: 2rem; /* Default text size */ + background: var(--nf-bg-3); /* Dark gray */ padding: 2rem; + background-color: #f0a500; /* Featured color */ color: var(--color-white); /* White text */ + text-align: center; /* Center text */ + margin: 2rem auto; /* Centers the section horizontally */ + max-width: 80%; /* Limits width for better readability */ + border-radius: 12px; /* Soft rounded corners */ } - .quiz-result-section p { font-size: 1.5rem; - background: var(--color-featured); /* Makes text yellow */ padding: 1rem; border-radius: 8px; } - -.quiz-result-section h2 { - color: var(--color-featured); /* Featured color for headings */ +.quiz-content.quiz-section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; text-align: center; - margin-bottom: 1rem; + padding: 2rem; + max-width: 80%; + margin: 0 auto; } - .btn { background: #f0a500; /* Dark orange */ color: #000000; /* White text */ @@ -194,88 +194,40 @@ fieldset { border-radius: 8px; cursor: pointer; margin: 0.5rem; - font-size: 1.2rem; } - .btn:hover { background: #ff5500; /* Slightly darker orange for hover */ } - .btn:focus { outline: 3px solid #ff6600; /* Orange outline on focus for accessibility */ } - footer { background: var(--bg-secondary); /* Dark footer background */ color: var(--color-white); /* White text in footer */ text-align: center; padding: 1rem; +} /* MEDIA QUEREIES */ +@media (max-width: 768px) { + .team-cards-container { + grid-template-columns: repeat(2, 1fr); /* Two columns on smaller screens */ + } } - -/* MEDIA QUEREIES */ @media (max-width: 480px) { - body { - font-size: 0.875rem; - } - .team-cards-container { - grid-template-columns: repeat(2, 1fr); /* Single column layout */ - } - - .team-card { - /* max-width: 100%; */ - grid-template-columns: 1fr; /* Stack items */ - text-align: center; - } - - .team-card img { - width: 100px; - height: 100px; - } - - .btn { - width: 100%; - } - - nav ul { - flex-direction: column; /* Stack navigation links */ - align-items: center; + grid-template-columns: 1fr; /* Single column for small screens */ } } - +/* Add responsiveness for adjustable text size */ @media (max-width: 768px) { - .hero-section { - padding: 1.5rem; - } - - .team-cards-container { - grid-template-columns: repeat(2, 1fr); /* Two columns */ - } - - .quiz-section { + .quiz-result-section { + font-size: 1.5rem; /* Smaller text on tablets */ padding: 1.5rem; } - - .quiz-result-section p { - font-size: 1.2rem; - } } - -@media (min-width: 769px) and (max-width: 1200px) { - .team-cards-container { - grid-template-columns: repeat(3, 1fr); /* Three columns */ - } - - .quiz-section { - margin: 0 auto; - } -} -@media (min-width: 1201px) { - .team-cards-container { - grid-template-columns: repeat(2, 1fr); /* Four columns */ - } - - .quiz-section { - margin: 0 auto; +@media (max-width: 480px) { + .quiz-result-section { + font-size: 1.2rem; /* Even smaller text for mobile */ + padding: 1rem; + max-width: 90%; } } From 4ef999d70403e41196d8875dcd3e658da6922402 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Wed, 2 Apr 2025 15:06:17 +0200 Subject: [PATCH 31/37] adding accessibility in html, js and styling --- css/styles.css | 125 +++++++++++++++++++++++++++++++++++++------------ index.html | 32 ++++++------- js/main.js | 37 ++++++--------- 3 files changed, 124 insertions(+), 70 deletions(-) diff --git a/css/styles.css b/css/styles.css index 04890fe..59dc49a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -24,26 +24,28 @@ body { margin: 0; line-height: 1.6; } + +.skip-link { + position: absolute; + top: -45px; + left: 0; + background: var(--nf-bg-2); + color: white; + padding: 8px; + z-index: 100; + transition: top 0.3s; +} + +.skip-link:focus { + top: 0; + outline: var(--focus-outline); + outline-offset: 2px; +} + header { background: var(--color-featured); /* Featured color */ padding: 1rem; } -.question { - background: var(--bg-white); /* Light grey background */ - padding: 1.5rem; - margin: 1rem 0; -} -.quiz-form { - font-size: 2rem; -} -.quiz-section { - max-width: 800px; - margin: 0 auto; - padding: 3rem; - color: var(--bg-primary); - font-size: 1.2rem; - text-align: center; -} nav ul { display: flex; justify-content: center; /* Centers items horizontally */ @@ -58,32 +60,44 @@ nav a { color: var(--color-primary); /* Dark text for links */ text-decoration: none; } + nav a:hover { - color: var(--color-orange); /* Highlight on hover */ + color: white; + transition: all 0.3s ease; +} + +footer nav a { + color: white; +} + +footer nav a:hover { + color: #ff5500; } .hero-section { background: var(--nf-bg-2); /* Very dark blue */ - padding: 2rem; + padding: 4rem; text-align: center; color: var(--color-white); /* White text on dark background */ } .hero-section h1 { color: var(--bg-primary); /* Blue heading */ - font-size: 4rem; + font-size: 4.5rem; + margin-bottom: 4rem; } .hero-section p { - font-size: 1.5rem; + font-size: 2rem; + margin-bottom: 3rem; } .about-section { background: #333333; /* Light background */ padding: 2rem; } .about-section h2 { - font-size: 3rem; + font-size: 2.5rem; margin-bottom: 2rem; } .about-section p { - font-size: 2.5rem; + font-size: 1.7rem; margin-bottom: 2rem; } .team-cards-container { @@ -116,6 +130,23 @@ nav a:hover { font-size: 1.2rem; line-height: 1.6; } + +/* QUIZ SECTION */ +.question { + background: var(--bg-white); /* Light grey background */ + padding: 1.5rem; + margin: 1rem 0; +} +.quiz-form { + font-size: 2rem; +} +.quiz-section { + max-width: 800px; + margin: 0 auto; + padding: 3rem; + color: var(--bg-primary); + font-size: 1.2rem; +} .quiz-section { /* Light grey */ padding: 3rem; @@ -144,28 +175,46 @@ nav a:hover { line-height: 1.6; } legend { - font-size: 2.4em; + font-size: 1.7rem; color: #ffffff; } label { - font-size: 1.5em; + font-size: 1.5rem; color: #ffffff; } fieldset { padding: 1rem; margin-bottom: 2rem; } + .quiz-option { margin-bottom: 10px; } + +input[type="radio"] { + accent-color: #ff5500; +} + +input[type="radio"]:focus-visible { + outline: 2px solid #ff5500; + outline-offset: 2px; + border-radius: 2px; +} + +input[type="radio"]:focus-visible + label { + outline: 2px solid #ff5500; + outline-offset: 2px; + border-radius: 2px; +} + .quiz-result-section { font-size: 2rem; /* Default text size */ background: var(--nf-bg-3); /* Dark gray */ padding: 2rem; background-color: #f0a500; /* Featured color */ color: var(--color-white); /* White text */ - text-align: center; /* Center text */ - margin: 2rem auto; /* Centers the section horizontally */ + /* text-align: center; Center text */ + /* margin: 2rem auto; Centers the section horizontally */ max-width: 80%; /* Limits width for better readability */ border-radius: 12px; /* Soft rounded corners */ } @@ -176,17 +225,24 @@ fieldset { padding: 1rem; border-radius: 8px; } + .quiz-content.quiz-section { display: flex; flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; + /* align-items: center; + justify-content: center; */ padding: 2rem; max-width: 80%; margin: 0 auto; } + +.btns-container { + display: flex; + gap: 2rem; +} + .btn { + /* display: block; */ background: #f0a500; /* Dark orange */ color: #000000; /* White text */ padding: 0.75rem 1.5rem; @@ -194,19 +250,26 @@ fieldset { border-radius: 8px; cursor: pointer; margin: 0.5rem; + font-size: 16px; } .btn:hover { - background: #ff5500; /* Slightly darker orange for hover */ + background: #ff5500; + transition: all 0.3s ease; } .btn:focus { outline: 3px solid #ff6600; /* Orange outline on focus for accessibility */ } +.hidden { + display: none; +} footer { background: var(--bg-secondary); /* Dark footer background */ color: var(--color-white); /* White text in footer */ text-align: center; padding: 1rem; -} /* MEDIA QUEREIES */ +} + +/* MEDIA QUEREIES */ @media (max-width: 768px) { .team-cards-container { grid-template-columns: repeat(2, 1fr); /* Two columns on smaller screens */ diff --git a/index.html b/index.html index 00e1fed..2b46887 100644 --- a/index.html +++ b/index.html @@ -30,16 +30,14 @@ --> -

Test Your Web Accessibility Knowledge!

-

- Put your web accessibility skills to the test with our quick quiz! -

+

Test Your Web Accessibility Knowledge!

+

Put your web accessibility skills to the test with our quick quiz!

-

About Us!

-

+

About Us!

+

Meet the team behind the quiz! We're passionate about web accessibility and dedicated to creating resources that promote a more inclusive internet for all. @@ -48,11 +46,11 @@

About Us!

-

Therese

-

+

Therese

+

Therese is a front-end developer who’s passionate about building accessible, user-centric designs that make the web easier to navigate for everyone. @@ -61,11 +59,11 @@

Therese

-

Darius

-

+

Darius

+

Darius specialises in front-end development, crafting clean, intuitive user interfaces that ensure an inclusive experience across all devices and platforms @@ -74,11 +72,11 @@

Darius

-

Christina

-

+

Christina

+

Christina focuses on creating responsive, accessible web experiences, working to ensure that every user, regardless of ability, can enjoy seamless interaction with websites. @@ -88,8 +86,8 @@

Christina

-

Accessibility Quiz!

-

+

Accessibility Quiz!

+

Answer the following questions, then click the submit button once you're done. You can only select one answer per question.

diff --git a/js/main.js b/js/main.js index 7ff2921..c0daa48 100644 --- a/js/main.js +++ b/js/main.js @@ -92,11 +92,6 @@ const quizQuestions = [ altAnswerThree: "14px for desktop, 10px for mobile", }, ]; -console.log("quizQuestions.length at startup:", quizQuestions.length); - -// SELECTORS -const quizSection = document.querySelector(".quiz-section"); -let quizForm; // HERO BUTTON SCROLL const ctaBtn = document.querySelector(".cta-btn"); @@ -106,23 +101,22 @@ ctaBtn.addEventListener("click", () => { }); // QUIZ QUESTIONS +const quizSection = document.querySelector(".quiz-section"); +let quizForm; let answers = []; let currentQuestionIndex = 0; const saveAnswer = (questionIndex, selectedAnswer) => { answers[questionIndex] = selectedAnswer; - console.log( - `Selected Answer for question ${questionIndex + 1}: ${selectedAnswer}` - ); }; const displayQuizQuestions = () => { quizSection.innerHTML = ""; quizSection.innerHTML = ` -

Accessibility Quiz!

-

+

Accessibility Quiz!

+

Answer the following questions, then click the submit button once you're done. You can only select one answer per question.

@@ -158,7 +152,7 @@ const displayQuizQuestions = () => { quizContainer.innerHTML = `
- ${currentQuizQuestion.question} + ${currentQuizQuestion.question} ${quizAnswers .map((answer, i) => { return `
@@ -173,9 +167,10 @@ const displayQuizQuestions = () => { }) .join("")}
-

+ `; const quizInputs = document.querySelectorAll( @@ -185,12 +180,14 @@ const displayQuizQuestions = () => { quizInputs.forEach((input) => { input.addEventListener("change", (e) => { saveAnswer(currentQuestionIndex, e.target.value); - console.log("Answers array after saving each answer:", answers); updateNextButtonState(); }); }); + quizInputs[0].focus(); + const warningMessage = document.getElementById("warning-message"); + const announcer = document.getElementById("announcer"); const updateNextButtonState = () => { const questionAnswered = Array.from(quizInputs).some( @@ -222,6 +219,7 @@ const displayQuizQuestions = () => { if (currentQuestionIndex === quizQuestions.length - 1) { nextBtn.textContent = "No more questions"; + announcer.textContent = "This is the final question."; submitBtn.classList.remove("hidden"); nextBtn.disabled = true; submitBtn.disabled = false; @@ -251,20 +249,14 @@ const displayQuizQuestions = () => { } }); - document.addEventListener("click", (e) => { - if (e.target.classList.contains("submit-btn")) { - e.preventDefault(); - console.log("Submit button clicked!"); - console.log("final answers array:", answers); - displayQuizResults(); - } + quizForm.addEventListener("submit", (e) => { + e.preventDefault(); + displayQuizResults(); }); }; // QUIZ RESULTS const displayQuizResults = () => { - console.log("Answers array before filtering:", answers); - const correctAnswers = answers.filter((answer) => answer === "correct"); const result = `${correctAnswers.length} / ${answers.length}`; @@ -281,6 +273,7 @@ const displayQuizResults = () => { quizSection.innerHTML = `

Your Results!

${resultText} You got ${result}!

+
From 6e622d456bc099deb33a9268b664ea27a8379786 Mon Sep 17 00:00:00 2001 From: christina-baldwin Date: Thu, 3 Apr 2025 13:49:59 +0200 Subject: [PATCH 32/37] more accessibility and styling --- css/styles.css | 52 ++++++++++++------- index.html | 135 +++++++++++++++++++++++++------------------------ js/main.js | 8 +-- 3 files changed, 105 insertions(+), 90 deletions(-) diff --git a/css/styles.css b/css/styles.css index 59dc49a..7d6d100 100644 --- a/css/styles.css +++ b/css/styles.css @@ -22,7 +22,12 @@ body { color: var(--bg-primary); /* White text */ font-family: sans-serif; margin: 0; - line-height: 1.6; + line-height: 1.5; +} + +.content-container { + max-width: 2500px; + margin: 0 auto; } .skip-link { @@ -46,15 +51,17 @@ header { background: var(--color-featured); /* Featured color */ padding: 1rem; } + nav ul { display: flex; justify-content: center; /* Centers items horizontally */ align-items: center; /* Aligns items vertically */ - gap: 1rem; + gap: 2rem; list-style: none; margin: 0 auto; /* Centers within the parent */ padding: 0; } + nav a { font-size: 1.5rem; color: var(--color-primary); /* Dark text for links */ @@ -73,32 +80,34 @@ footer nav a { footer nav a:hover { color: #ff5500; } + .hero-section { background: var(--nf-bg-2); /* Very dark blue */ - padding: 4rem; + padding: 6rem 3rem; text-align: center; color: var(--color-white); /* White text on dark background */ } + .hero-section h1 { color: var(--bg-primary); /* Blue heading */ font-size: 4.5rem; - margin-bottom: 4rem; + margin-bottom: 7rem; } .hero-section p { font-size: 2rem; - margin-bottom: 3rem; + margin-bottom: 5rem; } .about-section { background: #333333; /* Light background */ - padding: 2rem; + padding: 3rem; } .about-section h2 { font-size: 2.5rem; - margin-bottom: 2rem; + margin-bottom: 4rem; } .about-section p { font-size: 1.7rem; - margin-bottom: 2rem; + margin-bottom: 3rem; } .team-cards-container { display: grid; @@ -116,19 +125,21 @@ footer nav a:hover { background: var(--bg-4rd); border: 1px solid var(--border-gray); text-align: center; + max-width: 100%; } + .team-card h3 { color: var(--color-primary); font-size: 2rem; } + .team-card img { - grid-row: span 2; - /* Adjusted size for better visibility */ + max-width: 100%; } + .team-card p { color: var(--color-primary); font-size: 1.2rem; - line-height: 1.6; } /* QUIZ SECTION */ @@ -166,13 +177,11 @@ footer nav a:hover { font-size: 1.5rem; margin-bottom: 2rem; color: var(--bg-primary); /* Dark blue for headings */ - line-height: 1.6; } .quiz-section p { font-size: 1.5rem; margin-bottom: 2rem; color: var(--bg-primary); /* Dark blue for headings */ - line-height: 1.6; } legend { font-size: 1.7rem; @@ -242,7 +251,6 @@ input[type="radio"]:focus-visible + label { } .btn { - /* display: block; */ background: #f0a500; /* Dark orange */ color: #000000; /* White text */ padding: 0.75rem 1.5rem; @@ -250,7 +258,7 @@ input[type="radio"]:focus-visible + label { border-radius: 8px; cursor: pointer; margin: 0.5rem; - font-size: 16px; + font-size: 1.4rem; } .btn:hover { background: #ff5500; @@ -272,21 +280,27 @@ footer { /* MEDIA QUEREIES */ @media (max-width: 768px) { .team-cards-container { - grid-template-columns: repeat(2, 1fr); /* Two columns on smaller screens */ + grid-template-columns: repeat(1, 1fr); /* Two columns on smaller screens */ } } + @media (max-width: 480px) { - .team-cards-container { - grid-template-columns: 1fr; /* Single column for small screens */ - } + /* .team-cards-container { + grid-template-columns: repeat(1, 1fr); + } */ } + /* Add responsiveness for adjustable text size */ @media (max-width: 768px) { + html { + font-size: 80%; + } .quiz-result-section { font-size: 1.5rem; /* Smaller text on tablets */ padding: 1.5rem; } } + @media (max-width: 480px) { .quiz-result-section { font-size: 1.2rem; /* Even smaller text for mobile */ diff --git a/index.html b/index.html index 2b46887..8b186c9 100644 --- a/index.html +++ b/index.html @@ -25,77 +25,78 @@ -
- +
-
-

About Us!

-

- Meet the team behind the quiz! We're passionate about web accessibility - and dedicated to creating resources that promote a more inclusive - internet for all. -

-
-
- Photo of team member -

Therese

-

- Therese is a front-end developer who’s passionate about building - accessible, user-centric designs that make the web easier to - navigate for everyone. -

+
+

About Us!

+

+ Meet the team behind the quiz! We're passionate about web + accessibility and dedicated to creating resources that promote a more + inclusive internet for all. +

+ -
- Photo of team member -

Darius

-

- Darius specialises in front-end development, crafting clean, - intuitive user interfaces that ensure an inclusive experience across - all devices and platforms -

-
-
- Photo of team member -

Christina

-

- Christina focuses on creating responsive, accessible web - experiences, working to ensure that every user, regardless of - ability, can enjoy seamless interaction with websites. -

-
-
-
- -
-

Accessibility Quiz!

-

- Answer the following questions, then click the submit button once you're - done. You can only select one answer per question. -

-
-
-
-
+
+
+

Accessibility Quiz!

+

+ Answer the following questions using space to select an option, then + click the submit button once you're done. You can only select one + answer per question. +

+
+
+
+
+