gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: rename "part" to "step" (#43934)

Browse Source 
* chore: rename part to step

* chore: update metas

* chore: more renaming

* chore: update tooling

* chore: update frontmatter

* chore(tools): title testing
This commit is contained in:
Nicholas Carrigan (he/him)
2021-10-21 10:07:52 -07:00
committed by GitHub
parent 6dbe68eb2f
commit b36cdbafd1
2194 changed files with 237701 additions and 237701 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
curriculum/challenges/_meta/accessibility-quiz/meta.json
View File

@ -13,271 +13,271 @@
"challengeOrder": [ "challengeOrder": [
[ [
"614ccc21ea91ef1736b9b578", "614ccc21ea91ef1736b9b578",
"Part 1" "Step 1"
], ],
[ [
"613297a923965e0703b64796", "613297a923965e0703b64796",
"Part 2" "Step 2"
], ],
[ [
"61329b210dac0b08047fd6ab", "61329b210dac0b08047fd6ab",
"Part 3" "Step 3"
], ],
[ [
"61329d52e5010e08d9b9d66b", "61329d52e5010e08d9b9d66b",
"Part 4" "Step 4"
], ],
[ [
"6133acc353338c0bba9cb553", "6133acc353338c0bba9cb553",
"Part 5" "Step 5"
], ],
[ [
"6133d11ef548f51f876149e3", "6133d11ef548f51f876149e3",
"Part 6" "Step 6"
], ],
[ [
"613e2546d0594208229ada50", "613e2546d0594208229ada50",
"Part 7" "Step 7"
], ],
[ [
"613e275749ebd008e74bb62e", "613e275749ebd008e74bb62e",
"Part 8" "Step 8"
], ],
[ [
"6140827cff96e906bd38fc2b", "6140827cff96e906bd38fc2b",
"Part 9" "Step 9"
], ],
[ [
"6140883f74224508174794c0", "6140883f74224508174794c0",
"Part 10" "Step 10"
], ],
[ [
"61408e4ae3e35d08feb260eb", "61408e4ae3e35d08feb260eb",
"Part 11" "Step 11"
], ],
[ [
"61408f155e798909b6908712", "61408f155e798909b6908712",
"Part 12" "Step 12"
], ],
[ [
"614090d5a22b6f0a5a6b464c", "614090d5a22b6f0a5a6b464c",
"Part 13" "Step 13"
], ],
[ [
"6141fabd6f75610664e908fd", "6141fabd6f75610664e908fd",
"Part 14" "Step 14"
], ],
[ [
"6141fed65b61320743da5894", "6141fed65b61320743da5894",
"Part 15" "Step 15"
], ],
[ [
"614202874ca576084fca625f", "614202874ca576084fca625f",
"Part 16" "Step 16"
], ],
[ [
"614206033d366c090ca7dd42", "614206033d366c090ca7dd42",
"Part 17" "Step 17"
], ],
[ [
"61435e3c0679a306c20f1acc", "61435e3c0679a306c20f1acc",
"Part 18" "Step 18"
], ],
[ [
"6143610161323a081b249c19", "6143610161323a081b249c19",
"Part 19" "Step 19"
], ],
[ [
"6143639d5eddc7094161648c", "6143639d5eddc7094161648c",
"Part 20" "Step 20"
], ],
[ [
"6143908b6aafb00a659ca189", "6143908b6aafb00a659ca189",
"Part 21" "Step 21"
], ],
[ [
"6143920c8eafb00b735746ce", "6143920c8eafb00b735746ce",
"Part 22" "Step 22"
], ],
[ [
"6143931a113bb80c45546287", "6143931a113bb80c45546287",
"Part 23" "Step 23"
], ],
[ [
"614394fb41985e0d2012a93e", "614394fb41985e0d2012a93e",
"Part 24" "Step 24"
], ],
[ [
"6143956ed76ed60e012faa51", "6143956ed76ed60e012faa51",
"Part 25" "Step 25"
], ],
[ [
"614396f7ae83f20ea6f9f4b3", "614396f7ae83f20ea6f9f4b3",
"Part 26" "Step 26"
], ],
[ [
"6143cb26f7edff2dc28f7da5", "6143cb26f7edff2dc28f7da5",
"Part 27" "Step 27"
], ],
[ [
"6144e818fd5ea704fe56081d", "6144e818fd5ea704fe56081d",
"Part 28" "Step 28"
], ],
[ [
"6144f8dc6849e405dd8bb829", "6144f8dc6849e405dd8bb829",
"Part 29" "Step 29"
], ],
[ [
"6145e6eeaa66c605eb087fe9", "6145e6eeaa66c605eb087fe9",
"Part 30" "Step 30"
], ],
[ [
"6145e8b5080a5f06bb0223d0", "6145e8b5080a5f06bb0223d0",
"Part 31" "Step 31"
], ],
[ [
"6145eb5f08a38a0786c7a80c", "6145eb5f08a38a0786c7a80c",
"Part 32" "Step 32"
], ],
[ [
"6145ed1f22caab087630aaad", "6145ed1f22caab087630aaad",
"Part 33" "Step 33"
], ],
[ [
"6145ee65e2e1530938cb594d", "6145ee65e2e1530938cb594d",
"Part 34" "Step 34"
], ],
[ [
"6145f02240ff8f09f7ec913c", "6145f02240ff8f09f7ec913c",
"Part 35" "Step 35"
], ],
[ [
"6145f14f019a4b0adb94b051", "6145f14f019a4b0adb94b051",
"Part 36" "Step 36"
], ],
[ [
"6145f3a5cd9be60b9459cdd6", "6145f3a5cd9be60b9459cdd6",
"Part 37" "Step 37"
], ],
[ [
"6145f47393fbe70c4d885f9c", "6145f47393fbe70c4d885f9c",
"Part 38" "Step 38"
], ],
[ [
"6145f59029474c0d3dc1c8b8", "6145f59029474c0d3dc1c8b8",
"Part 39" "Step 39"
], ],
[ [
"6145f685797bd30df9784e8c", "6145f685797bd30df9784e8c",
"Part 40" "Step 40"
], ],
[ [
"6145f829ac6a920ebf5797d7", "6145f829ac6a920ebf5797d7",
"Part 41" "Step 41"
], ],
[ [
"6145f8f8bcd4370f6509078e", "6145f8f8bcd4370f6509078e",
"Part 42" "Step 42"
], ],
[ [
"6145fb5018cb5b100cb2a88c", "6145fb5018cb5b100cb2a88c",
"Part 43" "Step 43"
], ],
[ [
"6145fc3707fc3310c277f5c8", "6145fc3707fc3310c277f5c8",
"Part 44" "Step 44"
], ],
[ [
"614796cb8086be482d60e0ac", "614796cb8086be482d60e0ac",
"Part 45" "Step 45"
], ],
[ [
"6147a14ef5668b5881ef2297", "6147a14ef5668b5881ef2297",
"Part 46" "Step 46"
], ],
[ [
"614878f7a412310647873015", "614878f7a412310647873015",
"Part 47" "Step 47"
], ],
[ [
"61487b77d4a37707073a64e5", "61487b77d4a37707073a64e5",
"Part 48" "Step 48"
], ],
[ [
"61487da611a65307e78d2c20", "61487da611a65307e78d2c20",
"Part 49" "Step 49"
], ],
[ [
"61487f703571b60899055cf9", "61487f703571b60899055cf9",
"Part 50" "Step 50"
], ],
[ [
"614880dc16070e093e29bc56", "614880dc16070e093e29bc56",
"Part 51" "Step 51"
], ],
[ [
"614883b6fa720e09fb167de9", "614883b6fa720e09fb167de9",
"Part 52" "Step 52"
], ],
[ [
"614884c1f5d6f30ab3d78cde", "614884c1f5d6f30ab3d78cde",
"Part 53" "Step 53"
], ],
[ [
"61488ecfd05e290b5712e6da", "61488ecfd05e290b5712e6da",
"Part 54" "Step 54"
], ],
[ [
"6148d99cdc7acd0c519862cb", "6148d99cdc7acd0c519862cb",
"Part 55" "Step 55"
], ],
[ [
"6148da157cc0bd0d06df5c0a", "6148da157cc0bd0d06df5c0a",
"Part 56" "Step 56"
], ],
[ [
"6148dc095264000dce348bf5", "6148dc095264000dce348bf5",
"Part 57" "Step 57"
], ],
[ [
"6148dcaaf2e8750e6cb4501a", "6148dcaaf2e8750e6cb4501a",
"Part 58" "Step 58"
], ],
[ [
"6148dd31d210990f0fb140f8", "6148dd31d210990f0fb140f8",
"Part 59" "Step 59"
], ],
[ [
"6148defa9c01520fb9d178a0", "6148defa9c01520fb9d178a0",
"Part 60" "Step 60"
], ],
[ [
"6148dfab9b54c110577de165", "6148dfab9b54c110577de165",
"Part 61" "Step 61"
], ],
[ [
"6148e0bcc13efd10f7d7a6a9", "6148e0bcc13efd10f7d7a6a9",
"Part 62" "Step 62"
], ],
[ [
"6148e161ecec9511941f8833", "6148e161ecec9511941f8833",
"Part 63" "Step 63"
], ],
[ [
"6148e28706b34912340fd042", "6148e28706b34912340fd042",
"Part 64" "Step 64"
], ],
[ [
"6148e335c1edd512d00e4691", "6148e335c1edd512d00e4691",
"Part 65" "Step 65"
], ],
[ [
"6148e41c728f65138addf9cc", "6148e41c728f65138addf9cc",
"Part 66" "Step 66"
], ],
[ [
"6148e5aeb102e3142de026a2", "6148e5aeb102e3142de026a2",
"Part 67" "Step 67"
] ]
] ]
} }

184
curriculum/challenges/_meta/basic-css-cafe-menu/meta.json
View File

@ -13,370 +13,370 @@
"challengeOrder": [ "challengeOrder": [
[ [
"5f33071498eb2472b87ddee4", "5f33071498eb2472b87ddee4",
"Part 1" "Step 1"
], ],
[ [
"5f3313e74582ad9d063e3a38", "5f3313e74582ad9d063e3a38",
"Part 2" "Step 2"
], ],
[ [
"5f331e55dfab7a896e53c3a1", "5f331e55dfab7a896e53c3a1",
"Part 3" "Step 3"
], ],
[ [
"5f3326b143638ee1a09ff1e3", "5f3326b143638ee1a09ff1e3",
"Part 4" "Step 4"
], ],
[ [
"5f33294a6af5e9188dbdb8f3", "5f33294a6af5e9188dbdb8f3",
"Part 5" "Step 5"
], ],
[ [
"5f332a88dc25a0fd25c7687a", "5f332a88dc25a0fd25c7687a",
"Part 6" "Step 6"
], ],
[ [
"5f332b23c2045fb843337579", "5f332b23c2045fb843337579",
"Part 7" "Step 7"
], ],
[ [
"5f33310c1851c6c4da013250", "5f33310c1851c6c4da013250",
"Part 8" "Step 8"
], ],
[ [
"5f344fc1520b6719f2e35605", "5f344fc1520b6719f2e35605",
"Part 9" "Step 9"
], ],
[ [
"5f344fbc22624a2976425065", "5f344fbc22624a2976425065",
"Part 10" "Step 10"
], ],
[ [
"5f344fad8bf01691e71a30eb", "5f344fad8bf01691e71a30eb",
"Part 11" "Step 11"
], ],
[ [
"5f344f9c805cd193c33d829c", "5f344f9c805cd193c33d829c",
"Part 12" "Step 12"
], ],
[ [
"5f3477ae9675db8bb7655b30", "5f3477ae9675db8bb7655b30",
"Part 13" "Step 13"
], ],
[ [
"5f3477ae34c1239cafe128be", "5f3477ae34c1239cafe128be",
"Part 14" "Step 14"
], ],
[ [
"5f3477aefa51bfc29327200b", "5f3477aefa51bfc29327200b",
"Part 15" "Step 15"
], ],
[ [
"5f3477ae8466a9a3d2cc953c", "5f3477ae8466a9a3d2cc953c",
"Part 16" "Step 16"
], ],
[ [
"5f3477cb2e27333b1ab2b955", "5f3477cb2e27333b1ab2b955",
"Part 17" "Step 17"
], ],
[ [
"5f3477cbcb6ba47918c1da92", "5f3477cbcb6ba47918c1da92",
"Part 18" "Step 18"
], ],
[ [
"5f3477cb303c5cb61b43aa9b", "5f3477cb303c5cb61b43aa9b",
"Part 19" "Step 19"
], ],
[ [
"5f34a1fd611d003edeafd681", "5f34a1fd611d003edeafd681",
"Part 20" "Step 20"
], ],
[ [
"5f356ed6cf6eab5f15f5cfe6", "5f356ed6cf6eab5f15f5cfe6",
"Part 21" "Step 21"
], ],
[ [
"5f356ed63c7807a4f1e6d054", "5f356ed63c7807a4f1e6d054",
"Part 22" "Step 22"
], ],
[ [
"5f356ed60a5decd94ab66986", "5f356ed60a5decd94ab66986",
"Part 23" "Step 23"
], ],
[ [
"5f356ed63e0fa262326eef05", "5f356ed63e0fa262326eef05",
"Part 24" "Step 24"
], ],
[ [
"5f356ed60785e1f3e9850b6e", "5f356ed60785e1f3e9850b6e",
"Part 25" "Step 25"
], ],
[ [
"5f356ed656a336993abd9f7c", "5f356ed656a336993abd9f7c",
"Part 26" "Step 26"
], ],
[ [
"5f356ed6199b0cdef1d2be8f", "5f356ed6199b0cdef1d2be8f",
"Part 27" "Step 27"
], ],
[ [
"5f356ed69db0a491745e2bb6", "5f356ed69db0a491745e2bb6",
"Part 28" "Step 28"
], ],
[ [
"5f35e5c44359872a137bd98f", "5f35e5c44359872a137bd98f",
"Part 29" "Step 29"
], ],
[ [
"5f35e5c4321f818cdc4bed30", "5f35e5c4321f818cdc4bed30",
"Part 30" "Step 30"
], ],
[ [
"5f3c866daec9a49519871816", "5f3c866daec9a49519871816",
"Part 31" "Step 31"
], ],
[ [
"5f3c866d5414453fc2d7b480", "5f3c866d5414453fc2d7b480",
"Part 32" "Step 32"
], ],
[ [
"5f3c866d28d7ad0de6470505", "5f3c866d28d7ad0de6470505",
"Part 33" "Step 33"
], ],
[ [
"5f769541be494f25449b292f", "5f769541be494f25449b292f",
"Part 34" "Step 34"
], ],
[ [
"5f76967fad478126d6552b0d", "5f76967fad478126d6552b0d",
"Part 35" "Step 35"
], ],
[ [
"5f769702e6e33127d14aa120", "5f769702e6e33127d14aa120",
"Part 36" "Step 36"
], ],
[ [
"5f3c866de7a5b784048f94b1", "5f3c866de7a5b784048f94b1",
"Part 37" "Step 37"
], ],
[ [
"5f3c866dbf362f99b9a0c6d0", "5f3c866dbf362f99b9a0c6d0",
"Part 38" "Step 38"
], ],
[ [
"5f3c866d0fc037f7311b4ac8", "5f3c866d0fc037f7311b4ac8",
"Part 39" "Step 39"
], ],
[ [
"5f3c866dd0d0275f01d4d847", "5f3c866dd0d0275f01d4d847",
"Part 40" "Step 40"
], ],
[ [
"5f3cade9fa77275d9f4efe62", "5f3cade9fa77275d9f4efe62",
"Part 41" "Step 41"
], ],
[ [
"5f3cade94c6576e7f7b7953f", "5f3cade94c6576e7f7b7953f",
"Part 42" "Step 42"
], ],
[ [
"5f3cade9993019e26313fa8e", "5f3cade9993019e26313fa8e",
"Part 43" "Step 43"
], ],
[ [
"5f7691dafd882520797cd2f0", "5f7691dafd882520797cd2f0",
"Part 44" "Step 44"
], ],
[ [
"5f7692f7c5b3ce22a57788b6", "5f7692f7c5b3ce22a57788b6",
"Part 45" "Step 45"
], ],
[ [
"5f47633757ae3469f2d33d2e", "5f47633757ae3469f2d33d2e",
"Part 46" "Step 46"
], ],
[ [
"5f3cade99dda4e6071a85dfd", "5f3cade99dda4e6071a85dfd",
"Part 47" "Step 47"
], ],
[ [
"5f3ef6e0e0c3feaebcf647ad", "5f3ef6e0e0c3feaebcf647ad",
"Part 48" "Step 48"
], ],
[ [
"5f3ef6e0819d4f23ca7285e6", "5f3ef6e0819d4f23ca7285e6",
"Part 49" "Step 49"
], ],
[ [
"5f716ad029ee4053c7027a7a", "5f716ad029ee4053c7027a7a",
"Part 50" "Step 50"
], ],
[ [
"5f7b87422a560036fd03ccff", "5f7b87422a560036fd03ccff",
"Part 51" "Step 51"
], ],
[ [
"5f7b88d37b1f98386f04edc0", "5f7b88d37b1f98386f04edc0",
"Part 52" "Step 52"
], ],
[ [
"5f716bee5838c354c728a7c5", "5f716bee5838c354c728a7c5",
"Part 53" "Step 53"
], ],
[ [
"5f3ef6e0eaa7da26e3d34d78", "5f3ef6e0eaa7da26e3d34d78",
"Part 54" "Step 54"
], ],
[ [
"5f3ef6e050279c7a4a7101d3", "5f3ef6e050279c7a4a7101d3",
"Part 55" "Step 55"
], ],
[ [
"5f3ef6e04559b939080db057", "5f3ef6e04559b939080db057",
"Part 56" "Step 56"
], ],
[ [
"5f3ef6e03d719d5ac4738993", "5f3ef6e03d719d5ac4738993",
"Part 57" "Step 57"
], ],
[ [
"5f3ef6e05473f91f948724ab", "5f3ef6e05473f91f948724ab",
"Part 58" "Step 58"
], ],
[ [
"5f3ef6e056bdde6ae6892ba2", "5f3ef6e056bdde6ae6892ba2",
"Part 59" "Step 59"
], ],
[ [
"5f3ef6e0e9629bad967cd71e", "5f3ef6e0e9629bad967cd71e",
"Part 60" "Step 60"
], ],
[ [
"5f3ef6e06d34faac0447fc44", "5f3ef6e06d34faac0447fc44",
"Part 61" "Step 61"
], ],
[ [
"5f3ef6e087d56ed3ffdc36be", "5f3ef6e087d56ed3ffdc36be",
"Part 62" "Step 62"
], ],
[ [
"5f3ef6e0f8c230bdd2349716", "5f3ef6e0f8c230bdd2349716",
"Part 63" "Step 63"
], ],
[ [
"5f3ef6e07276f782bb46b93d", "5f3ef6e07276f782bb46b93d",
"Part 64" "Step 64"
], ],
[ [
"5f3ef6e0a81099d9a697b550", "5f3ef6e0a81099d9a697b550",
"Part 65" "Step 65"
], ],
[ [
"5f3ef6e0b431cc215bb16f55", "5f3ef6e0b431cc215bb16f55",
"Part 66" "Step 66"
], ],
[ [
"5f3ef6e01f288a026d709587", "5f3ef6e01f288a026d709587",
"Part 67" "Step 67"
], ],
[ [
"5f3f26fa39591db45e5cd7a0", "5f3f26fa39591db45e5cd7a0",
"Part 68" "Step 68"
], ],
[ [
"5f459225127805351a6ad057", "5f459225127805351a6ad057",
"Part 69" "Step 69"
], ],
[ [
"5f459a7ceb8b5c446656d88b", "5f459a7ceb8b5c446656d88b",
"Part 70" "Step 70"
], ],
[ [
"5f459cf202c2a3472fae6a9f", "5f459cf202c2a3472fae6a9f",
"Part 71" "Step 71"
], ],
[ [
"5f459fd48bdc98491ca6d1a3", "5f459fd48bdc98491ca6d1a3",
"Part 72" "Step 72"
], ],
[ [
"5f45a05977e2fa49d9119437", "5f45a05977e2fa49d9119437",
"Part 73" "Step 73"
], ],
[ [
"5f45a276c093334f0f6e9df4", "5f45a276c093334f0f6e9df4",
"Part 74" "Step 74"
], ],
[ [
"5f45a5a7c49a8251f0bdb527", "5f45a5a7c49a8251f0bdb527",
"Part 75" "Step 75"
], ],
[ [
"5f46fc57528aa1c4b5ea7c2e", "5f46fc57528aa1c4b5ea7c2e",
"Part 76" "Step 76"
], ],
[ [
"5f4701b942c824109626c3d8", "5f4701b942c824109626c3d8",
"Part 77" "Step 77"
], ],
[ [
"5f46ede1ff8fec5ba656b44c", "5f46ede1ff8fec5ba656b44c",
"Part 78" "Step 78"
], ],
[ [
"5f45a66d4a2b0453301e5a26", "5f45a66d4a2b0453301e5a26",
"Part 79" "Step 79"
], ],
[ [
"5f45b0731d39e15d54df4dfc", "5f45b0731d39e15d54df4dfc",
"Part 80" "Step 80"
], ],
[ [
"5f45b25e7ec2405f166b9de1", "5f45b25e7ec2405f166b9de1",
"Part 81" "Step 81"
], ],
[ [
"5f45b3c93c027860d9298dbd", "5f45b3c93c027860d9298dbd",
"Part 82" "Step 82"
], ],
[ [
"5f45b45d099f3e621fbbb256", "5f45b45d099f3e621fbbb256",
"Part 83" "Step 83"
], ],
[ [
"5f45b4c81cea7763550e40df", "5f45b4c81cea7763550e40df",
"Part 84" "Step 84"
], ],
[ [
"5f45b715301bbf667badc04a", "5f45b715301bbf667badc04a",
"Part 85" "Step 85"
], ],
[ [
"5f46e270702a8456a664f0df", "5f46e270702a8456a664f0df",
"Part 86" "Step 86"
], ],
[ [
"5f46e36e745ead58487aabf2", "5f46e36e745ead58487aabf2",
"Part 87" "Step 87"
], ],
[ [
"5f46e7a4750dd05b5a673920", "5f46e7a4750dd05b5a673920",
"Part 88" "Step 88"
], ],
[ [
"5f46e8284aae155c83015dee", "5f46e8284aae155c83015dee",
"Part 89" "Step 89"
], ],
[ [
"5f475bb508746c16c9431d42", "5f475bb508746c16c9431d42",
"Part 90" "Step 90"
], ],
[ [
"5f475e1c7f71a61d913836c6", "5f475e1c7f71a61d913836c6",
"Part 91" "Step 91"
], ],
[ [
"5f47fe7e31980053a8d4403b", "5f47fe7e31980053a8d4403b",
"Part 92" "Step 92"
] ]
]} ]}

134
curriculum/challenges/_meta/basic-html-cat-photo-app/meta.json
View File

@ -13,270 +13,270 @@
"challengeOrder": [ "challengeOrder": [
[ [
"5dc174fcf86c76b9248c6eb2", "5dc174fcf86c76b9248c6eb2",
"Part 1" "Step 1"
], ],
[ [
"5dc1798ff86c76b9248c6eb3", "5dc1798ff86c76b9248c6eb3",
"Part 2" "Step 2"
], ],
[ [
"5dc17d3bf86c76b9248c6eb4", "5dc17d3bf86c76b9248c6eb4",
"Part 3" "Step 3"
], ],
[ [
"5dc17dc8f86c76b9248c6eb5", "5dc17dc8f86c76b9248c6eb5",
"Part 4" "Step 4"
], ],
[ [
"5dc2385ff86c76b9248c6eb7", "5dc2385ff86c76b9248c6eb7",
"Part 5" "Step 5"
], ],
[ [
"5dc23991f86c76b9248c6eb8", "5dc23991f86c76b9248c6eb8",
"Part 6" "Step 6"
], ],
[ [
"5dc23f9bf86c76b9248c6eba", "5dc23f9bf86c76b9248c6eba",
"Part 7" "Step 7"
], ],
[ [
"5dc24073f86c76b9248c6ebb", "5dc24073f86c76b9248c6ebb",
"Part 8" "Step 8"
], ],
[ [
"5dc24165f86c76b9248c6ebc", "5dc24165f86c76b9248c6ebc",
"Part 9" "Step 9"
], ],
[ [
"5dc24614f86c76b9248c6ebd", "5dc24614f86c76b9248c6ebd",
"Part 10" "Step 10"
], ],
[ [
"5ddbd81294d8ddc1510a8e56", "5ddbd81294d8ddc1510a8e56",
"Part 11" "Step 11"
], ],
[ [
"5dfa22d1b521be39a3de7be0", "5dfa22d1b521be39a3de7be0",
"Part 12" "Step 12"
], ],
[ [
"5dfa2407b521be39a3de7be1", "5dfa2407b521be39a3de7be1",
"Part 13" "Step 13"
], ],
[ [
"5dfa30b9eacea3f48c6300ad", "5dfa30b9eacea3f48c6300ad",
"Part 14" "Step 14"
], ],
[ [
"5f07be6ef7412fbad0c5626b", "5f07be6ef7412fbad0c5626b",
"Part 15" "Step 15"
], ],
[ [
"5f07c98cdb9413cbd4b16750", "5f07c98cdb9413cbd4b16750",
"Part 16" "Step 16"
], ],
[ [
"5dfa3589eacea3f48c6300ae", "5dfa3589eacea3f48c6300ae",
"Part 17" "Step 17"
], ],
[ [
"5dfa371beacea3f48c6300af", "5dfa371beacea3f48c6300af",
"Part 18" "Step 18"
], ],
[ [
"5dfa37b9eacea3f48c6300b0", "5dfa37b9eacea3f48c6300b0",
"Part 19" "Step 19"
], ],
[ [
"5dfb5ecbeacea3f48c6300b1", "5dfb5ecbeacea3f48c6300b1",
"Part 20" "Step 20"
], ],
[ [
"5dfb6250eacea3f48c6300b2", "5dfb6250eacea3f48c6300b2",
"Part 21" "Step 21"
], ],
[ [
"5dfb655eeacea3f48c6300b3", "5dfb655eeacea3f48c6300b3",
"Part 22" "Step 22"
], ],
[ [
"5dfb6a35eacea3f48c6300b4", "5dfb6a35eacea3f48c6300b4",
"Part 23" "Step 23"
], ],
[ [
"5ef9b03c81a63668521804d0", "5ef9b03c81a63668521804d0",
"Part 24" "Step 24"
], ],
[ [
"5ef9b03c81a63668521804d1", "5ef9b03c81a63668521804d1",
"Part 25" "Step 25"
], ],
[ [
"5ef9b03c81a63668521804d2", "5ef9b03c81a63668521804d2",
"Part 26" "Step 26"
], ],
[ [
"5ef9b03c81a63668521804d3", "5ef9b03c81a63668521804d3",
"Part 27" "Step 27"
], ],
[ [
"5efada803cbd2bbdab94e332", "5efada803cbd2bbdab94e332",
"Part 28" "Step 28"
], ],
[ [
"5efae0543cbd2bbdab94e333", "5efae0543cbd2bbdab94e333",
"Part 29" "Step 29"
], ],
[ [
"5efae16e3cbd2bbdab94e334", "5efae16e3cbd2bbdab94e334",
"Part 30" "Step 30"
], ],
[ [
"5ef9b03c81a63668521804d4", "5ef9b03c81a63668521804d4",
"Part 31" "Step 31"
], ],
[ [
"5f07fb1579dc934717801375", "5f07fb1579dc934717801375",
"Part 32" "Step 32"
], ],
[ [
"5ef9b03c81a63668521804d5", "5ef9b03c81a63668521804d5",
"Part 33" "Step 33"
], ],
[ [
"5ef9b03c81a63668521804d6", "5ef9b03c81a63668521804d6",
"Part 34" "Step 34"
], ],
[ [
"5ef9b03c81a63668521804d7", "5ef9b03c81a63668521804d7",
"Part 35" "Step 35"
], ],
[ [
"5ef9b03c81a63668521804d8", "5ef9b03c81a63668521804d8",
"Part 36" "Step 36"
], ],
[ [
"5efb23e70dc218d6c85f89b1", "5efb23e70dc218d6c85f89b1",
"Part 37" "Step 37"
], ],
[ [
"7cf9b03d81a65668421804c3", "7cf9b03d81a65668421804c3",
"Part 38" "Step 38"
], ],
[ [
"5ef9b03c81a63668521804d9", "5ef9b03c81a63668521804d9",
"Part 39" "Step 39"
], ],
[ [
"5ef9b03c81a63668521804db", "5ef9b03c81a63668521804db",
"Part 40" "Step 40"
], ],
[ [
"5ef9b03c81a63668521804da", "5ef9b03c81a63668521804da",
"Part 41" "Step 41"
], ],
[ [
"5efb2c990dc218d6c85f89b2", "5efb2c990dc218d6c85f89b2",
"Part 42" "Step 42"
], ],
[ [
"5ef9b03c81a63668521804dc", "5ef9b03c81a63668521804dc",
"Part 43" "Step 43"
], ],
[ [
"5ef9b03c81a63668521804dd", "5ef9b03c81a63668521804dd",
"Part 44" "Step 44"
], ],
[ [
"5ef9b03c81a63668521804df", "5ef9b03c81a63668521804df",
"Part 45" "Step 45"
], ],
[ [
"5f05a1d8e233dff4a68508d8", "5f05a1d8e233dff4a68508d8",
"Part 46" "Step 46"
], ],
[ [
"5ef9b03c81a63668521804de", "5ef9b03c81a63668521804de",
"Part 47" "Step 47"
], ],
[ [
"5f1a80975fc4bcae0edb3497", "5f1a80975fc4bcae0edb3497",
"Part 48" "Step 48"
], ],
[ [
"5ef9b03c81a63668521804e1", "5ef9b03c81a63668521804e1",
"Part 49" "Step 49"
], ],
[ [
"5f0d48e7b435f13ab6550051", "5f0d48e7b435f13ab6550051",
"Part 50" "Step 50"
], ],
[ [
"5f0d4ab1b435f13ab6550052", "5f0d4ab1b435f13ab6550052",
"Part 51" "Step 51"
], ],
[ [
"5f0d4d04b435f13ab6550053", "5f0d4d04b435f13ab6550053",
"Part 52" "Step 52"
], ],
[ [
"5ef9b03c81a63668521804e2", "5ef9b03c81a63668521804e2",
"Part 53" "Step 53"
], ],
[ [
"5efc54138d6a74d05e68af76", "5efc54138d6a74d05e68af76",
"Part 54" "Step 54"
], ],
[ [
"5efc4f528d6a74d05e68af74", "5efc4f528d6a74d05e68af74",
"Part 55" "Step 55"
], ],
[ [
"5efc518e8d6a74d05e68af75", "5efc518e8d6a74d05e68af75",
"Part 56" "Step 56"
], ],
[ [
"5ef9b03c81a63668521804e3", "5ef9b03c81a63668521804e3",
"Part 57" "Step 57"
], ],
[ [
"5efc575c8d6a74d05e68af77", "5efc575c8d6a74d05e68af77",
"Part 58" "Step 58"
], ],
[ [
"5f1a89f1190aff21ae42105a", "5f1a89f1190aff21ae42105a",
"Part 59" "Step 59"
], ],
[ [
"5ef9b03c81a63668521804e5", "5ef9b03c81a63668521804e5",
"Part 60" "Step 60"
], ],
[ [
"5ef9b03c81a63668521804e7", "5ef9b03c81a63668521804e7",
"Part 61" "Step 61"
], ],
[ [
"5ef9b03c81a63668521804e8", "5ef9b03c81a63668521804e8",
"Part 62" "Step 62"
], ],
[ [
"5ef9b03c81a63668521804e9", "5ef9b03c81a63668521804e9",
"Part 63" "Step 63"
], ],
[ [
"5ef9b03c81a63668521804ea", "5ef9b03c81a63668521804ea",
"Part 64" "Step 64"
], ],
[ [
"5ef9b03c81a63668521804eb", "5ef9b03c81a63668521804eb",
"Part 65" "Step 65"
], ],
[ [
"5ef9b03c81a63668521804ec", "5ef9b03c81a63668521804ec",
"Part 66" "Step 66"
], ],
[ [
"5ef9b03c81a63668521804ee", "5ef9b03c81a63668521804ee",
"Part 67" "Step 67"
] ]
]} ]}

306
curriculum/challenges/_meta/basic-javascript-rpg-game/meta.json
View File

@ -13,614 +13,614 @@
"challengeOrder": [ "challengeOrder": [
[ [
"5d5a813321b9e3db6c106a46", "5d5a813321b9e3db6c106a46",
"Part 1" "Step 1"
], ],
[ [
"5d5a8dd907f328a948d398ce", "5d5a8dd907f328a948d398ce",
"Part 2" "Step 2"
], ],
[ [
"5d5a8f1c07f328a948d398cf", "5d5a8f1c07f328a948d398cf",
"Part 3" "Step 3"
], ],
[ [
"5d5a903507f328a948d398d0", "5d5a903507f328a948d398d0",
"Part 4" "Step 4"
], ],
[ [
"5d5aaa5807f328a948d398d1", "5d5aaa5807f328a948d398d1",
"Part 5" "Step 5"
], ],
[ [
"5d5aab5d07f328a948d398d2", "5d5aab5d07f328a948d398d2",
"Part 6" "Step 6"
], ],
[ [
"5d5aac9c07f328a948d398d3", "5d5aac9c07f328a948d398d3",
"Part 7" "Step 7"
], ],
[ [
"5d5aad2307f328a948d398d4", "5d5aad2307f328a948d398d4",
"Part 8" "Step 8"
], ],
[ [
"5d5aae1207f328a948d398d5", "5d5aae1207f328a948d398d5",
"Part 9" "Step 9"
], ],
[ [
"5d5ab57f07f328a948d398d6", "5d5ab57f07f328a948d398d6",
"Part 10" "Step 10"
], ],
[ [
"5d5b66ce07f328a948d398d7", "5d5b66ce07f328a948d398d7",
"Part 11" "Step 11"
], ],
[ [
"5d64cf8f853b56a21cd16319", "5d64cf8f853b56a21cd16319",
"Part 12" "Step 12"
], ],
[ [
"5d651ee1ee291f75bbd738ee", "5d651ee1ee291f75bbd738ee",
"Part 13" "Step 13"
], ],
[ [
"5d652e5a6e6bf7a6a27aa80a", "5d652e5a6e6bf7a6a27aa80a",
"Part 14" "Step 14"
], ],
[ [
"5d653b2d6e6bf7a6a27aa80b", "5d653b2d6e6bf7a6a27aa80b",
"Part 15" "Step 15"
], ],
[ [
"5d653c4d6e6bf7a6a27aa80c", "5d653c4d6e6bf7a6a27aa80c",
"Part 16" "Step 16"
], ],
[ [
"5d6542826e6bf7a6a27aa80d", "5d6542826e6bf7a6a27aa80d",
"Part 17" "Step 17"
], ],
[ [
"5d65f2c62012114c7d7c57eb", "5d65f2c62012114c7d7c57eb",
"Part 18" "Step 18"
], ],
[ [
"5d65f4cd2012114c7d7c57ec", "5d65f4cd2012114c7d7c57ec",
"Part 19" "Step 19"
], ],
[ [
"5d65f6392012114c7d7c57ed", "5d65f6392012114c7d7c57ed",
"Part 20" "Step 20"
], ],
[ [
"5d6606634bab337fbb433884", "5d6606634bab337fbb433884",
"Part 21" "Step 21"
], ],
[ [
"5d66093c4bab337fbb433885", "5d66093c4bab337fbb433885",
"Part 22" "Step 22"
], ],
[ [
"5d660a32e0696bdec46938d5", "5d660a32e0696bdec46938d5",
"Part 23" "Step 23"
], ],
[ [
"5d6616d8e0696bdec46938d6", "5d6616d8e0696bdec46938d6",
"Part 24" "Step 24"
], ],
[ [
"5d661814e0696bdec46938d7", "5d661814e0696bdec46938d7",
"Part 25" "Step 25"
], ],
[ [
"5d66198de0696bdec46938d8", "5d66198de0696bdec46938d8",
"Part 26" "Step 26"
], ],
[ [
"5d661bc6e0696bdec46938d9", "5d661bc6e0696bdec46938d9",
"Part 27" "Step 27"
], ],
[ [
"5d6653d5e0696bdec46938da", "5d6653d5e0696bdec46938da",
"Part 28" "Step 28"
], ],
[ [
"5d665983e0696bdec46938dc", "5d665983e0696bdec46938dc",
"Part 29" "Step 29"
], ],
[ [
"5d674fd9e0696bdec46938dd", "5d674fd9e0696bdec46938dd",
"Part 30" "Step 30"
], ],
[ [
"5d6752e3e0696bdec46938de", "5d6752e3e0696bdec46938de",
"Part 31" "Step 31"
], ],
[ [
"5d6755fce0696bdec46938df", "5d6755fce0696bdec46938df",
"Part 32" "Step 32"
], ],
[ [
"5d675726e0696bdec46938e0", "5d675726e0696bdec46938e0",
"Part 33" "Step 33"
], ],
[ [
"5d678366e0696bdec46938e1", "5d678366e0696bdec46938e1",
"Part 34" "Step 34"
], ],
[ [
"5d67845ee0696bdec46938e2", "5d67845ee0696bdec46938e2",
"Part 35" "Step 35"
], ],
[ [
"5d67880ee0696bdec46938e3", "5d67880ee0696bdec46938e3",
"Part 36" "Step 36"
], ],
[ [
"5d67ad3de0696bdec46938e4", "5d67ad3de0696bdec46938e4",
"Part 37" "Step 37"
], ],
[ [
"5d67ae95e0696bdec46938e5", "5d67ae95e0696bdec46938e5",
"Part 38" "Step 38"
], ],
[ [
"5d67b284e0696bdec46938e6", "5d67b284e0696bdec46938e6",
"Part 39" "Step 39"
], ],
[ [
"5d67b945e0696bdec46938e7", "5d67b945e0696bdec46938e7",
"Part 40" "Step 40"
], ],
[ [
"5d68c3b1e0696bdec46938e8", "5d68c3b1e0696bdec46938e8",
"Part 41" "Step 41"
], ],
[ [
"5d68c51ee0696bdec46938e9", "5d68c51ee0696bdec46938e9",
"Part 42" "Step 42"
], ],
[ [
"5d68c5efe0696bdec46938ea", "5d68c5efe0696bdec46938ea",
"Part 43" "Step 43"
], ],
[ [
"5d68c758e0696bdec46938eb", "5d68c758e0696bdec46938eb",
"Part 44" "Step 44"
], ],
[ [
"5d68c947e0696bdec46938ec", "5d68c947e0696bdec46938ec",
"Part 45" "Step 45"
], ],
[ [
"5d68ca40e0696bdec46938ed", "5d68ca40e0696bdec46938ed",
"Part 46" "Step 46"
], ],
[ [
"5d68d3f7e0696bdec46938ee", "5d68d3f7e0696bdec46938ee",
"Part 47" "Step 47"
], ],
[ [
"5d68d4fde0696bdec46938ef", "5d68d4fde0696bdec46938ef",
"Part 48" "Step 48"
], ],
[ [
"5d68d631e0696bdec46938f0", "5d68d631e0696bdec46938f0",
"Part 49" "Step 49"
], ],
[ [
"5d68dbf7e0696bdec46938f1", "5d68dbf7e0696bdec46938f1",
"Part 50" "Step 50"
], ],
[ [
"5d6904b6e0696bdec46938f2", "5d6904b6e0696bdec46938f2",
"Part 51" "Step 51"
], ],
[ [
"5d6905ace0696bdec46938f3", "5d6905ace0696bdec46938f3",
"Part 52" "Step 52"
], ],
[ [
"5d6f6bfc7c812010bf3327cc", "5d6f6bfc7c812010bf3327cc",
"Part 53" "Step 53"
], ],
[ [
"5d6f6e3c7c812010bf3327cd", "5d6f6e3c7c812010bf3327cd",
"Part 54" "Step 54"
], ],
[ [
"5d6f6f747c812010bf3327ce", "5d6f6f747c812010bf3327ce",
"Part 55" "Step 55"
], ],
[ [
"5d6f70937c812010bf3327cf", "5d6f70937c812010bf3327cf",
"Part 56" "Step 56"
], ],
[ [
"5d6f72657c812010bf3327d0", "5d6f72657c812010bf3327d0",
"Part 57" "Step 57"
], ],
[ [
"5d6f736b7c812010bf3327d2", "5d6f736b7c812010bf3327d2",
"Part 58" "Step 58"
], ],
[ [
"5d6f776c7c812010bf3327d3", "5d6f776c7c812010bf3327d3",
"Part 59" "Step 59"
], ],
[ [
"5d6f785f7c812010bf3327d4", "5d6f785f7c812010bf3327d4",
"Part 60" "Step 60"
], ],
[ [
"5d6f79667c812010bf3327d6", "5d6f79667c812010bf3327d6",
"Part 61" "Step 61"
], ],
[ [
"5d6f7b917c812010bf3327d7", "5d6f7b917c812010bf3327d7",
"Part 62" "Step 62"
], ],
[ [
"5d6f82da7c812010bf3327d8", "5d6f82da7c812010bf3327d8",
"Part 63" "Step 63"
], ],
[ [
"5d6f919f7c812010bf3327d9", "5d6f919f7c812010bf3327d9",
"Part 64" "Step 64"
], ],
[ [
"5d6f94347c812010bf3327da", "5d6f94347c812010bf3327da",
"Part 65" "Step 65"
], ],
[ [
"5d6f96747c812010bf3327db", "5d6f96747c812010bf3327db",
"Part 66" "Step 66"
], ],
[ [
"5d6f98247c812010bf3327dc", "5d6f98247c812010bf3327dc",
"Part 67" "Step 67"
], ],
[ [
"5d6f9a4c7c812010bf3327dd", "5d6f9a4c7c812010bf3327dd",
"Part 68" "Step 68"
], ],
[ [
"5d70850e066dac7142a6d797", "5d70850e066dac7142a6d797",
"Part 69" "Step 69"
], ],
[ [
"5d70862e066dac7142a6d798", "5d70862e066dac7142a6d798",
"Part 70" "Step 70"
], ],
[ [
"5d7086d4066dac7142a6d799", "5d7086d4066dac7142a6d799",
"Part 71" "Step 71"
], ],
[ [
"5d7088d2066dac7142a6d79a", "5d7088d2066dac7142a6d79a",
"Part 72" "Step 72"
], ],
[ [
"5d708ab5066dac7142a6d79b", "5d708ab5066dac7142a6d79b",
"Part 73" "Step 73"
], ],
[ [
"5d708be9066dac7142a6d79c", "5d708be9066dac7142a6d79c",
"Part 74" "Step 74"
], ],
[ [
"5d708c9a066dac7142a6d79d", "5d708c9a066dac7142a6d79d",
"Part 75" "Step 75"
], ],
[ [
"5d708dd7066dac7142a6d79e", "5d708dd7066dac7142a6d79e",
"Part 76" "Step 76"
], ],
[ [
"5d708fae066dac7142a6d79f", "5d708fae066dac7142a6d79f",
"Part 77" "Step 77"
], ],
[ [
"5d709664066dac7142a6d7a0", "5d709664066dac7142a6d7a0",
"Part 78" "Step 78"
], ],
[ [
"5d709bbc066dac7142a6d7a2", "5d709bbc066dac7142a6d7a2",
"Part 79" "Step 79"
], ],
[ [
"5d71b58b848f6914ab89897d", "5d71b58b848f6914ab89897d",
"Part 80" "Step 80"
], ],
[ [
"5d71bdca848f6914ab89897e", "5d71bdca848f6914ab89897e",
"Part 81" "Step 81"
], ],
[ [
"5d71bfdf848f6914ab89897f", "5d71bfdf848f6914ab89897f",
"Part 82" "Step 82"
], ],
[ [
"5d71c20f848f6914ab898980", "5d71c20f848f6914ab898980",
"Part 83" "Step 83"
], ],
[ [
"5d71c80e848f6914ab898981", "5d71c80e848f6914ab898981",
"Part 84" "Step 84"
], ],
[ [
"5d71cab4f27e5122af9f1178", "5d71cab4f27e5122af9f1178",
"Part 85" "Step 85"
], ],
[ [
"5d71ea30f27e5122af9f1179", "5d71ea30f27e5122af9f1179",
"Part 86" "Step 86"
], ],
[ [
"5d71eb0bf27e5122af9f117a", "5d71eb0bf27e5122af9f117a",
"Part 87" "Step 87"
], ],
[ [
"5d71f787e39bedcf8f0998ff", "5d71f787e39bedcf8f0998ff",
"Part 88" "Step 88"
], ],
[ [
"5d71ed88f27e5122af9f117b", "5d71ed88f27e5122af9f117b",
"Part 89" "Step 89"
], ],
[ [
"5d71f217e39bedcf8f0998fd", "5d71f217e39bedcf8f0998fd",
"Part 90" "Step 90"
], ],
[ [
"5d71f669e39bedcf8f0998fe", "5d71f669e39bedcf8f0998fe",
"Part 91" "Step 91"
], ],
[ [
"5d72027ce39bedcf8f099900", "5d72027ce39bedcf8f099900",
"Part 92" "Step 92"
], ],
[ [
"5d721925e39bedcf8f099901", "5d721925e39bedcf8f099901",
"Part 93" "Step 93"
], ],
[ [
"5d7dea508360d21c6826a9af", "5d7dea508360d21c6826a9af",
"Part 94" "Step 94"
], ],
[ [
"5d7deecc8360d21c6826a9b0", "5d7deecc8360d21c6826a9b0",
"Part 95" "Step 95"
], ],
[ [
"5d7df0458360d21c6826a9b1", "5d7df0458360d21c6826a9b1",
"Part 96" "Step 96"
], ],
[ [
"5d7df2a68360d21c6826a9b2", "5d7df2a68360d21c6826a9b2",
"Part 97" "Step 97"
], ],
[ [
"5d7df41a8360d21c6826a9b3", "5d7df41a8360d21c6826a9b3",
"Part 98" "Step 98"
], ],
[ [
"5d7df75a8360d21c6826a9b4", "5d7df75a8360d21c6826a9b4",
"Part 99" "Step 99"
], ],
[ [
"5d7dfb908360d21c6826a9b5", "5d7dfb908360d21c6826a9b5",
"Part 100" "Step 100"
], ],
[ [
"5d7e02c88360d21c6826a9b7", "5d7e02c88360d21c6826a9b7",
"Part 101" "Step 101"
], ],
[ [
"5d7e06728360d21c6826a9b8", "5d7e06728360d21c6826a9b8",
"Part 102" "Step 102"
], ],
[ [
"5d7e077e8360d21c6826a9b9", "5d7e077e8360d21c6826a9b9",
"Part 103" "Step 103"
], ],
[ [
"5d7e13798360d21c6826a9bb", "5d7e13798360d21c6826a9bb",
"Part 104" "Step 104"
], ],
[ [
"5d7f3b6c7c4263f469c36b17", "5d7f3b6c7c4263f469c36b17",
"Part 105" "Step 105"
], ],
[ [
"5d7f405c7c4263f469c36b18", "5d7f405c7c4263f469c36b18",
"Part 106" "Step 106"
], ],
[ [
"5d7f410b7c4263f469c36b19", "5d7f410b7c4263f469c36b19",
"Part 107" "Step 107"
], ],
[ [
"5d7f41fa7c4263f469c36b1a", "5d7f41fa7c4263f469c36b1a",
"Part 108" "Step 108"
], ],
[ [
"5d7f43947c4263f469c36b1b", "5d7f43947c4263f469c36b1b",
"Part 109" "Step 109"
], ],
[ [
"5d7f44ac7c4263f469c36b1c", "5d7f44ac7c4263f469c36b1c",
"Part 110" "Step 110"
], ],
[ [
"5d7f459421b11cdaa3f6b15f", "5d7f459421b11cdaa3f6b15f",
"Part 111" "Step 111"
], ],
[ [
"5d7f4d9421b11cdaa3f6b160", "5d7f4d9421b11cdaa3f6b160",
"Part 112" "Step 112"
], ],
[ [
"5d80c1d821b11cdaa3f6b164", "5d80c1d821b11cdaa3f6b164",
"Part 113" "Step 113"
], ],
[ [
"5d80c3c021b11cdaa3f6b165", "5d80c3c021b11cdaa3f6b165",
"Part 114" "Step 114"
], ],
[ [
"5d80d20d21b11cdaa3f6b166", "5d80d20d21b11cdaa3f6b166",
"Part 115" "Step 115"
], ],
[ [
"5d80d67021b11cdaa3f6b167", "5d80d67021b11cdaa3f6b167",
"Part 116" "Step 116"
], ],
[ [
"5d80da7521b11cdaa3f6b168", "5d80da7521b11cdaa3f6b168",
"Part 117" "Step 117"
], ],
[ [
"5dbab6d36ef5fe3a704f848c", "5dbab6d36ef5fe3a704f848c",
"Part 118" "Step 118"
], ],
[ [
"5dbabb746ef5fe3a704f848d", "5dbabb746ef5fe3a704f848d",
"Part 119" "Step 119"
], ],
[ [
"5dbac08e6ef5fe3a704f848f", "5dbac08e6ef5fe3a704f848f",
"Part 120" "Step 120"
], ],
[ [
"5dbac0c86ef5fe3a704f8490", "5dbac0c86ef5fe3a704f8490",
"Part 121" "Step 121"
], ],
[ [
"5dbac1f16ef5fe3a704f8491", "5dbac1f16ef5fe3a704f8491",
"Part 122" "Step 122"
], ],
[ [
"5dbac2b06ef5fe3a704f8492", "5dbac2b06ef5fe3a704f8492",
"Part 123" "Step 123"
], ],
[ [
"5dbbb5076ef5fe3a704f849d", "5dbbb5076ef5fe3a704f849d",
"Part 124" "Step 124"
], ],
[ [
"5dbac6176ef5fe3a704f8493", "5dbac6176ef5fe3a704f8493",
"Part 125" "Step 125"
], ],
[ [
"5dbaca566ef5fe3a704f8494", "5dbaca566ef5fe3a704f8494",
"Part 126" "Step 126"
], ],
[ [
"5dbae0446ef5fe3a704f8495", "5dbae0446ef5fe3a704f8495",
"Part 127" "Step 127"
], ],
[ [
"5dbae1f66ef5fe3a704f8496", "5dbae1f66ef5fe3a704f8496",
"Part 128" "Step 128"
], ],
[ [
"5dbba5716ef5fe3a704f8497", "5dbba5716ef5fe3a704f8497",
"Part 129" "Step 129"
], ],
[ [
"5dbba70e6ef5fe3a704f8498", "5dbba70e6ef5fe3a704f8498",
"Part 130" "Step 130"
], ],
[ [
"5dbba89e6ef5fe3a704f8499", "5dbba89e6ef5fe3a704f8499",
"Part 131" "Step 131"
], ],
[ [
"5dbbaeb56ef5fe3a704f849a", "5dbbaeb56ef5fe3a704f849a",
"Part 132" "Step 132"
], ],
[ [
"5dbbb00e6ef5fe3a704f849b", "5dbbb00e6ef5fe3a704f849b",
"Part 133" "Step 133"
], ],
[ [
"5dbbb1466ef5fe3a704f849c", "5dbbb1466ef5fe3a704f849c",
"Part 134" "Step 134"
], ],
[ [
"5dbbf3796ef5fe3a704f849e", "5dbbf3796ef5fe3a704f849e",
"Part 135" "Step 135"
], ],
[ [
"5dbbf8d86ef5fe3a704f849f", "5dbbf8d86ef5fe3a704f849f",
"Part 136" "Step 136"
], ],
[ [
"5dbc23a66ef5fe3a704f84a0", "5dbc23a66ef5fe3a704f84a0",
"Part 137" "Step 137"
], ],
[ [
"5dbc2c506ef5fe3a704f84a1", "5dbc2c506ef5fe3a704f84a1",
"Part 138" "Step 138"
], ],
[ [
"5dbc2d056ef5fe3a704f84a2", "5dbc2d056ef5fe3a704f84a2",
"Part 139" "Step 139"
], ],
[ [
"5dbc2f2d6ef5fe3a704f84a3", "5dbc2f2d6ef5fe3a704f84a3",
"Part 140" "Step 140"
], ],
[ [
"5dbc33956ef5fe3a704f84a4", "5dbc33956ef5fe3a704f84a4",
"Part 141" "Step 141"
], ],
[ [
"5dbc35326ef5fe3a704f84a5", "5dbc35326ef5fe3a704f84a5",
"Part 142" "Step 142"
], ],
[ [
"5dbfced07736e5ee7d235544", "5dbfced07736e5ee7d235544",
"Part 143" "Step 143"
], ],
[ [
"5dbfd4837736e5ee7d235545", "5dbfd4837736e5ee7d235545",
"Part 144" "Step 144"
], ],
[ [
"5dbfdb737736e5ee7d235546", "5dbfdb737736e5ee7d235546",
"Part 145" "Step 145"
], ],
[ [
"5dbfdc377736e5ee7d235547", "5dbfdc377736e5ee7d235547",
"Part 146" "Step 146"
], ],
[ [
"5dbfe2f37736e5ee7d235548", "5dbfe2f37736e5ee7d235548",
"Part 147" "Step 147"
], ],
[ [
"5dbfeffe7736e5ee7d235549", "5dbfeffe7736e5ee7d235549",
"Part 148" "Step 148"
], ],
[ [
"5dbff18d7736e5ee7d23554a", "5dbff18d7736e5ee7d23554a",
"Part 149" "Step 149"
], ],
[ [
"5dbff2d07736e5ee7d23554b", "5dbff2d07736e5ee7d23554b",
"Part 150" "Step 150"
], ],
[ [
"5dbffd907736e5ee7d23554c", "5dbffd907736e5ee7d23554c",
"Part 151" "Step 151"
], ],
[ [
"5dbffe887736e5ee7d23554d", "5dbffe887736e5ee7d23554d",
"Part 152" "Step 152"
], ],
[ [
"5dc01a727736e5ee7d23554f", "5dc01a727736e5ee7d23554f",
"Part 153" "Step 153"
] ]
]} ]}

92
curriculum/challenges/_meta/css-box-model/meta.json
View File

@ -13,187 +13,187 @@
"challengeOrder": [ "challengeOrder": [
[ [
"60a3e3396c7b40068ad6996a", "60a3e3396c7b40068ad6996a",
"Part 1" "Step 1"
], ],
[ [
"60a3e3396c7b40068ad6996b", "60a3e3396c7b40068ad6996b",
"Part 2" "Step 2"
], ],
[ [
"60a3e3396c7b40068ad6996c", "60a3e3396c7b40068ad6996c",
"Part 3" "Step 3"
], ],
[ [
"60a3e3396c7b40068ad6996d", "60a3e3396c7b40068ad6996d",
"Part 4" "Step 4"
], ],
[ [
"60a3e3396c7b40068ad6996e", "60a3e3396c7b40068ad6996e",
"Part 5" "Step 5"
], ],
[ [
"60a3e3396c7b40068ad6996f", "60a3e3396c7b40068ad6996f",
"Part 6" "Step 6"
], ],
[ [
"60a3e3396c7b40068ad69970", "60a3e3396c7b40068ad69970",
"Part 7" "Step 7"
], ],
[ [
"60a3e3396c7b40068ad69971", "60a3e3396c7b40068ad69971",
"Part 8" "Step 8"
], ],
[ [
"60a3e3396c7b40068ad69972", "60a3e3396c7b40068ad69972",
"Part 9" "Step 9"
], ],
[ [
"60a3e3396c7b40068ad69973", "60a3e3396c7b40068ad69973",
"Part 10" "Step 10"
], ],
[ [
"60a3e3396c7b40068ad69974", "60a3e3396c7b40068ad69974",
"Part 11" "Step 11"
], ],
[ [
"60a3e3396c7b40068ad69975", "60a3e3396c7b40068ad69975",
"Part 12" "Step 12"
], ],
[ [
"60a3e3396c7b40068ad69976", "60a3e3396c7b40068ad69976",
"Part 13" "Step 13"
], ],
[ [
"60a3e3396c7b40068ad69977", "60a3e3396c7b40068ad69977",
"Part 14" "Step 14"
], ],
[ [
"60a3e3396c7b40068ad69978", "60a3e3396c7b40068ad69978",
"Part 15" "Step 15"
], ],
[ [
"60a3e3396c7b40068ad69979", "60a3e3396c7b40068ad69979",
"Part 16" "Step 16"
], ],
[ [
"60a3e3396c7b40068ad6997a", "60a3e3396c7b40068ad6997a",
"Part 17" "Step 17"
], ],
[ [
"60a3e3396c7b40068ad6997b", "60a3e3396c7b40068ad6997b",
"Part 18" "Step 18"
], ],
[ [
"60a3e3396c7b40068ad6997c", "60a3e3396c7b40068ad6997c",
"Part 19" "Step 19"
], ],
[ [
"60a3e3396c7b40068ad6997d", "60a3e3396c7b40068ad6997d",
"Part 20" "Step 20"
], ],
[ [
"60a3e3396c7b40068ad6997e", "60a3e3396c7b40068ad6997e",
"Part 21" "Step 21"
], ],
[ [
"60a3e3396c7b40068ad6997f", "60a3e3396c7b40068ad6997f",
"Part 22" "Step 22"
], ],
[ [
"60a3e3396c7b40068ad69980", "60a3e3396c7b40068ad69980",
"Part 23" "Step 23"
], ],
[ [
"60a3e3396c7b40068ad69981", "60a3e3396c7b40068ad69981",
"Part 24" "Step 24"
], ],
[ [
"60a3e3396c7b40068ad69982", "60a3e3396c7b40068ad69982",
"Part 25" "Step 25"
], ],
[ [
"60a3e3396c7b40068ad69983", "60a3e3396c7b40068ad69983",
"Part 26" "Step 26"
], ],
[ [
"60a3e3396c7b40068ad69984", "60a3e3396c7b40068ad69984",
"Part 27" "Step 27"
], ],
[ [
"60a3e3396c7b40068ad69985", "60a3e3396c7b40068ad69985",
"Part 28" "Step 28"
], ],
[ [
"60a3e3396c7b40068ad69986", "60a3e3396c7b40068ad69986",
"Part 29" "Step 29"
], ],
[ [
"60a3e3396c7b40068ad69987", "60a3e3396c7b40068ad69987",
"Part 30" "Step 30"
], ],
[ [
"60a3e3396c7b40068ad69988", "60a3e3396c7b40068ad69988",
"Part 31" "Step 31"
], ],
[ [
"60a3e3396c7b40068ad69989", "60a3e3396c7b40068ad69989",
"Part 32" "Step 32"
], ],
[ [
"60a3e3396c7b40068ad6998a", "60a3e3396c7b40068ad6998a",
"Part 33" "Step 33"
], ],
[ [
"60a3e3396c7b40068ad6998b", "60a3e3396c7b40068ad6998b",
"Part 34" "Step 34"
], ],
[ [
"60a3e3396c7b40068ad6998c", "60a3e3396c7b40068ad6998c",
"Part 35" "Step 35"
], ],
[ [
"60a3e3396c7b40068ad6998d", "60a3e3396c7b40068ad6998d",
"Part 36" "Step 36"
], ],
[ [
"60a3e3396c7b40068ad6998e", "60a3e3396c7b40068ad6998e",
"Part 37" "Step 37"
], ],
[ [
"60a3e3396c7b40068ad6998f", "60a3e3396c7b40068ad6998f",
"Part 38" "Step 38"
], ],
[ [
"60a3e3396c7b40068ad69990", "60a3e3396c7b40068ad69990",
"Part 39" "Step 39"
], ],
[ [
"60a3e3396c7b40068ad69991", "60a3e3396c7b40068ad69991",
"Part 40" "Step 40"
], ],
[ [
"60a3e3396c7b40068ad69992", "60a3e3396c7b40068ad69992",
"Part 41" "Step 41"
], ],
[ [
"60a3e3396c7b40068ad69993", "60a3e3396c7b40068ad69993",
"Part 42" "Step 42"
], ],
[ [
"60a3e3396c7b40068ad69994", "60a3e3396c7b40068ad69994",
"Part 43" "Step 43"
], ],
[ [
"60a3e3396c7b40068ad69995", "60a3e3396c7b40068ad69995",
"Part 44" "Step 44"
], ],
[ [
"60a3e3396c7b40068ad69996", "60a3e3396c7b40068ad69996",
"Part 45" "Step 45"
], ],
[ [
"60a3e3396c7b40068ad69997", "60a3e3396c7b40068ad69997",
"Part 46" "Step 46"
] ]
] ]
} }

66
curriculum/challenges/_meta/css-piano/meta.json
View File

@ -13,135 +13,135 @@
"challengeOrder": [ "challengeOrder": [
[ [
"612e6afc009b450a437940a1", "612e6afc009b450a437940a1",
"Part 1" "Step 1"
], ],
[ [
"612e77aba7ca691f598feb02", "612e77aba7ca691f598feb02",
"Part 2" "Step 2"
], ],
[ [
"612e78af05201622d4bab8aa", "612e78af05201622d4bab8aa",
"Part 3" "Step 3"
], ],
[ [
"612e7d1c29fb872d6384379c", "612e7d1c29fb872d6384379c",
"Part 4" "Step 4"
], ],
[ [
"612e804c54d5e7308d7ebe56", "612e804c54d5e7308d7ebe56",
"Part 5" "Step 5"
], ],
[ [
"612e813b3ba67633222cbe54", "612e813b3ba67633222cbe54",
"Part 6" "Step 6"
], ],
[ [
"612e8279827a28352ce83a72", "612e8279827a28352ce83a72",
"Part 7" "Step 7"
], ],
[ [
"612e83ec2eca1e370f830511", "612e83ec2eca1e370f830511",
"Part 8" "Step 8"
], ],
[ [
"612e89562043183c86df287c", "612e89562043183c86df287c",
"Part 9" "Step 9"
], ],
[ [
"612e89d254fe5d3df7d6693d", "612e89d254fe5d3df7d6693d",
"Part 10" "Step 10"
], ],
[ [
"612e8eebe3a6dc3fcc33a66f", "612e8eebe3a6dc3fcc33a66f",
"Part 11" "Step 11"
], ],
[ [
"612e95ef2e4bdf41f69067f9", "612e95ef2e4bdf41f69067f9",
"Part 12" "Step 12"
], ],
[ [
"612e96fc87fe8e44f69f7ec5", "612e96fc87fe8e44f69f7ec5",
"Part 13" "Step 13"
], ],
[ [
"612e98f3245c98475e49cfc6", "612e98f3245c98475e49cfc6",
"Part 14" "Step 14"
], ],
[ [
"612e9a21381a1949327512e6", "612e9a21381a1949327512e6",
"Part 15" "Step 15"
], ],
[ [
"612e9d142affc44a453655db", "612e9d142affc44a453655db",
"Part 16" "Step 16"
], ],
[ [
"612e9f1e7e5ccd4fa9ada0be", "612e9f1e7e5ccd4fa9ada0be",
"Part 17" "Step 17"
], ],
[ [
"612ea4c4993aba52ab4aa32e", "612ea4c4993aba52ab4aa32e",
"Part 18" "Step 18"
], ],
[ [
"612ea97df5742154772f312e", "612ea97df5742154772f312e",
"Part 19" "Step 19"
], ],
[ [
"612ead8788d28655ef8db056", "612ead8788d28655ef8db056",
"Part 20" "Step 20"
], ],
[ [
"612eaf56b7ba3257fdbfb0db", "612eaf56b7ba3257fdbfb0db",
"Part 21" "Step 21"
], ],
[ [
"612eb4893b63c75bb9251ddf", "612eb4893b63c75bb9251ddf",
"Part 22" "Step 22"
], ],
[ [
"612eb75153591b5e3b1ab65e", "612eb75153591b5e3b1ab65e",
"Part 23" "Step 23"
], ],
[ [
"612eb7ca8c275d5f89c73333", "612eb7ca8c275d5f89c73333",
"Part 24" "Step 24"
], ],
[ [
"612eb8e984cd73677a92b7e9", "612eb8e984cd73677a92b7e9",
"Part 25" "Step 25"
], ],
[ [
"612eb934f64a4d6890a45518", "612eb934f64a4d6890a45518",
"Part 26" "Step 26"
], ],
[ [
"612ebcba99bfa46a15370b11", "612ebcba99bfa46a15370b11",
"Part 27" "Step 27"
], ],
[ [
"612ebe7fe6d07e6b76d1cae2", "612ebe7fe6d07e6b76d1cae2",
"Part 28" "Step 28"
], ],
[ [
"612ebedec97e096c8bf64999", "612ebedec97e096c8bf64999",
"Part 29" "Step 29"
], ],
[ [
"612ebf9a210f2b6d77001e68", "612ebf9a210f2b6d77001e68",
"Part 30" "Step 30"
], ],
[ [
"612ec0490ae8626e9adf82e4", "612ec0490ae8626e9adf82e4",
"Part 31" "Step 31"
], ],
[ [
"612ec19d5268da7074941f84", "612ec19d5268da7074941f84",
"Part 32" "Step 32"
], ],
[ [
"612ec29c84b9a6718b1f5cec", "612ec29c84b9a6718b1f5cec",
"Part 33" "Step 33"
] ]
] ]
} }

178
curriculum/challenges/_meta/css-picasso-painting/meta.json
View File

@ -13,359 +13,359 @@
"challengeOrder": [ "challengeOrder": [
[ [
"60b69a66b6ddb80858c51578", "60b69a66b6ddb80858c51578",
"Part 1" "Step 1"
], ],
[ [
"60b69a66b6ddb80858c51579", "60b69a66b6ddb80858c51579",
"Part 2" "Step 2"
], ],
[ [
"60b80da8676fb3227967a731", "60b80da8676fb3227967a731",
"Part 3" "Step 3"
], ],
[ [
"60b69a66b6ddb80858c5157a", "60b69a66b6ddb80858c5157a",
"Part 4" "Step 4"
], ],
[ [
"60b69a66b6ddb80858c5157b", "60b69a66b6ddb80858c5157b",
"Part 5" "Step 5"
], ],
[ [
"60b69a66b6ddb80858c5157c", "60b69a66b6ddb80858c5157c",
"Part 6" "Step 6"
], ],
[ [
"60b69a66b6ddb80858c5157d", "60b69a66b6ddb80858c5157d",
"Part 7" "Step 7"
], ],
[ [
"60b69a66b6ddb80858c5157e", "60b69a66b6ddb80858c5157e",
"Part 8" "Step 8"
], ],
[ [
"60b69a66b6ddb80858c5157f", "60b69a66b6ddb80858c5157f",
"Part 9" "Step 9"
], ],
[ [
"60b69a66b6ddb80858c51580", "60b69a66b6ddb80858c51580",
"Part 10" "Step 10"
], ],
[ [
"60b69a66b6ddb80858c51581", "60b69a66b6ddb80858c51581",
"Part 11" "Step 11"
], ],
[ [
"60b69a66b6ddb80858c51582", "60b69a66b6ddb80858c51582",
"Part 12" "Step 12"
], ],
[ [
"60b69a66b6ddb80858c51583", "60b69a66b6ddb80858c51583",
"Part 13" "Step 13"
], ],
[ [
"60b69a66b6ddb80858c51584", "60b69a66b6ddb80858c51584",
"Part 14" "Step 14"
], ],
[ [
"60b69a66b6ddb80858c51585", "60b69a66b6ddb80858c51585",
"Part 15" "Step 15"
], ],
[ [
"60b69a66b6ddb80858c51586", "60b69a66b6ddb80858c51586",
"Part 16" "Step 16"
], ],
[ [
"60b69a66b6ddb80858c51587", "60b69a66b6ddb80858c51587",
"Part 17" "Step 17"
], ],
[ [
"60b69a66b6ddb80858c51588", "60b69a66b6ddb80858c51588",
"Part 18" "Step 18"
], ],
[ [
"60b69a66b6ddb80858c51589", "60b69a66b6ddb80858c51589",
"Part 19" "Step 19"
], ],
[ [
"60b69a66b6ddb80858c5158a", "60b69a66b6ddb80858c5158a",
"Part 20" "Step 20"
], ],
[ [
"60b69a66b6ddb80858c5158b", "60b69a66b6ddb80858c5158b",
"Part 21" "Step 21"
], ],
[ [
"60b69a66b6ddb80858c5158c", "60b69a66b6ddb80858c5158c",
"Part 22" "Step 22"
], ],
[ [
"60b69a66b6ddb80858c5158d", "60b69a66b6ddb80858c5158d",
"Part 23" "Step 23"
], ],
[ [
"60b69a66b6ddb80858c5158e", "60b69a66b6ddb80858c5158e",
"Part 24" "Step 24"
], ],
[ [
"60b69a66b6ddb80858c5158f", "60b69a66b6ddb80858c5158f",
"Part 25" "Step 25"
], ],
[ [
"60b69a66b6ddb80858c51590", "60b69a66b6ddb80858c51590",
"Part 26" "Step 26"
], ],
[ [
"60b69a66b6ddb80858c51591", "60b69a66b6ddb80858c51591",
"Part 27" "Step 27"
], ],
[ [
"60b69a66b6ddb80858c51592", "60b69a66b6ddb80858c51592",
"Part 28" "Step 28"
], ],
[ [
"60b69a66b6ddb80858c51593", "60b69a66b6ddb80858c51593",
"Part 29" "Step 29"
], ],
[ [
"60b69a66b6ddb80858c51594", "60b69a66b6ddb80858c51594",
"Part 30" "Step 30"
], ],
[ [
"60b69a66b6ddb80858c51595", "60b69a66b6ddb80858c51595",
"Part 31" "Step 31"
], ],
[ [
"60b69a66b6ddb80858c51596", "60b69a66b6ddb80858c51596",
"Part 32" "Step 32"
], ],
[ [
"60b69a66b6ddb80858c51597", "60b69a66b6ddb80858c51597",
"Part 33" "Step 33"
], ],
[ [
"60b69a66b6ddb80858c51598", "60b69a66b6ddb80858c51598",
"Part 34" "Step 34"
], ],
[ [
"60b69a66b6ddb80858c51599", "60b69a66b6ddb80858c51599",
"Part 35" "Step 35"
], ],
[ [
"60b69a66b6ddb80858c5159a", "60b69a66b6ddb80858c5159a",
"Part 36" "Step 36"
], ],
[ [
"60b69a66b6ddb80858c5159b", "60b69a66b6ddb80858c5159b",
"Part 37" "Step 37"
], ],
[ [
"60b69a66b6ddb80858c5159c", "60b69a66b6ddb80858c5159c",
"Part 38" "Step 38"
], ],
[ [
"60b69a66b6ddb80858c5159d", "60b69a66b6ddb80858c5159d",
"Part 39" "Step 39"
], ],
[ [
"60b69a66b6ddb80858c5159e", "60b69a66b6ddb80858c5159e",
"Part 40" "Step 40"
], ],
[ [
"60bad32219ebcb4a8810ac6a", "60bad32219ebcb4a8810ac6a",
"Part 41" "Step 41"
], ],
[ [
"60b69a66b6ddb80858c5159f", "60b69a66b6ddb80858c5159f",
"Part 42" "Step 42"
], ],
[ [
"60b69a66b6ddb80858c515a0", "60b69a66b6ddb80858c515a0",
"Part 43" "Step 43"
], ],
[ [
"60b69a66b6ddb80858c515a1", "60b69a66b6ddb80858c515a1",
"Part 44" "Step 44"
], ],
[ [
"60b69a66b6ddb80858c515a2", "60b69a66b6ddb80858c515a2",
"Part 45" "Step 45"
], ],
[ [
"60b69a66b6ddb80858c515a3", "60b69a66b6ddb80858c515a3",
"Part 46" "Step 46"
], ],
[ [
"60b69a66b6ddb80858c515a4", "60b69a66b6ddb80858c515a4",
"Part 47" "Step 47"
], ],
[ [
"60b69a66b6ddb80858c515a5", "60b69a66b6ddb80858c515a5",
"Part 48" "Step 48"
], ],
[ [
"60b69a66b6ddb80858c515a6", "60b69a66b6ddb80858c515a6",
"Part 49" "Step 49"
], ],
[ [
"60b69a66b6ddb80858c515a7", "60b69a66b6ddb80858c515a7",
"Part 50" "Step 50"
], ],
[ [
"60b69a66b6ddb80858c515a8", "60b69a66b6ddb80858c515a8",
"Part 51" "Step 51"
], ],
[ [
"60b69a66b6ddb80858c515a9", "60b69a66b6ddb80858c515a9",
"Part 52" "Step 52"
], ],
[ [
"60b69a66b6ddb80858c515aa", "60b69a66b6ddb80858c515aa",
"Part 53" "Step 53"
], ],
[ [
"60b69a66b6ddb80858c515ab", "60b69a66b6ddb80858c515ab",
"Part 54" "Step 54"
], ],
[ [
"60b69a66b6ddb80858c515ac", "60b69a66b6ddb80858c515ac",
"Part 55" "Step 55"
], ],
[ [
"60b69a66b6ddb80858c515ad", "60b69a66b6ddb80858c515ad",
"Part 56" "Step 56"
], ],
[ [
"60b69a66b6ddb80858c515ae", "60b69a66b6ddb80858c515ae",
"Part 57" "Step 57"
], ],
[ [
"60b69a66b6ddb80858c515af", "60b69a66b6ddb80858c515af",
"Part 58" "Step 58"
], ],
[ [
"60b69a66b6ddb80858c515b0", "60b69a66b6ddb80858c515b0",
"Part 59" "Step 59"
], ],
[ [
"60b69a66b6ddb80858c515b1", "60b69a66b6ddb80858c515b1",
"Part 60" "Step 60"
], ],
[ [
"60b69a66b6ddb80858c515b2", "60b69a66b6ddb80858c515b2",
"Part 61" "Step 61"
], ],
[ [
"60b69a66b6ddb80858c515b3", "60b69a66b6ddb80858c515b3",
"Part 62" "Step 62"
], ],
[ [
"60b69a66b6ddb80858c515b4", "60b69a66b6ddb80858c515b4",
"Part 63" "Step 63"
], ],
[ [
"60b69a66b6ddb80858c515b5", "60b69a66b6ddb80858c515b5",
"Part 64" "Step 64"
], ],
[ [
"60b69a66b6ddb80858c515b6", "60b69a66b6ddb80858c515b6",
"Part 65" "Step 65"
], ],
[ [
"60b69a66b6ddb80858c515b7", "60b69a66b6ddb80858c515b7",
"Part 66" "Step 66"
], ],
[ [
"60b69a66b6ddb80858c515b8", "60b69a66b6ddb80858c515b8",
"Part 67" "Step 67"
], ],
[ [
"60b69a66b6ddb80858c515b9", "60b69a66b6ddb80858c515b9",
"Part 68" "Step 68"
], ],
[ [
"60b69a66b6ddb80858c515ba", "60b69a66b6ddb80858c515ba",
"Part 69" "Step 69"
], ],
[ [
"60b69a66b6ddb80858c515bc", "60b69a66b6ddb80858c515bc",
"Part 70" "Step 70"
], ],
[ [
"60ba8914bab51f0fb8228e9c", "60ba8914bab51f0fb8228e9c",
"Part 71" "Step 71"
], ],
[ [
"60ba89146b25080f99ab54ad", "60ba89146b25080f99ab54ad",
"Part 72" "Step 72"
], ],
[ [
"60ba8913f1704c0f7a8906b8", "60ba8913f1704c0f7a8906b8",
"Part 73" "Step 73"
], ],
[ [
"60ba89123a445e0f5c9e4022", "60ba89123a445e0f5c9e4022",
"Part 74" "Step 74"
], ],
[ [
"60ba890832b4940f24d1936b", "60ba890832b4940f24d1936b",
"Part 75" "Step 75"
], ],
[ [
"60ba929345ab0714a3743655", "60ba929345ab0714a3743655",
"Part 76" "Step 76"
], ],
[ [
"60ba9296d4d6b414c1b10995", "60ba9296d4d6b414c1b10995",
"Part 77" "Step 77"
], ],
[ [
"60ba92987c1e4914dfa7a0b9", "60ba92987c1e4914dfa7a0b9",
"Part 78" "Step 78"
], ],
[ [
"60b69a66b6ddb80858c515bd", "60b69a66b6ddb80858c515bd",
"Part 79" "Step 79"
], ],
[ [
"60b69a66b6ddb80858c515be", "60b69a66b6ddb80858c515be",
"Part 80" "Step 80"
], ],
[ [
"60b69a66b6ddb80858c515bf", "60b69a66b6ddb80858c515bf",
"Part 81" "Step 81"
], ],
[ [
"60b69a66b6ddb80858c515c0", "60b69a66b6ddb80858c515c0",
"Part 82" "Step 82"
], ],
[ [
"60b69a66b6ddb80858c515c1", "60b69a66b6ddb80858c515c1",
"Part 83" "Step 83"
], ],
[ [
"60b69a66b6ddb80858c515c2", "60b69a66b6ddb80858c515c2",
"Part 84" "Step 84"
], ],
[ [
"60b69a66b6ddb80858c515c3", "60b69a66b6ddb80858c515c3",
"Part 85" "Step 85"
], ],
[ [
"60b69a66b6ddb80858c515c4", "60b69a66b6ddb80858c515c4",
"Part 86" "Step 86"
], ],
[ [
"60b69a66b6ddb80858c515c5", "60b69a66b6ddb80858c515c5",
"Part 87" "Step 87"
], ],
[ [
"60b69a66b6ddb80858c515c6", "60b69a66b6ddb80858c515c6",
"Part 88" "Step 88"
], ],
[ [
"60b69a66b6ddb80858c515c7", "60b69a66b6ddb80858c515c7",
"Part 89" "Step 89"
] ]
] ]
} }

236
curriculum/challenges/_meta/css-variables-skyline/meta.json
View File

@ -12,474 +12,474 @@
"challengeOrder": [ "challengeOrder": [
[ [
"5d822fd413a79914d39e98c9", "5d822fd413a79914d39e98c9",
"Part 1" "Step 1"
], ],
[ [
"5d822fd413a79914d39e98ca", "5d822fd413a79914d39e98ca",
"Part 2" "Step 2"
], ],
[ [
"5d822fd413a79914d39e98cb", "5d822fd413a79914d39e98cb",
"Part 3" "Step 3"
], ],
[ [
"5d822fd413a79914d39e98cc", "5d822fd413a79914d39e98cc",
"Part 4" "Step 4"
], ],
[ [
"5d822fd413a79914d39e98cd", "5d822fd413a79914d39e98cd",
"Part 5" "Step 5"
], ],
[ [
"5d822fd413a79914d39e98ce", "5d822fd413a79914d39e98ce",
"Part 6" "Step 6"
], ],
[ [
"5d822fd413a79914d39e98cf", "5d822fd413a79914d39e98cf",
"Part 7" "Step 7"
], ],
[ [
"5d822fd413a79914d39e98d0", "5d822fd413a79914d39e98d0",
"Part 8" "Step 8"
], ],
[ [
"5d822fd413a79914d39e98d1", "5d822fd413a79914d39e98d1",
"Part 9" "Step 9"
], ],
[ [
"5d822fd413a79914d39e98d2", "5d822fd413a79914d39e98d2",
"Part 10" "Step 10"
], ],
[ [
"5d822fd413a79914d39e98d3", "5d822fd413a79914d39e98d3",
"Part 11" "Step 11"
], ],
[ [
"5d822fd413a79914d39e98d4", "5d822fd413a79914d39e98d4",
"Part 12" "Step 12"
], ],
[ [
"5d822fd413a79914d39e98d5", "5d822fd413a79914d39e98d5",
"Part 13" "Step 13"
], ],
[ [
"5d822fd413a79914d39e98d6", "5d822fd413a79914d39e98d6",
"Part 14" "Step 14"
], ],
[ [
"5d822fd413a79914d39e98d7", "5d822fd413a79914d39e98d7",
"Part 15" "Step 15"
], ],
[ [
"5d822fd413a79914d39e98d8", "5d822fd413a79914d39e98d8",
"Part 16" "Step 16"
], ],
[ [
"5d822fd413a79914d39e98d9", "5d822fd413a79914d39e98d9",
"Part 17" "Step 17"
], ],
[ [
"5d822fd413a79914d39e98da", "5d822fd413a79914d39e98da",
"Part 18" "Step 18"
], ],
[ [
"5d822fd413a79914d39e98db", "5d822fd413a79914d39e98db",
"Part 19" "Step 19"
], ],
[ [
"5d822fd413a79914d39e98dc", "5d822fd413a79914d39e98dc",
"Part 20" "Step 20"
], ],
[ [
"5d822fd413a79914d39e98dd", "5d822fd413a79914d39e98dd",
"Part 21" "Step 21"
], ],
[ [
"5d822fd413a79914d39e98de", "5d822fd413a79914d39e98de",
"Part 22" "Step 22"
], ],
[ [
"5d822fd413a79914d39e98df", "5d822fd413a79914d39e98df",
"Part 23" "Step 23"
], ],
[ [
"5d822fd413a79914d39e98e0", "5d822fd413a79914d39e98e0",
"Part 24" "Step 24"
], ],
[ [
"5d822fd413a79914d39e98e1", "5d822fd413a79914d39e98e1",
"Part 25" "Step 25"
], ],
[ [
"5d822fd413a79914d39e98e2", "5d822fd413a79914d39e98e2",
"Part 26" "Step 26"
], ],
[ [
"5d822fd413a79914d39e98e3", "5d822fd413a79914d39e98e3",
"Part 27" "Step 27"
], ],
[ [
"5d822fd413a79914d39e98e4", "5d822fd413a79914d39e98e4",
"Part 28" "Step 28"
], ],
[ [
"5d822fd413a79914d39e98e5", "5d822fd413a79914d39e98e5",
"Part 29" "Step 29"
], ],
[ [
"5d822fd413a79914d39e98e6", "5d822fd413a79914d39e98e6",
"Part 30" "Step 30"
], ],
[ [
"5d822fd413a79914d39e98e7", "5d822fd413a79914d39e98e7",
"Part 31" "Step 31"
], ],
[ [
"5d822fd413a79914d39e98e8", "5d822fd413a79914d39e98e8",
"Part 32" "Step 32"
], ],
[ [
"5d822fd413a79914d39e98e9", "5d822fd413a79914d39e98e9",
"Part 33" "Step 33"
], ],
[ [
"5d822fd413a79914d39e98ea", "5d822fd413a79914d39e98ea",
"Part 34" "Step 34"
], ],
[ [
"5d822fd413a79914d39e98eb", "5d822fd413a79914d39e98eb",
"Part 35" "Step 35"
], ],
[ [
"5d822fd413a79914d39e98ec", "5d822fd413a79914d39e98ec",
"Part 36" "Step 36"
], ],
[ [
"5d822fd413a79914d39e98ed", "5d822fd413a79914d39e98ed",
"Part 37" "Step 37"
], ],
[ [
"5d822fd413a79914d39e98ee", "5d822fd413a79914d39e98ee",
"Part 38" "Step 38"
], ],
[ [
"5d822fd413a79914d39e98ef", "5d822fd413a79914d39e98ef",
"Part 39" "Step 39"
], ],
[ [
"5d822fd413a79914d39e98f0", "5d822fd413a79914d39e98f0",
"Part 40" "Step 40"
], ],
[ [
"5d822fd413a79914d39e98f1", "5d822fd413a79914d39e98f1",
"Part 41" "Step 41"
], ],
[ [
"5d822fd413a79914d39e98f2", "5d822fd413a79914d39e98f2",
"Part 42" "Step 42"
], ],
[ [
"5d822fd413a79914d39e98f3", "5d822fd413a79914d39e98f3",
"Part 43" "Step 43"
], ],
[ [
"5d822fd413a79914d39e98f4", "5d822fd413a79914d39e98f4",
"Part 44" "Step 44"
], ],
[ [
"5d822fd413a79914d39e98f5", "5d822fd413a79914d39e98f5",
"Part 45" "Step 45"
], ],
[ [
"5d822fd413a79914d39e98f6", "5d822fd413a79914d39e98f6",
"Part 46" "Step 46"
], ],
[ [
"5d822fd413a79914d39e98f7", "5d822fd413a79914d39e98f7",
"Part 47" "Step 47"
], ],
[ [
"5d822fd413a79914d39e98f8", "5d822fd413a79914d39e98f8",
"Part 48" "Step 48"
], ],
[ [
"5d822fd413a79914d39e98f9", "5d822fd413a79914d39e98f9",
"Part 49" "Step 49"
], ],
[ [
"5d822fd413a79914d39e98fa", "5d822fd413a79914d39e98fa",
"Part 50" "Step 50"
], ],
[ [
"5d822fd413a79914d39e98fb", "5d822fd413a79914d39e98fb",
"Part 51" "Step 51"
], ],
[ [
"5d822fd413a79914d39e98fc", "5d822fd413a79914d39e98fc",
"Part 52" "Step 52"
], ],
[ [
"5d822fd413a79914d39e98fd", "5d822fd413a79914d39e98fd",
"Part 53" "Step 53"
], ],
[ [
"5d822fd413a79914d39e98fe", "5d822fd413a79914d39e98fe",
"Part 54" "Step 54"
], ],
[ [
"5d822fd413a79914d39e98ff", "5d822fd413a79914d39e98ff",
"Part 55" "Step 55"
], ],
[ [
"5d822fd413a79914d39e9900", "5d822fd413a79914d39e9900",
"Part 56" "Step 56"
], ],
[ [
"5d822fd413a79914d39e9901", "5d822fd413a79914d39e9901",
"Part 57" "Step 57"
], ],
[ [
"5d822fd413a79914d39e9902", "5d822fd413a79914d39e9902",
"Part 58" "Step 58"
], ],
[ [
"5d822fd413a79914d39e9903", "5d822fd413a79914d39e9903",
"Part 59" "Step 59"
], ],
[ [
"5d822fd413a79914d39e9904", "5d822fd413a79914d39e9904",
"Part 60" "Step 60"
], ],
[ [
"5d822fd413a79914d39e9905", "5d822fd413a79914d39e9905",
"Part 61" "Step 61"
], ],
[ [
"5d822fd413a79914d39e9906", "5d822fd413a79914d39e9906",
"Part 62" "Step 62"
], ],
[ [
"5d822fd413a79914d39e9907", "5d822fd413a79914d39e9907",
"Part 63" "Step 63"
], ],
[ [
"5d822fd413a79914d39e9908", "5d822fd413a79914d39e9908",
"Part 64" "Step 64"
], ],
[ [
"5d822fd413a79914d39e9909", "5d822fd413a79914d39e9909",
"Part 65" "Step 65"
], ],
[ [
"5d822fd413a79914d39e990a", "5d822fd413a79914d39e990a",
"Part 66" "Step 66"
], ],
[ [
"5d822fd413a79914d39e990b", "5d822fd413a79914d39e990b",
"Part 67" "Step 67"
], ],
[ [
"5d822fd413a79914d39e990c", "5d822fd413a79914d39e990c",
"Part 68" "Step 68"
], ],
[ [
"5d822fd413a79914d39e990d", "5d822fd413a79914d39e990d",
"Part 69" "Step 69"
], ],
[ [
"5d822fd413a79914d39e990e", "5d822fd413a79914d39e990e",
"Part 70" "Step 70"
], ],
[ [
"5d822fd413a79914d39e990f", "5d822fd413a79914d39e990f",
"Part 71" "Step 71"
], ],
[ [
"5d822fd413a79914d39e9910", "5d822fd413a79914d39e9910",
"Part 72" "Step 72"
], ],
[ [
"5d822fd413a79914d39e9911", "5d822fd413a79914d39e9911",
"Part 73" "Step 73"
], ],
[ [
"5d822fd413a79914d39e9912", "5d822fd413a79914d39e9912",
"Part 74" "Step 74"
], ],
[ [
"5d822fd413a79914d39e9913", "5d822fd413a79914d39e9913",
"Part 75" "Step 75"
], ],
[ [
"5d822fd413a79914d39e9914", "5d822fd413a79914d39e9914",
"Part 76" "Step 76"
], ],
[ [
"5d822fd413a79914d39e9916", "5d822fd413a79914d39e9916",
"Part 77" "Step 77"
], ],
[ [
"5d822fd413a79914d39e9917", "5d822fd413a79914d39e9917",
"Part 78" "Step 78"
], ],
[ [
"5d822fd413a79914d39e9918", "5d822fd413a79914d39e9918",
"Part 79" "Step 79"
], ],
[ [
"5d822fd413a79914d39e9919", "5d822fd413a79914d39e9919",
"Part 80" "Step 80"
], ],
[ [
"5d822fd413a79914d39e991a", "5d822fd413a79914d39e991a",
"Part 81" "Step 81"
], ],
[ [
"5d822fd413a79914d39e991b", "5d822fd413a79914d39e991b",
"Part 82" "Step 82"
], ],
[ [
"5d822fd413a79914d39e991c", "5d822fd413a79914d39e991c",
"Part 83" "Step 83"
], ],
[ [
"5d822fd413a79914d39e991d", "5d822fd413a79914d39e991d",
"Part 84" "Step 84"
], ],
[ [
"5d822fd413a79914d39e991e", "5d822fd413a79914d39e991e",
"Part 85" "Step 85"
], ],
[ [
"5d822fd413a79914d39e991f", "5d822fd413a79914d39e991f",
"Part 86" "Step 86"
], ],
[ [
"5d822fd413a79914d39e9920", "5d822fd413a79914d39e9920",
"Part 87" "Step 87"
], ],
[ [
"5d822fd413a79914d39e9921", "5d822fd413a79914d39e9921",
"Part 88" "Step 88"
], ],
[ [
"5d822fd413a79914d39e9922", "5d822fd413a79914d39e9922",
"Part 89" "Step 89"
], ],
[ [
"5d822fd413a79914d39e9923", "5d822fd413a79914d39e9923",
"Part 90" "Step 90"
], ],
[ [
"5d822fd413a79914d39e9924", "5d822fd413a79914d39e9924",
"Part 91" "Step 91"
], ],
[ [
"5d822fd413a79914d39e9925", "5d822fd413a79914d39e9925",
"Part 92" "Step 92"
], ],
[ [
"5d822fd413a79914d39e9926", "5d822fd413a79914d39e9926",
"Part 93" "Step 93"
], ],
[ [
"5d822fd413a79914d39e9927", "5d822fd413a79914d39e9927",
"Part 94" "Step 94"
], ],
[ [
"5d822fd413a79914d39e9928", "5d822fd413a79914d39e9928",
"Part 95" "Step 95"
], ],
[ [
"5d822fd413a79914d39e9929", "5d822fd413a79914d39e9929",
"Part 96" "Step 96"
], ],
[ [
"5d822fd413a79914d39e992a", "5d822fd413a79914d39e992a",
"Part 97" "Step 97"
], ],
[ [
"5d822fd413a79914d39e992b", "5d822fd413a79914d39e992b",
"Part 98" "Step 98"
], ],
[ [
"5d822fd413a79914d39e992c", "5d822fd413a79914d39e992c",
"Part 99" "Step 99"
], ],
[ [
"5d822fd413a79914d39e992d", "5d822fd413a79914d39e992d",
"Part 100" "Step 100"
], ],
[ [
"5d822fd413a79914d39e992e", "5d822fd413a79914d39e992e",
"Part 101" "Step 101"
], ],
[ [
"5d822fd413a79914d39e992f", "5d822fd413a79914d39e992f",
"Part 102" "Step 102"
], ],
[ [
"5d822fd413a79914d39e9930", "5d822fd413a79914d39e9930",
"Part 103" "Step 103"
], ],
[ [
"5d822fd413a79914d39e9932", "5d822fd413a79914d39e9932",
"Part 104" "Step 104"
], ],
[ [
"5d822fd413a79914d39e9933", "5d822fd413a79914d39e9933",
"Part 105" "Step 105"
], ],
[ [
"5d822fd413a79914d39e9915", "5d822fd413a79914d39e9915",
"Part 106" "Step 106"
], ],
[ [
"5d822fd413a79914d39e9934", "5d822fd413a79914d39e9934",
"Part 107" "Step 107"
], ],
[ [
"5d822fd413a79914d39e9935", "5d822fd413a79914d39e9935",
"Part 108" "Step 108"
], ],
[ [
"5d822fd413a79914d39e9931", "5d822fd413a79914d39e9931",
"Part 109" "Step 109"
], ],
[ [
"5d822fd413a79914d39e9936", "5d822fd413a79914d39e9936",
"Part 110" "Step 110"
], ],
[ [
"5d822fd413a79914d39e9937", "5d822fd413a79914d39e9937",
"Part 111" "Step 111"
], ],
[ [
"5d822fd413a79914d39e9938", "5d822fd413a79914d39e9938",
"Part 112" "Step 112"
], ],
[ [
"5d822fd413a79914d39e9939", "5d822fd413a79914d39e9939",
"Part 113" "Step 113"
], ],
[ [
"5d822fd413a79914d39e993a", "5d822fd413a79914d39e993a",
"Part 114" "Step 114"
], ],
[ [
"5d822fd413a79914d39e993b", "5d822fd413a79914d39e993b",
"Part 115" "Step 115"
], ],
[ [
"5d822fd413a79914d39e993c", "5d822fd413a79914d39e993c",
"Part 116" "Step 116"
], ],
[ [
"5d822fd413a79914d39e993d", "5d822fd413a79914d39e993d",
"Part 117" "Step 117"
], ],
[ [
"5d822fd413a79914d39e993e", "5d822fd413a79914d39e993e",
"Part 118" "Step 118"
] ]
]} ]}

292
curriculum/challenges/_meta/d3-dashboard/meta.json
View File

@ -16,586 +16,586 @@
"challengeOrder": [ "challengeOrder": [
[ [
"5d8a4cfbe6b6180ed9a1c9de", "5d8a4cfbe6b6180ed9a1c9de",
"Part 1" "Step 1"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9df", "5d8a4cfbe6b6180ed9a1c9df",
"Part 2" "Step 2"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9e0", "5d8a4cfbe6b6180ed9a1c9e0",
"Part 3" "Step 3"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9e1", "5d8a4cfbe6b6180ed9a1c9e1",
"Part 4" "Step 4"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9e2", "5d8a4cfbe6b6180ed9a1c9e2",
"Part 5" "Step 5"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9e3", "5d8a4cfbe6b6180ed9a1c9e3",
"Part 6" "Step 6"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9e4", "5d8a4cfbe6b6180ed9a1c9e4",
"Part 7" "Step 7"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9e5", "5d8a4cfbe6b6180ed9a1c9e5",
"Part 8" "Step 8"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9e6", "5d8a4cfbe6b6180ed9a1c9e6",
"Part 9" "Step 9"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9e7", "5d8a4cfbe6b6180ed9a1c9e7",
"Part 10" "Step 10"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9e8", "5d8a4cfbe6b6180ed9a1c9e8",
"Part 11" "Step 11"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9e9", "5d8a4cfbe6b6180ed9a1c9e9",
"Part 12" "Step 12"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9ea", "5d8a4cfbe6b6180ed9a1c9ea",
"Part 13" "Step 13"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9eb", "5d8a4cfbe6b6180ed9a1c9eb",
"Part 14" "Step 14"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9ec", "5d8a4cfbe6b6180ed9a1c9ec",
"Part 15" "Step 15"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9ed", "5d8a4cfbe6b6180ed9a1c9ed",
"Part 16" "Step 16"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9ee", "5d8a4cfbe6b6180ed9a1c9ee",
"Part 17" "Step 17"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9ef", "5d8a4cfbe6b6180ed9a1c9ef",
"Part 18" "Step 18"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9f0", "5d8a4cfbe6b6180ed9a1c9f0",
"Part 19" "Step 19"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9f1", "5d8a4cfbe6b6180ed9a1c9f1",
"Part 20" "Step 20"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9f2", "5d8a4cfbe6b6180ed9a1c9f2",
"Part 21" "Step 21"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9f3", "5d8a4cfbe6b6180ed9a1c9f3",
"Part 22" "Step 22"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9f4", "5d8a4cfbe6b6180ed9a1c9f4",
"Part 23" "Step 23"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9f5", "5d8a4cfbe6b6180ed9a1c9f5",
"Part 24" "Step 24"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9f6", "5d8a4cfbe6b6180ed9a1c9f6",
"Part 25" "Step 25"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9f7", "5d8a4cfbe6b6180ed9a1c9f7",
"Part 26" "Step 26"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9f8", "5d8a4cfbe6b6180ed9a1c9f8",
"Part 27" "Step 27"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9f9", "5d8a4cfbe6b6180ed9a1c9f9",
"Part 28" "Step 28"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9fa", "5d8a4cfbe6b6180ed9a1c9fa",
"Part 29" "Step 29"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9fb", "5d8a4cfbe6b6180ed9a1c9fb",
"Part 30" "Step 30"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9fc", "5d8a4cfbe6b6180ed9a1c9fc",
"Part 31" "Step 31"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9fd", "5d8a4cfbe6b6180ed9a1c9fd",
"Part 32" "Step 32"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9fe", "5d8a4cfbe6b6180ed9a1c9fe",
"Part 33" "Step 33"
], ],
[ [
"5d8a4cfbe6b6180ed9a1c9ff", "5d8a4cfbe6b6180ed9a1c9ff",
"Part 34" "Step 34"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca00", "5d8a4cfbe6b6180ed9a1ca00",
"Part 35" "Step 35"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca01", "5d8a4cfbe6b6180ed9a1ca01",
"Part 36" "Step 36"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca02", "5d8a4cfbe6b6180ed9a1ca02",
"Part 37" "Step 37"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca03", "5d8a4cfbe6b6180ed9a1ca03",
"Part 38" "Step 38"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca04", "5d8a4cfbe6b6180ed9a1ca04",
"Part 39" "Step 39"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca05", "5d8a4cfbe6b6180ed9a1ca05",
"Part 40" "Step 40"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca06", "5d8a4cfbe6b6180ed9a1ca06",
"Part 41" "Step 41"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca07", "5d8a4cfbe6b6180ed9a1ca07",
"Part 42" "Step 42"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca08", "5d8a4cfbe6b6180ed9a1ca08",
"Part 43" "Step 43"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca09", "5d8a4cfbe6b6180ed9a1ca09",
"Part 44" "Step 44"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca0a", "5d8a4cfbe6b6180ed9a1ca0a",
"Part 45" "Step 45"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca0b", "5d8a4cfbe6b6180ed9a1ca0b",
"Part 46" "Step 46"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca0c", "5d8a4cfbe6b6180ed9a1ca0c",
"Part 47" "Step 47"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca0d", "5d8a4cfbe6b6180ed9a1ca0d",
"Part 48" "Step 48"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca0e", "5d8a4cfbe6b6180ed9a1ca0e",
"Part 49" "Step 49"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca0f", "5d8a4cfbe6b6180ed9a1ca0f",
"Part 50" "Step 50"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca10", "5d8a4cfbe6b6180ed9a1ca10",
"Part 51" "Step 51"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca11", "5d8a4cfbe6b6180ed9a1ca11",
"Part 52" "Step 52"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca12", "5d8a4cfbe6b6180ed9a1ca12",
"Part 53" "Step 53"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca13", "5d8a4cfbe6b6180ed9a1ca13",
"Part 54" "Step 54"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca14", "5d8a4cfbe6b6180ed9a1ca14",
"Part 55" "Step 55"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca15", "5d8a4cfbe6b6180ed9a1ca15",
"Part 56" "Step 56"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca16", "5d8a4cfbe6b6180ed9a1ca16",
"Part 57" "Step 57"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca17", "5d8a4cfbe6b6180ed9a1ca17",
"Part 58" "Step 58"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca18", "5d8a4cfbe6b6180ed9a1ca18",
"Part 59" "Step 59"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca19", "5d8a4cfbe6b6180ed9a1ca19",
"Part 60" "Step 60"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca1a", "5d8a4cfbe6b6180ed9a1ca1a",
"Part 61" "Step 61"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca1b", "5d8a4cfbe6b6180ed9a1ca1b",
"Part 62" "Step 62"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca1c", "5d8a4cfbe6b6180ed9a1ca1c",
"Part 63" "Step 63"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca1d", "5d8a4cfbe6b6180ed9a1ca1d",
"Part 64" "Step 64"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca1e", "5d8a4cfbe6b6180ed9a1ca1e",
"Part 65" "Step 65"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca1f", "5d8a4cfbe6b6180ed9a1ca1f",
"Part 66" "Step 66"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca20", "5d8a4cfbe6b6180ed9a1ca20",
"Part 67" "Step 67"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca21", "5d8a4cfbe6b6180ed9a1ca21",
"Part 68" "Step 68"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca22", "5d8a4cfbe6b6180ed9a1ca22",
"Part 69" "Step 69"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca23", "5d8a4cfbe6b6180ed9a1ca23",
"Part 70" "Step 70"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca24", "5d8a4cfbe6b6180ed9a1ca24",
"Part 71" "Step 71"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca25", "5d8a4cfbe6b6180ed9a1ca25",
"Part 72" "Step 72"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca26", "5d8a4cfbe6b6180ed9a1ca26",
"Part 73" "Step 73"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca27", "5d8a4cfbe6b6180ed9a1ca27",
"Part 74" "Step 74"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca28", "5d8a4cfbe6b6180ed9a1ca28",
"Part 75" "Step 75"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca29", "5d8a4cfbe6b6180ed9a1ca29",
"Part 76" "Step 76"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca2a", "5d8a4cfbe6b6180ed9a1ca2a",
"Part 77" "Step 77"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca2b", "5d8a4cfbe6b6180ed9a1ca2b",
"Part 78" "Step 78"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca2c", "5d8a4cfbe6b6180ed9a1ca2c",
"Part 79" "Step 79"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca2d", "5d8a4cfbe6b6180ed9a1ca2d",
"Part 80" "Step 80"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca2e", "5d8a4cfbe6b6180ed9a1ca2e",
"Part 81" "Step 81"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca2f", "5d8a4cfbe6b6180ed9a1ca2f",
"Part 82" "Step 82"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca30", "5d8a4cfbe6b6180ed9a1ca30",
"Part 83" "Step 83"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca31", "5d8a4cfbe6b6180ed9a1ca31",
"Part 84" "Step 84"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca32", "5d8a4cfbe6b6180ed9a1ca32",
"Part 85" "Step 85"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca33", "5d8a4cfbe6b6180ed9a1ca33",
"Part 86" "Step 86"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca34", "5d8a4cfbe6b6180ed9a1ca34",
"Part 87" "Step 87"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca35", "5d8a4cfbe6b6180ed9a1ca35",
"Part 88" "Step 88"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca36", "5d8a4cfbe6b6180ed9a1ca36",
"Part 89" "Step 89"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca37", "5d8a4cfbe6b6180ed9a1ca37",
"Part 90" "Step 90"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca38", "5d8a4cfbe6b6180ed9a1ca38",
"Part 91" "Step 91"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca39", "5d8a4cfbe6b6180ed9a1ca39",
"Part 92" "Step 92"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca3a", "5d8a4cfbe6b6180ed9a1ca3a",
"Part 93" "Step 93"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca3b", "5d8a4cfbe6b6180ed9a1ca3b",
"Part 94" "Step 94"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca3c", "5d8a4cfbe6b6180ed9a1ca3c",
"Part 95" "Step 95"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca3d", "5d8a4cfbe6b6180ed9a1ca3d",
"Part 96" "Step 96"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca3e", "5d8a4cfbe6b6180ed9a1ca3e",
"Part 97" "Step 97"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca3f", "5d8a4cfbe6b6180ed9a1ca3f",
"Part 98" "Step 98"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca40", "5d8a4cfbe6b6180ed9a1ca40",
"Part 99" "Step 99"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca41", "5d8a4cfbe6b6180ed9a1ca41",
"Part 100" "Step 100"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca42", "5d8a4cfbe6b6180ed9a1ca42",
"Part 101" "Step 101"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca43", "5d8a4cfbe6b6180ed9a1ca43",
"Part 102" "Step 102"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca44", "5d8a4cfbe6b6180ed9a1ca44",
"Part 103" "Step 103"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca47", "5d8a4cfbe6b6180ed9a1ca47",
"Part 104" "Step 104"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca48", "5d8a4cfbe6b6180ed9a1ca48",
"Part 105" "Step 105"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca49", "5d8a4cfbe6b6180ed9a1ca49",
"Part 106" "Step 106"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca4a", "5d8a4cfbe6b6180ed9a1ca4a",
"Part 107" "Step 107"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca4b", "5d8a4cfbe6b6180ed9a1ca4b",
"Part 108" "Step 108"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca4c", "5d8a4cfbe6b6180ed9a1ca4c",
"Part 109" "Step 109"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca4d", "5d8a4cfbe6b6180ed9a1ca4d",
"Part 110" "Step 110"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca4e", "5d8a4cfbe6b6180ed9a1ca4e",
"Part 111" "Step 111"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca4f", "5d8a4cfbe6b6180ed9a1ca4f",
"Part 112" "Step 112"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca50", "5d8a4cfbe6b6180ed9a1ca50",
"Part 113" "Step 113"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca51", "5d8a4cfbe6b6180ed9a1ca51",
"Part 114" "Step 114"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca52", "5d8a4cfbe6b6180ed9a1ca52",
"Part 115" "Step 115"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca53", "5d8a4cfbe6b6180ed9a1ca53",
"Part 116" "Step 116"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca54", "5d8a4cfbe6b6180ed9a1ca54",
"Part 117" "Step 117"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca55", "5d8a4cfbe6b6180ed9a1ca55",
"Part 118" "Step 118"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca56", "5d8a4cfbe6b6180ed9a1ca56",
"Part 119" "Step 119"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca57", "5d8a4cfbe6b6180ed9a1ca57",
"Part 120" "Step 120"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca58", "5d8a4cfbe6b6180ed9a1ca58",
"Part 121" "Step 121"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca59", "5d8a4cfbe6b6180ed9a1ca59",
"Part 122" "Step 122"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca5a", "5d8a4cfbe6b6180ed9a1ca5a",
"Part 123" "Step 123"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca5b", "5d8a4cfbe6b6180ed9a1ca5b",
"Part 124" "Step 124"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca5c", "5d8a4cfbe6b6180ed9a1ca5c",
"Part 125" "Step 125"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca5d", "5d8a4cfbe6b6180ed9a1ca5d",
"Part 126" "Step 126"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca5e", "5d8a4cfbe6b6180ed9a1ca5e",
"Part 127" "Step 127"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca5f", "5d8a4cfbe6b6180ed9a1ca5f",
"Part 128" "Step 128"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca60", "5d8a4cfbe6b6180ed9a1ca60",
"Part 129" "Step 129"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca61", "5d8a4cfbe6b6180ed9a1ca61",
"Part 130" "Step 130"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca62", "5d8a4cfbe6b6180ed9a1ca62",
"Part 131" "Step 131"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca63", "5d8a4cfbe6b6180ed9a1ca63",
"Part 132" "Step 132"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca64", "5d8a4cfbe6b6180ed9a1ca64",
"Part 133" "Step 133"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca65", "5d8a4cfbe6b6180ed9a1ca65",
"Part 134" "Step 134"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca66", "5d8a4cfbe6b6180ed9a1ca66",
"Part 135" "Step 135"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca67", "5d8a4cfbe6b6180ed9a1ca67",
"Part 136" "Step 136"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca68", "5d8a4cfbe6b6180ed9a1ca68",
"Part 137" "Step 137"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca6a", "5d8a4cfbe6b6180ed9a1ca6a",
"Part 138" "Step 138"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca6b", "5d8a4cfbe6b6180ed9a1ca6b",
"Part 139" "Step 139"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca6c", "5d8a4cfbe6b6180ed9a1ca6c",
"Part 140" "Step 140"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca6d", "5d8a4cfbe6b6180ed9a1ca6d",
"Part 141" "Step 141"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca6e", "5d8a4cfbe6b6180ed9a1ca6e",
"Part 142" "Step 142"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca6f", "5d8a4cfbe6b6180ed9a1ca6f",
"Part 143" "Step 143"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca70", "5d8a4cfbe6b6180ed9a1ca70",
"Part 144" "Step 144"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca71", "5d8a4cfbe6b6180ed9a1ca71",
"Part 145" "Step 145"
], ],
[ [
"5d8a4cfbe6b6180ed9a1ca72", "5d8a4cfbe6b6180ed9a1ca72",
"Part 146" "Step 146"
] ]
]} ]}

282
curriculum/challenges/_meta/functional-programming-spreadsheet/meta.json
View File

@ -13,566 +13,566 @@
"challengeOrder": [ "challengeOrder": [
[ [
"5d79253297c0ebb149ea9fed", "5d79253297c0ebb149ea9fed",
"Part 1" "Step 1"
], ],
[ [
"5d7925323be8848dbc58a07a", "5d7925323be8848dbc58a07a",
"Part 2" "Step 2"
], ],
[ [
"5d792532f631702ae6d23e11", "5d792532f631702ae6d23e11",
"Part 3" "Step 3"
], ],
[ [
"5d7925329445167ecc2ac9c9", "5d7925329445167ecc2ac9c9",
"Part 4" "Step 4"
], ],
[ [
"5d792532b07918c3a5904913", "5d792532b07918c3a5904913",
"Part 5" "Step 5"
], ],
[ [
"5d792533cc8b18b6c133edc7", "5d792533cc8b18b6c133edc7",
"Part 6" "Step 6"
], ],
[ [
"5d7925337954ed57a565a135", "5d7925337954ed57a565a135",
"Part 7" "Step 7"
], ],
[ [
"5d79253352e33dd59ec2f6de", "5d79253352e33dd59ec2f6de",
"Part 8" "Step 8"
], ],
[ [
"5d792533d31e4f7fad33011d", "5d792533d31e4f7fad33011d",
"Part 9" "Step 9"
], ],
[ [
"5d792533e7707b9645d7b540", "5d792533e7707b9645d7b540",
"Part 10" "Step 10"
], ],
[ [
"5d79253378595ec568f70ab6", "5d79253378595ec568f70ab6",
"Part 11" "Step 11"
], ],
[ [
"5d7925330918ae4a2f282e7e", "5d7925330918ae4a2f282e7e",
"Part 12" "Step 12"
], ],
[ [
"5d792533ed00e75d129e1b18", "5d792533ed00e75d129e1b18",
"Part 13" "Step 13"
], ],
[ [
"5d792533a5c42fb4d1a4b70d", "5d792533a5c42fb4d1a4b70d",
"Part 14" "Step 14"
], ],
[ [
"5d79253358e8f646cbeb2bb0", "5d79253358e8f646cbeb2bb0",
"Part 15" "Step 15"
], ],
[ [
"5d792533bb38fab70b27f527", "5d792533bb38fab70b27f527",
"Part 16" "Step 16"
], ],
[ [
"5d79253386060ed9eb04a070", "5d79253386060ed9eb04a070",
"Part 17" "Step 17"
], ],
[ [
"5d792533717672657b81aa69", "5d792533717672657b81aa69",
"Part 18" "Step 18"
], ],
[ [
"5d7925335ab63018dcec11fe", "5d7925335ab63018dcec11fe",
"Part 19" "Step 19"
], ],
[ [
"5d7925330f300c342315066d", "5d7925330f300c342315066d",
"Part 20" "Step 20"
], ],
[ [
"5d792533aa6443215c9b16bf", "5d792533aa6443215c9b16bf",
"Part 21" "Step 21"
], ],
[ [
"5d7925334c5e22586dd72962", "5d7925334c5e22586dd72962",
"Part 22" "Step 22"
], ],
[ [
"5d79253307ecd49e030bdcd1", "5d79253307ecd49e030bdcd1",
"Part 23" "Step 23"
], ],
[ [
"5d792534257122211d3043af", "5d792534257122211d3043af",
"Part 24" "Step 24"
], ],
[ [
"5d7925346f4f2da6df4354a6", "5d7925346f4f2da6df4354a6",
"Part 25" "Step 25"
], ],
[ [
"5d792534cac2dbe0a719ea7a", "5d792534cac2dbe0a719ea7a",
"Part 26" "Step 26"
], ],
[ [
"5d792534857332d07ccba3ad", "5d792534857332d07ccba3ad",
"Part 27" "Step 27"
], ],
[ [
"5d792534d586ef495ea9df90", "5d792534d586ef495ea9df90",
"Part 28" "Step 28"
], ],
[ [
"5d79253410532e13d13fe574", "5d79253410532e13d13fe574",
"Part 29" "Step 29"
], ],
[ [
"5d7925342415527083bd6667", "5d7925342415527083bd6667",
"Part 30" "Step 30"
], ],
[ [
"5d792534c3d26890ac1484d4", "5d792534c3d26890ac1484d4",
"Part 31" "Step 31"
], ],
[ [
"5d792534b92f3d1cd4410ce3", "5d792534b92f3d1cd4410ce3",
"Part 32" "Step 32"
], ],
[ [
"5d7925341193948dfe6d76b4", "5d7925341193948dfe6d76b4",
"Part 33" "Step 33"
], ],
[ [
"5d792534cf81365cfca58794", "5d792534cf81365cfca58794",
"Part 34" "Step 34"
], ],
[ [
"5d7925348ee084278ff15556", "5d7925348ee084278ff15556",
"Part 35" "Step 35"
], ],
[ [
"5d7925348a6a41c32f7a4e3e", "5d7925348a6a41c32f7a4e3e",
"Part 36" "Step 36"
], ],
[ [
"5d792534408c5be896b0a46e", "5d792534408c5be896b0a46e",
"Part 37" "Step 37"
], ],
[ [
"5d792534f0eda837510e9192", "5d792534f0eda837510e9192",
"Part 38" "Step 38"
], ],
[ [
"5d7925346b911fce161febaf", "5d7925346b911fce161febaf",
"Part 39" "Step 39"
], ],
[ [
"5d79253483eada4dd69258eb", "5d79253483eada4dd69258eb",
"Part 40" "Step 40"
], ],
[ [
"5d7925342b2b993ef18cd45f", "5d7925342b2b993ef18cd45f",
"Part 41" "Step 41"
], ],
[ [
"5d7925341747ad42b12f8e68", "5d7925341747ad42b12f8e68",
"Part 42" "Step 42"
], ],
[ [
"5d792535b0b3c198ee3ed6f9", "5d792535b0b3c198ee3ed6f9",
"Part 43" "Step 43"
], ],
[ [
"5d7925357a0533eb221b005d", "5d7925357a0533eb221b005d",
"Part 44" "Step 44"
], ],
[ [
"5d792535591db67ee15b4106", "5d792535591db67ee15b4106",
"Part 45" "Step 45"
], ],
[ [
"5d792535f1f7adf77de5831d", "5d792535f1f7adf77de5831d",
"Part 46" "Step 46"
], ],
[ [
"5d7925353d2c505eafd50cd9", "5d7925353d2c505eafd50cd9",
"Part 47" "Step 47"
], ],
[ [
"5d79253539b5e944ba3e314c", "5d79253539b5e944ba3e314c",
"Part 48" "Step 48"
], ],
[ [
"5d792535a4f1cbff7a8b9a0b", "5d792535a4f1cbff7a8b9a0b",
"Part 49" "Step 49"
], ],
[ [
"5d792535e3304f15a8890162", "5d792535e3304f15a8890162",
"Part 50" "Step 50"
], ],
[ [
"5d792535a40ea5ac549d6804", "5d792535a40ea5ac549d6804",
"Part 51" "Step 51"
], ],
[ [
"5d7925358c220e5b2998909e", "5d7925358c220e5b2998909e",
"Part 52" "Step 52"
], ],
[ [
"5d7925357729e183a49498aa", "5d7925357729e183a49498aa",
"Part 53" "Step 53"
], ],
[ [
"5d79253555aa652afbb68086", "5d79253555aa652afbb68086",
"Part 54" "Step 54"
], ],
[ [
"5d79253582be306d339564f6", "5d79253582be306d339564f6",
"Part 55" "Step 55"
], ],
[ [
"5d7925352047e5c54882c436", "5d7925352047e5c54882c436",
"Part 56" "Step 56"
], ],
[ [
"5d79253568e441c0adf9db9f", "5d79253568e441c0adf9db9f",
"Part 57" "Step 57"
], ],
[ [
"5d7925356ab117923b80c9cd", "5d7925356ab117923b80c9cd",
"Part 58" "Step 58"
], ],
[ [
"5d792535e54a8cd729a0d708", "5d792535e54a8cd729a0d708",
"Part 59" "Step 59"
], ],
[ [
"5d7925353b307724a462b06b", "5d7925353b307724a462b06b",
"Part 60" "Step 60"
], ],
[ [
"5d792536735f71d746ee5d99", "5d792536735f71d746ee5d99",
"Part 61" "Step 61"
], ],
[ [
"5d792536ad340d9dff2e4a96", "5d792536ad340d9dff2e4a96",
"Part 62" "Step 62"
], ],
[ [
"5d7925369614afd92d01fed5", "5d7925369614afd92d01fed5",
"Part 63" "Step 63"
], ],
[ [
"5d792536504e68254fe02236", "5d792536504e68254fe02236",
"Part 64" "Step 64"
], ],
[ [
"5d792536c8d2f0fdfad768fe", "5d792536c8d2f0fdfad768fe",
"Part 65" "Step 65"
], ],
[ [
"5d79253639028b8ec56afcda", "5d79253639028b8ec56afcda",
"Part 66" "Step 66"
], ],
[ [
"5d792536834f2fd93e84944f", "5d792536834f2fd93e84944f",
"Part 67" "Step 67"
], ],
[ [
"5d792536ddff9ea73c90a994", "5d792536ddff9ea73c90a994",
"Part 68" "Step 68"
], ],
[ [
"5d7925361596f84067904f7f", "5d7925361596f84067904f7f",
"Part 69" "Step 69"
], ],
[ [
"5d792536dd8a4daf255488ac", "5d792536dd8a4daf255488ac",
"Part 70" "Step 70"
], ],
[ [
"5d792536449c73004f265fb1", "5d792536449c73004f265fb1",
"Part 71" "Step 71"
], ],
[ [
"5d79253685fc69b8fe60a0d2", "5d79253685fc69b8fe60a0d2",
"Part 72" "Step 72"
], ],
[ [
"5d792536dc6e3ab29525de9e", "5d792536dc6e3ab29525de9e",
"Part 73" "Step 73"
], ],
[ [
"5d792536cfd0fd893c630abb", "5d792536cfd0fd893c630abb",
"Part 74" "Step 74"
], ],
[ [
"5d7925366a5ff428fb483b40", "5d7925366a5ff428fb483b40",
"Part 75" "Step 75"
], ],
[ [
"5d7925365d4035eeb2e395fd", "5d7925365d4035eeb2e395fd",
"Part 76" "Step 76"
], ],
[ [
"5d7925364c106e9aaf05a16f", "5d7925364c106e9aaf05a16f",
"Part 77" "Step 77"
], ],
[ [
"5d792536970cd8e819cc8a96", "5d792536970cd8e819cc8a96",
"Part 78" "Step 78"
], ],
[ [
"5d792536e33baeaa60129e0a", "5d792536e33baeaa60129e0a",
"Part 79" "Step 79"
], ],
[ [
"5d7925379e2a488f333e2d43", "5d7925379e2a488f333e2d43",
"Part 80" "Step 80"
], ],
[ [
"5d7925379000785f6d8d9af3", "5d7925379000785f6d8d9af3",
"Part 81" "Step 81"
], ],
[ [
"5d79253791391b0acddd0ac5", "5d79253791391b0acddd0ac5",
"Part 82" "Step 82"
], ],
[ [
"5d7925373104ae5ae83f20a5", "5d7925373104ae5ae83f20a5",
"Part 83" "Step 83"
], ],
[ [
"5d7925373b7127cfaeb50c26", "5d7925373b7127cfaeb50c26",
"Part 84" "Step 84"
], ],
[ [
"5d792537cb3a5cd6baca5e1a", "5d792537cb3a5cd6baca5e1a",
"Part 85" "Step 85"
], ],
[ [
"5d79253742f3313d55db981f", "5d79253742f3313d55db981f",
"Part 86" "Step 86"
], ],
[ [
"5d7925379e0180a438ce7f95", "5d7925379e0180a438ce7f95",
"Part 87" "Step 87"
], ],
[ [
"5d792537c80984dfa5501b96", "5d792537c80984dfa5501b96",
"Part 88" "Step 88"
], ],
[ [
"5d7925377b54d8a76efb5657", "5d7925377b54d8a76efb5657",
"Part 89" "Step 89"
], ],
[ [
"5d7925371398513549bb6395", "5d7925371398513549bb6395",
"Part 90" "Step 90"
], ],
[ [
"5d792537ea3eaf302bf2d359", "5d792537ea3eaf302bf2d359",
"Part 91" "Step 91"
], ],
[ [
"5d792537533b1c7843bfd029", "5d792537533b1c7843bfd029",
"Part 92" "Step 92"
], ],
[ [
"5d792537dc0fe84345d4f19e", "5d792537dc0fe84345d4f19e",
"Part 93" "Step 93"
], ],
[ [
"5d792537b6cadae0f4b0cda1", "5d792537b6cadae0f4b0cda1",
"Part 94" "Step 94"
], ],
[ [
"5d79253770083fb730c93a93", "5d79253770083fb730c93a93",
"Part 95" "Step 95"
], ],
[ [
"5d792537fef76b226b63b93b", "5d792537fef76b226b63b93b",
"Part 96" "Step 96"
], ],
[ [
"5d79253760fca25ccbbd8990", "5d79253760fca25ccbbd8990",
"Part 97" "Step 97"
], ],
[ [
"5d7925374321824cba309875", "5d7925374321824cba309875",
"Part 98" "Step 98"
], ],
[ [
"5d7925381e8565a5c50ba7f1", "5d7925381e8565a5c50ba7f1",
"Part 99" "Step 99"
], ],
[ [
"5d7925383f1b77db7f1ff59e", "5d7925383f1b77db7f1ff59e",
"Part 100" "Step 100"
], ],
[ [
"5d792538de9fa3f298bcd5f6", "5d792538de9fa3f298bcd5f6",
"Part 101" "Step 101"
], ],
[ [
"5d7925385b74f69642e1fea5", "5d7925385b74f69642e1fea5",
"Part 102" "Step 102"
], ],
[ [
"5d7925380ea76d55b2c97d7b", "5d7925380ea76d55b2c97d7b",
"Part 103" "Step 103"
], ],
[ [
"5d792538be4fe331f1a6c008", "5d792538be4fe331f1a6c008",
"Part 104" "Step 104"
], ],
[ [
"5d792538d169f33142175b95", "5d792538d169f33142175b95",
"Part 105" "Step 105"
], ],
[ [
"5d792538e48b5a2c6e5bbe12", "5d792538e48b5a2c6e5bbe12",
"Part 106" "Step 106"
], ],
[ [
"5d7925387f3e9da5ec856dbe", "5d7925387f3e9da5ec856dbe",
"Part 107" "Step 107"
], ],
[ [
"5d79253824ae9b4a6e6f3108", "5d79253824ae9b4a6e6f3108",
"Part 108" "Step 108"
], ],
[ [
"5d7925383f122a279f4c54ad", "5d7925383f122a279f4c54ad",
"Part 109" "Step 109"
], ],
[ [
"5d7925387b682e962f209269", "5d7925387b682e962f209269",
"Part 110" "Step 110"
], ],
[ [
"5d792538de774217b173288e", "5d792538de774217b173288e",
"Part 111" "Step 111"
], ],
[ [
"5d79253891d93585323d1f3c", "5d79253891d93585323d1f3c",
"Part 112" "Step 112"
], ],
[ [
"5d7925384e34e944ecb4612d", "5d7925384e34e944ecb4612d",
"Part 113" "Step 113"
], ],
[ [
"5d792538631844ad0bdfb4c3", "5d792538631844ad0bdfb4c3",
"Part 114" "Step 114"
], ],
[ [
"5d792538e2a8d20cc580d481", "5d792538e2a8d20cc580d481",
"Part 115" "Step 115"
], ],
[ [
"5d792538f5004390d6678554", "5d792538f5004390d6678554",
"Part 116" "Step 116"
], ],
[ [
"5d792539dd4fd4c96fd85f7e", "5d792539dd4fd4c96fd85f7e",
"Part 117" "Step 117"
], ],
[ [
"5d79253949802f8587c8bbd3", "5d79253949802f8587c8bbd3",
"Part 118" "Step 118"
], ],
[ [
"5d7925395888767e9304c082", "5d7925395888767e9304c082",
"Part 119" "Step 119"
], ],
[ [
"5d7925393b30099e37a34668", "5d7925393b30099e37a34668",
"Part 120" "Step 120"
], ],
[ [
"5d7925398157757b23730fdd", "5d7925398157757b23730fdd",
"Part 121" "Step 121"
], ],
[ [
"5d792539de4b9ac14dd40409", "5d792539de4b9ac14dd40409",
"Part 122" "Step 122"
], ],
[ [
"5d792539534f1bf991bb987f", "5d792539534f1bf991bb987f",
"Part 123" "Step 123"
], ],
[ [
"5d7925394089b762f93ffa52", "5d7925394089b762f93ffa52",
"Part 124" "Step 124"
], ],
[ [
"5d792539ec758d45a6900173", "5d792539ec758d45a6900173",
"Part 125" "Step 125"
], ],
[ [
"5d7925398d525f61a9ff3a79", "5d7925398d525f61a9ff3a79",
"Part 126" "Step 126"
], ],
[ [
"5d792539a222f385c5c17d2b", "5d792539a222f385c5c17d2b",
"Part 127" "Step 127"
], ],
[ [
"5d7925398a7184b41b12a0e0", "5d7925398a7184b41b12a0e0",
"Part 128" "Step 128"
], ],
[ [
"5d7925399afb905c34730a75", "5d7925399afb905c34730a75",
"Part 129" "Step 129"
], ],
[ [
"5d792539728d1aa7788e2c9b", "5d792539728d1aa7788e2c9b",
"Part 130" "Step 130"
], ],
[ [
"5d79253939434a2724c0ec41", "5d79253939434a2724c0ec41",
"Part 131" "Step 131"
], ],
[ [
"5d792539b9e1d3c54d8fe94a", "5d792539b9e1d3c54d8fe94a",
"Part 132" "Step 132"
], ],
[ [
"5d792539b2e0bd8f9e8213e4", "5d792539b2e0bd8f9e8213e4",
"Part 133" "Step 133"
], ],
[ [
"5d792539239148965a1a59a5", "5d792539239148965a1a59a5",
"Part 134" "Step 134"
], ],
[ [
"5d792539e1446045d0df6d28", "5d792539e1446045d0df6d28",
"Part 135" "Step 135"
], ],
[ [
"5d79253a2febbb77098730b9", "5d79253a2febbb77098730b9",
"Part 136" "Step 136"
], ],
[ [
"5d79253a98bd9fdf7ce68d0a", "5d79253a98bd9fdf7ce68d0a",
"Part 137" "Step 137"
], ],
[ [
"5d79253a1e9abf29de64c177", "5d79253a1e9abf29de64c177",
"Part 138" "Step 138"
], ],
[ [
"5d79253a8b29d78984369e4b", "5d79253a8b29d78984369e4b",
"Part 139" "Step 139"
], ],
[ [
"5d79253ad297a31cbe073718", "5d79253ad297a31cbe073718",
"Part 140" "Step 140"
], ],
[ [
"5dc10b8b93704f41d279eb5b", "5dc10b8b93704f41d279eb5b",
"Part 141" "Step 141"
] ]
]} ]}

152
curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json
View File

@ -12,306 +12,306 @@
"challengeOrder": [ "challengeOrder": [
[ [
"5ddb965c65d27e1512d44d9a", "5ddb965c65d27e1512d44d9a",
"Part 1" "Step 1"
], ],
[ [
"5ddb965c65d27e1512d44d9b", "5ddb965c65d27e1512d44d9b",
"Part 2" "Step 2"
], ],
[ [
"5ddb965c65d27e1512d44d9c", "5ddb965c65d27e1512d44d9c",
"Part 3" "Step 3"
], ],
[ [
"5ddb965c65d27e1512d44d9d", "5ddb965c65d27e1512d44d9d",
"Part 4" "Step 4"
], ],
[ [
"5ddb965c65d27e1512d44d9e", "5ddb965c65d27e1512d44d9e",
"Part 5" "Step 5"
], ],
[ [
"5ddb965c65d27e1512d44d9f", "5ddb965c65d27e1512d44d9f",
"Part 6" "Step 6"
], ],
[ [
"5ddb965c65d27e1512d44da0", "5ddb965c65d27e1512d44da0",
"Part 7" "Step 7"
], ],
[ [
"5ddb965c65d27e1512d44da1", "5ddb965c65d27e1512d44da1",
"Part 8" "Step 8"
], ],
[ [
"5ddb965c65d27e1512d44da2", "5ddb965c65d27e1512d44da2",
"Part 9" "Step 9"
], ],
[ [
"5ddb965c65d27e1512d44da3", "5ddb965c65d27e1512d44da3",
"Part 10" "Step 10"
], ],
[ [
"5ddb965c65d27e1512d44da4", "5ddb965c65d27e1512d44da4",
"Part 11" "Step 11"
], ],
[ [
"5ddb965c65d27e1512d44da5", "5ddb965c65d27e1512d44da5",
"Part 12" "Step 12"
], ],
[ [
"5ddb965c65d27e1512d44da6", "5ddb965c65d27e1512d44da6",
"Part 13" "Step 13"
], ],
[ [
"5ddb965c65d27e1512d44da7", "5ddb965c65d27e1512d44da7",
"Part 14" "Step 14"
], ],
[ [
"5ddb965c65d27e1512d44da8", "5ddb965c65d27e1512d44da8",
"Part 15" "Step 15"
], ],
[ [
"5ddb965c65d27e1512d44da9", "5ddb965c65d27e1512d44da9",
"Part 16" "Step 16"
], ],
[ [
"5ddb965c65d27e1512d44daa", "5ddb965c65d27e1512d44daa",
"Part 17" "Step 17"
], ],
[ [
"5ddb965c65d27e1512d44dab", "5ddb965c65d27e1512d44dab",
"Part 18" "Step 18"
], ],
[ [
"5ddb965c65d27e1512d44dac", "5ddb965c65d27e1512d44dac",
"Part 19" "Step 19"
], ],
[ [
"5ddb965c65d27e1512d44dad", "5ddb965c65d27e1512d44dad",
"Part 20" "Step 20"
], ],
[ [
"5e302e80e003129199103c78", "5e302e80e003129199103c78",
"Part 21" "Step 21"
], ],
[ [
"5e302e8ce003129199103c79", "5e302e8ce003129199103c79",
"Part 22" "Step 22"
], ],
[ [
"5ddb965c65d27e1512d44dae", "5ddb965c65d27e1512d44dae",
"Part 23" "Step 23"
], ],
[ [
"5ddb965c65d27e1512d44daf", "5ddb965c65d27e1512d44daf",
"Part 24" "Step 24"
], ],
[ [
"5ddb965c65d27e1512d44db0", "5ddb965c65d27e1512d44db0",
"Part 25" "Step 25"
], ],
[ [
"5ddb965c65d27e1512d44db1", "5ddb965c65d27e1512d44db1",
"Part 26" "Step 26"
], ],
[ [
"5ddb965c65d27e1512d44db2", "5ddb965c65d27e1512d44db2",
"Part 27" "Step 27"
], ],
[ [
"5ddb965c65d27e1512d44db3", "5ddb965c65d27e1512d44db3",
"Part 28" "Step 28"
], ],
[ [
"5ddb965c65d27e1512d44db4", "5ddb965c65d27e1512d44db4",
"Part 29" "Step 29"
], ],
[ [
"5ddb965c65d27e1512d44db5", "5ddb965c65d27e1512d44db5",
"Part 30" "Step 30"
], ],
[ [
"5ddb965c65d27e1512d44db6", "5ddb965c65d27e1512d44db6",
"Part 31" "Step 31"
], ],
[ [
"5ddb965c65d27e1512d44db7", "5ddb965c65d27e1512d44db7",
"Part 32" "Step 32"
], ],
[ [
"5ddb965c65d27e1512d44db8", "5ddb965c65d27e1512d44db8",
"Part 33" "Step 33"
], ],
[ [
"5ddb965c65d27e1512d44db9", "5ddb965c65d27e1512d44db9",
"Part 34" "Step 34"
], ],
[ [
"5ddb965c65d27e1512d44dba", "5ddb965c65d27e1512d44dba",
"Part 35" "Step 35"
], ],
[ [
"5ddb965c65d27e1512d44dbb", "5ddb965c65d27e1512d44dbb",
"Part 36" "Step 36"
], ],
[ [
"5ddb965c65d27e1512d44dbc", "5ddb965c65d27e1512d44dbc",
"Part 37" "Step 37"
], ],
[ [
"5ddb965c65d27e1512d44dbd", "5ddb965c65d27e1512d44dbd",
"Part 38" "Step 38"
], ],
[ [
"5ddb965c65d27e1512d44dbe", "5ddb965c65d27e1512d44dbe",
"Part 39" "Step 39"
], ],
[ [
"5ddb965c65d27e1512d44dbf", "5ddb965c65d27e1512d44dbf",
"Part 40" "Step 40"
], ],
[ [
"5ddb965c65d27e1512d44dc0", "5ddb965c65d27e1512d44dc0",
"Part 41" "Step 41"
], ],
[ [
"5ddb965c65d27e1512d44dc1", "5ddb965c65d27e1512d44dc1",
"Part 42" "Step 42"
], ],
[ [
"5ddb965c65d27e1512d44dc2", "5ddb965c65d27e1512d44dc2",
"Part 43" "Step 43"
], ],
[ [
"5ddb965c65d27e1512d44dc3", "5ddb965c65d27e1512d44dc3",
"Part 44" "Step 44"
], ],
[ [
"5ddb965c65d27e1512d44dc4", "5ddb965c65d27e1512d44dc4",
"Part 45" "Step 45"
], ],
[ [
"5ddb965c65d27e1512d44dc5", "5ddb965c65d27e1512d44dc5",
"Part 46" "Step 46"
], ],
[ [
"5ddb965c65d27e1512d44dc6", "5ddb965c65d27e1512d44dc6",
"Part 47" "Step 47"
], ],
[ [
"5ddb965c65d27e1512d44dc7", "5ddb965c65d27e1512d44dc7",
"Part 48" "Step 48"
], ],
[ [
"5ddb965c65d27e1512d44dc8", "5ddb965c65d27e1512d44dc8",
"Part 49" "Step 49"
], ],
[ [
"5ddb965c65d27e1512d44dc9", "5ddb965c65d27e1512d44dc9",
"Part 50" "Step 50"
], ],
[ [
"5ddb965c65d27e1512d44dca", "5ddb965c65d27e1512d44dca",
"Part 51" "Step 51"
], ],
[ [
"5ddb965c65d27e1512d44dcb", "5ddb965c65d27e1512d44dcb",
"Part 52" "Step 52"
], ],
[ [
"5ddb965c65d27e1512d44dcc", "5ddb965c65d27e1512d44dcc",
"Part 53" "Step 53"
], ],
[ [
"5ddb965c65d27e1512d44dcd", "5ddb965c65d27e1512d44dcd",
"Part 54" "Step 54"
], ],
[ [
"5ddb965c65d27e1512d44dce", "5ddb965c65d27e1512d44dce",
"Part 55" "Step 55"
], ],
[ [
"5ddb965c65d27e1512d44dcf", "5ddb965c65d27e1512d44dcf",
"Part 56" "Step 56"
], ],
[ [
"5ddb965c65d27e1512d44dd0", "5ddb965c65d27e1512d44dd0",
"Part 57" "Step 57"
], ],
[ [
"5ddb965c65d27e1512d44dd1", "5ddb965c65d27e1512d44dd1",
"Part 58" "Step 58"
], ],
[ [
"5ddb965c65d27e1512d44dd2", "5ddb965c65d27e1512d44dd2",
"Part 59" "Step 59"
], ],
[ [
"5ddb965c65d27e1512d44dd3", "5ddb965c65d27e1512d44dd3",
"Part 60" "Step 60"
], ],
[ [
"5ddb965c65d27e1512d44dd4", "5ddb965c65d27e1512d44dd4",
"Part 61" "Step 61"
], ],
[ [
"5ddb965c65d27e1512d44dd5", "5ddb965c65d27e1512d44dd5",
"Part 62" "Step 62"
], ],
[ [
"5ddb965c65d27e1512d44dd6", "5ddb965c65d27e1512d44dd6",
"Part 63" "Step 63"
], ],
[ [
"5ddb965c65d27e1512d44dd7", "5ddb965c65d27e1512d44dd7",
"Part 64" "Step 64"
], ],
[ [
"5ddb965c65d27e1512d44dd8", "5ddb965c65d27e1512d44dd8",
"Part 65" "Step 65"
], ],
[ [
"5ddb965c65d27e1512d44dd9", "5ddb965c65d27e1512d44dd9",
"Part 66" "Step 66"
], ],
[ [
"5ddb965c65d27e1512d44dda", "5ddb965c65d27e1512d44dda",
"Part 67" "Step 67"
], ],
[ [
"5ddb965c65d27e1512d44ddb", "5ddb965c65d27e1512d44ddb",
"Part 68" "Step 68"
], ],
[ [
"5ddb965c65d27e1512d44ddc", "5ddb965c65d27e1512d44ddc",
"Part 69" "Step 69"
], ],
[ [
"5ddb965c65d27e1512d44ddd", "5ddb965c65d27e1512d44ddd",
"Part 70" "Step 70"
], ],
[ [
"5ddb965c65d27e1512d44dde", "5ddb965c65d27e1512d44dde",
"Part 71" "Step 71"
], ],
[ [
"5ddb965c65d27e1512d44ddf", "5ddb965c65d27e1512d44ddf",
"Part 72" "Step 72"
], ],
[ [
"5ddb965c65d27e1512d44de0", "5ddb965c65d27e1512d44de0",
"Part 73" "Step 73"
], ],
[ [
"5ddb965c65d27e1512d44de1", "5ddb965c65d27e1512d44de1",
"Part 74" "Step 74"
], ],
[ [
"5ddb965c65d27e1512d44de2", "5ddb965c65d27e1512d44de2",
"Part 75" "Step 75"
], ],
[ [
"5ddb965c65d27e1512d44de3", "5ddb965c65d27e1512d44de3",
"Part 76" "Step 76"
] ]
]} ]}

114
curriculum/challenges/_meta/registration-form/meta.json
View File

@ -12,231 +12,231 @@
"challengeOrder": [ "challengeOrder": [
[ [
"60eebd07ea685b0e777b5583", "60eebd07ea685b0e777b5583",
"Part 1" "Step 1"
], ],
[ [
"60f027099a15b00485563dd2", "60f027099a15b00485563dd2",
"Part 2" "Step 2"
], ],
[ [
"60f027c87bc98f050395c139", "60f027c87bc98f050395c139",
"Part 3" "Step 3"
], ],
[ [
"60f0286404aefb0562a4fdf9", "60f0286404aefb0562a4fdf9",
"Part 4" "Step 4"
], ],
[ [
"60f02e7361b68405e27b62a5", "60f02e7361b68405e27b62a5",
"Part 5" "Step 5"
], ],
[ [
"60f030d388cb74067cf291c3", "60f030d388cb74067cf291c3",
"Part 6" "Step 6"
], ],
[ [
"60f1922fcbd2410527b3bd89", "60f1922fcbd2410527b3bd89",
"Part 7" "Step 7"
], ],
[ [
"60f1a5e2d2c23707a4f9a660", "60f1a5e2d2c23707a4f9a660",
"Part 8" "Step 8"
], ],
[ [
"60f1a9cbd23023082e149fee", "60f1a9cbd23023082e149fee",
"Part 9" "Step 9"
], ],
[ [
"60f5c3e399ff1a05629964e4", "60f5c3e399ff1a05629964e4",
"Part 10" "Step 10"
], ],
[ [
"60f5cb8875ab6a0610f05071", "60f5cb8875ab6a0610f05071",
"Part 11" "Step 11"
], ],
[ [
"60f5d2776c854e069560fbe6", "60f5d2776c854e069560fbe6",
"Part 12" "Step 12"
], ],
[ [
"60f5dc35c07ac1078f140916", "60f5dc35c07ac1078f140916",
"Part 13" "Step 13"
], ],
[ [
"60f803d5241e6a0433a523a1", "60f803d5241e6a0433a523a1",
"Part 14" "Step 14"
], ],
[ [
"60f805f813eaf2049bc2ceea", "60f805f813eaf2049bc2ceea",
"Part 15" "Step 15"
], ],
[ [
"60f80e0081e0f2052ae5b505", "60f80e0081e0f2052ae5b505",
"Part 16" "Step 16"
], ],
[ [
"60f81167d0d4910809f88945", "60f81167d0d4910809f88945",
"Part 17" "Step 17"
], ],
[ [
"60f81616cff80508badf9ad5", "60f81616cff80508badf9ad5",
"Part 18" "Step 18"
], ],
[ [
"60f83e7bfc09900959f41e20", "60f83e7bfc09900959f41e20",
"Part 19" "Step 19"
], ],
[ [
"60f84ec41116b209c280ba91", "60f84ec41116b209c280ba91",
"Part 20" "Step 20"
], ],
[ [
"60f852f645b5310a8264f555", "60f852f645b5310a8264f555",
"Part 21" "Step 21"
], ],
[ [
"60f85a62fb30c80bcea0cedb", "60f85a62fb30c80bcea0cedb",
"Part 22" "Step 22"
], ],
[ [
"60f8604682407e0d017bbf7f", "60f8604682407e0d017bbf7f",
"Part 23" "Step 23"
], ],
[ [
"60f8618d191b940d62038513", "60f8618d191b940d62038513",
"Part 24" "Step 24"
], ],
[ [
"60fab4a123ce4b04526b082b", "60fab4a123ce4b04526b082b",
"Part 25" "Step 25"
], ],
[ [
"60fab8367d35de04e5cb7929", "60fab8367d35de04e5cb7929",
"Part 26" "Step 26"
], ],
[ [
"60fab9f17fa294054b74228c", "60fab9f17fa294054b74228c",
"Part 27" "Step 27"
], ],
[ [
"60fabf0dd4959805dbae09e6", "60fabf0dd4959805dbae09e6",
"Part 28" "Step 28"
], ],
[ [
"60fac4095512d3066053d73c", "60fac4095512d3066053d73c",
"Part 29" "Step 29"
], ],
[ [
"60fac56271087806def55b33", "60fac56271087806def55b33",
"Part 30" "Step 30"
], ],
[ [
"60fac8d7fdfaee0796934f20", "60fac8d7fdfaee0796934f20",
"Part 31" "Step 31"
], ],
[ [
"60faca286cb48b07f6482970", "60faca286cb48b07f6482970",
"Part 32" "Step 32"
], ],
[ [
"60facde2d0dc61085b41063f", "60facde2d0dc61085b41063f",
"Part 33" "Step 33"
], ],
[ [
"60facf914c7b9b08d7510c2c", "60facf914c7b9b08d7510c2c",
"Part 34" "Step 34"
], ],
[ [
"60fad0a812d9890938524f50", "60fad0a812d9890938524f50",
"Part 35" "Step 35"
], ],
[ [
"60fad1cafcde010995e15306", "60fad1cafcde010995e15306",
"Part 36" "Step 36"
], ],
[ [
"60fad6dfcc0d930a59becf12", "60fad6dfcc0d930a59becf12",
"Part 37" "Step 37"
], ],
[ [
"60fad8e6148f310bba7890b1", "60fad8e6148f310bba7890b1",
"Part 38" "Step 38"
], ],
[ [
"60fad99e09f9d30c1657e790", "60fad99e09f9d30c1657e790",
"Part 39" "Step 39"
], ],
[ [
"60fadb18058e950c73925279", "60fadb18058e950c73925279",
"Part 40" "Step 40"
], ],
[ [
"60fadce90f85c50d0bb0dd4f", "60fadce90f85c50d0bb0dd4f",
"Part 41" "Step 41"
], ],
[ [
"60fadd972e6ffe0d6858fa2d", "60fadd972e6ffe0d6858fa2d",
"Part 42" "Step 42"
], ],
[ [
"60fadfa2b540b70dcfa8b771", "60fadfa2b540b70dcfa8b771",
"Part 43" "Step 43"
], ],
[ [
"60fc219d333e37046f474a6e", "60fc219d333e37046f474a6e",
"Part 44" "Step 44"
], ],
[ [
"60fc22d1e64d1b04cdd4e602", "60fc22d1e64d1b04cdd4e602",
"Part 45" "Step 45"
], ],
[ [
"60fc236dc04532052926fdac", "60fc236dc04532052926fdac",
"Part 46" "Step 46"
], ],
[ [
"60ffe1bc30415f042faea936", "60ffe1bc30415f042faea936",
"Part 47" "Step 47"
], ],
[ [
"60ffe3936796ac04959285a9", "60ffe3936796ac04959285a9",
"Part 48" "Step 48"
], ],
[ [
"60ffe4f4ec18cd04dc470c56", "60ffe4f4ec18cd04dc470c56",
"Part 49" "Step 49"
], ],
[ [
"60ffe69ee377c6055e192a46", "60ffe69ee377c6055e192a46",
"Part 50" "Step 50"
], ],
[ [
"60ffe7d8aae62c05bcc9e7eb", "60ffe7d8aae62c05bcc9e7eb",
"Part 51" "Step 51"
], ],
[ [
"60ffe8a5ceb0e90618db06d9", "60ffe8a5ceb0e90618db06d9",
"Part 52" "Step 52"
], ],
[ [
"60ffe947a868ec068f7850f6", "60ffe947a868ec068f7850f6",
"Part 53" "Step 53"
], ],
[ [
"60ffe9cb47809106eda2f2c9", "60ffe9cb47809106eda2f2c9",
"Part 54" "Step 54"
], ],
[ [
"60ffec2825da1007509ddd06", "60ffec2825da1007509ddd06",
"Part 55" "Step 55"
], ],
[ [
"60ffecefac971607ae73c60f", "60ffecefac971607ae73c60f",
"Part 56" "Step 56"
], ],
[ [
"60ffefd6479a3d084fb77cbc", "60ffefd6479a3d084fb77cbc",
"Part 57" "Step 57"
] ]
] ]
} }

50
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-001.md
View File

@ -1,50 +0,0 @@
---
id: 614ccc21ea91ef1736b9b578
title: Part 1
challengeType: 0
dashedName: part-1
---
# --description--
Welcome to the first part in the Accessibility Quiz. As you are becoming a seasoned HTML and CSS developer, we have started you off with the basic boilerplate.
Start this accessibility journey, by providing a `lang` attribute to your `html` element. This will assist screen readers in identifying the language of the page.
# --hints--
You should give the `html` element a `lang` attribute. _Hint: You can use the value `en` for English._
```js
assert.match(code, /<html\s+lang=('|")[\w\-]+?\1\s*>/i);
// TODO: This should/could be fixed in the builder.js
// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
--fcc-editable-region--
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
</body>
</html>
--fcc-editable-region--
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

57
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-002.md
View File

@ -1,57 +0,0 @@
---
id: 613297a923965e0703b64796
title: Part 2
challengeType: 0
dashedName: part-2
---
# --description--
You may be familiar with the `meta` tag already; it is used to specify information about the page, such as the title, description, keywords, and author.
Give your page a `meta` tag with an appropriate `charset` value.
The `charset` attribute specifies the character encoding of the page, and, nowadays, `UTF-8` is the only encoding supported by most browsers.
# --hints--
You should create a `meta` element within the `head` element.
```js
// TODO: Once builder is fixed so head info is not in body
assert.exists(document.querySelector('body > meta'));
```
You should give the `meta` tag a `charset` of `UTF-8`.
```js
assert.equal(document.querySelector('body > meta')?.getAttribute('charset'), 'UTF-8');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

62
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-003.md
View File

@ -1,62 +0,0 @@
---
id: 61329b210dac0b08047fd6ab
title: Part 3
challengeType: 0
dashedName: part-3
---
# --description--
Continuing with the `meta` tags, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimisation).
Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page.
# --hints--
You should create another `meta` element in the `head`.
```js
assert.equal(document.querySelectorAll('body > meta')?.length, 2);
```
You should give the `meta` a `name` attribute of `viewport`.
```js
assert.equal(document.querySelectorAll('body > meta[name="viewport"]')?.length, 1);
```
You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`.
```js
// TODO: Double-check this is the only correct answer
assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

68
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-004.md
View File

@ -1,68 +0,0 @@
---
id: 61329d52e5010e08d9b9d66b
title: Part 4
challengeType: 0
dashedName: part-4
---
# --description--
Another important `meta` tag for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page.
Add a `meta` tag with the `name` attribute set to `description`, and give it a useful `content` attribute.
# --hints--
You should add a new `meta` tag to the `head`.
```js
assert.equal(document.querySelectorAll('meta').length, 3);
```
You should give the `meta` a `name` attribute of `description`.
```js
assert.exists(document.querySelector('meta[name="description"]'));
```
You should give the `meta` a `content` attribute.
```js
assert.notEmpty(document.querySelector('meta[name="description"]')?.content);
```
The `content` attribute value should not be more than 165 characters. _This is Google's maximum description length._
```js
assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

64
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-005.md
View File

@ -1,64 +0,0 @@
---
id: 6133acc353338c0bba9cb553
title: Part 5
challengeType: 0
dashedName: part-5
---
# --description--
Lastly in the `head`, the `title` element is useful for screen readers to understand the content of a page. Furthermore, it is an important part of _SEO_.
Give your page a `title` that is descriptive and concise.
# --hints--
You should add a `title` element to the `head`.
```js
// TODO: Fix once builder puts head in the right place
assert.exists(document.querySelector('body > title'));
```
You should not make the `title` longer than 60 characters.
```js
assert.isAtMost(document.querySelector('body > title')?.textContent?.length, 60);
```
Try being more descriptive with your `title` element. _Hint: At least 20 characters_
```js
assert.isAtLeast(document.querySelector('body > title')?.textContent?.length, 20);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

68
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-006.md
View File

@ -1,68 +0,0 @@
---
id: 6133d11ef548f51f876149e3
title: Part 6
challengeType: 0
dashedName: part-6
---
# --description--
Navigation is a core part of accessibility, and screen readers rely on you to provide the structure of your page. This is accomplished with semantic HTML elements.
Add a `header` and a `main` element to your page.
The `header` element will be used to introduce the page, as well as provide a navigation menu.
The `main` element will contain the core content of your page.
# --hints--
You should add a `header` element to the `body`.
```js
assert.exists(document.querySelector('body > header'));
```
You should add a `main` element to the `body`.
```js
assert.exists(document.querySelector('body > main'));
```
The `header` element should come before the `main` element.
```js
assert.exists(document.querySelector('header + main'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
--fcc-editable-region--
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

93
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-007.md
View File

@ -1,93 +0,0 @@
---
id: 613e2546d0594208229ada50
title: Part 7
challengeType: 0
dashedName: part-7
---
# --description--
Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element.
The `img` should point to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`, and have an `id` of `logo`.
The `h1` should contain the text `HTML/CSS Quiz`.
# --hints--
You should add an `img` element to the `header` element.
```js
assert.exists(document.querySelector('header > img'));
```
You should add an `h1` element to the `header` element.
```js
assert.exists(document.querySelector('header > h1'));
```
You should add a `nav` element to the `header` element.
```js
assert.exists(document.querySelector('header > nav'));
```
You should place the `img`, `h1`, and `nav` elements in that order.
```js
assert.exists(document.querySelector('img + h1 + nav'));
```
You should give the `img` element a `src` attribute of `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
```js
assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
```
You should give the `img` element an `id` attribute of `logo`.
```js
assert.equal(document.querySelector('img')?.id, 'logo');
```
You should give the `h1` element the text `HTML/CSS Quiz`.
```js
assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
--fcc-editable-region--
<header>
</header>
--fcc-editable-region--
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

66
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-008.md
View File

@ -1,66 +0,0 @@
---
id: 613e275749ebd008e74bb62e
title: Part 8
challengeType: 0
dashedName: part-8
---
# --description--
A useful property of an _SVG_ (scalable vector graphics) is that is contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image.
Currently, the `img` is assuming it's default size, which is too large. Correctly, scale the image using it's `id` as a selector, and setting the `width` to `max(100px, 18vw)`.
# --hints--
You should use the `#logo` selector to target the `img` element.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
```
You should give the `img` a `width` of `max(100px, 18vw)`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
--fcc-editable-region--
```

93
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-009.md
View File

@ -1,93 +0,0 @@
---
id: 6140827cff96e906bd38fc2b
title: Part 9
challengeType: 0
dashedName: part-9
---
# --description--
As described in the [freeCodeCamp Style Guide](https://design-style-guide.freecodecamp.org/), the logo should retain an aspect ratio of `35:4`, and have padding around the text.
First, change the `background-color` to `#0a0a23` so you can see the logo. Then, use the `aspect-ratio` property to set the desired aspect ratio. Finally, add a `padding` of `0.4rem` all around.
# --hints--
You should give `#logo` a `background-color` of `#0a0a23`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)');
```
You should use the `aspect-ratio` property.
```js
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio);
```
You should not use the `height` property.
```js
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height);
```
You should not change the `width` property.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```
You should give the `img` an `aspect-ratio` of `35 / 4`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4');
```
You should give the `img` a `padding` of `0.4rem`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
#logo {
width: max(100px, 18vw);
}
--fcc-editable-region--
```

89
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-010.md
View File

@ -1,89 +0,0 @@
---
id: 6140883f74224508174794c0
title: Part 10
challengeType: 0
dashedName: part-10
---
# --description--
Make the `header` take up the full width of its parent container, set it's `height` to `50px`, and set the `background-color` to `#1b1b32`. Then, set the `display` to use _Flexbox_.
# --hints--
You should use the `header` element selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('header'));
```
You should give the `header` a `width` of `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%');
```
You should give the `header` a `height` of `50px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px');
```
You should give the `header` a `background-color` of `#1b1b32`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)');
```
You should give the `header` a `display` of `flex`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
--fcc-editable-region--
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
```

83
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-011.md
View File

@ -1,83 +0,0 @@
---
id: 61408e4ae3e35d08feb260eb
title: Part 11
challengeType: 0
dashedName: part-11
---
# --description--
Change the `h1` font color to `#f1be32`, and set the font size to `min(5vw, 1.2em)`.
# --hints--
You should use the `h1` element selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('h1'));
```
You should give the `h1` a `color` of `#f1be32`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)');
```
You should give the `h1` a `font-size` of `min(5vw, 1.2em)`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
--fcc-editable-region--
--fcc-editable-region--
```

112
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-012.md
View File

@ -1,112 +0,0 @@
---
id: 61408f155e798909b6908712
title: Part 12
challengeType: 0
dashedName: part-12
---
# --description--
To enable navigation on the page, add an unordered list with the following three list items:
- `INFO`
- `HTML`
- `CSS`
The list items text should be wrapped in anchor tags.
# --hints--
You should nest one `ul` element inside the `nav`.
```js
assert.equal(document.querySelectorAll('nav > ul')?.length, 1);
```
You should nest three `li` elements inside the `ul` element.
```js
assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3);
```
You should nest one `a` element inside each `li` element.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3);
```
You should give the first `a` element the text `INFO`.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO');
```
You should give the second `a` element the text `HTML`.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML');
```
You should give the third `a` element the text `CSS`.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
--fcc-editable-region--
<nav>
</nav>
--fcc-editable-region--
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
```

102
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-013.md
View File

@ -1,102 +0,0 @@
---
id: 614090d5a22b6f0a5a6b464c
title: Part 13
challengeType: 0
dashedName: part-13
---
<!-- TODO: I purposefully added the `nav` styles without Camper input -->
# --description--
Target unordered list elements within `nav` elements, and use _Flexbox_ to evenly space the children.
# --hints--
You should use the `nav > ul` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul'));
```
You should give the `nav > ul` elements a `display` of `flex`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex');
```
You should give the `nav > ul` elements a `justify-content` of `space-evenly`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
--fcc-editable-region--
--fcc-editable-region--
```

125
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-014.md
View File

@ -1,125 +0,0 @@
---
id: 6141fabd6f75610664e908fd
title: Part 14
challengeType: 0
dashedName: part-14
---
# --description--
As this is a quiz, you will need a form for users to submit answers. You can semantically separate the content within the form using `section` elements.
Within the `main` element, create a form with three nested `section` elements. Then, make the form submit to `https://freecodecamp.org/practice-project/accessibility-quiz`, using the correct method.
# --hints--
You should nest a `form` element within your `main` element.
```js
assert.exists(document.querySelector('main > form'));
```
You should nest three `section` elements within your `form` element.
```js
assert.equal(document.querySelectorAll('main > form > section')?.length, 3);
```
You should give the `form` element an `action` attribute.
```js
assert.notEmpty(document.querySelector('main > form')?.action);
```
You should give the `action` attribute a value of `https://freecodecamp.org/practice-project/accessibility-quiz`.
```js
assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz');
```
You should give the `form` element a `method` attribute.
```js
assert.notEmpty(document.querySelector('main > form')?.method);
```
You should give the `form` element a `method` attribute with a value of `post`.
```js
assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
--fcc-editable-region--
<main>
</main>
--fcc-editable-region--
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
```

111
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-015.md
View File

@ -1,111 +0,0 @@
---
id: 6141fed65b61320743da5894
title: Part 15
challengeType: 0
dashedName: part-15
---
# --description--
To increase the page accessibility, the `role` attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The `role` attribute is a part of the _Web Accessibility Initiative_ (WAI), and accepts preset values.
Give each of the `section` elements the `region` role.
# --hints--
You should give the first `section` element the `region` role.
```js
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region');
```
You should give the second `section` element the `region` role.
```js
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region');
```
You should give the third `section` element the `region` role.
```js
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
<main>
--fcc-editable-region--
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section></section>
<section></section>
<section></section>
</form>
--fcc-editable-region--
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
```

171
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-016.md
View File

@ -1,171 +0,0 @@
---
id: 614202874ca576084fca625f
title: Part 16
challengeType: 0
dashedName: part-16
---
# --description--
Every `region` role requires a visible label, which should be referenced by the `aria-labelledby` attribute.
To the `section` elements, give the following `aria-labelledby` attributes:
- `student-info`
- `html-questions`
- `css-questions`
Then, within each `section` element, nest one `h2` element with an `id` matching the corresponding `aria-labelledby` attribute. Give each `h2` suitable text content.
# --hints--
You should give the first `section` element an `aria-labelledby` attribute of `student-info`.
```js
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
```
You should give the second `section` element an `aria-labelledby` attribute of `html-questions`.
```js
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
```
You should give the third `section` element an `aria-labelledby` attribute of `css-questions`.
```js
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
```
You should nest one `h2` element within the first `section` element.
```js
assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
```
You should nest one `h2` element within the second `section` element.
```js
assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
```
You should nest one `h2` element within the third `section` element.
```js
assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
```
You should give the first `h2` element an `id` attribute of `student-info`.
```js
assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
```
You should give the second `h2` element an `id` attribute of `html-questions`.
```js
assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
```
You should give the third `h2` element an `id` attribute of `css-questions`.
```js
assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
```
You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_
```js
assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
```
You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_
```js
assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
```
You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_
```js
assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
<main>
--fcc-editable-region--
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region"></section>
<section role="region"></section>
<section role="region"></section>
</form>
--fcc-editable-region--
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
```

140
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-017.md
View File

@ -1,140 +0,0 @@
---
id: 614206033d366c090ca7dd42
title: Part 17
challengeType: 0
dashedName: part-17
---
# --description--
Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens.
Change the font for both the `h1` and `h2` elements to `Verdana`, and use another sans-serif _web safe_ font as a fallback.
Also, add a `border-bottom` of `4px solid #dfdfe2` to `h2` elements, to make the sections distinct.
# --hints--
You should use a multiple element selector to target the `h1` and `h2` elements.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('h1, h2') || gs('h2, h1'));
```
You should set the first value of the `font-family` property to `Verdana`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const style = gs('h1, h2') || gs('h2, h1');
assert.include(style?.fontFamily, 'Verdana');
```
You should set the second value of the `font-family` property to another sans-serif, web safe font. _Hint: I would choose Tahoma_.
```js
// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS.
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const style = gs('h1, h2') || gs('h2, h1');
assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/);
```
You should use an `h2` element selector to target the `h2` elements.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('h2'));
```
You should give `h2` a `border-bottom` property of `4px solid #dfdfe2`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
--fcc-editable-region--
--fcc-editable-region--
```

125
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-018.md
View File

@ -1,125 +0,0 @@
---
id: 61435e3c0679a306c20f1acc
title: Part 18
challengeType: 0
dashedName: part-18
---
# --description--
To be able to navigate within the page, give each anchor element an `href` corresponding to the `id` of the `h2` elements.
# --hints--
You should give the first `a` element an `href` of `#student-info`.
```js
assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info');
```
You should give the second `a` element an `href` of `#html-questions`.
```js
assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions');
```
You should give the third `a` element an `href` of `#css-questions`.
```js
assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
--fcc-editable-region--
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
--fcc-editable-region--
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

173
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-019.md
View File

@ -1,173 +0,0 @@
---
id: 6143610161323a081b249c19
title: Part 19
challengeType: 0
dashedName: part-19
---
# --description--
Filling out the content of the quiz, below the `#student-info`, add three `div` elements with a `class` of `info`.
Then, within each `div` nest one `label` element, and one `input` element.
# --hints--
You should nest three `div` elements below the `h2#student-info` element.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3);
```
You should give the first `div` a `class` of `info`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info');
```
You should give the second `div` a `class` of `info`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info');
```
You should give the third `div` a `class` of `info`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info');
```
You should nest one `label` element within the first `div`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1);
```
You should nest one `input` element within the first `div`, after the `label`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1);
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input'));
```
You should nest one `label` element within the second `div`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1);
```
You should nest one `input` element within the second `div`, after the `label`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1);
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input'));
```
You should nest one `label` element within the third `div`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1);
```
You should nest one `input` element within the third `div`, after the `label`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1);
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
--fcc-editable-region--
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

195
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-020.md
View File

@ -1,195 +0,0 @@
---
id: 6143639d5eddc7094161648c
title: Part 20
challengeType: 0
dashedName: part-20
---
# --description--
It is important to link each `input` to the corresponding `label` element. This provides assistive technology users with a visual reference to the input.
This is done, by giving the `label` a `for` attribute, which contains the `id` of the `input`.
This section will take a student's name, email address, and date of birth. Give the `label` elements appropriate `for` attributes, as well as text content. Then, link the `input` elements to the corresponding `label` elements.
# --hints--
You should give the first `label` element an appropriate `for` attribute.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);
```
You should give the second `label` element an appropriate `for` attribute.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);
```
You should give the third `label` element an appropriate `for` attribute.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
```
You should give the first `label` element an appropriate text content.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
```
You should give the second `label` element an appropriate text content.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
```
You should give the third `label` element an appropriate text content.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
```
You should give the first `input` element an `id` attribute matching the `for` attribute of the first `label`.
```js
assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);
```
You should give the second `input` element an `id` attribute matching the `for` attribute of the second `label`.
```js
assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);
```
You should give the third `input` element an `id` attribute matching the `for` attribute of the third `label`.
```js
assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);
```
You should not use the same `id` attribute for more than one `input` element.
```js
const id = (n) => document.querySelectorAll('input')?.[n]?.id;
assert.notEqual(id(0), id(1));
assert.notEqual(id(0), id(2));
assert.notEqual(id(1), id(2));
```
You should not use the same `for` attribute for more than one `label` element.
```js
const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor;
assert.notEqual(htmlFor(0), htmlFor(1));
assert.notEqual(htmlFor(0), htmlFor(2));
assert.notEqual(htmlFor(1), htmlFor(2));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
--fcc-editable-region--
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label></label>
<input />
</div>
<div class="info">
<label></label>
<input />
</div>
<div class="info">
<label></label>
<input />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

161
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-021.md
View File

@ -1,161 +0,0 @@
---
id: 6143908b6aafb00a659ca189
title: Part 21
challengeType: 0
dashedName: part-21
---
# --description--
Keeping in mind best-practices for form inputs, give each `input` an appropriate `type` and `name` attribute. Then, give the first `input` a `placeholder` attribute.
# --hints--
You should give the first `input` a `type` of `text`.
```js
assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text');
```
You should give the second `input` a `type` of `email`.
```js
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email');
```
You should give the third `input` a `type` of `date`.
```js
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date');
```
You should give the first `input` an appropriate `name` attribute.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1);
```
You should give the second `input` an appropriate `name` attribute.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1);
```
You should give the third `input` an appropriate `name` attribute.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1);
```
You should give the first `input` a `placeholder` attribute.
```js
assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
--fcc-editable-region--
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.:</label>
<input id="birth-date" />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

127
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-022.md
View File

@ -1,127 +0,0 @@
---
id: 6143920c8eafb00b735746ce
title: Part 22
challengeType: 0
dashedName: part-22
---
# --description--
Even though you added a `placeholder` to the first `input` element in the previous lesson, this is actually not a best-practice for accessibility; too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input.
Remove the placeholder text from the first `input` element, relying on the `label` being the best-practice.
# --hints--
You should remove the `placeholder` attribute from the first `input` element.
```js
assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
--fcc-editable-region--
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" placeholder="e.g. Quincy Larson" />
</div>
--fcc-editable-region--
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

139
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-023.md
View File

@ -1,139 +0,0 @@
---
id: 6143931a113bb80c45546287
title: Part 23
challengeType: 0
dashedName: part-23
---
# --description--
Arguably, `D.O.B.` is not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read.
Append a `span` element with a class of `sr-only` to the current text content of the third `label` element.
# --hints--
You should add a `span` element within the third `label` element.
```js
assert.exists(document.querySelector('.info:nth-of-type(3) > label > span'));
```
You should give the `span` element a class of `sr-only`.
```js
assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only');
```
You should place the `span` after the text content `D.O.B.`.
```js
assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\.<span/);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
--fcc-editable-region--
<div class="info">
<label for="birth-date">D.O.B.</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
--fcc-editable-region--
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

125
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-024.md
View File

@ -1,125 +0,0 @@
---
id: 614394fb41985e0d2012a93e
title: Part 24
challengeType: 0
dashedName: part-24
---
# --description--
Within the `span` element, add the text `(Date of Birth)`.
# --hints--
You should give the `span` element the text `(Date of Birth)`.
```js
assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.textContent, '(Date of Birth)');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
--fcc-editable-region--
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only"></span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
--fcc-editable-region--
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

197
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-025.md
View File

@ -1,197 +0,0 @@
---
id: 6143956ed76ed60e012faa51
title: Part 25
challengeType: 0
dashedName: part-25
---
# --description--
The `.sr-only` text is still visible. There is a common pattern to visually hide text for only screen readers to read.
This pattern is to set the following CSS properties:
```css
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
```
Use the above to define the `sr-only` class.
# --hints--
You should use the `.sr-only` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only'));
```
You should give the `.sr-only` a `position` of `absolute`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute');
```
You should give the `.sr-only` a `width` of `1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px');
```
You should give the `.sr-only` a `height` of `1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px');
```
You should give the `.sr-only` a `padding` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px');
```
You should give the `.sr-only` a `margin` of `-1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px');
```
You should give the `.sr-only` an `overflow` of `hidden`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden');
```
You should give the `.sr-only` a `clip` of `rect(0, 0, 0, 0)`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)');
```
You should give the `.sr-only` a `white-space` of `nowrap`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap');
```
You should give the `.sr-only` a `border` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.border, '0px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
--fcc-editable-region--
--fcc-editable-region--
```

200
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-026.md
View File

@ -1,200 +0,0 @@
---
id: 614396f7ae83f20ea6f9f4b3
title: Part 26
challengeType: 0
dashedName: part-26
---
# --description--
Within the second `section` element, add two `div` elements with a class of `question-block`.
Then, within each `div.question-block` element, add one `p` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
# --hints--
You should nest two `div` elements within the second `section` element.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2);
```
You should give the first new `div` element a class of `question-block`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block');
```
You should give the second new `div` element a class of `question-block`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
```
You should nest one `p` element within each `div.question-block` element.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
```
You should give the first `p` element text of `1`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
```
You should give the second `p` element text of `2`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
```
You should nest one `fieldset` element within each `div.question-block` element.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
```
You should place the first `fieldset` element after the first `p` element.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
```
You should place the second `fieldset` element after the second `p` element.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
```
You should give the first `fieldset` element a class of `question`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question');
```
You should give the second `fieldset` element a class of `question`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.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;
}
```

177
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-027.md
View File

@ -1,177 +0,0 @@
---
id: 6143cb26f7edff2dc28f7da5
title: Part 27
challengeType: 0
dashedName: part-27
---
# --description--
Each `fieldset` will contain a true/false question.
Within each `fieldset`, nest one `legend` element, and one `ul` element with two options.
# --hints--
You should nest one `legend` element within the first `fieldset` element.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1);
```
You should nest one `ul` element within the first `fieldset` element.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1);
```
You should nest two `li` elements within the first `ul` element.
```js
assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2);
```
You should nest one `legend` element within the second `fieldset` element.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1);
```
You should nest one `ul` element within the second `fieldset` element.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1);
```
You should nest two `li` elements within the second `ul` element.
```js
assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question"></fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question"></fieldset>
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.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;
}
```

195
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-028.md
View File

@ -1,195 +0,0 @@
---
id: 6144e818fd5ea704fe56081d
title: Part 28
challengeType: 0
dashedName: part-28
---
# --description--
Give each `fieldset` an adaquate `name` attribute. Then, give both unordered lists a `class` of `answers-list`.
Finally, add use the `legend` to caption the content of the `fieldset`, by placing a true/false question as the text content.
# --hints--
You should give the first `fieldset` an adaquate `name` attribute. _Hint: I would use `html-question-one`_
```js
assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name);
```
You should give the second `fieldset` an adaquate `name` attribute. _Hint: I would use `html-question-two`_
```js
assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name);
```
You should give the first `ul` element a `class` of `answers-list`.
```js
assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list');
```
You should give the second `ul` element a `class` of `answers-list`.
```js
assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list');
```
You should give the first `legend` element text content.
```js
assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent);
```
You should give the second `legend` element text content.
```js
assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent);
```
You should not use the same text content for both `legend` elements.
```js
assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question">
<legend></legend>
<ul>
<li></li>
<li></li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question">
<legend></legend>
<ul>
<li></li>
<li></li>
</ul>
</fieldset>
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.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;
}
```

231
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-029.md
View File

@ -1,231 +0,0 @@
---
id: 6144f8dc6849e405dd8bb829
title: Part 29
challengeType: 0
dashedName: part-29
---
# --description--
To provide the functionality of the true/false questions, we need a set of inputs which do not allow both to be selected at the same time.
Within each list element, nest one `label` element, and within each `label` element, nest one `input` element with the appropriate `type`.
# --hints--
You should nest one `label` element within the first `li` element.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label'));
```
You should nest one `label` element within the second `li` element.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label'));
```
You should nest one `label` element within the third `li` element.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label'));
```
You should nest one `label` element within the fourth `li` element.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label'));
```
You should nest one `input` element within the first `label` element.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input'));
```
You should nest one `input` element within the second `label` element.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input'));
```
You should nest one `input` element within the third `label` element.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input'));
```
You should nest one `input` element within the fourth `label` element.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input'));
```
You should give the first `input` a `type` of `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio');
```
You should give the second `input` a `type` of `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio');
```
You should give the third `input` a `type` of `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio');
```
You should give the fourth `input` a `type` of `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
--fcc-editable-region--
<ul class="answers-list">
<li></li>
<li></li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li></li>
<li></li>
</ul>
--fcc-editable-region--
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.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;
}
```

207
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-030.md
View File

@ -1,207 +0,0 @@
---
id: 6145e6eeaa66c605eb087fe9
title: Part 30
challengeType: 0
dashedName: part-30
---
# --description--
Although not required for `label` elements with a nested `input`, it is still best-practice to explicitly link a `label` with its corresponding `input` element.
Link the `label` elements with their corresponding `input` elements.
# --hints--
You should give the first `label` a `for` attribute matching the `id` of its `input` element.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor;
assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id);
```
You should give the second `label` a `for` attribute matching the `id` of its `input` element.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor;
assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id);
```
You should give the third `label` a `for` attribute matching the `id` of its `input` element.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor;
assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id);
```
You should give the fourth `label` a `for` attribute matching the `id` of its `input` element.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor;
assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
--fcc-editable-region--
<ul class="answers-list">
<li>
<label>
<input type="radio" />
</label>
</li>
<li>
<label>
<input type="radio" />
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" />
</label>
</li>
<li>
<label>
<input type="radio" />
</label>
</li>
</ul>
--fcc-editable-region--
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.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;
}
```

287
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-031.md
View File

@ -1,287 +0,0 @@
---
id: 6145e8b5080a5f06bb0223d0
title: Part 31
challengeType: 0
dashedName: part-31
---
# --description--
Give the `label` elements text such that the `input` comes before the text. Then, give the `input` elements a `value` matching the text.
The text should either be `True` or `False`.
# --hints--
You should give the first `label` element text content.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
```
You should give the second `label` element text content.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim());
```
You should give the third `label` element text content.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
```
You should give the fourth `label` element text content.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim());
```
You should place the first `label` text content after the `input` element.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
You should place the second `label` text content after the `input` element.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
You should place the third `label` text content after the `input` element.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
You should place the fourth `label` text content after the `input` element.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
You should give the first `label` the text `True` or `False`.
```js
assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
```
You should give the second `label` the text `True`.
```js
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
assert(l(0) === 'False' ? l(1) === 'True' : true);
```
You should give the second `label` the text `False`.
```js
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
assert(l(0) === 'True' ? l(1) === 'False' : true);
```
You should give the third `label` the text `True` or `False`.
```js
assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
```
You should give the fourth `label` the text `True`.
```js
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
assert(l(2) === 'False' ? l(3) === 'True' : true);
```
You should give the fourth `label` the text `False`.
```js
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
assert(l(2) === 'True' ? l(3) === 'False' : true);
```
You should give the first `input` a `value` matching the `label` text content.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase());
```
You should give the second `input` a `value` matching the `label` text content.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase());
```
You should give the third `input` a `value` matching the `label` text content.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase());
```
You should give the fourth `input` a `value` matching the `label` text content.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase());
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
--fcc-editable-region--
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" />
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" />
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" />
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" />
</label>
</li>
</ul>
--fcc-editable-region--
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.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;
}
```

224
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-032.md
View File

@ -1,224 +0,0 @@
---
id: 6145eb5f08a38a0786c7a80c
title: Part 32
challengeType: 0
dashedName: part-32
---
# --description--
If you click on the radio inputs, you might notice both inputs within the same true/false fieldset can be selected at the same time.
Group the relevant inputs together such that only one input from a pair can be selected at a time.
# --hints--
You should give the first `input` a `name` attribute.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name);
```
You should give the second `input` a `name` attribute.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name);
```
You should give the third `input` a `name` attribute.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name);
```
You should give the fourth `input` a `name` attribute.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name);
```
You should give the second `input` a `name` attribute matching the `name` attribute of the first `input`.
```js
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
assert.equal(i(1), i(0));
```
You should give the fourth `input` a `name` attribute matching the `name` attribute of the third `input`.
```js
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
assert.equal(i(3), i(2));
```
You should give different `name` attributes to the first `input` and the third `input`.
```js
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
assert.notEqual(i(0), i(2));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
--fcc-editable-region--
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" value="false" />
False
</label>
</li>
</ul>
--fcc-editable-region--
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.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;
}
```

191
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-033.md
View File

@ -1,191 +0,0 @@
---
id: 6145ed1f22caab087630aaad
title: Part 33
challengeType: 0
dashedName: part-33
---
# --description--
To prevent unnecessary repetition, target the `before` pseudo-element of the `p` element, and give it a `content` property of `Question #`.
# --hints--
You should use the `p::before` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('p::before'));
```
You should give the `p::before` pseudo-element a `content` property of `Question #`.
```js
assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, 'Question #');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
--fcc-editable-region--
--fcc-editable-region--
.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;
}
```

232
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-034.md
View File

@ -1,232 +0,0 @@
---
id: 6145ee65e2e1530938cb594d
title: Part 34
challengeType: 0
dashedName: part-34
---
# --description--
The final section of this quiz will contain a dropdown, and a text box.
Begin by nesting a `div` with a `class` of `formrow`, and nest four `div` elements inside of it, alternating their `class` attributes with `question-block` and `answer`.
# --hints--
You should add one `div` element within the final `section`.
```js
assert.exists(document.querySelector('section:nth-of-type(3) > div'));
```
You should give the first `div` a `class` of `formrow`.
```js
assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow');
```
You should place `div.formrow` after the `h2` element.
```js
assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow'));
```
You should nest four `div` elements inside `div.formrow`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4);
```
You should give the first nested `div` a `class` of `question-block`.
```js
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block');
```
You should give the second nested `div` a `class` of `answer`.
```js
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer');
```
You should give the third nested `div` a `class` of `question-block`.
```js
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block');
```
You should give the fourth nested `div` a `class` of `answer`.
```js
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(4)')?.className, 'answer');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
--fcc-editable-region--
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

215
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-035.md
View File

@ -1,215 +0,0 @@
---
id: 6145f02240ff8f09f7ec913c
title: Part 35
challengeType: 0
dashedName: part-35
---
# --description--
Within the `div.question-block` elements, nest one `label` element, and give the `label` elements text content
# --hints--
You should nest one `label` element within the first `div.question-block` element.
```js
assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label'));
```
You should nest one `label` element within the second `div.question-block` element.
```js
assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label'));
```
You should give the first `label` element text content.
```js
assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1);
```
You should give the second `label` element text content.
```js
assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
</div>
<div class="answer">
</div>
<div class="question-block">
</div>
<div class="answer">
</div>
</div>
</section>
--fcc-editable-region--
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

250
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-036.md
View File

@ -1,250 +0,0 @@
---
id: 6145f14f019a4b0adb94b051
title: Part 36
challengeType: 0
dashedName: part-36
---
# --description--
Within the first `div.answer` element, nest one required `select` element with three `option` elements.
Give the first `option` element a `value` of `""`, and the text `Select an option`. Give the second `option` element a `value` of `yes`, and the text `Yes`. Give the third `option` element a `value` of `no`, and the text `No`.
# --hints--
You should nest one `select` element within the first `div.answer` element.
```js
assert.exists(document.querySelector('div.answer > select'));
```
You should nest three `option` elements within the `select` element.
```js
assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3);
```
You should give the first `option` element a `value` of `""`.
```js
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, '');
```
You should give the first `option` element a text content of `Select an option`.
```js
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option');
```
You should give the second `option` element a `value` of `yes`.
```js
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes');
```
You should give the second `option` element a text content of `Yes`.
```js
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes');
```
You should give the third `option` element a `value` of `no`.
```js
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no');
```
You should give the third `option` element a text content of `No`.
```js
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No');
```
You should give the `select` an attribute of `required`.
```js
assert.isTrue(document.querySelector('div.answer > select')?.required);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label>Are you a frontend developer?</label>
</div>
--fcc-editable-region--
<div class="answer">
</div>
--fcc-editable-region--
<div class="question-block">
<label>Do you have any questions:</label>
</div>
<div class="answer">
</div>
</div>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

222
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-037.md
View File

@ -1,222 +0,0 @@
---
id: 6145f3a5cd9be60b9459cdd6
title: Part 37
challengeType: 0
dashedName: part-37
---
# --description--
Link the first `label` element to the `select` element, and give the `select` element a `name` attribute.
# --hints--
You should give the `label` element a `for` attribute.
```js
assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor);
```
You should give the `select` element an `id` attribute.
```js
assert.notEmpty(document.querySelector('.answer > select')?.id);
```
You should give the `select` element an `id` matching the `for` attribute of the `label` element.
```js
assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor);
```
You should give the `select` element a `name` attribute.
```js
assert.notEmpty(document.querySelector('.answer > select')?.name);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
--fcc-editable-region--
<div class="question-block">
<label>Are you a frontend developer?</label>
</div>
<div class="answer">
<select required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
--fcc-editable-region--
<div class="question-block">
<label>Do you have any questions:</label>
</div>
<div class="answer">
</div>
</div>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

229
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-038.md
View File

@ -1,229 +0,0 @@
---
id: 6145f47393fbe70c4d885f9c
title: Part 38
challengeType: 0
dashedName: part-38
---
# --description--
Nest one `textarea` element within the second `div.answer` element, and set the number of rows and columns it has.
Then, give the `textarea` placeholder text describing an example answer.
# --hints--
You should nest one `textarea` element within the second `div.answer` element.
```js
assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea'));
```
You should give the `textarea` a `rows` attribute with a number.
```js
const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows');
assert.notEmpty(rows);
assert.isNotNaN(Number(rows));
```
You should give the `textarea` a `cols` attribute with a number.
```js
const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols');
assert.notEmpty(cols);
assert.isNotNaN(Number(cols));
```
You should give the `textarea` placeholder text describing an example answer.
```js
assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.textContent);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label>Do you have any questions:</label>
</div>
--fcc-editable-region--
<div class="answer">
</div>
--fcc-editable-region--
</div>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

219
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-039.md
View File

@ -1,219 +0,0 @@
---
id: 6145f59029474c0d3dc1c8b8
title: Part 39
challengeType: 0
dashedName: part-39
---
# --description--
As with the other input elements and `labels`, link the `textarea` to its corresponding `label` element, and give it a `name` attribute.
# --hints--
You should give the `label` element a `for` attribute.
```js
assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor);
```
You should give the `textarea` element an `id` attribute matching the `for` attribute of the `label` element.
```js
assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id);
```
You should give the `textarea` element a `name` attribute.
```js
assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
--fcc-editable-region--
<div class="question-block">
<label>Do you have any questions:</label>
</div>
<div class="answer">
<textarea rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
--fcc-editable-region--
</div>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

232
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-040.md
View File

@ -1,232 +0,0 @@
---
id: 6145f685797bd30df9784e8c
title: Part 40
challengeType: 0
dashedName: part-40
---
# --description--
Do not forget to give your `form` a submit button.
# --hints--
You should add either a `button` or `input` element.
```js
assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input'));
```
You should place the submit within the `form` element.
```js
assert.exists(document.querySelector('form > button') || document.querySelector('form > input'));
```
You should place the submit after the last `section` element.
```js
assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input'));
```
You should give the submit a `type` of `submit`.
```js
assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
```
The submit should display the text `Submit`.
```js
assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Submit');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
--fcc-editable-region--
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
</form>
--fcc-editable-region--
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

217
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-041.md
View File

@ -1,217 +0,0 @@
---
id: 6145f829ac6a920ebf5797d7
title: Part 41
challengeType: 0
dashedName: part-41
---
# --description--
Two final semantic HTML elements for this project are the `footer` and `address` elements. The `footer` element is a container for a collection of content that is related to the page, and the `address` element is a container for contact information for the author of the page.
After the `main` element, add one `footer` element, and nest one `address` element within it.
# --hints--
You should add one `footer` element after the `main` element.
```js
assert.exists(document.querySelector('main + footer'));
```
You should nest one `address` element within the `footer` element.
```js
assert.exists(document.querySelector('footer > address'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
--fcc-editable-region--
--fcc-editable-region--
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

222
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-042.md
View File

@ -1,222 +0,0 @@
---
id: 6145f8f8bcd4370f6509078e
title: Part 42
challengeType: 0
dashedName: part-42
---
# --description--
Within the `address` element, add the following:
```html
freeCodeCamp<br />
San Francisco<br />
California<br />
USA
```
You can visit, but you might not find anything...
# --hints--
You should add the above text including the `<br />` tags to the `address` element.
```js
assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
--fcc-editable-region--
<footer>
<address>
</address>
</footer>
--fcc-editable-region--
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

231
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-043.md
View File

@ -1,231 +0,0 @@
---
id: 6145fb5018cb5b100cb2a88c
title: Part 43
challengeType: 0
dashedName: part-43
---
# --description--
The `address` element does not have to contain a physical geographical location. It can be used to provide a link to the subject.
Wrap a link around the text `freeCodeCamp`, and set its location to `https://freecodecamp.org`.
# --hints--
You should add an `a` element.
```js
assert.exists(document.querySelector('address > a'));
```
You should give the `a` element a `href` attribute of `https://freecodecamp.org`.
```js
assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org');
```
You should wrap the `a` element around the existing text `freeCodeCamp`.
```js
assert.equal(document.querySelector('address > a')?.innerHTML, 'freeCodeCamp');
assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g)?.length, 1);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
--fcc-editable-region--
<footer>
<address>
freeCodeCamp<br />
San Francisco<br />
California<br />
USA
</address>
</footer>
--fcc-editable-region--
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

258
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-044.md
View File

@ -1,258 +0,0 @@
---
id: 6145fc3707fc3310c277f5c8
title: Part 44
challengeType: 0
dashedName: part-44
---
# --description--
Back to styling the page. Select the list elements within the navigation bar, and give them the following styles:
```css
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
```
# --hints--
You should use either the `nav li` or `nav > ul > li` selector.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('nav li') || gs('nav > ul > li'));
```
You should give the `li` elements a `color` of `#dfdfe2`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const color = gs('nav li')?.color ?? gs('nav > ul > li')?.color;
assert.equal(color, 'rgb(223, 223, 226)');
```
You should give the `li` elements a `margin` of `0 0.2rem`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const margin = gs('nav li')?.margin ?? gs('nav > ul > li')?.margin;
assert.equal(margin, '0px 0.2rem');
```
You should give the `li` elements a `padding` of `0.2rem`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const padding = gs('nav li')?.padding ?? gs('nav > ul > li')?.padding;
assert.equal(padding, '0.2rem');
```
You should give the `li` elements a `display` of `block`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const display = gs('nav li')?.display ?? gs('nav > ul > li')?.display;
assert.equal(display, 'block');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
--fcc-editable-region--
--fcc-editable-region--
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

262
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-045.md
View File

@ -1,262 +0,0 @@
---
id: 614796cb8086be482d60e0ac
title: Part 45
challengeType: 0
dashedName: part-45
---
# --description--
On the topic of visual accessibility, contrast between elements is a key factor. For example, the contrast between the text and the background of a heading should be at least 4.5:1.
Change the font color of all the anchor elements within list elements to something with a contrast ratio of at least 7:1.
# --hints--
You should use the `li > a` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('li > a'));
```
You should give the `a` element a `color` property.
```js
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color);
```
You should give the `color` property a contrast with the background of at least 7:1. _Hint: I would use `#dfdfe2`_
```js
function luminance(r, g, b) {
const a = [r, g, b].map((v) => {
v /= 255;
return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 );
});
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function contrast(rgb1, rgb2) {
const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
const brightest = Math.max(lum1, lum2);
const darkest = Math.min(lum1, lum2);
return (brightest + 0.05)
/ (darkest + 0.05);
}
const backgroundColour = [27, 27, 50];
for (let elem of document.querySelectorAll('li > a')) {
const a = getComputedStyle(elem)?.color;
const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/);
const aColour = [rgbA[1], rgbA[2], rgbA[3]];
assert.isAtLeast(contrast(backgroundColour, aColour), 7);
}
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
--fcc-editable-region--
--fcc-editable-region--
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

262
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-046.md
View File

@ -1,262 +0,0 @@
---
id: 6147a14ef5668b5881ef2297
title: Part 46
challengeType: 0
dashedName: part-46
---
# --description--
To make the navigation buttons look more like typical buttons, remove the underline from the anchor tags.
Then, create a new selector targetting the navigation list elements so that when the cursor hovers over them, the background color and text color are switched, and the cursor becomes a pointer.
# --hints--
You should use the existing `li > a` selector to set the `text-decoration` to `none`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('li > a')?.textDecoration, 'none');
```
You should use either the `nav > ul > li:hover` or `nav li:hover` selector to style the elements on hover.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('nav > ul > li:hover') || gs('nav li:hover'));
```
You should give hovered `li` elements a `background-color` of `#dfdfe2`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const bgColor = gs('nav > ul > li:hover')?.backgroundColor ?? gs('nav li:hover')?.backgroundColor;
assert.equal(bgColor, 'rgb(223, 223, 226)');
```
You should give hovered `li` elements a `color` of `#1b1b32`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const color = gs('nav > ul > li:hover')?.color ?? gs('nav li:hover')?.color;
assert.equal(color, 'rgb(27, 27, 50)');
```
You should give hovered `li` elements a `cursor` of `pointer`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const cursor = gs('nav > ul > li:hover')?.cursor ?? gs('nav li:hover')?.cursor;
assert.equal(cursor, 'pointer');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
--fcc-editable-region--
li > a {
color: inherit;
}
--fcc-editable-region--
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

255
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-047.md
View File

@ -1,255 +0,0 @@
---
id: 614878f7a412310647873015
title: Part 47
challengeType: 0
dashedName: part-47
---
# --description--
Tidy up the `header`, by using _Flexbox_ to put space between the children, and vertically center them.
Then, fix the `header` to the top of the viewport.
# --hints--
You should give the `header` a `justify-content` of `space-between`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between');
```
You should give the `header` an `align-items` of `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center');
```
You should give the `header` a `position` of `fixed`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed');
```
You should give the `header` a `top` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
--fcc-editable-region--
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
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;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

263
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-048.md
View File

@ -1,263 +0,0 @@
---
id: 61487b77d4a37707073a64e5
title: Part 48
challengeType: 0
dashedName: part-48
---
# --description--
When the screen width is small, the `h1` does not wrap its text content how it should. Center align the text for the `h1`.
Then, give the `main` padding such that the `Student Info` section header can be fully seen.
# --hints--
You should give the `h1` a `text-align` of `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center');
```
You should add a `main` selector to target the `main` element.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('main'));
```
You should give the `main` a `padding-top` of at least `25px`.
```js
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25);
```
You should only change the `padding-top` value.
```js
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom);
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft);
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
--fcc-editable-region--
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
--fcc-editable-region--
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
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;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

277
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-049.md
View File

@ -1,277 +0,0 @@
---
id: 61487da611a65307e78d2c20
title: Part 49
challengeType: 0
dashedName: part-49
---
# --description--
On small screens, the unordered list in the navigation bar overflows the right side of the screen.
Fix this by using _Flexbox_ to wrap the `ul` content. Then, set the following CSS properties to correctly align the text:
```css
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
```
# --hints--
You should give the `ul` a `flex-wrap` of `wrap`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap');
```
You should give the `ul` an `align-items` of `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center');
```
You should give the `ul` a `padding-inline-start` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px');
```
You should give the `ul` a `margin-block` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px');
```
You should give the `ul` a `height` of `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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;
}
--fcc-editable-region--
nav > ul {
display: flex;
justify-content: space-evenly;
}
--fcc-editable-region--
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;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

289
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-050.md
View File

@ -1,289 +0,0 @@
---
id: 61487f703571b60899055cf9
title: Part 50
challengeType: 0
dashedName: part-50
---
# --description--
Set the width of the `section` elements to `80%` of their parent container. Then, use margins to center the `section` elements, adding `10px` to the bottom margin.
Also, ensure the `section` elements cannot be larger than `600px` in width.
# --hints--
You should use a `section` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('section'));
```
You should give the `section` a `width` of `80%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.width, '80%');
```
You should give the `section` a `margin-top` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginTop, '0px');
```
You should give the `section` a `margin-right` of `auto`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginRight, 'auto');
```
You should give the `section` a `margin-bottom` of `10px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginBottom, '10px');
```
You should give the `section` a `margin-left` of `auto`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginLeft, 'auto');
```
You should give the `section` a `max-width` of `600px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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;
}
--fcc-editable-region--
--fcc-editable-region--
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.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;
}
```

261
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-051.md
View File

@ -1,261 +0,0 @@
---
id: 614880dc16070e093e29bc56
title: Part 51
challengeType: 0
dashedName: part-51
---
# --description--
Replace the top margin of the `h2` elements with `60px` of top padding.
# --hints--
You should give the `h2` a `margin-top` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px');
```
You should give the `h2` a `padding-top` of `60px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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;
}
--fcc-editable-region--
h2 {
border-bottom: 4px solid #dfdfe2;
}
--fcc-editable-region--
p::before {
content: "Question #";
}
.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;
}
```

282
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-052.md
View File

@ -1,282 +0,0 @@
---
id: 614883b6fa720e09fb167de9
title: Part 52
challengeType: 0
dashedName: part-52
---
# --description--
Add padding to the top and left of the `.info` elements, and set the other values to `0`.
# --hints--
You should use the `.info` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.info'));
```
You should give `.info` a `padding-top` of at least `1px`.
```js
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1);
```
You should give `.info` a `padding-right` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px');
```
You should give `.info` a `padding-bottom` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px');
```
You should give `.info` a `padding-left` of at least `1px`.
```js
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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;
}
--fcc-editable-region--
--fcc-editable-region--
p::before {
content: "Question #";
}
.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;
}
```

366
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-053.md
View File

@ -1,366 +0,0 @@
---
id: 614884c1f5d6f30ab3d78cde
title: Part 53
challengeType: 0
dashedName: part-53
---
# --description--
Give the `.formrow` elements top margin, and left and right padding. The other padding values should be `0`.
Then, increase the font size for all `input` elements.
# --hints--
You should use a `.formrow` selector to target the `.formrow` elements.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow'));
```
You should give the `.formrow` a `margin-top` of at least `1px`.
```js
const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.marginTop;
let valInPx = 0;
if (/^\d+rem$/.test(val)) {
valInPx = remToPx(Number(val.replace('rem', '')));
} else if (/^\d+em$/.test(val)) {
valInPx = emToPx(Number(val.replace('em', '')));
} else {
valInPx = Number(val?.replace('px', ''));
}
function emToPx(em) {
return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
}
function remToPx(rem) {
return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
}
assert.isAtLeast(valInPx, 1);
```
You should give the `.formrow` a `padding-top` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px');
```
You should give the `.formrow` a `padding-right` of at least `1px`.
```js
const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingRight;
let valInPx = 0;
if (/^\d+rem$/.test(val)) {
valInPx = remToPx(Number(val.replace('rem', '')));
} else if (/^\d+em$/.test(val)) {
valInPx = emToPx(Number(val.replace('em', '')));
} else {
valInPx = Number(val?.replace('px', ''));
}
function emToPx(em) {
return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
}
function remToPx(rem) {
return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
}
assert.isAtLeast(valInPx, 1);
```
You should give the `.formrow` a `padding-bottom` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px');
```
You should give the `.formrow` a `padding-left` of at least `1px`.
```js
const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingLeft;
let valInPx = 0;
if (/^\d+rem$/.test(val)) {
valInPx = remToPx(Number(val.replace('rem', '')));
} else if (/^\d+em$/.test(val)) {
valInPx = emToPx(Number(val.replace('em', '')));
} else {
valInPx = Number(val?.replace('px', ''));
}
function emToPx(em) {
return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
}
function remToPx(rem) {
return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
}
assert.isAtLeast(valInPx, 1);
```
You should use an `input` selector to target the `input` elements.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('input'));
```
You should give the `input` a `font-size` greater than `13px`.
```js
const val = new __helpers.CSSHelp(document).getStyle('input')?.fontSize;
let valInPx = 0;
if (/^\d+rem$/.test(val)) {
valInPx = remToPx(Number(val.replace('rem', '')));
} else if (/^\d+em$/.test(val)) {
valInPx = emToPx(Number(val.replace('em', '')));
} else {
valInPx = Number(val?.replace('px', ''));
}
function emToPx(em) {
return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
}
function remToPx(rem) {
return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
}
assert.isAtLeast(valInPx, 13);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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;
}
--fcc-editable-region--
--fcc-editable-region--
p::before {
content: "Question #";
}
.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;
}
```

288
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-054.md
View File

@ -1,288 +0,0 @@
---
id: 61488ecfd05e290b5712e6da
title: Part 54
challengeType: 0
dashedName: part-54
---
# --description--
To make the first section look more inline, target only the `input` elements within `.info` elements, and set their `width` to `50%`, and left-align their text.
# --hints--
You should use either the `.info input` or `.info > input` selector.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('.info input') || gs('.info > input'));
```
You should give the `input` elements a `width` of `50%`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width;
const width = gs('.info input') ?? gs('.info > input');
assert.equal(width, '50%');
```
You should give the `input` elements a `text-align` of `left`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign;
const textAlign = gs('.info input') ?? gs('.info > input');
assert.equal(textAlign, 'left');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
--fcc-editable-region--
--fcc-editable-region--
p::before {
content: "Question #";
}
.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;
}
```

293
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-055.md
View File

@ -1,293 +0,0 @@
---
id: 6148d99cdc7acd0c519862cb
title: Part 55
challengeType: 0
dashedName: part-55
---
# --description--
Target all `label` elements within `.info` elements, and set their `width` to `10%`, and make it so they do not take up less than `55px`.
# --hints--
You should use either the `.info label` or `.info > label` selector.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('.info label') || gs('.info > label'));
```
You should give the `label` elements a `width` of `10%`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width;
const width = gs('.info label') || gs('.info > label');
assert.equal(width, '10%');
```
You should give the `label` elements a `min-width` of `55px`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.minWidth;
const minWidth = gs('.info label') || gs('.info > label');
assert.equal(minWidth, '55px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
--fcc-editable-region--
.info input {
width: 50%;
text-align: left;
}
--fcc-editable-region--
p::before {
content: "Question #";
}
.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;
}
```

308
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-056.md
View File

@ -1,308 +0,0 @@
---
id: 6148da157cc0bd0d06df5c0a
title: Part 56
challengeType: 0
dashedName: part-56
---
# --description--
To align the `input` boxes with each other, set the `display` property to `inline-block` for all `input` and `label` elements within `.info` elements.
Also, align the text to the right.
# --hints--
You should use either a `.info > label, .info > input` or `.info label, .info input` selector.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('.info > label, .info > input') || gs('.info label, .info input') || gs('.info > input, .info > label') || gs('.info input, .info label'));
```
You should give the `input` and `label` elements a `display` of `inline-block`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.display;
const display = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label');
assert.equal(display, 'inline-block');
```
You should give the `input` and `label` elements a `text-align` of `right`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign;
const textAlign = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label');
assert.equal(textAlign, 'right');
```
You should set the `text-align: right` property before the `.info input` rule.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyleRule(s);
assert(gs('.info input').isDeclaredAfter('.info label, .info input') || gs('.info input').isDeclaredAfter('.info > label, .info > input') || gs('.info input').isDeclaredAfter('.info > input, .info > label') || gs('.info input').isDeclaredAfter('.info input, .info label'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
--fcc-editable-region--
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
--fcc-editable-region--
p::before {
content: "Question #";
}
.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;
}
```

325
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-057.md
View File

@ -1,325 +0,0 @@
---
id: 6148dc095264000dce348bf5
title: Part 57
challengeType: 0
dashedName: part-57
---
# --description--
To neaten the `.question-block` elements, set the following CSS properties:
```css
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
```
# --hints--
You should use the `.question-block` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.question-block'));
```
You should give the `.question-block` element a `display` of `block`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.display, 'block');
```
You should give the `.question-block` element a `width` of `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.width, '100%');
```
You should give the `.question-block` element a `margin-top` of `20px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.marginTop, '20px');
```
You should give the `.question-block` element a `padding-top` of `5px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.paddingTop, '5px');
```
You should give the `.question-block` element a `text-align` of `left`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAlign, 'left');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
--fcc-editable-region--
--fcc-editable-region--
p::before {
content: "Question #";
}
.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;
}
```

318
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-058.md
View File

@ -1,318 +0,0 @@
---
id: 6148dcaaf2e8750e6cb4501a
title: Part 58
challengeType: 0
dashedName: part-58
---
# --description--
Make the paragraph elements appear as a higher priority, with the following CSS properties:
```css
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
```
# --hints--
You should use the `p` element selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('p'));
```
You should give the `p` element a `margin-top` of `5px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.marginTop, '5px');
```
You should give the `p` element a `padding-left` of `15px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.paddingLeft, '15px');
```
You should give the `p` element a `font-size` of `20px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
--fcc-editable-region--
--fcc-editable-region--
p::before {
content: "Question #";
}
.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;
}
```

314
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-059.md
View File

@ -1,314 +0,0 @@
---
id: 6148dd31d210990f0fb140f8
title: Part 59
challengeType: 0
dashedName: part-59
---
# --description--
It is useful to see the default border around the `fieldset` elements, during development. However, it might not be the style you want.
Remove the border and bottom padding on the `.question` elements.
# --hints--
You should use the `.question` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.question'));
```
You should give the `.question` a `border` of `none`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.border, 'none');
```
You should give the `.question` a `padding-bottom` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBottom, '0px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::before {
content: "Question #";
}
--fcc-editable-region--
--fcc-editable-region--
.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;
}
```

317
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-060.md
View File

@ -1,317 +0,0 @@
---
id: 6148defa9c01520fb9d178a0
title: Part 60
challengeType: 0
dashedName: part-60
---
# --description--
Remove the default styling for the list items of `.answers-list`, and remove the unordered list padding.
# --hints--
You should use the `.answers-list` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list'));
```
You should give `.answers-list` a `list-style` of `none`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none');
```
You should give `.answers-list` a `padding` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding, '0px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::before {
content: "Question #";
}
.question {
border: none;
padding-bottom: 0;
}
--fcc-editable-region--
--fcc-editable-region--
.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;
}
```

362
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-061.md
View File

@ -1,362 +0,0 @@
---
id: 6148dfab9b54c110577de165
title: Part 61
challengeType: 0
dashedName: part-61
---
# --description--
Give the submit button a freeCodeCamp-style design, with the following CSS properties:
```css
display: block;
margin: 40px auto;
width: 40%;
padding: 15px;
font-size: 23px;
background: #d0d0d5;
border: 3px solid #3b3b4f;
```
# --hints--
You should use the `button` element selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('button'));
```
You should give `button` a `display` of `block`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block');
```
You should give `button` a `margin` of `40px auto`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto');
```
You should give `button` a `width` of `40%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%');
```
You should give `button` a `padding` of `15px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px');
```
You should give `button` a `font-size` of `23px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '23px');
```
You should give `button` a `background` of `#d0d0d5`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.background, 'rgb(208, 208, 213)');
```
You should give `button` a `border` of `3px solid #3b3b4f`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::before {
content: "Question #";
}
.question {
border: none;
padding-bottom: 0;
}
.answers-list {
list-style: none;
padding: 0;
}
--fcc-editable-region--
--fcc-editable-region--
.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;
}
```

338
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-062.md
View File

@ -1,338 +0,0 @@
---
id: 6148e0bcc13efd10f7d7a6a9
title: Part 62
challengeType: 0
dashedName: part-62
---
# --description--
Set the `footer` background color to `#2a2a40`, and use _Flexbox_ to horizontally center the text.
# --hints--
You should use the `footer` element selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('footer'));
```
You should give `footer` a `background-color` of `#2a2a40`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)');
```
You should give `footer` a `display` of `flex`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex');
```
You should give `footer` a `justify-content` of `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent, 'center');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::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: 23px;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}
--fcc-editable-region--
--fcc-editable-region--
.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;
}
```

358
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-063.md
View File

@ -1,358 +0,0 @@
---
id: 6148e161ecec9511941f8833
title: Part 63
challengeType: 0
dashedName: part-63
---
# --description--
Now, we cannot read the text. Target the `footer` and the anchor element within to set the font color to a color of adequate contrast ratio.
# --hints--
You should use the `footer, footer a` selector.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('footer, footer a') || gs('footer a, footer'));
```
You should set the `color` to a value with a contrast ratio of at least `7:1`. _Hint: I suggest `#dfdfe2`_
```js
function luminance(r, g, b) {
const a = [r, g, b].map((v) => {
v /= 255;
return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 );
});
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function contrast(rgb1, rgb2) {
const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
const brightest = Math.max(lum1, lum2);
const darkest = Math.min(lum1, lum2);
return (brightest + 0.05)
/ (darkest + 0.05);
}
const backgroundColour = [42, 42, 64];
const foot = getComputedStyle(document.querySelector('footer'))?.color;
const a = getComputedStyle(document.querySelector('footer a'))?.color;
const rgbFoot = foot?.match(/(\d+),\s(\d+),\s(\d+)/);
const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/);
const footColour = [rgbFoot[1], rgbFoot[2], rgbFoot[3]];
const aColour = [rgbA[1], rgbA[2], rgbA[3]];
assert.isAtLeast(contrast(backgroundColour, footColour), 7);
assert.isAtLeast(contrast(backgroundColour, aColour), 7);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::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: 23px;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}
footer {
background-color: #2a2a40;
display: flex;
justify-content: center;
}
--fcc-editable-region--
--fcc-editable-region--
.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;
}
```

361
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-064.md
View File

@ -1,361 +0,0 @@
---
id: 6148e28706b34912340fd042
title: Part 64
challengeType: 0
dashedName: part-64
---
# --description--
Horizontally center all the text within the `address` element, and add some padding.
# --hints--
You should use the `address` element selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('address'));
```
You should give `address` a `text-align` of `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center');
```
You should give `address` a `padding-top` of at least `1px`.
```js
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingTop?.replace(/\D+/, '')), 1);
```
You should give `address` a `padding-right` of at least `1px`.
```js
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingRight?.replace(/\D+/, '')), 1);
```
You should give `address` a `padding-bottom` of at least `1px`.
```js
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingBottom?.replace(/\D+/, '')), 1);
```
You should give `address` a `padding-left` of at least `1px`.
```js
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingLeft?.replace(/\D+/, '')), 1);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::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: 23px;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}
footer {
background-color: #2a2a40;
display: flex;
justify-content: center;
}
footer,
footer a {
color: #dfdfe2;
}
--fcc-editable-region--
--fcc-editable-region--
.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;
}
```

344
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-065.md
View File

@ -1,344 +0,0 @@
---
id: 6148e335c1edd512d00e4691
title: Part 65
challengeType: 0
dashedName: part-65
---
# --description--
Clicking on the navigation links should jump the viewport to the relevant section. However, this jumping can be disorienting for some users.
Select all elements, and set the `scroll-behavior` to `smooth`.
# --hints--
You should use the `*` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
```
You should give `*` a `scroll-behavior` of `smooth`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::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: 23px;
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;
}
```

352
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-066.md
View File

@ -1,352 +0,0 @@
---
id: 6148e41c728f65138addf9cc
title: Part 66
challengeType: 0
dashedName: part-66
---
# --description--
Setting the `scroll-behaviour` to `smooth` is preferred by most users. However, some users find this to be too slow, and prefer to have the scrolling happen instantaneously.
There exists a media rule to set CSS based on the user's browser settings. This media rule is called `prefers-reduced-motion`, and expects one of the following values:
- `reduce`
- `no-preference`
Wrap the appropriate rule within a `prefers-reduced-motion` media rule such that a `scroll-behavior` of `smooth` is only set if the user's browser setting is `no-preference`.
# --hints--
You should have a `@media (prefers-reduced-motion: no-preference)` rule.
```js
assert.exists(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)'));
```
You should wrap the existing `*` rule within the `@media` rule.
```js
assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')?.find(x => x.selectorText === '*')?.style?.scrollBehavior, 'smooth');
assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```css
--fcc-editable-region--
* {
scroll-behavior: smooth;
}
--fcc-editable-region--
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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::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: 23px;
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;
}
```

689
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-067.md
View File

@ -1,689 +0,0 @@
---
id: 6148e5aeb102e3142de026a2
title: Part 67
challengeType: 0
dashedName: part-67
---
# --description--
Finally, the navigation accessibility can be improved with providing keyboard shortcuts.
The `accesskey` attribute accepts a space-separated list of access keys. For example:
```html
<button type="submit" accesskey="s">Submit</button>
```
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
--fcc-editable-region--
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
--fcc-editable-region--
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```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(100px, 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: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::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: 23px;
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" id="logo" alt="freeCodeCamp logo" />
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info" accesskey="i">INFO</a></li>
<li><a href="#html-questions" accesskey="h">HTML</a></li>
<li><a href="#css-questions" accesskey="c">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span>:</label>
<input type="date" id="birth-date" name="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you an frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-question">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-question" name="css-question" rows="5" cols="24">
Who is flexbox...
</textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://www.freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```
```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(100px, 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: 16px;
}
.info label,
.info input {
display: inline-block;
text-align: right;
}
.info label {
width: 10%;
min-width: 55px;
}
.info input {
width: 50%;
text-align: left;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::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: 23px;
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;
}
```

50
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-001.md Normal file
View File

@ -0,0 +1,50 @@
---
id: 614ccc21ea91ef1736b9b578
title: Step 1
challengeType: 0
dashedName: step-1
---
# --description--
Welcome to the first part in the Accessibility Quiz. As you are becoming a seasoned HTML and CSS developer, we have started you off with the basic boilerplate.
Start this accessibility journey, by providing a `lang` attribute to your `html` element. This will assist screen readers in identifying the language of the page.
# --hints--
You should give the `html` element a `lang` attribute. _Hint: You can use the value `en` for English._
```js
assert.match(code, /<html\s+lang=('|")[\w\-]+?\1\s*>/i);
// TODO: This should/could be fixed in the builder.js
// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
--fcc-editable-region--
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
</body>
</html>
--fcc-editable-region--
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

57
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-002.md Normal file
View File

@ -0,0 +1,57 @@
---
id: 613297a923965e0703b64796
title: Step 2
challengeType: 0
dashedName: step-2
---
# --description--
You may be familiar with the `meta` tag already; it is used to specify information about the page, such as the title, description, keywords, and author.
Give your page a `meta` tag with an appropriate `charset` value.
The `charset` attribute specifies the character encoding of the page, and, nowadays, `UTF-8` is the only encoding supported by most browsers.
# --hints--
You should create a `meta` element within the `head` element.
```js
// TODO: Once builder is fixed so head info is not in body
assert.exists(document.querySelector('body > meta'));
```
You should give the `meta` tag a `charset` of `UTF-8`.
```js
assert.equal(document.querySelector('body > meta')?.getAttribute('charset'), 'UTF-8');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

62
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-003.md Normal file
View File

@ -0,0 +1,62 @@
---
id: 61329b210dac0b08047fd6ab
title: Step 3
challengeType: 0
dashedName: step-3
---
# --description--
Continuing with the `meta` tags, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimisation).
Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page.
# --hints--
You should create another `meta` element in the `head`.
```js
assert.equal(document.querySelectorAll('body > meta')?.length, 2);
```
You should give the `meta` a `name` attribute of `viewport`.
```js
assert.equal(document.querySelectorAll('body > meta[name="viewport"]')?.length, 1);
```
You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`.
```js
// TODO: Double-check this is the only correct answer
assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

68
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-004.md Normal file
View File

@ -0,0 +1,68 @@
---
id: 61329d52e5010e08d9b9d66b
title: Step 4
challengeType: 0
dashedName: step-4
---
# --description--
Another important `meta` tag for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page.
Add a `meta` tag with the `name` attribute set to `description`, and give it a useful `content` attribute.
# --hints--
You should add a new `meta` tag to the `head`.
```js
assert.equal(document.querySelectorAll('meta').length, 3);
```
You should give the `meta` a `name` attribute of `description`.
```js
assert.exists(document.querySelector('meta[name="description"]'));
```
You should give the `meta` a `content` attribute.
```js
assert.notEmpty(document.querySelector('meta[name="description"]')?.content);
```
The `content` attribute value should not be more than 165 characters. _This is Google's maximum description length._
```js
assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

64
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-005.md Normal file
View File

@ -0,0 +1,64 @@
---
id: 6133acc353338c0bba9cb553
title: Step 5
challengeType: 0
dashedName: step-5
---
# --description--
Lastly in the `head`, the `title` element is useful for screen readers to understand the content of a page. Furthermore, it is an important part of _SEO_.
Give your page a `title` that is descriptive and concise.
# --hints--
You should add a `title` element to the `head`.
```js
// TODO: Fix once builder puts head in the right place
assert.exists(document.querySelector('body > title'));
```
You should not make the `title` longer than 60 characters.
```js
assert.isAtMost(document.querySelector('body > title')?.textContent?.length, 60);
```
Try being more descriptive with your `title` element. _Hint: At least 20 characters_
```js
assert.isAtLeast(document.querySelector('body > title')?.textContent?.length, 20);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

68
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-006.md Normal file
View File

@ -0,0 +1,68 @@
---
id: 6133d11ef548f51f876149e3
title: Step 6
challengeType: 0
dashedName: step-6
---
# --description--
Navigation is a core part of accessibility, and screen readers rely on you to provide the structure of your page. This is accomplished with semantic HTML elements.
Add a `header` and a `main` element to your page.
The `header` element will be used to introduce the page, as well as provide a navigation menu.
The `main` element will contain the core content of your page.
# --hints--
You should add a `header` element to the `body`.
```js
assert.exists(document.querySelector('body > header'));
```
You should add a `main` element to the `body`.
```js
assert.exists(document.querySelector('body > main'));
```
The `header` element should come before the `main` element.
```js
assert.exists(document.querySelector('header + main'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
--fcc-editable-region--
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

93
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-007.md Normal file
View File

@ -0,0 +1,93 @@
---
id: 613e2546d0594208229ada50
title: Step 7
challengeType: 0
dashedName: step-7
---
# --description--
Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element.
The `img` should point to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`, and have an `id` of `logo`.
The `h1` should contain the text `HTML/CSS Quiz`.
# --hints--
You should add an `img` element to the `header` element.
```js
assert.exists(document.querySelector('header > img'));
```
You should add an `h1` element to the `header` element.
```js
assert.exists(document.querySelector('header > h1'));
```
You should add a `nav` element to the `header` element.
```js
assert.exists(document.querySelector('header > nav'));
```
You should place the `img`, `h1`, and `nav` elements in that order.
```js
assert.exists(document.querySelector('img + h1 + nav'));
```
You should give the `img` element a `src` attribute of `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
```js
assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
```
You should give the `img` element an `id` attribute of `logo`.
```js
assert.equal(document.querySelector('img')?.id, 'logo');
```
You should give the `h1` element the text `HTML/CSS Quiz`.
```js
assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
--fcc-editable-region--
<header>
</header>
--fcc-editable-region--
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

66
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-008.md Normal file
View File

@ -0,0 +1,66 @@
---
id: 613e275749ebd008e74bb62e
title: Step 8
challengeType: 0
dashedName: step-8
---
# --description--
A useful property of an _SVG_ (scalable vector graphics) is that is contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image.
Currently, the `img` is assuming it's default size, which is too large. Correctly, scale the image using it's `id` as a selector, and setting the `width` to `max(100px, 18vw)`.
# --hints--
You should use the `#logo` selector to target the `img` element.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
```
You should give the `img` a `width` of `max(100px, 18vw)`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
--fcc-editable-region--
```

93
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-009.md Normal file
View File

@ -0,0 +1,93 @@
---
id: 6140827cff96e906bd38fc2b
title: Step 9
challengeType: 0
dashedName: step-9
---
# --description--
As described in the [freeCodeCamp Style Guide](https://design-style-guide.freecodecamp.org/), the logo should retain an aspect ratio of `35:4`, and have padding around the text.
First, change the `background-color` to `#0a0a23` so you can see the logo. Then, use the `aspect-ratio` property to set the desired aspect ratio. Finally, add a `padding` of `0.4rem` all around.
# --hints--
You should give `#logo` a `background-color` of `#0a0a23`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)');
```
You should use the `aspect-ratio` property.
```js
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio);
```
You should not use the `height` property.
```js
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height);
```
You should not change the `width` property.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```
You should give the `img` an `aspect-ratio` of `35 / 4`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4');
```
You should give the `img` a `padding` of `0.4rem`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
#logo {
width: max(100px, 18vw);
}
--fcc-editable-region--
```

89
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-010.md Normal file
View File

@ -0,0 +1,89 @@
---
id: 6140883f74224508174794c0
title: Step 10
challengeType: 0
dashedName: step-10
---
# --description--
Make the `header` take up the full width of its parent container, set it's `height` to `50px`, and set the `background-color` to `#1b1b32`. Then, set the `display` to use _Flexbox_.
# --hints--
You should use the `header` element selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('header'));
```
You should give the `header` a `width` of `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%');
```
You should give the `header` a `height` of `50px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px');
```
You should give the `header` a `background-color` of `#1b1b32`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)');
```
You should give the `header` a `display` of `flex`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
--fcc-editable-region--
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
```

83
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-011.md Normal file
View File

@ -0,0 +1,83 @@
---
id: 61408e4ae3e35d08feb260eb
title: Step 11
challengeType: 0
dashedName: step-11
---
# --description--
Change the `h1` font color to `#f1be32`, and set the font size to `min(5vw, 1.2em)`.
# --hints--
You should use the `h1` element selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('h1'));
```
You should give the `h1` a `color` of `#f1be32`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)');
```
You should give the `h1` a `font-size` of `min(5vw, 1.2em)`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
--fcc-editable-region--
--fcc-editable-region--
```

112
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-012.md Normal file
View File

@ -0,0 +1,112 @@
---
id: 61408f155e798909b6908712
title: Step 12
challengeType: 0
dashedName: step-12
---
# --description--
To enable navigation on the page, add an unordered list with the following three list items:
- `INFO`
- `HTML`
- `CSS`
The list items text should be wrapped in anchor tags.
# --hints--
You should nest one `ul` element inside the `nav`.
```js
assert.equal(document.querySelectorAll('nav > ul')?.length, 1);
```
You should nest three `li` elements inside the `ul` element.
```js
assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3);
```
You should nest one `a` element inside each `li` element.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3);
```
You should give the first `a` element the text `INFO`.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO');
```
You should give the second `a` element the text `HTML`.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML');
```
You should give the third `a` element the text `CSS`.
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
--fcc-editable-region--
<nav>
</nav>
--fcc-editable-region--
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
```

102
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-013.md Normal file
View File

@ -0,0 +1,102 @@
---
id: 614090d5a22b6f0a5a6b464c
title: Step 13
challengeType: 0
dashedName: step-13
---
<!-- TODO: I purposefully added the `nav` styles without Camper input -->
# --description--
Target unordered list elements within `nav` elements, and use _Flexbox_ to evenly space the children.
# --hints--
You should use the `nav > ul` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul'));
```
You should give the `nav > ul` elements a `display` of `flex`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex');
```
You should give the `nav > ul` elements a `justify-content` of `space-evenly`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
--fcc-editable-region--
--fcc-editable-region--
```

125
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-014.md Normal file
View File

@ -0,0 +1,125 @@
---
id: 6141fabd6f75610664e908fd
title: Step 14
challengeType: 0
dashedName: step-14
---
# --description--
As this is a quiz, you will need a form for users to submit answers. You can semantically separate the content within the form using `section` elements.
Within the `main` element, create a form with three nested `section` elements. Then, make the form submit to `https://freecodecamp.org/practice-project/accessibility-quiz`, using the correct method.
# --hints--
You should nest a `form` element within your `main` element.
```js
assert.exists(document.querySelector('main > form'));
```
You should nest three `section` elements within your `form` element.
```js
assert.equal(document.querySelectorAll('main > form > section')?.length, 3);
```
You should give the `form` element an `action` attribute.
```js
assert.notEmpty(document.querySelector('main > form')?.action);
```
You should give the `action` attribute a value of `https://freecodecamp.org/practice-project/accessibility-quiz`.
```js
assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz');
```
You should give the `form` element a `method` attribute.
```js
assert.notEmpty(document.querySelector('main > form')?.method);
```
You should give the `form` element a `method` attribute with a value of `post`.
```js
assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
--fcc-editable-region--
<main>
</main>
--fcc-editable-region--
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
```

111
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-015.md Normal file
View File

@ -0,0 +1,111 @@
---
id: 6141fed65b61320743da5894
title: Step 15
challengeType: 0
dashedName: step-15
---
# --description--
To increase the page accessibility, the `role` attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The `role` attribute is a part of the _Web Accessibility Initiative_ (WAI), and accepts preset values.
Give each of the `section` elements the `region` role.
# --hints--
You should give the first `section` element the `region` role.
```js
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region');
```
You should give the second `section` element the `region` role.
```js
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region');
```
You should give the third `section` element the `region` role.
```js
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
<main>
--fcc-editable-region--
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section></section>
<section></section>
<section></section>
</form>
--fcc-editable-region--
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
```

171
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-016.md Normal file
View File

@ -0,0 +1,171 @@
---
id: 614202874ca576084fca625f
title: Step 16
challengeType: 0
dashedName: step-16
---
# --description--
Every `region` role requires a visible label, which should be referenced by the `aria-labelledby` attribute.
To the `section` elements, give the following `aria-labelledby` attributes:
- `student-info`
- `html-questions`
- `css-questions`
Then, within each `section` element, nest one `h2` element with an `id` matching the corresponding `aria-labelledby` attribute. Give each `h2` suitable text content.
# --hints--
You should give the first `section` element an `aria-labelledby` attribute of `student-info`.
```js
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
```
You should give the second `section` element an `aria-labelledby` attribute of `html-questions`.
```js
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
```
You should give the third `section` element an `aria-labelledby` attribute of `css-questions`.
```js
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
```
You should nest one `h2` element within the first `section` element.
```js
assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
```
You should nest one `h2` element within the second `section` element.
```js
assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
```
You should nest one `h2` element within the third `section` element.
```js
assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
```
You should give the first `h2` element an `id` attribute of `student-info`.
```js
assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
```
You should give the second `h2` element an `id` attribute of `html-questions`.
```js
assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
```
You should give the third `h2` element an `id` attribute of `css-questions`.
```js
assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
```
You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_
```js
assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
```
You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_
```js
assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
```
You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_
```js
assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
<main>
--fcc-editable-region--
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region"></section>
<section role="region"></section>
<section role="region"></section>
</form>
--fcc-editable-region--
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
```

140
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-017.md Normal file
View File

@ -0,0 +1,140 @@
---
id: 614206033d366c090ca7dd42
title: Step 17
challengeType: 0
dashedName: step-17
---
# --description--
Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens.
Change the font for both the `h1` and `h2` elements to `Verdana`, and use another sans-serif _web safe_ font as a fallback.
Also, add a `border-bottom` of `4px solid #dfdfe2` to `h2` elements, to make the sections distinct.
# --hints--
You should use a multiple element selector to target the `h1` and `h2` elements.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('h1, h2') || gs('h2, h1'));
```
You should set the first value of the `font-family` property to `Verdana`.
```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const style = gs('h1, h2') || gs('h2, h1');
assert.include(style?.fontFamily, 'Verdana');
```
You should set the second value of the `font-family` property to another sans-serif, web safe font. _Hint: I would choose Tahoma_.
```js
// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS.
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const style = gs('h1, h2') || gs('h2, h1');
assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/);
```
You should use an `h2` element selector to target the `h2` elements.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('h2'));
```
You should give `h2` a `border-bottom` property of `4px solid #dfdfe2`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
--fcc-editable-region--
--fcc-editable-region--
```

125
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-018.md Normal file
View File

@ -0,0 +1,125 @@
---
id: 61435e3c0679a306c20f1acc
title: Step 18
challengeType: 0
dashedName: step-18
---
# --description--
To be able to navigate within the page, give each anchor element an `href` corresponding to the `id` of the `h2` elements.
# --hints--
You should give the first `a` element an `href` of `#student-info`.
```js
assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info');
```
You should give the second `a` element an `href` of `#html-questions`.
```js
assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions');
```
You should give the third `a` element an `href` of `#css-questions`.
```js
assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
--fcc-editable-region--
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
--fcc-editable-region--
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

173
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-019.md Normal file
View File

@ -0,0 +1,173 @@
---
id: 6143610161323a081b249c19
title: Step 19
challengeType: 0
dashedName: step-19
---
# --description--
Filling out the content of the quiz, below the `#student-info`, add three `div` elements with a `class` of `info`.
Then, within each `div` nest one `label` element, and one `input` element.
# --hints--
You should nest three `div` elements below the `h2#student-info` element.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3);
```
You should give the first `div` a `class` of `info`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info');
```
You should give the second `div` a `class` of `info`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info');
```
You should give the third `div` a `class` of `info`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info');
```
You should nest one `label` element within the first `div`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1);
```
You should nest one `input` element within the first `div`, after the `label`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1);
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input'));
```
You should nest one `label` element within the second `div`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1);
```
You should nest one `input` element within the second `div`, after the `label`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1);
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input'));
```
You should nest one `label` element within the third `div`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1);
```
You should nest one `input` element within the third `div`, after the `label`.
```js
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1);
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
--fcc-editable-region--
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

195
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-020.md Normal file
View File

@ -0,0 +1,195 @@
---
id: 6143639d5eddc7094161648c
title: Step 20
challengeType: 0
dashedName: step-20
---
# --description--
It is important to link each `input` to the corresponding `label` element. This provides assistive technology users with a visual reference to the input.
This is done, by giving the `label` a `for` attribute, which contains the `id` of the `input`.
This section will take a student's name, email address, and date of birth. Give the `label` elements appropriate `for` attributes, as well as text content. Then, link the `input` elements to the corresponding `label` elements.
# --hints--
You should give the first `label` element an appropriate `for` attribute.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);
```
You should give the second `label` element an appropriate `for` attribute.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);
```
You should give the third `label` element an appropriate `for` attribute.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
```
You should give the first `label` element an appropriate text content.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
```
You should give the second `label` element an appropriate text content.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
```
You should give the third `label` element an appropriate text content.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
```
You should give the first `input` element an `id` attribute matching the `for` attribute of the first `label`.
```js
assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);
```
You should give the second `input` element an `id` attribute matching the `for` attribute of the second `label`.
```js
assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);
```
You should give the third `input` element an `id` attribute matching the `for` attribute of the third `label`.
```js
assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);
```
You should not use the same `id` attribute for more than one `input` element.
```js
const id = (n) => document.querySelectorAll('input')?.[n]?.id;
assert.notEqual(id(0), id(1));
assert.notEqual(id(0), id(2));
assert.notEqual(id(1), id(2));
```
You should not use the same `for` attribute for more than one `label` element.
```js
const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor;
assert.notEqual(htmlFor(0), htmlFor(1));
assert.notEqual(htmlFor(0), htmlFor(2));
assert.notEqual(htmlFor(1), htmlFor(2));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
--fcc-editable-region--
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label></label>
<input />
</div>
<div class="info">
<label></label>
<input />
</div>
<div class="info">
<label></label>
<input />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

161
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-021.md Normal file
View File

@ -0,0 +1,161 @@
---
id: 6143908b6aafb00a659ca189
title: Step 21
challengeType: 0
dashedName: step-21
---
# --description--
Keeping in mind best-practices for form inputs, give each `input` an appropriate `type` and `name` attribute. Then, give the first `input` a `placeholder` attribute.
# --hints--
You should give the first `input` a `type` of `text`.
```js
assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text');
```
You should give the second `input` a `type` of `email`.
```js
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email');
```
You should give the third `input` a `type` of `date`.
```js
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date');
```
You should give the first `input` an appropriate `name` attribute.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1);
```
You should give the second `input` an appropriate `name` attribute.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1);
```
You should give the third `input` an appropriate `name` attribute.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1);
```
You should give the first `input` a `placeholder` attribute.
```js
assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
--fcc-editable-region--
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.:</label>
<input id="birth-date" />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

Some files were not shown because too many files have changed in this diff Show More