diff --git a/curriculum/challenges/_meta/learn-accessibility-by-building-a-quiz/meta.json b/curriculum/challenges/_meta/learn-accessibility-by-building-a-quiz/meta.json index 3ff24eba38c..0a191caff9c 100644 --- a/curriculum/challenges/_meta/learn-accessibility-by-building-a-quiz/meta.json +++ b/curriculum/challenges/_meta/learn-accessibility-by-building-a-quiz/meta.json @@ -275,10 +275,6 @@ { "id": "6148e41c728f65138addf9cc", "title": "Step 67" - }, - { - "id": "6148e5aeb102e3142de026a2", - "title": "Step 68" } ] } \ No newline at end of file diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md index e07cc8a3ee2..da70a2fbf30 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md @@ -7,7 +7,7 @@ dashedName: step-67 # --description-- -Certain types of motion-based animations can cause discomfort for some users. In particular, people with vestibular disorders have sensitivity to certain motion triggers. +Finally, certain types of motion-based animations can cause discomfort for some users. In particular, people with vestibular disorders have sensitivity to certain motion triggers. The `@media` at-rule has a media feature called `prefers-reduced-motion` to set CSS based on the user's preferences. It can take one of the following values: @@ -24,14 +24,16 @@ The `@media` at-rule has a media feature called `prefers-reduced-motion` to set --- -Wrap the style rule that sets `scroll-behavior: smooth` within an `@media` at-rule with the media feature `prefers-reduced-motion` having `no-preference` set as the value. +Wrap the style rule that sets `scroll-behavior: smooth` within a `@media` at-rule with the media feature `prefers-reduced-motion` having `no-preference` set as the value. + +Well done. You have completed the Accessibility Quiz practice project. # --hints-- You should have one `@media (prefers-reduced-motion: no-preference)` rule. ```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)').length, 1); +assert.lengthOf(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)'), 1); ``` You should wrap the existing `*` rule within the `@media` rule. @@ -358,3 +360,317 @@ address { } ``` + +# --solutions-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

Question1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

Question2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(10rem, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 1rem; +} + +.info label, .info input { + display: inline-block; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; + text-align: right; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +h3 { + margin-top: 5px; + padding-left: 15px; + font-size: 1.375rem; +} + +h3::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 1.438rem; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md deleted file mode 100644 index 58de2a26ec9..00000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md +++ /dev/null @@ -1,685 +0,0 @@ ---- -id: 6148e5aeb102e3142de026a2 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Finally, the navigation accessibility can be improved by providing keyboard shortcuts. - -The `accesskey` attribute accepts a space-separated list of access keys. For example: - -```html - -``` - -Give each of the navigation links a single-letter access key. - -_Note: It is not always advised to use access keys, but they can be useful_ - -Well done. You have completed the _Accessibility Quiz_ practice project. - -# --hints-- - -You should give the first `a` element a single-letter `accesskey`. - -```js -assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1); -``` - -You should give the second `a` element a single-letter `accesskey`. - -```js -assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1); -``` - -You should give the third `a` element a single-letter `accesskey`. - -```js -assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

Question1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

Question2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -@media (prefers-reduced-motion: no-preference) { - * { - scroll-behavior: smooth; - } -} - -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(10rem, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 1rem; -} - -.info label, .info input { - display: inline-block; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; - text-align: right; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -h3 { - margin-top: 5px; - padding-left: 15px; - font-size: 1.375rem; -} - -h3::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 1.438rem; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - -address { - text-align: center; - padding: 0.3em; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` - -# --solutions-- - -```html - - - - - - - - Accessibility Quiz - - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

- -
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

Question1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

Question2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -@media (prefers-reduced-motion: no-preference) { - * { - scroll-behavior: smooth; - } -} - -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - position: fixed; - background-color: #1b1b32; - top: 0; -} - -#logo { - width: max(10rem, 18vw); - aspect-ratio: 35 / 4; - max-height: 100%; - background-color: #0a0a23; - padding: 0.4rem; -} - -h1 { - text-align: center; - font-size: min(5vw, 1.2em); - color: #f1be32; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - display: block; - margin: 0 0.2rem; - color: #dfdfe2; - padding: 0.2rem; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0px auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - - -.info { - margin: 0 auto; - padding: 10px 0 0 5px; -} -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 1rem; -} - -.info label, -.info input { - display: inline-block; -} - -.info label { - width: 10%; - min-width: 55px; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -h3 { - margin-top: 5px; - padding-left: 15px; - font-size: 1.375rem; -} - -h3::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 1.438rem; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - -address { - text-align: center; - padding: 0.3em; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -```