diff --git a/about.html b/about.html index 5adbad6..a383912 100644 --- a/about.html +++ b/about.html @@ -1,10 +1,63 @@ - - - - - About - - - - + + + + + + About - Website Feedback + + + + + + + +
+
+

About me

+

+ We are committed to making our website accessible to everyone. Your + feedback helps us improve and create a better experience for all + users. +

+
+ Accessibility illustration +
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/assets/accebilityimagefalse.png b/assets/accebilityimagefalse.png new file mode 100644 index 0000000..28b88c1 Binary files /dev/null and b/assets/accebilityimagefalse.png differ diff --git a/assets/accebilityimagetrue.png b/assets/accebilityimagetrue.png new file mode 100644 index 0000000..99b9c67 Binary files /dev/null and b/assets/accebilityimagetrue.png differ diff --git a/assets/accessibility-image.png b/assets/accessibility-image.png new file mode 100644 index 0000000..660141f Binary files /dev/null and b/assets/accessibility-image.png differ diff --git a/assets/banner.jpeg b/assets/banner.jpeg new file mode 100644 index 0000000..781489c Binary files /dev/null and b/assets/banner.jpeg differ diff --git a/assets/banner.png b/assets/banner.png new file mode 100644 index 0000000..02f07c2 Binary files /dev/null and b/assets/banner.png differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..d58ff65 --- /dev/null +++ b/contact.html @@ -0,0 +1,75 @@ + + + + + + + About - Website Feedback + + + + + + + +
+
+

About Our Website Feedback Initiative.

+

+ We are committed to making our website accessible to everyone. Your + feedback helps us improve and create a better experience for all + users. +

+
+ Accessibility illustration +
+ +
+

Accessibility Features

+
+
+

+ +

+ +
+ +
+

+ +

+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index e69de29..e41022b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,840 @@ +/* Base styles with accessibility considerations */ +:root { + --primary-color: #461535; + --background-color: #ffffff; + --accent-color: #0040a3; + /* Darker blue for better contrast */ + --error-color: #e74c3c; + --success-color: #27ae60; + --focus-outline: 3px solid var(--accent-color); + --focus-ring-color: rgba(0, 86, 179, 0.5); + --progress-bg: #edf2f7; + --text-color: #2c3e50; + --border-color: #e2e8f0; + --hover-bg: rgba(0, 0, 0, 0.05); + --transition-speed: 0.3s; +} + +/* Apply box-sizing border-box to all elements */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Checkbox styling */ +.checkbox-container { + display: flex; + align-items: center; + margin-bottom: 0.5rem; +} + +.checkbox-container input[type='checkbox'] { + width: auto; + margin-right: 0.5rem; +} + +select { + width: 100%; + padding: 0.5rem; + font-size: 1rem; + border-radius: 4px; + border: 1px solid var(--primary-color); +} + +.checkbox-container label { + margin-bottom: 0; +} + +.intro-section { + display: flex; + gap: 1rem; + align-items: center; + justify-content: space-between; +} + +/* Base styles for readability */ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, + sans-serif; + line-height: 1.6; + color: var(--primary-color); + background-color: var(--background-color); + margin: 0; + font-size: 16px; + max-width: 800px; + margin: 0 auto; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +/* Skip link with enhanced visibility */ +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: var(--accent-color); + color: white; + padding: 8px; + z-index: 100; + transition: top 0.3s; +} + +.skip-link:focus { + top: 0; + outline: var(--focus-outline); + outline-offset: 2px; +} + +/* Enhanced focus styles */ +:focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; + border-radius: 2px; +} + +/* Progress bar styles */ +.quiz-progress { + margin: 2rem 0; +} + +/* Images */ +.decorative-image, +.info-image { + max-width: 15rem; + height: auto; + margin: 1rem 0; + border-radius: 4px; +} + +.progress-bar { + background-color: var(--progress-bg); + border-radius: 8px; + height: 20px; + overflow: hidden; + position: relative; +} + +.progress-fill { + background-color: var(--primary-color); + height: 100%; + transition: width 0.3s ease; + border-radius: 8px; +} + +.progress-text { + margin-top: 0.5rem; + text-align: center; + font-weight: 500; +} + +/* Question groups */ +.question-group { + margin-bottom: 2rem; + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 8px; + background-color: #f8fafc; +} + +.question-heading { + color: var(--primary-color); + margin-bottom: 1rem; + font-size: 1.1rem; +} + +/* Form elements */ +fieldset { + border: 1px solid var(--primary-color); + margin: 1em 0; + padding: 1em; + border-radius: 4px; +} + +legend { + font-weight: bold; + padding: 0.5em 1em; + color: var(--primary-color); + background-color: #f8fafc; + border: 1px solid var(--primary-color); + border-radius: 4px; +} + +.radio-group { + margin: 1em 0; +} + +/* Enhanced radio button styling */ +.radio-option { + position: relative; + padding: 0.75em; + margin: 0.5em 0; + border-radius: 4px; + transition: background-color 0.2s; + display: flex; + align-items: center; +} + +.radio-option:hover { + background-color: rgba(44, 62, 80, 0.1); +} + +/* Custom radio button styling */ +input[type='radio'] { + margin-right: 0.75em; + width: 20px; + height: 20px; +} + +input[type='radio']:focus-visible+label { + outline: var(--focus-outline); + outline-offset: 2px; + border-radius: 2px; +} + +input[type='radio']+label { + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + transition: background-color 0.2s; + flex: 1; +} + +/* Instructions section */ +.quiz-instructions { + background-color: #f8f9fa; + padding: 1em; + margin: 1em 0; + border-left: 4px solid var(--accent-color); + border-radius: 0 4px 4px 0; +} + +/* Submit button */ +.form-controls { + margin-top: 2rem; + text-align: center; +} + +.submit-button { + background-color: var(--primary-color); + color: white; + border: none; + padding: 12px 24px; + font-size: 1rem; + cursor: pointer; + border-radius: 4px; + transition: background-color 0.2s, transform 0.1s; + font-weight: 500; +} + +.submit-button:hover { + background-color: #34495e; +} + +.submit-button:active { + transform: scale(0.98); +} + +.submit-button:focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; +} + +/* Results section */ +#results { + margin-top: 2rem; + padding: 1.5rem; + border-radius: 8px; + background-color: #f8fafc; + border: 1px solid var(--primary-color); + margin-bottom: 3rem; +} + +.feedback-details { + margin-top: 1rem; + padding: 1rem; + border-radius: 4px; +} + +#feedback-form { + margin-bottom: 3rem; +} + +/* Utility classes */ +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + overflow: hidden !important; + clip: rect(0 0 0 0) !important; + white-space: nowrap !important; + } + + #loading-indicator.active { + position: static !important; + width: auto !important; + height: auto !important; + overflow: visible !important; + clip: auto !important; + margin-top: 1rem; + font-weight: bold; + } + +/* High contrast mode */ +@media (prefers-contrast: more) { + :root { + --primary-color: #000000; + --background-color: #ffffff; + --accent-color: #0000ff; + --error-color: #ff0000; + --success-color: #008000; + --text-color: #000000; + --border-color: #000000; + --hover-bg: #000000; + --focus-outline: 3px solid #000000; + --focus-ring-color: #000000; + --progress-bg: #ffffff; + } + + body { + background-color: var(--background-color); + color: var(--text-color); + } + + a { + color: var(--accent-color); + text-decoration: underline; + } + + button, + input, + select, + textarea { + border: 2px solid var(--text-color); + background-color: var(--background-color); + color: var(--text-color); + } + + fieldset { + border: 2px solid var(--text-color); + } + + legend { + border: 2px solid var(--text-color); + background-color: var(--background-color); + } + + .radio-option:hover, + .checkbox-container:hover { + background-color: var(--hover-bg); + } + + .progress-bar { + border: 2px solid var(--text-color); + } + + .progress-fill { + background-color: var(--text-color); + } +} + +/* Reduced motion */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + + .progress-fill { + transition: none; + } + + .skip-link { + transition: none; + } + + button, + input, + select, + textarea { + transition: none; + } +} + +/* Add a class for manual high contrast toggle */ +.high-contrast-mode { + --primary-color: #000000 !important; + --background-color: #ffffff !important; + --accent-color: #0000ff !important; + --error-color: #ff0000 !important; + --success-color: #008000 !important; + --text-color: #000000 !important; + --border-color: #000000 !important; + --hover-bg: #000000 !important; + --focus-outline: 3px solid #000000 !important; + --focus-ring-color: #000000 !important; + --progress-bg: #ffffff !important; +} + +/* Basic responsive design */ +@media (max-width: 600px) { + fieldset { + padding: 0.5em; + } + + header { + padding: 1.25rem; + } + + nav ul { + gap: 0.75rem; + } +} + +/* User Info Form */ +#user-info { + margin-bottom: 2rem; + padding: 1.5rem; + background-color: #f8fafc; + border-radius: 8px; + border: 1px solid #e2e8f0; +} + +.form-control { + margin-bottom: 1.5rem; + position: relative; +} + +.form-control label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--primary-color); +} + +.form-control input { + width: 100%; + padding: 0.75rem; + font-size: 1rem; + border: 1px solid var(--primary-color); + border-radius: 4px; + transition: border-color 0.2s, box-shadow 0.2s; + box-sizing: border-box; +} + +.form-control input:focus { + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 0 3px var(--focus-ring-color); +} + +.form-control input[aria-invalid='true'] { + border-color: var(--error-color); +} + +.form-control input[aria-invalid='true']:focus { + box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.25); +} + +.error { + color: var(--error-color); + font-size: 0.875rem; + margin-top: 0.25rem; +} + +.hint { + color: var(--secondary-color); + font-size: 0.875rem; + margin-top: 0.25rem; +} + +/* Introduction section and images */ +#introduction { + padding: 2rem; + margin-bottom: 2rem; + background-color: #f8fafc; + border-radius: 12px; +} + +#introduction h2 { + color: var(--primary-color); + font-size: 2rem; + margin-bottom: 1.5rem; +} + +#introduction p { + max-width: 800px; + margin: 0 auto 2rem; +} + +.hero-images { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + margin: 2rem 0; +} + +.decorative-image, +.info-image { + max-width: 100%; + height: auto; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.info-image { + padding: 1rem; + background: white; +} + +@media (min-width: 768px) { + .hero-images { + flex-direction: row; + justify-content: center; + gap: 3rem; + } + + .decorative-image, + .info-image { + width: 45%; + max-width: 400px; + } +} + +/* Full-width banner */ +#banner { + margin: -20px -20px 2rem; + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; + overflow: hidden; +} + +#banner img { + width: 100%; + height: 200px; + object-fit: cover; +} + +h1, +h2 { + margin-bottom: 1rem; +} + +nav ul { + list-style: none; + padding: 0; + display: flex; + gap: 1rem; +} + +nav a { + color: var(--accent-color); + text-decoration: none; +} + +nav a:hover { + text-decoration: underline; +} + +/* About page specific styles */ +#about { + padding: 3rem; + background-color: #f8fafc; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +#about h2 { + color: #2c3e50; + font-size: 2.5rem; + margin-bottom: 1.5rem; + border-bottom: 3px solid #3498db; + padding-bottom: 0.5rem; + display: inline-block; +} + +#about p { + font-size: 1.2rem; + line-height: 1.8; + color: #34495e; + margin-bottom: 2rem; + max-width: 700px; +} + +#about .hero-images { + margin: 3rem 0; + display: flex; + justify-content: center; +} + +#about .hero-images img { + max-width: 100%; + height: auto; + border-radius: 12px; + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +#about .hero-images img:hover { + transform: scale(1.02); +} + +/* Header improvements */ +#header { + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + background-color: var(--primary-color); + color: white; + padding: 2rem 0; +} + +#header .header-content { + max-width: 800px; + margin: 0 auto; + padding: 0 1rem; +} + +#header h1 { + color: white; + margin-bottom: 1rem; +} + +#header nav ul { + list-style: none; + padding: 0; + margin: 1rem 0; + display: flex; + gap: 2rem; +} + +#header nav a { + color: white; + text-decoration: none; + font-size: 1.1rem; + font-weight: 500; + padding: 0.5rem 1rem; + border-radius: 6px; + transition: opacity var(--transition-speed); +} + +#header nav a:hover { + opacity: 0.8; + background-color: rgba(255, 255, 255, 0.1); +} + +@media (max-width: 600px) { + #header { + padding: 1.5rem 0; + } + + #header nav ul { + gap: 1rem; + } +} + +/* Accordion Styles */ +.accordion-container { + margin: 2rem 0; + max-width: 800px; +} + +.accordion-container h3 { + margin-bottom: 1rem; + color: var(--primary-color); +} + +.accordion { + border: 1px solid var(--border-color); + border-radius: 4px; +} + +.accordion-item { + border-bottom: 1px solid var(--border-color); +} + +.accordion-item:last-child { + border-bottom: none; +} + +/* Remove margins from h4 in accordion items */ +.accordion-item h4 { + margin: 0; +} + +.accordion-button { + width: 100%; + padding: 2rem; + background: none; + border: none; + text-align: left; + font-size: 1.1rem; + font-weight: 600; + color: var(--primary-color); + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + transition: background-color var(--transition-speed) ease; +} + +.accordion-button:hover { + background-color: var(--hover-bg); +} + +.accordion-button:focus-visible { + outline: var(--focus-outline); + outline-offset: -2px; +} + +.accordion-icon { + display: inline-block; + width: 1.2rem; + height: 1.2rem; + position: relative; + transition: transform var(--transition-speed) ease; +} + +.accordion-icon::before, +.accordion-icon::after { + content: ''; + position: absolute; + background-color: currentColor; + transition: transform var(--transition-speed) ease; +} + +.accordion-icon::before { + width: 2px; + height: 1.2rem; + left: 50%; + transform: translateX(-50%); +} + +.accordion-icon::after { + width: 1.2rem; + height: 2px; + top: 50%; + transform: translateY(-50%); +} + +.accordion-button[aria-expanded='true'] .accordion-icon::before { + transform: translateX(-50%) rotate(90deg); +} + +.accordion-content { + padding: 0 1rem; + overflow: hidden; + transition: max-height var(--transition-speed) ease-out; +} + +.accordion-content[hidden] { + display: none; +} + +.accordion-content:not([hidden]) { + padding-bottom: 1rem; +} + +/* High contrast mode support */ +.high-contrast-mode .accordion-button { + border: 2px solid var(--primary-color); + margin: 0.5rem; +} + +.high-contrast-mode .accordion-button:hover { + background-color: var(--primary-color); + color: white; +} + +/* Footer styles */ +footer { + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + background-color: var(--primary-color); + color: white; + padding: 2rem 0; + margin-top: auto; +} + +.footer-content { + max-width: 800px; + margin: 0 auto; + padding: 0 1rem; + display: grid; + gap: 2rem; +} + +.footer-content nav { + margin-bottom: 1rem; +} + +.footer-content h3 { + color: white; + margin-bottom: 1rem; + font-size: 1.2rem; +} + +.footer-content ul { + list-style: none; + padding: 0; + margin: 0; +} + +.footer-content a { + color: white; + text-decoration: none; + padding: 0.5rem 0; + display: block; + transition: opacity var(--transition-speed); +} + +.footer-content a:hover { + opacity: 0.8; +} + +.footer-info { + grid-column: 1 / -1; + text-align: center; + padding-top: 1rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +@media (max-width: 600px) { + footer { + padding-bottom: 4rem; + } + + .footer-info { + margin-bottom: 10rem; + } + + .footer-content { + grid-template-columns: 1fr; + text-align: center; + } + + .footer-content nav { + margin-bottom: 2rem; + } +} + +/* Reduced motion support */ +@media (prefers-reduced-motion: reduce) { + + .accordion-button, + .accordion-icon, + .accordion-icon::before, + .accordion-icon::after, + .accordion-content { + transition: none; + } +} \ No newline at end of file diff --git a/index.html b/index.html index a9a33db..98b3850 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,182 @@ - - - - - Title - - - -

This is the starting point.

- - - + + + + + + Leave feedback + + + + + + + +
+ +
+ Accessibility illustration + +
+ +
+

Introduction

+

+ We value your feedback! Help us improve our website by sharing your + experience. +

+
+ +
+
+ + + + + + + + + + + + + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/js/accordian.js b/js/accordian.js new file mode 100644 index 0000000..88250cd --- /dev/null +++ b/js/accordian.js @@ -0,0 +1,75 @@ +function initAccordion() { + const accordion = document.querySelector('.accordion'); + if (!accordion) return; + + const buttons = accordion.querySelectorAll('.accordion-button'); + + buttons.forEach((button, index) => { + button.addEventListener('keydown', (event) => { + const targetId = button.getAttribute('aria-controls'); + const targetPanel = document.getElementById(targetId); + + switch (event.key) { + case 'ArrowDown': + case 'ArrowRight': + event.preventDefault(); + const nextButton = buttons[(index + 1) % buttons.length]; + nextButton.focus(); + break; + case 'ArrowUp': + case 'ArrowLeft': + event.preventDefault(); + const prevButton = + buttons[(index - 1 + buttons.length) % buttons.length]; + prevButton.focus(); + break; + case 'Home': + event.preventDefault(); + buttons[0].focus(); + break; + case 'End': + event.preventDefault(); + buttons[buttons.length - 1].focus(); + break; + case ' ': + case 'Enter': + event.preventDefault(); + togglePanel(button, targetPanel); + break; + } + }); + + button.addEventListener('click', () => { + const targetId = button.getAttribute('aria-controls'); + const targetPanel = document.getElementById(targetId); + togglePanel(button, targetPanel); + }); + }); + + function togglePanel(button, panel) { + const isExpanded = button.getAttribute('aria-expanded') === 'true'; + const newExpandedState = !isExpanded; + + button.setAttribute('aria-expanded', newExpandedState); + + if (newExpandedState) { + panel.hidden = false; + + requestAnimationFrame(() => { + panel.style.maxHeight = panel.scrollHeight + 'px'; + }); + } else { + panel.style.maxHeight = '0'; + + panel.addEventListener( + 'transitionend', + () => { + panel.hidden = true; + }, + { once: true } + ); + } + } +} + +document.addEventListener('DOMContentLoaded', initAccordion); \ No newline at end of file diff --git a/js/main.js b/js/main.js index e69de29..d2945f7 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,254 @@ +document.addEventListener('DOMContentLoaded', () => { + const introsection = document.getElementById('introduction'); + const userInnfoSection = document.getElementById('user-info'); + const announcer = document.getElementById('announcer'); + const intronContinueButton = document.getElementById('intro-continue'); + const UserInfoForm = document.getElementById('user-info-form'); + + intronContinueButton.addEventListener('click', () => { + + introsection.hidden = true; + userInnfoSection.hidden = false; + window.location.hash = '#user-info'; + document - getElementById('name').focus(); + announcer.textContent = 'Please enter your name and email address.'; + + }); + + const emailInput = document.getElementById('email'); + + const nameInput = document.getElementById('name'); + const emailError = document.getElementById('email-error'); + const nameError = document.getElementById('name-error'); + let userName = ''; + + function clearError(input, errorElement) { + input.removeAttribute('aria-invalid'); + input.removeAttribute('aria-describedby'); + errorElement.textContent = ''; + errorElement.hidden = true; + } + + + function showError(input, errorElement, message) { + input.setAttribute('aria-invalid', 'true'); + // input.setAttribute('aria-describedby', errorElement.id); + errorElement.textContent = message; + errorElement.hidden = false; + } + + function isValidEmail(email) { + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); + } + + nameInput.addEventListener('input', () => { + if (nameInput.valid.trim()) { + clearError(nameInput, nameError); + + } else { + showError(nameInput, nameError, 'Please enter your name.'); + } + }); + emailInput.addEventListener('input', () => { + if (emailInput.value.trim()) { + + if (isValidEmail(emailInput.value)) { + clearError(emailInput, emailError); + } + } + + /* } else { + showError(emailInput, emailError, 'Please enter a valid email address.'); + } */ + }); + + + UserInfoForm.addEventListener('submit', (e) => { + e.preventDefault(); + let isValid = true; + if (!nameInput.value.trim()) { + showError(nameInput, nameError, 'Please enter your name.'); + isValid = false; + nameInput.focus(); + } else { + clearError(nameInput, nameError); + } + + + if (!emailInput.value.trim()) { + showError(emailInput, emailError, 'Please enter your email address.'); + isValid = false; + if (!nameError.textContent) { + emailInput.focus(); + } + + } else if (!isValidEmail(emailInput.value.trim())) { + showError(emailInput, emailError, 'Please enter a valid email address.'); + isValid = false; + if (!nameError.textContent) { + emailInput.focus(); + } + } + else { + clearError(emailInput, emailError); + } + + if (isValid) { + userName = nameInput.value.trim(); + userInnfoSection.hidden = true; + + + feedbackSection.hidden = false; + feedbackSection.scrollIntoView({ behavior: 'smooth' }); + + document.querySelector('#feedback-form input[type="radio"]').focus(); + const welcomeMessage = `we move to feedback section, ${userName}!`; + announcer.textContent = welcomeMessage; + document.getElementById('welcome').textContent = welcomeMessage; + document.getElementById('continue').focus(); + } + + }); + + + + + const feedbackSection = document.getElementById('feedback'); + const resultsection = document.getElementById('results'); + + const feedbackForm = document.getElementById('feedback-form'); + const resultContent = document.getElementById('results-content'); + const feedbackDetails = document.querySelector('.feedback-details'); + const progressFill = document.querySelector('.progress-fill'); + const progressText = document.querySelector('.progress-text'); + const answeredQuestions = new Set(); + + + function updateProgress() { + const totalQuestions = 2; + + const answeredCount = answeredQuestions.size; + const percentage = (answeredCount / totalQuestions) * 100; + + + progressFill.style.width = `${percentage}%`; + progressText.textContent = `${answeredCount} out of ${totalQuestions} questions answered`; + announcer.textContent = `${answeredCount} out of ${totalQuestions} questions answered`; + } + + feedbackForm.querySelectorAll('input[type="radio"]').forEach((radio) => { + radio.addEventListener('change', () => { + const questionname = radio.name; + answeredQuestions.add(questionname); + updateProgress(); + }); + }); + feedbackForm.addEventListener('submit', (e) => { + e.preventDefault(); + let isValid = true; + + const formData = new FormData(feedbackForm); + const userAnswer = Object.fromEntries(formData); + const loadingIndicator = document.getElementById('loading-indicator'); + + // Show loading message +loadingIndicator.classList.add('active'); +feedbackSection.setAttribute('aria-busy', 'true'); + + if (!userAnswer.navigation) { + isValid = false; + alert('Please select an option for Navigation.'); + } + + if (!userAnswer.readerbility) { + isValid = false; + alert('Please select an option for Content Readability.'); + } + + if (!isValid) { + return; + } + + let feedback = `Thank you for your feedback, ${userName}!`; + + const detailedFeedback = []; + + if (userAnswer.navigation === 'easy') { + + + detailedFeedback.push('Navigation:you find that site easy to navigate Easy'); + } else if (userAnswer.navigation === 'difficult') { + detailedFeedback.push('Navigation:you fond that site difficult to navigate Difficult'); + } + + + + + if (userAnswer.readerbility === 'clear') { + + detailedFeedback.push('readerbility:you fond that site easy to navigate clear'); + + } else if (userAnswer.readerbility === 'unclear') { + + detailedFeedback.push('readerbility:you fond that site difficult to navigate unclear'); + + } + + + + const positiveAnswers = ['easy', 'clear']; + const userAnswerValues = Object.values(userAnswer); + let positiveResposes = 0; + + for (const answer of userAnswerValues) { + if (positiveAnswers.includes(answer)) { + positiveResposes += 1; + } + } + + + const totaResposes = Object.keys(userAnswer).length; + const satisfactionPercentage = Math.round((positiveResposes / totaResposes) * 100); + + const satisfactionMessage = `Your satisfaction level is ${satisfactionPercentage}%`; + feedback += ` ${satisfactionMessage}`; + + feedback += positiveResposes >= totaResposes / 2 ? 'Great! We are glad you are satisfied!' : 'We are sorry to hear that you are not satisfied.'; + setTimeout(() => { + // Process feedback + feedbackSection.setAttribute('aria-busy', 'false'); + loadingIndicator.classList.remove('active'); + + feedbackSection.hidden = true; + resultsection.hidden = false; + resultContent.textContent = feedback; + feedbackDetails.innerHTML = detailedFeedback.map((text) => `

${text}

`).join(''); + + resultsection.setAttribute('tabindex', '-1'); + resultsection.focus(); + announcer.textContent = 'Feedback submitted successfully!'; + }, 1500); // Simulate 1.5 second loading + }); + + + +}); + +document.querySelectorAll('fieldset').forEach((fieldset) => { + fieldset.addEventListener('keydown', (event) => { + const radios = Array.from(fieldset.querySelectorAll('input[type="radio"]')); + const currentIndex = radios.findIndex(radio => radio === document.activeElement); + + if (currentIndex === -1) return; // No radio is focused + + if (event.key === 'ArrowDown' || event.key === 'ArrowRight') { + event.preventDefault(); + const nextIndex = (currentIndex + 1) % radios.length; + radios[nextIndex].focus(); + } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') { + event.preventDefault(); + const prevIndex = (currentIndex - 1 + radios.length) % radios.length; + radios[prevIndex].focus(); + } + }); +}); \ No newline at end of file