From 6bf3e33b6992283ab8aafeb0a9f0c1f4b3d8fd22 Mon Sep 17 00:00:00 2001 From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Date: Wed, 6 Aug 2025 06:42:25 -0700 Subject: [PATCH] feat(curriculum): adding JS and A11y quiz questions (#61616) Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com> --- .../quiz-js-a11y/68376949899fcbad3c9cac23.md | 361 +++++------------- 1 file changed, 91 insertions(+), 270 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/quiz-js-a11y/68376949899fcbad3c9cac23.md b/curriculum/challenges/english/25-front-end-development/quiz-js-a11y/68376949899fcbad3c9cac23.md index 267b1a3872b..fdf3af4d9f7 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-js-a11y/68376949899fcbad3c9cac23.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-js-a11y/68376949899fcbad3c9cac23.md @@ -7,7 +7,7 @@ dashedName: quiz-js-a11y # --description-- -To pass the quiz, you must correctly answer at least 18 of the 20 questions below. +To pass the quiz, you must correctly answer at least 9 of the 10 questions below. # --quizzes-- @@ -17,438 +17,259 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -Placeholder question +Which attribute is used for accessibility purposes to indicate if a control is expanded or collapsed? #### --distractors-- -Placeholder distractor 1 +`aria-controlled` --- -Placeholder distractor 2 +`aria-controls` --- -Placeholder distractor 3 +`aria-expands` #### --answer-- -Placeholder answer +`aria-expanded` ### --question-- #### --text-- -Placeholder question +Which two attributes can be used in combination with `aria-expanded` to establish a programmatic connection between the controlling element and the element it controls? #### --distractors-- -Placeholder distractor 1 +`aria-labelledBy` and `aria-owns` --- -Placeholder distractor 2 +`aria-controls` and `aria-label` --- -Placeholder distractor 3 +`aria-live` and `aria-owns` #### --answer-- -Placeholder answer +`aria-controls` and `aria-owns` ### --question-- #### --text-- -Placeholder question +Which of the following attributes creates a live region on your page which can be used to notify screen reader users of dynamic content changes in the live region as they occur? #### --distractors-- -Placeholder distractor 1 +`aria-live-regions` --- -Placeholder distractor 2 +`aria-lives` --- -Placeholder distractor 3 +`aria-live-region` #### --answer-- -Placeholder answer +`aria-live` ### --question-- #### --text-- -Placeholder question +Which of the following `div` elements will be disabled only to people using assistive technologies, such as screen readers? #### --distractors-- -Placeholder distractor 1 +```html +
Edit
+``` --- -Placeholder distractor 2 +```html +
Edit
+``` --- -Placeholder distractor 3 +```html +
Edit
+``` #### --answer-- -Placeholder answer +```html +
Edit
+``` ### --question-- #### --text-- -Placeholder question +Which of the following is a valid use of the `aria-expanded` attribute? #### --distractors-- -Placeholder distractor 1 +```html + +``` --- -Placeholder distractor 2 +```html + +``` --- -Placeholder distractor 3 +```html + +``` #### --answer-- -Placeholder answer +```html + +``` ### --question-- #### --text-- -Placeholder question +Which attribute is used to create a programmatic relationship between a controlling element and the element it affects on the page? #### --distractors-- -Placeholder distractor 1 +`aria-set` --- -Placeholder distractor 2 +`aria-region` --- -Placeholder distractor 3 +`aria-expanded` #### --answer-- -Placeholder answer +`aria-controls` ### --question-- #### --text-- -Placeholder question +Which of the following is NOT a common use case for live regions? #### --distractors-- -Placeholder distractor 1 +Messages that are displayed after an action has been taken (such as an error message or confirmation). --- -Placeholder distractor 2 +Content that updates periodically (such as a ticker, marquee, or countdown timer). --- -Placeholder distractor 3 +General status messages (such as updates about a process). #### --answer-- -Placeholder answer +Messages that are displayed before an action has been taken (such as a confirmation dialog). ### --question-- #### --text-- -Placeholder question +Which of the following examples is the correct way to indicate which tab is currently selected? #### --distractors-- -Placeholder distractor 1 +```html +
+ + + +
+``` --- -Placeholder distractor 2 +```html +
+ + + +
+``` --- -Placeholder distractor 3 +```html +
+ + + +
+``` #### --answer-- -Placeholder answer +```html +
+ + + +
+``` ### --question-- #### --text-- -Placeholder question +Which of the following is NOT a valid value for the `aria-live` attribute? #### --distractors-- -Placeholder distractor 1 +`off` --- -Placeholder distractor 2 +`polite` --- -Placeholder distractor 3 +`assertive` #### --answer-- -Placeholder answer +`on` ### --question-- #### --text-- -Placeholder question +Which of the following `aria-live` attribute values means that the update is very important and has the highest priority? #### --distractors-- -Placeholder distractor 1 +`now` --- -Placeholder distractor 2 +`immediate` --- -Placeholder distractor 3 +`urgent` #### --answer-- -Placeholder answer +`assertive` -### --question-- - -#### --text-- - -Placeholder question - -#### --distractors-- - -Placeholder distractor 1 - ---- - -Placeholder distractor 2 - ---- - -Placeholder distractor 3 - -#### --answer-- - -Placeholder answer - -### --question-- - -#### --text-- - -Placeholder question - -#### --distractors-- - -Placeholder distractor 1 - ---- - -Placeholder distractor 2 - ---- - -Placeholder distractor 3 - -#### --answer-- - -Placeholder answer - -### --question-- - -#### --text-- - -Placeholder question - -#### --distractors-- - -Placeholder distractor 1 - ---- - -Placeholder distractor 2 - ---- - -Placeholder distractor 3 - -#### --answer-- - -Placeholder answer - -### --question-- - -#### --text-- - -Placeholder question - -#### --distractors-- - -Placeholder distractor 1 - ---- - -Placeholder distractor 2 - ---- - -Placeholder distractor 3 - -#### --answer-- - -Placeholder answer - -### --question-- - -#### --text-- - -Placeholder question - -#### --distractors-- - -Placeholder distractor 1 - ---- - -Placeholder distractor 2 - ---- - -Placeholder distractor 3 - -#### --answer-- - -Placeholder answer - -### --question-- - -#### --text-- - -Placeholder question - -#### --distractors-- - -Placeholder distractor 1 - ---- - -Placeholder distractor 2 - ---- - -Placeholder distractor 3 - -#### --answer-- - -Placeholder answer - -### --question-- - -#### --text-- - -Placeholder question - -#### --distractors-- - -Placeholder distractor 1 - ---- - -Placeholder distractor 2 - ---- - -Placeholder distractor 3 - -#### --answer-- - -Placeholder answer - -### --question-- - -#### --text-- - -Placeholder question - -#### --distractors-- - -Placeholder distractor 1 - ---- - -Placeholder distractor 2 - ---- - -Placeholder distractor 3 - -#### --answer-- - -Placeholder answer - -### --question-- - -#### --text-- - -Placeholder question - -#### --distractors-- - -Placeholder distractor 1 - ---- - -Placeholder distractor 2 - ---- - -Placeholder distractor 3 - -#### --answer-- - -Placeholder answer - -### --question-- - -#### --text-- - -Placeholder question - -#### --distractors-- - -Placeholder distractor 1 - ---- - -Placeholder distractor 2 - ---- - -Placeholder distractor 3 - -#### --answer-- - -Placeholder answer