diff --git a/IMG/1c50e360-893f-4a77-8523-445ac92ee031.jpg b/IMG/1c50e360-893f-4a77-8523-445ac92ee031.jpg new file mode 100644 index 0000000..10c5787 Binary files /dev/null and b/IMG/1c50e360-893f-4a77-8523-445ac92ee031.jpg differ diff --git a/IMG/944faf04-56af-4b26-8775-09174491bd62.jpg b/IMG/944faf04-56af-4b26-8775-09174491bd62.jpg new file mode 100644 index 0000000..2042922 Binary files /dev/null and b/IMG/944faf04-56af-4b26-8775-09174491bd62.jpg differ diff --git a/IMG/97e866db-9ce7-42ba-a3af-122746ac226f.jpg b/IMG/97e866db-9ce7-42ba-a3af-122746ac226f.jpg new file mode 100644 index 0000000..a18324d Binary files /dev/null and b/IMG/97e866db-9ce7-42ba-a3af-122746ac226f.jpg differ diff --git a/README.md b/README.md index 57e6d16..af65a50 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ # Web Accessibility Project -A basic web server template focused on web accessibility practices. +A web accessibility quiz built to use and test web accessibility practices. -### Installation +Team: Therese, Darius, Christina -1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page. +### Deployed site -2. Clone your forked repository +accessibility-quiz-wind-3.netlify.app 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 e69de29..192a47b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,369 @@ +* { + margin: 0; + padding: 0; +} +:root { + --bg-primary: #ffffff; /* White background */ + --color-primary: #333333; /* Dark grey text */ + --color-featured: #f0a500; /* Featured color (yellow/orange) */ + --color-connect: #f2f2f3; /* Dark blue for headings */ + --bg-white: #f9f9f9; /* Light grey background */ + --border-gray: #cccccc; /* Light grey borders */ + --bg-4rd: #f1f1f1; /* Light grey for cards */ + --nf-bg-1: #2e3a59; /* Dark blue for quiz section */ + --nf-bg-2: #1a1c2c; /* Very dark blue for hero section */ + --nf-bg-3: #343a40; /* Dark gray for results section */ + --color-orange: #ff6600; /* Dark orange for buttons */ + --color-white: #ffffff; /* White text */ + --bg-secondary: #222222; /* Dark background for footer */ +} +body { + background: #2e3a59; + color: var(--bg-primary); /* White text */ + font-family: sans-serif; + margin: 0; + line-height: 1.5; +} + +.content-container { + max-width: 2500px; + margin: 0 auto; +} + +.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; +} + +nav ul { + display: flex; + justify-content: center; /* Centers items horizontally */ + align-items: center; /* Aligns items vertically */ + 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 */ + text-decoration: none; +} + +nav a:focus-visible { + outline: 2px solid #ff5500; + outline-offset: 2px; + border-radius: 2px; +} + +nav a: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: 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: 7rem; +} +.hero-section p { + font-size: 2rem; + margin-bottom: 5rem; +} +.about-section { + background: #333333; /* Light background */ + padding: 3rem; +} +.about-section h2 { + font-size: 2.5rem; + margin-bottom: 4rem; +} +.about-section p { + font-size: 1.7rem; + margin-bottom: 3rem; +} +.team-cards-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + padding: 1rem; +} +.team-card { + display: grid; /* Keeps content aligned inside */ + flex-direction: column; + align-items: center; + justify-content: center; + padding: 1rem; + 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 { + max-width: 100%; +} + +.team-card p { + color: var(--color-primary); + font-size: 1.2rem; +} + +/* 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; + /* 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; +} +.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 */ +} +.quiz-section p { + font-size: 1.5rem; + margin-bottom: 2rem; + color: var(--bg-primary); /* Dark blue for headings */ +} +legend { + font-size: 1.7rem; + color: #ffffff; +} +label { + 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 */ + 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-content.quiz-section { + display: flex; + flex-direction: column; + /* align-items: center; + justify-content: center; */ + padding: 2rem; + max-width: 80%; + margin: 0 auto; +} + +.btns-container { + display: flex; + gap: 2rem; +} + +.btn { + background: #f0a500; /* Dark orange */ + color: #000000; /* White text */ + padding: 0.75rem 1.5rem; + border: none; + border-radius: 8px; + cursor: pointer; + margin: 0.5rem; + font-size: 1.4rem; +} +.btn:hover { + background: #ff5500; + transform: translate(3px, -3px); + transition: all 0.3s ease-in-out; +} +.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; +} + +/* HIGH CONTRAST MODE */ + +body.dark-mode { + background-color: black; + color: white; +} + +body.dark-mode header { + background-color: white; +} + +body.dark-mode nav a { + color: black; +} + +body.dark-mode nav a:hover { + color: black; + text-decoration: underline; +} + +body.dark-mode .hero-section { + background-color: black; + color: white; +} + +body.dark-mode .btn { + background-color: white; + color: black; +} + +body.dark-mode .about-section { + background-color: black; + color: white; +} + +body.dark-mode .team-card h3 { + color: black; +} + +body.dark-mode footer { + background-color: white; + color: black; +} + +body.dark-mode footer nav a { + color: black; +} + +body.dark-mode footer nav a:hover { + color: black; + text-decoration: underline; +} + +/* MEDIA QUEREIES */ +@media (max-width: 768px) { + .team-cards-container { + grid-template-columns: repeat(1, 1fr); /* Two columns on smaller screens */ + } +} + +@media (max-width: 480px) { + /* .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 */ + padding: 1rem; + max-width: 90%; + } +} diff --git a/index.html b/index.html index a9a33db..28db690 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,122 @@ - + - Title + Accessibility Quiz + -

This is the starting point.

+ + +
+ +
+ + + diff --git a/js/main.js b/js/main.js index e69de29..0746ff9 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,307 @@ +const quizQuestions = [ + { + questionNumber: 1, + question: "What does WCAG stand for?", + correctAnswer: "Web Content Accessibility Guidelines", + altAnswerOne: "Website Compliance and Accessibility Guide", + altAnswerTwo: "Web Coding Accessibility Guide", + altAnswerThree: "Website Content Accessibility Group", + }, + + { + questionNumber: 2, + question: "Which HTML attribute provides alternative text for images?", + correctAnswer: "alt", + altAnswerOne: "title", + altAnswerTwo: "aria-label", + altAnswerThree: "desc", + }, + + { + questionNumber: 3, + question: "What is the purpose of semantic HTML?", + correctAnswer: + "To improve accessibility and SEO by using meaningful elements", + 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?", + correctAnswer: "Using only color to convey information", + altAnswerOne: "Adding captions to videos", + altAnswerTwo: "Ensuring good keyboard navigation", + altAnswerThree: "Providing alternative text for images", + }, + + { + questionNumber: 5, + question: "Which feature improves keyboard navigation?", + correctAnswer: "Adding tabindex to interactive elements", + altAnswerOne: "Disabling the tab key", + altAnswerTwo: "Using only mouse-friendly UI components", + altAnswerThree: "Removing focus outlines", + }, + + { + questionNumber: 6, + question: "Why should you avoid autoplaying videos with sound?", + correctAnswer: "It can be disruptive and inaccessible to some users", + 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?", + correctAnswer: "Use descriptive link text instead of 'Click here'", + 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?", + correctAnswer: "header, nav, main, footer", + altAnswerOne: "div, span, b, i", + altAnswerTwo: "section, article, aside, hr", + altAnswerThree: "p, h1, h2, h3", + }, + + { + questionNumber: 9, + question: "What does POUR stand for?", + correctAnswer: "Perceivable Operable Understandable Robust", + altAnswerOne: "Provide Offer Uplift and Rebuild", + altAnswerTwo: "Perceivable Operable Usable Reliable", + altAnswerThree: "Place of Usual Residence", + }, + + { + 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", + altAnswerThree: "14px for desktop, 10px for mobile", + }, +]; + +// DARK MODE BUTTON FUNCTIONALITY +const darkLightFunc = () => { + const darkModeBtn = document.getElementById("dark-mode-btn"); + darkModeBtn.addEventListener("click", (e) => { + e.preventDefault(); + const element = document.body; + element.classList.toggle("dark-mode"); + }); +}; +darkLightFunc(); + +// 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 quizSection = document.querySelector(".quiz-section"); +let quizForm; +let answers = []; + +let currentQuestionIndex = 0; + +const saveAnswer = (questionIndex, selectedAnswer) => { + answers[questionIndex] = selectedAnswer; +}; + +const displayQuizQuestions = () => { + quizSection.innerHTML = ""; + + quizSection.innerHTML = ` +

Accessibility Quiz!

+

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

+
+
+
+ + + +
+
+ `; + + quizForm = document.getElementById("quiz-form"); + const nextBtn = document.querySelector(".next-btn"); + const prevBtn = document.querySelector(".prev-btn"); + const submitBtn = document.querySelector(".submit-btn"); + + const displayCurrentQuestion = () => { + const currentQuizQuestion = quizQuestions[currentQuestionIndex]; + + let quizAnswers = [ + { 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 = `
+ ${currentQuizQuestion.question} + ${quizAnswers + .map((answer, i) => { + return `
+ + +
+ `; + }) + .join("")} +
+

+ +

+ + `; + + const quizInputs = document.querySelectorAll( + `input[name="q${currentQuizQuestion.questionNumber}"]` + ); + + quizInputs.forEach((input) => { + input.addEventListener("change", (e) => { + saveAnswer(currentQuestionIndex, e.target.value); + updateNextButtonState(); + }); + }); + + const warningMessage = document.getElementById("warning-message"); + const announcer = document.getElementById("announcer"); + + 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(); + + // if (currentQuestionIndex === 0 && quizInputs.length > 0) { + // quizInputs[0].focus(); + // } + + 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"; + announcer.textContent = "This is the final question."; + submitBtn.classList.remove("hidden"); + nextBtn.disabled = true; + submitBtn.disabled = false; + } else { + nextBtn.textContent = "Next question"; + submitBtn.classList.add("hidden"); + submitBtn.disabled = true; + } + }; + + displayCurrentQuestion(); + + nextBtn.addEventListener("click", () => { + if (currentQuestionIndex < quizQuestions.length - 1) { + currentQuestionIndex++; + displayCurrentQuestion(); + const quizInputs = document.querySelectorAll(`.quiz-input`); + if (quizInputs.length > 0) { + quizInputs[0].focus(); + }; + prevBtn.disabled = false; + } else if (currentQuestionIndex === quizQuestions.length - 1) { + nextBtn.disabled = true; + } + }); + + prevBtn.addEventListener("click", () => { + if (currentQuestionIndex > 0) { + currentQuestionIndex--; + displayCurrentQuestion(); + } + }); + + quizForm.addEventListener("submit", (e) => { + e.preventDefault(); + displayQuizResults(); + }); +}; + +// QUIZ RESULTS +const displayQuizResults = () => { + 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!

+

${resultText} You got ${result}!

+ +
+ + +
`; + + const retakeQuizBtn = document.querySelector(".retake-btn"); + const toHomeBtn = document.querySelector(".home-btn"); + + retakeQuizBtn.addEventListener("click", () => { + answers = []; + currentQuestionIndex = 0; + displayQuizQuestions(); + }); + + toHomeBtn.addEventListener("click", () => { + const homeSection = document.getElementById("home-content"); + homeSection.scrollIntoView({ behavior: "smooth" }); + }); +}; + +document.addEventListener("DOMContentLoaded", displayQuizQuestions);