From bd1239e9288bdc42f181d0ce063414546b6793c8 Mon Sep 17 00:00:00 2001 From: freeCodeCamp's Camper Bot Date: Mon, 3 Feb 2025 19:02:25 +0530 Subject: [PATCH] chore(i18n,learn): processed translations (#125) --- .../64df45a3ad4f8719e5355244.md | 37 +- .../5dc1798ff86c76b9248c6eb3.md | 4 +- .../5dfb6250eacea3f48c6300b2.md | 15 +- .../60fab8367d35de04e5cb7929.md | 2 +- .../6537e0be715fcb57d31ba8c3.md | 4 - .../build-a-palindrome-checker.md | 58 +-- .../657b11f87368cf463ea4fe46.md | 2 +- .../657b223e41ce6b9f9a01d214.md | 2 +- .../661918b4f8dc067669326ac6.md | 2 +- .../65a74152da45e881db4f54dc.md | 2 +- .../65a7957981392ed32523e628.md | 2 +- .../656bbbe6d57609104b152625.md | 2 +- .../6579e12834045640e90e58bd.md | 2 +- .../657e758778ff8dc01567c9e7.md | 2 +- .../662a35f7eaaa932ab0973d0c.md | 2 +- .../662f3450de7c2139809fb72b.md | 2 +- .../673b3d6b7ef7318eef926d5a.md | 102 ++--- .../657bdc55a322aae1eac3838f.md | 58 +-- .../lab-quiz-game/66f17db06803d11a1bd19a20.md | 19 +- .../672aa8d65995be62ef1c7515.md | 101 +++++ .../672cf764cf55a70433590def.md | 65 +++ .../672aa7005c24e45bbd53b20d.md | 40 ++ .../672bb619f0d4538d0528760d.md | 43 ++ .../673226b97d4a731e0577ae93.md | 8 +- .../672d269da46786225e3fe3fd.md | 89 ++++ .../673284d5e52ef81a2169b097.md | 82 ++++ .../673284e7244c0c1a649121b9.md | 50 +++ .../672d266e014ef8216df987d2.md | 68 ++++ .../673271884bf678d8b9c64f56.md | 119 ++++++ .../67327195e77b1bd90bdd49d7.md | 94 +++++ .../6732719e2e3ad4d947410b65.md | 71 ++++ .../673271a8998ddfd97578d095.md | 60 +++ .../673271b4213033d9b661c70e.md | 79 ++++ .../673271c7581a27d9dd78f6d6.md | 60 +++ .../673271dffbc34fda31da9515.md | 50 +++ .../673271e8e3d43bda89f723b3.md | 70 ++++ .../673271f39f124ddac28866d5.md | 74 ++++ .../673271fd11d063daf0cf8d20.md | 116 ++++++ .../6732720e95f6a0db526a2e4d.md | 95 +++++ .../67327217e70ee0db7913b255.md | 92 +++++ .../66f1ad049d7a6ac0886cc2ba.md | 200 ++++----- .../66edd630f7666cfa54b404d0.md | 2 +- .../66f1afbd9998e9c985d8e73b.md | 8 +- .../66ed8fa2f45ce3ece4053eab.md | 16 +- .../66df3b712c41c499e9d31e5b.md | 4 +- .../66ed8fb9f45ce3ece4053eac.md | 38 +- .../66ed8fc1f45ce3ece4053ead.md | 72 ++-- .../66ed8fc9f45ce3ece4053eae.md | 58 +-- .../66ed8fd7f45ce3ece4053eb0.md | 162 +++++--- .../66ed8fe1f45ce3ece4053eb1.md | 133 +++--- .../66ed8fe7f45ce3ece4053eb2.md | 48 +-- .../quiz-css-grid/66ed8fedf45ce3ece4053eb3.md | 233 +++++++---- .../66ed8ff4f45ce3ece4053eb4.md | 168 ++++---- .../66f1aeb60b11aec5abe83c2e.md | 106 ++--- .../66ed8ffcf45ce3ece4053eb5.md | 36 +- .../66ed9002f45ce3ece4053eb6.md | 99 +++-- .../66ed9009f45ce3ece4053eb7.md | 130 +++--- .../66ed9010f45ce3ece4053eb8.md | 108 ++--- .../66ed9018f45ce3ece4053eb9.md | 203 +++++---- .../66edd10913f078e7669eca81.md | 112 ++--- .../66ed901ff45ce3ece4053eba.md | 144 +++---- .../66edd07682767adff3a6231e.md | 4 +- .../66edd3403d7077eece6dc4b6.md | 116 +++--- .../quiz-git/66f1b06a5a5d10cc100af620.md | 18 +- .../66ed9026f45ce3ece4053ebb.md | 16 +- .../66ed902df45ce3ece4053ebc.md | 110 +++-- .../66edcccbba6dacdb65a59067.md | 8 +- .../66edd3b3096349f06cf688bb.md | 88 ++-- .../67358ac128957c865dcf3ddf.md | 28 +- .../66edc47c11492ac5cf258ad9.md | 2 +- .../66edd0ac31fea6e678eb925a.md | 106 ++--- .../66edd4f31ff19bf5573bf64b.md | 365 ++++------------- .../66edcc779993c0da6906dbb9.md | 32 +- .../66edcd875b0d91de1fbbb492.md | 114 +++--- .../66edcd49e73385dd4df54ac7.md | 58 +-- .../66edc3ab8c6413c344f401bf.md | 6 +- .../66edcd0ecb4b25dc64a34804.md | 40 +- .../66edc25ae5ea80bf6f785552.md | 10 +- .../66edd3f9bef926f129990425.md | 6 +- .../quiz-nano/66f1b03b922a53cb231e1c0d.md | 24 +- .../66f1a2009e65c9a40a26d51e.md | 6 +- .../66f1a417757b6ca4eecd89d6.md | 2 +- .../66edd43cded6bff30944b676.md | 12 +- .../66f1af82732957c895f0b21a.md | 8 +- .../66ed9034f45ce3ece4053ebd.md | 264 +++++++----- .../66ed9043f45ce3ece4053ebf.md | 313 +++----------- .../quiz-testing/66f1aeffc5774ac692112a7e.md | 120 +++--- .../66f1ae758b77cfc3e4da6151.md | 2 +- .../671a90c1cf517678b130419e.md | 8 +- .../671a99394bedfb9a5bc687c4.md | 48 +++ .../671a907bad4538752765f2ff.md | 16 +- .../671a8f8350c20a7439015c98.md | 2 +- .../671a87a39b88245a579c2271.md | 16 +- .../6723c5b8601a40a100bb59c9.md | 55 ++- .../5dfb6250eacea3f48c6300b2.md | 12 +- .../60fab8367d35de04e5cb7929.md | 2 +- .../6537e0be715fcb57d31ba8c3.md | 4 - .../674ef11f75254548672d998c.md | 22 +- .../674ef2d357676e50e4691658.md | 18 +- .../674ef2d357676e50e4691659.md | 68 ++-- .../674ef2d357676e50e469165a.md | 15 +- .../674ef2d357676e50e469165b.md | 28 +- .../674ef2d357676e50e469165c.md | 47 ++- .../674ef2d357676e50e469165d.md | 36 +- .../64df45a3ad4f8719e5355244.md | 37 +- .../5dc1798ff86c76b9248c6eb3.md | 4 +- .../5dfb6250eacea3f48c6300b2.md | 15 +- .../60fab8367d35de04e5cb7929.md | 2 +- .../6537e0be715fcb57d31ba8c3.md | 4 - .../build-a-palindrome-checker.md | 58 +-- .../657b11f87368cf463ea4fe46.md | 2 +- .../657b223e41ce6b9f9a01d214.md | 2 +- .../661918b4f8dc067669326ac6.md | 2 +- .../65a74152da45e881db4f54dc.md | 2 +- .../65a7957981392ed32523e628.md | 2 +- .../656bbbe6d57609104b152625.md | 2 +- .../6579e12834045640e90e58bd.md | 2 +- .../657e758778ff8dc01567c9e7.md | 2 +- .../662a35f7eaaa932ab0973d0c.md | 2 +- .../662f3450de7c2139809fb72b.md | 2 +- .../673b3d6b7ef7318eef926d5a.md | 102 ++--- .../657bdc55a322aae1eac3838f.md | 58 +-- .../lab-quiz-game/66f17db06803d11a1bd19a20.md | 19 +- .../672aa8d65995be62ef1c7515.md | 101 +++++ .../672cf764cf55a70433590def.md | 65 +++ .../672aa7005c24e45bbd53b20d.md | 40 ++ .../672bb619f0d4538d0528760d.md | 43 ++ .../673226b97d4a731e0577ae93.md | 8 +- .../672d269da46786225e3fe3fd.md | 89 ++++ .../673284d5e52ef81a2169b097.md | 82 ++++ .../673284e7244c0c1a649121b9.md | 50 +++ .../672d266e014ef8216df987d2.md | 68 ++++ .../673271884bf678d8b9c64f56.md | 119 ++++++ .../67327195e77b1bd90bdd49d7.md | 94 +++++ .../6732719e2e3ad4d947410b65.md | 71 ++++ .../673271a8998ddfd97578d095.md | 60 +++ .../673271b4213033d9b661c70e.md | 79 ++++ .../673271c7581a27d9dd78f6d6.md | 60 +++ .../673271dffbc34fda31da9515.md | 50 +++ .../673271e8e3d43bda89f723b3.md | 70 ++++ .../673271f39f124ddac28866d5.md | 74 ++++ .../673271fd11d063daf0cf8d20.md | 116 ++++++ .../6732720e95f6a0db526a2e4d.md | 95 +++++ .../67327217e70ee0db7913b255.md | 92 +++++ .../66f1ad049d7a6ac0886cc2ba.md | 200 ++++----- .../66edd630f7666cfa54b404d0.md | 2 +- .../66f1afbd9998e9c985d8e73b.md | 8 +- .../66ed8fa2f45ce3ece4053eab.md | 16 +- .../66df3b712c41c499e9d31e5b.md | 4 +- .../66ed8fb9f45ce3ece4053eac.md | 38 +- .../66ed8fc1f45ce3ece4053ead.md | 72 ++-- .../66ed8fc9f45ce3ece4053eae.md | 58 +-- .../66ed8fd7f45ce3ece4053eb0.md | 162 +++++--- .../66ed8fe1f45ce3ece4053eb1.md | 133 +++--- .../66ed8fe7f45ce3ece4053eb2.md | 48 +-- .../quiz-css-grid/66ed8fedf45ce3ece4053eb3.md | 233 +++++++---- .../66ed8ff4f45ce3ece4053eb4.md | 168 ++++---- .../66f1aeb60b11aec5abe83c2e.md | 106 ++--- .../66ed8ffcf45ce3ece4053eb5.md | 36 +- .../66ed9002f45ce3ece4053eb6.md | 99 +++-- .../66ed9009f45ce3ece4053eb7.md | 130 +++--- .../66ed9010f45ce3ece4053eb8.md | 108 ++--- .../66ed9018f45ce3ece4053eb9.md | 203 +++++---- .../66edd10913f078e7669eca81.md | 112 ++--- .../66ed901ff45ce3ece4053eba.md | 144 +++---- .../66edd07682767adff3a6231e.md | 4 +- .../66edd3403d7077eece6dc4b6.md | 116 +++--- .../quiz-git/66f1b06a5a5d10cc100af620.md | 18 +- .../66ed9026f45ce3ece4053ebb.md | 16 +- .../66ed902df45ce3ece4053ebc.md | 110 +++-- .../66edcccbba6dacdb65a59067.md | 8 +- .../66edd3b3096349f06cf688bb.md | 88 ++-- .../67358ac128957c865dcf3ddf.md | 28 +- .../66edc47c11492ac5cf258ad9.md | 2 +- .../66edd0ac31fea6e678eb925a.md | 106 ++--- .../66edd4f31ff19bf5573bf64b.md | 365 ++++------------- .../66edcc779993c0da6906dbb9.md | 32 +- .../66edcd875b0d91de1fbbb492.md | 114 +++--- .../66edcd49e73385dd4df54ac7.md | 58 +-- .../66edc3ab8c6413c344f401bf.md | 6 +- .../66edcd0ecb4b25dc64a34804.md | 40 +- .../66edc25ae5ea80bf6f785552.md | 10 +- .../66edd3f9bef926f129990425.md | 6 +- .../quiz-nano/66f1b03b922a53cb231e1c0d.md | 24 +- .../66f1a2009e65c9a40a26d51e.md | 6 +- .../66f1a417757b6ca4eecd89d6.md | 2 +- .../66edd43cded6bff30944b676.md | 12 +- .../66f1af82732957c895f0b21a.md | 8 +- .../66ed9034f45ce3ece4053ebd.md | 264 +++++++----- .../66ed9043f45ce3ece4053ebf.md | 313 +++----------- .../quiz-testing/66f1aeffc5774ac692112a7e.md | 120 +++--- .../66f1ae758b77cfc3e4da6151.md | 2 +- .../671a90c1cf517678b130419e.md | 8 +- .../671a99394bedfb9a5bc687c4.md | 48 +++ .../671a907bad4538752765f2ff.md | 16 +- .../671a8f8350c20a7439015c98.md | 2 +- .../671a87a39b88245a579c2271.md | 16 +- .../6723c5b8601a40a100bb59c9.md | 55 ++- .../5dfb6250eacea3f48c6300b2.md | 12 +- .../60fab8367d35de04e5cb7929.md | 2 +- .../6537e0be715fcb57d31ba8c3.md | 4 - .../674ef11f75254548672d998c.md | 22 +- .../674ef2d357676e50e4691658.md | 18 +- .../674ef2d357676e50e4691659.md | 68 ++-- .../674ef2d357676e50e469165a.md | 15 +- .../674ef2d357676e50e469165b.md | 28 +- .../674ef2d357676e50e469165c.md | 47 ++- .../674ef2d357676e50e469165d.md | 36 +- .../increment-a-number-with-javascript.md | 2 +- .../64df45a3ad4f8719e5355244.md | 37 +- .../build-a-personal-portfolio-webpage.md | 4 +- .../build-a-product-landing-page.md | 4 +- .../build-a-survey-form.md | 86 ++-- .../614396f7ae83f20ea6f9f4b3.md | 24 +- .../6143cb26f7edff2dc28f7da5.md | 4 +- .../6144e818fd5ea704fe56081d.md | 4 +- .../6144f8dc6849e405dd8bb829.md | 4 +- .../6145e6eeaa66c605eb087fe9.md | 4 +- .../6145e8b5080a5f06bb0223d0.md | 4 +- .../6145eb5f08a38a0786c7a80c.md | 4 +- .../6145ed1f22caab087630aaad.md | 4 +- .../6145ee65e2e1530938cb594d.md | 4 +- .../6145f02240ff8f09f7ec913c.md | 4 +- .../6145f14f019a4b0adb94b051.md | 4 +- .../6145f3a5cd9be60b9459cdd6.md | 4 +- .../6145f47393fbe70c4d885f9c.md | 4 +- .../6145f59029474c0d3dc1c8b8.md | 4 +- .../6145f685797bd30df9784e8c.md | 4 +- .../6145f829ac6a920ebf5797d7.md | 4 +- .../6145f8f8bcd4370f6509078e.md | 4 +- .../6145fb5018cb5b100cb2a88c.md | 4 +- .../6145fc3707fc3310c277f5c8.md | 4 +- .../614796cb8086be482d60e0ac.md | 4 +- .../6147a14ef5668b5881ef2297.md | 4 +- .../614878f7a412310647873015.md | 4 +- .../61487b77d4a37707073a64e5.md | 4 +- .../61487da611a65307e78d2c20.md | 4 +- .../61487f703571b60899055cf9.md | 4 +- .../614880dc16070e093e29bc56.md | 4 +- .../614883b6fa720e09fb167de9.md | 4 +- .../614884c1f5d6f30ab3d78cde.md | 4 +- .../61488ecfd05e290b5712e6da.md | 4 +- .../6148d99cdc7acd0c519862cb.md | 4 +- .../6148da157cc0bd0d06df5c0a.md | 4 +- .../6148dc095264000dce348bf5.md | 4 +- .../6148dcaaf2e8750e6cb4501a.md | 4 +- .../6148dd31d210990f0fb140f8.md | 4 +- .../6148defa9c01520fb9d178a0.md | 4 +- .../6148dfab9b54c110577de165.md | 4 +- .../6148e0bcc13efd10f7d7a6a9.md | 4 +- .../6148e161ecec9511941f8833.md | 4 +- .../6148e28706b34912340fd042.md | 4 +- .../6148e335c1edd512d00e4691.md | 4 +- .../6148e41c728f65138addf9cc.md | 8 +- .../6351e7a8684bf5377c4ee7f7.md | 4 +- .../5dc1798ff86c76b9248c6eb3.md | 4 +- .../5dfb6250eacea3f48c6300b2.md | 15 +- .../5ef9b03c81a63668521804d2.md | 2 +- .../60fab8367d35de04e5cb7929.md | 2 +- .../6537e0be715fcb57d31ba8c3.md | 4 - .../build-a-palindrome-checker.md | 58 +-- .../65606ed6ea2baca053327e9b.md | 2 +- .../660f1e3f047bf4e403268713.md | 2 +- .../660f4a1472f8e63d76162ce5.md | 6 +- .../660f4a83373de83ea101685f.md | 2 +- .../660f4ae5b3924c3fc3373973.md | 2 +- .../660f4b33e2a3364094ecb540.md | 8 +- .../660f4b641290da41b2cf0dd9.md | 4 +- .../660f4c3b01c44743719c99e4.md | 4 +- .../6610c8cfe4cf4d278e35c156.md | 2 +- .../657b11f87368cf463ea4fe46.md | 2 +- .../657b223e41ce6b9f9a01d214.md | 2 +- .../656a46e84a0ad845901ea907.md | 10 +- .../661918b4f8dc067669326ac6.md | 2 +- .../6556bc95e6ce5d850d37dd07.md | 21 +- .../65a74152da45e881db4f54dc.md | 2 +- .../65a7957981392ed32523e628.md | 2 +- .../656bbbe6d57609104b152625.md | 2 +- .../6579e12834045640e90e58bd.md | 2 +- .../657e758778ff8dc01567c9e7.md | 2 +- .../662a35f7eaaa932ab0973d0c.md | 2 +- .../662f3450de7c2139809fb72b.md | 2 +- .../66609feb0374fd5b449eabcf.md | 201 +++++++-- .../677f8ead39fe2804c782c8c9.md | 110 +++++ .../677f90882f640e05f78fa901.md | 94 +++++ .../677f90f45518530670ca5114.md | 88 ++++ .../677f913a9584e206b4d205b9.md | 103 +++++ .../677f91aca4fe09070619755f.md | 92 +++++ .../677f91ef11ade10743700257.md | 104 +++++ .../677f923709a40d07976ad2a0.md | 90 ++++ .../677f927e948d3d07d594fb56.md | 106 +++++ .../677f92d0be465d082912f34d.md | 117 ++++++ .../677f93114e9f0c08773806ac.md | 97 +++++ .../677f952a8fb67309ad8be057.md | 117 ++++++ .../677f95eae1285f0a1e2c8e3b.md | 122 ++++++ .../677f991400370c0a848a57d6.md | 106 +++++ .../677f999abaab350ad20314d4.md | 91 +++++ .../677f99d60aabe70b1148f438.md | 99 +++++ .../677f9a5ccada890b7d7aaf97.md | 103 +++++ .../677f9aa911c1110bc1c41407.md | 122 ++++++ .../677f9b142ee15b0c2b8080a9.md | 94 +++++ .../677f9b506ea2690c6c22ef7e.md | 118 ++++++ .../677f9b8ad0f6760cb1d27753.md | 124 ++++++ .../677f9d50ede84f0dfa1c300f.md | 115 ++++++ .../677f9de774ab730e54080e0f.md | 99 +++++ .../677f9e4bd49de00e92692c94.md | 99 +++++ .../677f9e9e5478850ed27b060a.md | 133 ++++++ .../677f9eee05eb8a0f34c3ba47.md | 97 +++++ .../677f9f301c904f0f8a145655.md | 100 +++++ .../677f9f72f14a710fc809c44a.md | 127 ++++++ .../677f9fa9ef07411013cd1554.md | 95 +++++ .../677fa04029767410649850c3.md | 106 +++++ .../677fa099289c8f10bf926f09.md | 88 ++++ .../677fa6108ccfa512294d65f9.md | 132 ++++++ .../677fa65b8e588b12735be5f2.md | 104 +++++ .../677fa6a5d3741512bcd56293.md | 96 +++++ .../677fa6e7b1f9bf1301b510cd.md | 110 +++++ .../677fa72c7c16cf135356bb5b.md | 108 +++++ .../677fa77172d9fc13a8336a30.md | 90 ++++ .../677fa7bace7ad913e51a7c45.md | 80 ++++ .../677fa7e75aa0191419f18b0c.md | 102 +++++ .../677fa8471227de1467898c0a.md | 96 +++++ .../677fabe959e88415f6474313.md | 76 ++++ .../677fac4406da40165a058179.md | 76 ++++ .../677fac9a74c9b116c4ce68b3.md | 76 ++++ .../677face08ffbd71725b0add1.md | 74 ++++ .../677fad49d2b623178319ccc9.md | 74 ++++ .../677faf6117b76b18c736b49c.md | 205 ++++++++++ .../677fb005be2dc618f664f9e2.md | 94 +++++ .../677fb20891a92f19d2c5e7a4.md | 108 +++++ .../677fb3e018bb121af7f62359.md | 56 +++ .../677fb67a87c2551cd6f93933.md | 92 +++++ .../677fb90a1fd8951df9eb7761.md | 85 ++++ .../677fba35d6f3031e9859dbff.md | 108 +++++ .../677fbb832baa361f969be478.md | 94 +++++ .../677fbd0d62536020653318c9.md | 99 +++++ .../677fdf7b6032a62399fd1adc.md | 117 ++++++ .../677fe14e4f849324a45d5699.md | 108 +++++ .../677fe3d1994371259f42548b.md | 84 ++++ .../677fe67ccc6a2726782e274d.md | 112 +++++ .../677fe7df617f30274e99a680.md | 102 +++++ .../677fe8d2af2bd0280ec7b0aa.md | 124 ++++++ .../677feba621dd1e2924210526.md | 110 +++++ .../677feff132d56d2a40d6c4f1.md | 96 +++++ .../677ff1a16e3fa72b444e7461.md | 123 ++++++ .../677ff5788ac0ab2c3590249d.md | 100 +++++ .../6780cac5e13b5230d0d090d5.md | 59 +++ .../6780ce2579aae4325ae0bf3c.md | 106 +++++ .../6780d10bba9c6133455f04c3.md | 98 +++++ .../6780d4cab106dd347fc30047.md | 104 +++++ .../6780d70ddcbe4a352b2c896b.md | 102 +++++ .../6780d81f2e367f35ebfc2130.md | 92 +++++ .../6780da8d4fe83a36edf1bee4.md | 104 +++++ .../6780e2447b47203831df9580.md | 90 ++++ .../67810e6675bb473b185339cc.md | 112 +++++ .../67810fc466ce3e3bc3eaaa8d.md | 112 +++++ .../678111b015a0413cf5ff5f91.md | 94 +++++ .../678115abb22ae13dffd55444.md | 121 ++++++ .../6781174efbccb43ebf078536.md | 84 ++++ .../67811888485caf3f88c6db0a.md | 106 +++++ .../67824be088281c44ea6fd142.md | 94 +++++ .../67824d4d310ce645e59f19ea.md | 108 +++++ .../67824ee5e84e0d46eee32524.md | 94 +++++ .../678253507b3b1c487847713d.md | 72 ++++ .../6782554cf57c9e4956126827.md | 72 ++++ .../678257d9d12a574a3869314a.md | 72 ++++ .../678258a9a2bf814ae74e5418.md | 72 ++++ .../67825a2b3d567c4b90ae330d.md | 72 ++++ .../6784c41edae95d51056f51d4.md | 196 +++++++++ .../6784c4489e0292512b524f4e.md | 108 +++++ .../6784c74702a2ac52841677e6.md | 92 +++++ .../6784c9924dda4553c171442e.md | 108 +++++ .../6784cc760a89e854dc55e4d2.md | 94 +++++ .../6784cde0b4978d55aa3b69d8.md | 56 +++ .../6784d1500f0a9757484f4c05.md | 84 ++++ .../6784d416a96a5858055ed288.md | 111 +++++ .../678507620156985b70c81f9f.md | 116 ++++++ .../678508c63fb94a5c43ad8bd2.md | 108 +++++ .../67850aaa7a0e065d089322fb.md | 103 +++++ .../67850d82396cc05e32854374.md | 101 +++++ .../67850ffc432b605f3d7d7187.md | 97 +++++ .../6785120bd970cb5fff50866e.md | 99 +++++ .../678512e54c6e2e60c3ee1eff.md | 80 ++++ .../678514dc7a9a57619631abd8.md | 116 ++++++ .../6785175ebbf89262b90a8a49.md | 56 +++ .../678519c0009c0864277dbfcc.md | 117 ++++++ .../678550a60e946b666aaa6de9.md | 118 ++++++ .../6785520139b856671a3ca311.md | 108 +++++ .../678553a759feaa680cf381ab.md | 114 ++++++ .../678554d17334f068f48856da.md | 84 ++++ .../6785562a8d1e2469f0e4adfd.md | 109 +++++ .../6785570d52b6016ae90cac76.md | 84 ++++ .../678558730bb1c36b924b8b4c.md | 84 ++++ .../678559c204808d6c6706556c.md | 92 +++++ .../678617cb0ad89b6f9bfe601e.md | 103 +++++ .../678619d1854f1a705b0fd76e.md | 117 ++++++ .../67861d7d58b8a871619c146a.md | 118 ++++++ .../67861f274572b9727bc11ee6.md | 106 +++++ .../67862358aa138073c5e91b9c.md | 96 +++++ .../67862a06733c0575a524cc02.md | 136 +++++++ .../67862bdc2cbf3276d7599515.md | 108 +++++ .../67862d7c5a3e1877d43bdd50.md | 98 +++++ .../67863e4b91b5617a6a7dedb1.md | 67 +++ .../678640bb149d137b27346d9e.md | 66 +++ .../678641e4a1acd27bba24cd24.md | 66 +++ .../67864288ddcab97c35fa8955.md | 66 +++ .../6786435171664b7cb1724644.md | 66 +++ .../67900eeff58f3aba1b5267b0.md | 116 ++++++ .../6794acd2567757780af6a69d.md | 96 +++++ .../6794aeb63a22827b8b29fb52.md | 92 +++++ .../6794b0a616662d7d514a689f.md | 108 +++++ .../6794b2b7175c5380161ba8c5.md | 109 +++++ .../66c06d618d075c7f7f1b890a.md | 2 +- .../6735a7370e0ae93a4577c689.md | 7 +- .../673b3d6b7ef7318eef926d5a.md | 102 ++--- .../657bdc55a322aae1eac3838f.md | 58 +-- .../lab-quiz-game/66f17db06803d11a1bd19a20.md | 19 +- .../673b02b03134b04637bf7055.md | 79 ++-- .../669e2f60e83c011754f711f9.md | 4 +- .../672aa8d65995be62ef1c7515.md | 101 +++++ .../672cf764cf55a70433590def.md | 65 +++ .../672aa5bd69657d56ab49ec8a.md | 30 ++ .../672ac96491845f43ea9a26d7.md | 38 ++ .../672ac9705b07a64439b73b59.md | 36 ++ .../672aa7005c24e45bbd53b20d.md | 40 ++ .../672bb619f0d4538d0528760d.md | 43 ++ .../6708396caa00e11b597b3365.md | 2 +- .../67298243760ae980de5266db.md | 21 + .../672985445d7da807c6b4f406.md | 55 +++ .../672990ecf71a852804ababe7.md | 71 ++++ .../6729959bf9c8e835f46b3f78.md | 30 ++ .../672995ac85fd943657c2ede5.md | 33 ++ .../672995bda6c67e369aaf8588.md | 46 +++ .../672995c9e6f69436dbcccc79.md | 67 +++ .../672995d673bd3237200b9e7c.md | 36 ++ .../672995e43674fb3775b9ec5d.md | 31 ++ .../672995f16ed97837b365a9f6.md | 34 ++ .../672995ffdfd2f337f5f215f8.md | 50 ++- .../6729960ed6e2ca3825940e97.md | 41 ++ .../6729963b1ab11638753cf082.md | 45 ++ .../672aa578a2129554d4675049.md | 38 ++ .../672ab82c1a9bbd0e3aabc39d.md | 24 ++ .../672ab83c4297910eade53c2e.md | 34 +- .../672ab849aa1ef70eefd29364.md | 30 ++ .../672ab8573f32480f192aaae1.md | 48 +++ .../672bafd715f6ba77d57f3ec0.md | 8 +- .../672aa6c9e379285acca5a2aa.md | 28 ++ .../672baa97f2990e6631d522e7.md | 32 ++ .../672baaa62d4b46667a8ac869.md | 22 + .../672baab2a0c3df66ad987b94.md | 22 + .../672baabf16290b66e6b79a39.md | 38 ++ .../672baacb7f2f446728e77efe.md | 28 ++ .../672baad7bbc4f86762ca173e.md | 28 ++ .../672baae11d06c867a16f64e1.md | 27 ++ .../673226b97d4a731e0577ae93.md | 8 +- .../672aa58c389eb9565978495d.md | 26 ++ .../672ac37104dc2530a769e6a4.md | 52 +++ .../672ac39a22b0cc30eb8fd65e.md | 48 +++ .../672ac3c5d0e9fd31835ff772.md | 68 ++++ .../672ac3f129efbf327742eb33.md | 36 ++ .../672ac403a9ba7732b31c6480.md | 56 +++ .../6729974ec29be33cb00eb54d.md | 51 +++ .../672a4cd3d59756726657efb8.md | 47 +++ .../672a4ce6dab9eb735828b48b.md | 44 ++ .../672a4cf959443073a6774908.md | 36 ++ .../672d269da46786225e3fe3fd.md | 89 ++++ .../673284d5e52ef81a2169b097.md | 82 ++++ .../673284e7244c0c1a649121b9.md | 50 +++ .../672a4fa7d335bc7cfb63a392.md | 52 +++ .../672a511bb408ec81c592eb68.md | 46 +++ .../6716744f7245947a3dd60009.md | 24 ++ .../671682dd88e461a8e2620f38.md | 63 +++ .../6716830dbaf95da9564f2e3b.md | 26 +- .../67168323932391a9ee0d3a9e.md | 20 + .../672d26809d388621ad1ecd43.md | 71 ++++ .../6732808f3221720adc833e81.md | 46 +++ .../673280a1c29d0a0b17316e56.md | 44 ++ .../672d266e014ef8216df987d2.md | 68 ++++ .../673271884bf678d8b9c64f56.md | 119 ++++++ .../67327195e77b1bd90bdd49d7.md | 94 +++++ .../6732719e2e3ad4d947410b65.md | 71 ++++ .../673271a8998ddfd97578d095.md | 60 +++ .../673271b4213033d9b661c70e.md | 79 ++++ .../673271c7581a27d9dd78f6d6.md | 60 +++ .../673271dffbc34fda31da9515.md | 50 +++ .../673271e8e3d43bda89f723b3.md | 70 ++++ .../673271f39f124ddac28866d5.md | 74 ++++ .../673271fd11d063daf0cf8d20.md | 116 ++++++ .../6732720e95f6a0db526a2e4d.md | 95 +++++ .../67327217e70ee0db7913b255.md | 92 +++++ .../673263e80dd43da7df3ae565.md | 2 +- .../66f1ad049d7a6ac0886cc2ba.md | 202 ++++----- .../66edd630f7666cfa54b404d0.md | 4 +- .../66f1affc0ef4fcca423d4688.md | 2 +- .../66f1af4fedf643c78d024c5e.md | 2 +- .../66f1afbd9998e9c985d8e73b.md | 10 +- .../66ed8fa2f45ce3ece4053eab.md | 60 +-- .../66df3b712c41c499e9d31e5b.md | 6 +- .../66ed8fb9f45ce3ece4053eac.md | 156 +++---- .../66ed8fc1f45ce3ece4053ead.md | 74 ++-- .../66ed8fc9f45ce3ece4053eae.md | 60 +-- .../66ed8fd0f45ce3ece4053eaf.md | 2 +- .../66ed8fd7f45ce3ece4053eb0.md | 164 +++++--- .../66ed8fe1f45ce3ece4053eb1.md | 185 ++++----- .../66ed8fe7f45ce3ece4053eb2.md | 50 +-- .../quiz-css-grid/66ed8fedf45ce3ece4053eb3.md | 235 +++++++---- .../66ed8ff4f45ce3ece4053eb4.md | 170 ++++---- .../66f1aeb60b11aec5abe83c2e.md | 108 ++--- .../66ed8ffcf45ce3ece4053eb5.md | 384 ++++++++++++------ .../66ed9002f45ce3ece4053eb6.md | 101 +++-- .../66ed9009f45ce3ece4053eb7.md | 132 +++--- .../66ed9010f45ce3ece4053eb8.md | 110 ++--- .../66ed9018f45ce3ece4053eb9.md | 205 +++++----- .../66edd10913f078e7669eca81.md | 114 +++--- .../66ed901ff45ce3ece4053eba.md | 130 +++--- .../66edd07682767adff3a6231e.md | 10 +- .../66edd3403d7077eece6dc4b6.md | 118 +++--- .../quiz-git/66f1b06a5a5d10cc100af620.md | 20 +- .../66ed9026f45ce3ece4053ebb.md | 214 ++++++---- .../66ed902df45ce3ece4053ebc.md | 112 +++-- .../66edcccbba6dacdb65a59067.md | 268 ++++++------ .../66edd3b3096349f06cf688bb.md | 90 ++-- .../67358ac128957c865dcf3ddf.md | 30 +- .../66edc47c11492ac5cf258ad9.md | 4 +- .../66edd3711bb9f7efa73aef91.md | 2 +- .../66edd0ac31fea6e678eb925a.md | 108 ++--- .../66edd4f31ff19bf5573bf64b.md | 365 ++++------------- .../66edcc779993c0da6906dbb9.md | 355 +++++++++------- .../66edcd875b0d91de1fbbb492.md | 116 +++--- .../66edcdd18a4ef8df16e6bb7e.md | 2 +- .../66edcd49e73385dd4df54ac7.md | 60 +-- .../67358be1c7903489c0a7db78.md | 2 +- .../66edc3ab8c6413c344f401bf.md | 231 +++++------ .../66edcd0ecb4b25dc64a34804.md | 44 +- .../66edd3011f18f4ee1bd9d28b.md | 2 +- .../66edc31c44f1b9c1d5c5ebca.md | 80 ++-- .../66edc25ae5ea80bf6f785552.md | 76 ++-- .../66edd3f9bef926f129990425.md | 8 +- .../quiz-nano/66f1b03b922a53cb231e1c0d.md | 26 +- .../66f1a2009e65c9a40a26d51e.md | 8 +- .../66f1a417757b6ca4eecd89d6.md | 4 +- .../66edd43cded6bff30944b676.md | 14 +- .../66f1af82732957c895f0b21a.md | 10 +- .../66ed9034f45ce3ece4053ebd.md | 266 +++++++----- .../66ed903cf45ce3ece4053ebe.md | 4 +- .../66ed9043f45ce3ece4053ebf.md | 313 +++----------- .../quiz-testing/66f1aeffc5774ac692112a7e.md | 122 +++--- .../66f1ae758b77cfc3e4da6151.md | 4 +- .../66f1adcf97e3e4c1bd89ebf5.md | 2 +- .../671a90c1cf517678b130419e.md | 8 +- .../671a99394bedfb9a5bc687c4.md | 48 +++ .../671a907bad4538752765f2ff.md | 16 +- .../671a8f8350c20a7439015c98.md | 2 +- .../671a892927fdba60db05edfe.md | 1 + .../6723ce555ff2dfc0cc04b69a.md | 2 +- .../671a87a39b88245a579c2271.md | 16 +- .../6723c554025f449f4f39c3f5.md | 2 +- .../6723c5b8601a40a100bb59c9.md | 55 ++- .../6723c463e51a2d9b747d7529.md | 10 +- .../6723d3cfdd0717d3f1bf27e3.md | 2 +- .../671a83934b61f64cefe87a61.md | 2 +- .../5dfb6250eacea3f48c6300b2.md | 12 +- .../5ef9b03c81a63668521804d2.md | 2 +- .../66a8290a27c2c625e2355042.md | 2 +- .../66a83601cd819e37f0dccd14.md | 19 +- .../66a83bdcf425e7446900b7c4.md | 4 +- .../66a83e5e491625454b6f62c3.md | 2 +- .../66a83fec026a7a4631e084d2.md | 4 +- .../66a84111965a0c46df6bbd0a.md | 18 +- .../66a930b20f589b6664c51cb0.md | 4 +- .../66a93730719e1f68410cce54.md | 2 +- .../66a937e74920ba68ebe5e86d.md | 2 +- .../66a93bbe65a26169dbf3bc39.md | 8 +- .../66a93c95bc58e26a8fe95818.md | 10 +- .../66a9401c9d660d6bb15993e2.md | 6 +- .../66a9419e2d18476c645ce693.md | 12 +- .../66a94ea5df66236ebed260e8.md | 4 +- .../66a9521bc70162712caf118d.md | 16 +- .../66a954b2bcddba72076c1857.md | 18 +- .../66a9577022877d72d8f43b4f.md | 2 +- .../66a95d0eff8168747805f1f3.md | 20 +- .../66a96127422411756204bc1b.md | 18 +- .../66a962954f4e0d76223b37ed.md | 30 +- .../66a9689b1bf24b7750898a1b.md | 14 +- .../66a969951120be7818d8ee49.md | 10 +- .../66a96b01f33ef178dfca9e42.md | 2 +- .../66a972137acd1179fa3fe8a0.md | 10 +- .../66a975c259525b7bc2d5c776.md | 8 +- .../66a97ca8c4cbae7d0bb6e0ad.md | 10 +- .../66a97f40ddd40d7deb0618b7.md | 2 +- .../66a9824ac5d9f77ec304969f.md | 9 +- .../66a9843525e9fa8046d709b7.md | 2 +- .../67116d7584d0b469b14579c3.md | 2 +- .../674728eda5829d7b4c360643.md | 2 +- .../673543d867b44ac7580610a2.md | 2 +- .../66fbcf750a62784cf11f5630.md | 2 +- .../60fab8367d35de04e5cb7929.md | 2 +- .../6537e0be715fcb57d31ba8c3.md | 4 - .../6740495ba48aa94e5667b436.md | 2 +- .../674ef11f75254548672d998c.md | 22 +- .../674ef2d357676e50e4691658.md | 18 +- .../674ef2d357676e50e4691659.md | 68 ++-- .../674ef2d357676e50e469165a.md | 15 +- .../674ef2d357676e50e469165b.md | 28 +- .../674ef2d357676e50e469165c.md | 47 ++- .../674ef2d357676e50e469165d.md | 36 +- .../63effe558c87a70e7072e447.md | 2 +- .../increment-a-number-with-javascript.md | 2 +- .../64df45a3ad4f8719e5355244.md | 37 +- .../algorithms/implement-bubble-sort.md | 11 +- .../algorithms/implement-insertion-sort.md | 11 +- .../algorithms/implement-merge-sort.md | 32 +- .../algorithms/implement-quick-sort.md | 11 +- .../algorithms/implement-selection-sort.md | 11 +- .../614396f7ae83f20ea6f9f4b3.md | 24 +- .../6143cb26f7edff2dc28f7da5.md | 4 +- .../6144e818fd5ea704fe56081d.md | 4 +- .../6144f8dc6849e405dd8bb829.md | 4 +- .../6145e6eeaa66c605eb087fe9.md | 4 +- .../6145e8b5080a5f06bb0223d0.md | 4 +- .../6145eb5f08a38a0786c7a80c.md | 4 +- .../6145ed1f22caab087630aaad.md | 4 +- .../6145ee65e2e1530938cb594d.md | 4 +- .../6145f02240ff8f09f7ec913c.md | 4 +- .../6145f14f019a4b0adb94b051.md | 4 +- .../6145f3a5cd9be60b9459cdd6.md | 4 +- .../6145f47393fbe70c4d885f9c.md | 4 +- .../6145f59029474c0d3dc1c8b8.md | 4 +- .../6145f685797bd30df9784e8c.md | 4 +- .../6145f829ac6a920ebf5797d7.md | 4 +- .../6145f8f8bcd4370f6509078e.md | 4 +- .../6145fb5018cb5b100cb2a88c.md | 4 +- .../6145fc3707fc3310c277f5c8.md | 4 +- .../614796cb8086be482d60e0ac.md | 4 +- .../6147a14ef5668b5881ef2297.md | 4 +- .../614878f7a412310647873015.md | 4 +- .../61487b77d4a37707073a64e5.md | 4 +- .../61487da611a65307e78d2c20.md | 4 +- .../61487f703571b60899055cf9.md | 4 +- .../614880dc16070e093e29bc56.md | 4 +- .../614883b6fa720e09fb167de9.md | 4 +- .../614884c1f5d6f30ab3d78cde.md | 4 +- .../61488ecfd05e290b5712e6da.md | 4 +- .../6148d99cdc7acd0c519862cb.md | 4 +- .../6148da157cc0bd0d06df5c0a.md | 4 +- .../6148dc095264000dce348bf5.md | 4 +- .../6148dcaaf2e8750e6cb4501a.md | 4 +- .../6148dd31d210990f0fb140f8.md | 4 +- .../6148defa9c01520fb9d178a0.md | 4 +- .../6148dfab9b54c110577de165.md | 4 +- .../6148e0bcc13efd10f7d7a6a9.md | 4 +- .../6148e161ecec9511941f8833.md | 4 +- .../6148e28706b34912340fd042.md | 4 +- .../6148e335c1edd512d00e4691.md | 4 +- .../6148e41c728f65138addf9cc.md | 8 +- .../6351e7a8684bf5377c4ee7f7.md | 4 +- .../5dc1798ff86c76b9248c6eb3.md | 4 +- .../5dfb6250eacea3f48c6300b2.md | 15 +- .../5ef9b03c81a63668521804d2.md | 2 +- .../60fab8367d35de04e5cb7929.md | 2 +- .../6537e0be715fcb57d31ba8c3.md | 4 - .../build-a-palindrome-checker.md | 58 +-- .../65573d0abe4d38cd6fa13f44.md | 2 +- .../65606ed6ea2baca053327e9b.md | 2 +- .../660f1e3f047bf4e403268713.md | 2 +- .../660f4a1472f8e63d76162ce5.md | 6 +- .../660f4a83373de83ea101685f.md | 2 +- .../660f4ae5b3924c3fc3373973.md | 2 +- .../660f4b33e2a3364094ecb540.md | 8 +- .../660f4b641290da41b2cf0dd9.md | 4 +- .../660f4c3b01c44743719c99e4.md | 4 +- .../6610c8cfe4cf4d278e35c156.md | 2 +- .../problem-165-intersections.md | 2 +- .../657b11f87368cf463ea4fe46.md | 2 +- .../657b223e41ce6b9f9a01d214.md | 2 +- .../656a46e84a0ad845901ea907.md | 10 +- .../661918b4f8dc067669326ac6.md | 2 +- .../6556bc95e6ce5d850d37dd07.md | 21 +- .../65a74152da45e881db4f54dc.md | 2 +- .../65a7957981392ed32523e628.md | 2 +- .../656bbbe6d57609104b152625.md | 2 +- .../6579e12834045640e90e58bd.md | 2 +- .../657e758778ff8dc01567c9e7.md | 2 +- .../662a35f7eaaa932ab0973d0c.md | 2 +- .../662f3450de7c2139809fb72b.md | 2 +- .../last-letter-first-letter.md | 2 +- .../rosetta-code-challenges/word-wrap.md | 14 +- .../671775877ee558061e6eebf8.md | 2 +- .../66609feb0374fd5b449eabcf.md | 201 +++++++-- .../677f8ead39fe2804c782c8c9.md | 110 +++++ .../677f90882f640e05f78fa901.md | 94 +++++ .../677f90f45518530670ca5114.md | 88 ++++ .../677f913a9584e206b4d205b9.md | 103 +++++ .../677f91aca4fe09070619755f.md | 92 +++++ .../677f91ef11ade10743700257.md | 104 +++++ .../677f923709a40d07976ad2a0.md | 90 ++++ .../677f927e948d3d07d594fb56.md | 106 +++++ .../677f92d0be465d082912f34d.md | 117 ++++++ .../677f93114e9f0c08773806ac.md | 97 +++++ .../677f952a8fb67309ad8be057.md | 117 ++++++ .../677f95eae1285f0a1e2c8e3b.md | 122 ++++++ .../677f991400370c0a848a57d6.md | 106 +++++ .../677f999abaab350ad20314d4.md | 91 +++++ .../677f99d60aabe70b1148f438.md | 99 +++++ .../677f9a5ccada890b7d7aaf97.md | 103 +++++ .../677f9aa911c1110bc1c41407.md | 122 ++++++ .../677f9b142ee15b0c2b8080a9.md | 94 +++++ .../677f9b506ea2690c6c22ef7e.md | 118 ++++++ .../677f9b8ad0f6760cb1d27753.md | 124 ++++++ .../677f9d50ede84f0dfa1c300f.md | 115 ++++++ .../677f9de774ab730e54080e0f.md | 99 +++++ .../677f9e4bd49de00e92692c94.md | 99 +++++ .../677f9e9e5478850ed27b060a.md | 133 ++++++ .../677f9eee05eb8a0f34c3ba47.md | 97 +++++ .../677f9f301c904f0f8a145655.md | 100 +++++ .../677f9f72f14a710fc809c44a.md | 127 ++++++ .../677f9fa9ef07411013cd1554.md | 95 +++++ .../677fa04029767410649850c3.md | 106 +++++ .../677fa099289c8f10bf926f09.md | 88 ++++ .../677fa6108ccfa512294d65f9.md | 132 ++++++ .../677fa65b8e588b12735be5f2.md | 104 +++++ .../677fa6a5d3741512bcd56293.md | 96 +++++ .../677fa6e7b1f9bf1301b510cd.md | 110 +++++ .../677fa72c7c16cf135356bb5b.md | 108 +++++ .../677fa77172d9fc13a8336a30.md | 90 ++++ .../677fa7bace7ad913e51a7c45.md | 80 ++++ .../677fa7e75aa0191419f18b0c.md | 102 +++++ .../677fa8471227de1467898c0a.md | 96 +++++ .../677fabe959e88415f6474313.md | 76 ++++ .../677fac4406da40165a058179.md | 76 ++++ .../677fac9a74c9b116c4ce68b3.md | 76 ++++ .../677face08ffbd71725b0add1.md | 74 ++++ .../677fad49d2b623178319ccc9.md | 74 ++++ .../677faf6117b76b18c736b49c.md | 205 ++++++++++ .../677fb005be2dc618f664f9e2.md | 94 +++++ .../677fb20891a92f19d2c5e7a4.md | 108 +++++ .../677fb3e018bb121af7f62359.md | 56 +++ .../677fb67a87c2551cd6f93933.md | 92 +++++ .../677fb90a1fd8951df9eb7761.md | 85 ++++ .../677fba35d6f3031e9859dbff.md | 108 +++++ .../677fbb832baa361f969be478.md | 94 +++++ .../677fbd0d62536020653318c9.md | 99 +++++ .../677fdf7b6032a62399fd1adc.md | 117 ++++++ .../677fe14e4f849324a45d5699.md | 108 +++++ .../677fe3d1994371259f42548b.md | 84 ++++ .../677fe67ccc6a2726782e274d.md | 112 +++++ .../677fe7df617f30274e99a680.md | 102 +++++ .../677fe8d2af2bd0280ec7b0aa.md | 124 ++++++ .../677feba621dd1e2924210526.md | 110 +++++ .../677feff132d56d2a40d6c4f1.md | 96 +++++ .../677ff1a16e3fa72b444e7461.md | 123 ++++++ .../677ff5788ac0ab2c3590249d.md | 100 +++++ .../6780cac5e13b5230d0d090d5.md | 59 +++ .../6780ce2579aae4325ae0bf3c.md | 106 +++++ .../6780d10bba9c6133455f04c3.md | 98 +++++ .../6780d4cab106dd347fc30047.md | 104 +++++ .../6780d70ddcbe4a352b2c896b.md | 102 +++++ .../6780d81f2e367f35ebfc2130.md | 92 +++++ .../6780da8d4fe83a36edf1bee4.md | 104 +++++ .../6780e2447b47203831df9580.md | 90 ++++ .../67810e6675bb473b185339cc.md | 112 +++++ .../67810fc466ce3e3bc3eaaa8d.md | 112 +++++ .../678111b015a0413cf5ff5f91.md | 94 +++++ .../678115abb22ae13dffd55444.md | 121 ++++++ .../6781174efbccb43ebf078536.md | 84 ++++ .../67811888485caf3f88c6db0a.md | 106 +++++ .../67824be088281c44ea6fd142.md | 94 +++++ .../67824d4d310ce645e59f19ea.md | 108 +++++ .../67824ee5e84e0d46eee32524.md | 94 +++++ .../678253507b3b1c487847713d.md | 72 ++++ .../6782554cf57c9e4956126827.md | 72 ++++ .../678257d9d12a574a3869314a.md | 72 ++++ .../678258a9a2bf814ae74e5418.md | 72 ++++ .../67825a2b3d567c4b90ae330d.md | 72 ++++ .../6784c41edae95d51056f51d4.md | 196 +++++++++ .../6784c4489e0292512b524f4e.md | 108 +++++ .../6784c74702a2ac52841677e6.md | 92 +++++ .../6784c9924dda4553c171442e.md | 108 +++++ .../6784cc760a89e854dc55e4d2.md | 94 +++++ .../6784cde0b4978d55aa3b69d8.md | 56 +++ .../6784d1500f0a9757484f4c05.md | 84 ++++ .../6784d416a96a5858055ed288.md | 111 +++++ .../678507620156985b70c81f9f.md | 116 ++++++ .../678508c63fb94a5c43ad8bd2.md | 108 +++++ .../67850aaa7a0e065d089322fb.md | 103 +++++ .../67850d82396cc05e32854374.md | 101 +++++ .../67850ffc432b605f3d7d7187.md | 97 +++++ .../6785120bd970cb5fff50866e.md | 99 +++++ .../678512e54c6e2e60c3ee1eff.md | 80 ++++ .../678514dc7a9a57619631abd8.md | 116 ++++++ .../6785175ebbf89262b90a8a49.md | 56 +++ .../678519c0009c0864277dbfcc.md | 117 ++++++ .../678550a60e946b666aaa6de9.md | 118 ++++++ .../6785520139b856671a3ca311.md | 108 +++++ .../678553a759feaa680cf381ab.md | 114 ++++++ .../678554d17334f068f48856da.md | 84 ++++ .../6785562a8d1e2469f0e4adfd.md | 109 +++++ .../6785570d52b6016ae90cac76.md | 84 ++++ .../678558730bb1c36b924b8b4c.md | 84 ++++ .../678559c204808d6c6706556c.md | 92 +++++ .../678617cb0ad89b6f9bfe601e.md | 103 +++++ .../678619d1854f1a705b0fd76e.md | 117 ++++++ .../67861d7d58b8a871619c146a.md | 118 ++++++ .../67861f274572b9727bc11ee6.md | 106 +++++ .../67862358aa138073c5e91b9c.md | 96 +++++ .../67862a06733c0575a524cc02.md | 136 +++++++ .../67862bdc2cbf3276d7599515.md | 108 +++++ .../67862d7c5a3e1877d43bdd50.md | 98 +++++ .../67863e4b91b5617a6a7dedb1.md | 67 +++ .../678640bb149d137b27346d9e.md | 66 +++ .../678641e4a1acd27bba24cd24.md | 66 +++ .../67864288ddcab97c35fa8955.md | 66 +++ .../6786435171664b7cb1724644.md | 66 +++ .../67900eeff58f3aba1b5267b0.md | 116 ++++++ .../6794acd2567757780af6a69d.md | 96 +++++ .../6794aeb63a22827b8b29fb52.md | 92 +++++ .../6794b0a616662d7d514a689f.md | 108 +++++ .../6794b2b7175c5380161ba8c5.md | 109 +++++ .../671f46b8a64a336294268cf6.md | 2 +- .../66a207974c806a19d6607073.md | 57 ++- .../lab-event-hub/66ebd4ae2812430bb883c787.md | 2 +- .../66c07238b01053abaf812065.md | 2 +- .../66c06d618d075c7f7f1b890a.md | 6 +- .../66d6a7a3e1aa411e94bf2346.md | 4 +- .../66db57ad34c7089b9b41bfd6.md | 30 +- .../6735a7370e0ae93a4577c689.md | 7 +- .../673b3d6b7ef7318eef926d5a.md | 102 ++--- .../657bdc55a322aae1eac3838f.md | 58 +-- .../66f2836c459cfb16ae76f24f.md | 2 +- .../lab-quiz-game/66f17db06803d11a1bd19a20.md | 19 +- .../673b02b03134b04637bf7055.md | 79 ++-- .../669e2f60e83c011754f711f9.md | 4 +- .../672aa8d65995be62ef1c7515.md | 101 +++++ .../672cf764cf55a70433590def.md | 65 +++ .../672aa5bd69657d56ab49ec8a.md | 30 ++ .../672ac96491845f43ea9a26d7.md | 38 ++ .../672ac9705b07a64439b73b59.md | 36 ++ .../672aa7005c24e45bbd53b20d.md | 40 ++ .../672bb619f0d4538d0528760d.md | 43 ++ .../670803abcb3e980233da4768.md | 32 ++ .../6708382cf088b216580a9ff1.md | 52 +++ .../67083868d5fdcb17bf8c14bd.md | 40 +- .../670838977810401844af6fe0.md | 51 +++ .../670838b10ee87a18e5faff62.md | 24 ++ .../670838e914096b194b0c51aa.md | 79 ++++ .../670839051794aa19fcef6dc8.md | 29 ++ .../67083952f800051a8a21fcfd.md | 31 ++ .../6708396caa00e11b597b3365.md | 47 ++- .../67298243760ae980de5266db.md | 21 + .../672985445d7da807c6b4f406.md | 55 +++ .../672990ecf71a852804ababe7.md | 71 ++++ .../6729959bf9c8e835f46b3f78.md | 30 ++ .../672995ac85fd943657c2ede5.md | 33 ++ .../672995bda6c67e369aaf8588.md | 46 +++ .../672995c9e6f69436dbcccc79.md | 67 +++ .../672995d673bd3237200b9e7c.md | 36 ++ .../672995e43674fb3775b9ec5d.md | 31 ++ .../672995f16ed97837b365a9f6.md | 34 ++ .../672995ffdfd2f337f5f215f8.md | 50 ++- .../6729960ed6e2ca3825940e97.md | 41 ++ .../6729963b1ab11638753cf082.md | 45 ++ .../6734e3a9cc78faaf4248d335.md | 14 +- .../6734e867bbf41cc5b11648c4.md | 14 +- .../6734e86f590727c5e7e9ec5e.md | 10 +- .../6734e879c78ee6c61db25b90.md | 43 +- .../6734e88cc46e6dc679420040.md | 26 +- .../674ba6876f7ada867135bb95.md | 24 +- .../672b951b1bf78038b1a2a0e7.md | 2 +- .../672aa578a2129554d4675049.md | 38 ++ .../672ab82c1a9bbd0e3aabc39d.md | 24 ++ .../672ab83c4297910eade53c2e.md | 34 +- .../672ab849aa1ef70eefd29364.md | 30 ++ .../672ab8573f32480f192aaae1.md | 48 +++ .../672bafd715f6ba77d57f3ec0.md | 8 +- .../672bb009952c7a7904a750cb.md | 2 +- .../672aa6c9e379285acca5a2aa.md | 28 ++ .../672baa97f2990e6631d522e7.md | 32 ++ .../672baaa62d4b46667a8ac869.md | 22 + .../672baab2a0c3df66ad987b94.md | 22 + .../672baabf16290b66e6b79a39.md | 38 ++ .../672baacb7f2f446728e77efe.md | 28 ++ .../672baad7bbc4f86762ca173e.md | 28 ++ .../672baae11d06c867a16f64e1.md | 27 ++ .../6734e2dcb965e5ac0ea38e0f.md | 2 +- .../6733d8606fb893099e3d0df3.md | 6 +- .../672b98be592cfb451f651451.md | 2 +- .../673226b97d4a731e0577ae93.md | 8 +- .../6734e3ceee2da4b0301719b7.md | 42 +- .../673500abfe36cd015b67b1b7.md | 26 +- .../673500b41af8500191febedc.md | 22 +- .../673500bfe1f41601c1ddb1a2.md | 20 +- .../672aa58c389eb9565978495d.md | 26 ++ .../672ac37104dc2530a769e6a4.md | 52 +++ .../672ac39a22b0cc30eb8fd65e.md | 48 +++ .../672ac3c5d0e9fd31835ff772.md | 68 ++++ .../672ac3f129efbf327742eb33.md | 36 ++ .../672ac403a9ba7732b31c6480.md | 56 +++ .../6729974ec29be33cb00eb54d.md | 51 +++ .../672a4cd3d59756726657efb8.md | 47 +++ .../672a4ce6dab9eb735828b48b.md | 44 ++ .../672a4cf959443073a6774908.md | 36 ++ .../672d269da46786225e3fe3fd.md | 89 ++++ .../673284d5e52ef81a2169b097.md | 82 ++++ .../673284e7244c0c1a649121b9.md | 50 +++ .../672a4fa7d335bc7cfb63a392.md | 52 +++ .../672a511bb408ec81c592eb68.md | 46 +++ .../6716744f7245947a3dd60009.md | 24 ++ .../671682dd88e461a8e2620f38.md | 63 +++ .../6716830dbaf95da9564f2e3b.md | 26 +- .../67168323932391a9ee0d3a9e.md | 20 + .../6716743531fc9a797351c21e.md | 28 ++ .../67167835def3588873f339c6.md | 12 + .../6716823876aa22a68ba3e2ec.md | 18 +- .../6716825aff3434a71fdc3e99.md | 14 + .../67168278ac6df6a799555db5.md | 81 ++++ .../671682b3983489a819507553.md | 81 ++++ .../672d26809d388621ad1ecd43.md | 71 ++++ .../6732808f3221720adc833e81.md | 46 +++ .../673280a1c29d0a0b17316e56.md | 44 ++ .../672d266e014ef8216df987d2.md | 68 ++++ .../673271884bf678d8b9c64f56.md | 119 ++++++ .../67327195e77b1bd90bdd49d7.md | 94 +++++ .../6732719e2e3ad4d947410b65.md | 71 ++++ .../673271a8998ddfd97578d095.md | 60 +++ .../673271b4213033d9b661c70e.md | 85 +++- .../673271c7581a27d9dd78f6d6.md | 60 +++ .../673271dffbc34fda31da9515.md | 50 +++ .../673271e8e3d43bda89f723b3.md | 70 ++++ .../673271f39f124ddac28866d5.md | 74 ++++ .../673271fd11d063daf0cf8d20.md | 116 ++++++ .../6732720e95f6a0db526a2e4d.md | 95 +++++ .../67327217e70ee0db7913b255.md | 92 +++++ .../6733c5ba834ded4bb067e67c.md | 10 +- .../673263e80dd43da7df3ae565.md | 2 +- .../672a4e04a24858778f57ebfe.md | 105 +++++ .../66f1ad049d7a6ac0886cc2ba.md | 202 ++++----- .../66edd630f7666cfa54b404d0.md | 4 +- .../66f1affc0ef4fcca423d4688.md | 2 +- .../66f1af4fedf643c78d024c5e.md | 2 +- .../66f1afbd9998e9c985d8e73b.md | 10 +- .../66ed8fa2f45ce3ece4053eab.md | 60 +-- .../66df3b712c41c499e9d31e5b.md | 20 +- .../66ed8fb9f45ce3ece4053eac.md | 156 +++---- .../66ed8fc1f45ce3ece4053ead.md | 74 ++-- .../66ed8fc9f45ce3ece4053eae.md | 60 +-- .../66ed8fd0f45ce3ece4053eaf.md | 2 +- .../66ed8fd7f45ce3ece4053eb0.md | 164 +++++--- .../66ed8fe1f45ce3ece4053eb1.md | 185 ++++----- .../66ed8fe7f45ce3ece4053eb2.md | 50 +-- .../quiz-css-grid/66ed8fedf45ce3ece4053eb3.md | 235 +++++++---- .../66ed8ff4f45ce3ece4053eb4.md | 186 ++++----- .../66f1aeb60b11aec5abe83c2e.md | 108 ++--- .../66ed8ffcf45ce3ece4053eb5.md | 384 ++++++++++++------ .../66ed9002f45ce3ece4053eb6.md | 101 +++-- .../66ed9009f45ce3ece4053eb7.md | 132 +++--- .../66ed9010f45ce3ece4053eb8.md | 110 ++--- .../66ed9018f45ce3ece4053eb9.md | 205 +++++----- .../66edd10913f078e7669eca81.md | 114 +++--- .../66ed901ff45ce3ece4053eba.md | 130 +++--- .../66edd07682767adff3a6231e.md | 10 +- .../66edd3403d7077eece6dc4b6.md | 118 +++--- .../quiz-git/66f1b06a5a5d10cc100af620.md | 20 +- .../66ed9026f45ce3ece4053ebb.md | 214 ++++++---- .../66ed902df45ce3ece4053ebc.md | 112 +++-- .../66edcccbba6dacdb65a59067.md | 268 ++++++------ .../66edd3b3096349f06cf688bb.md | 90 ++-- .../67358ac128957c865dcf3ddf.md | 30 +- .../66edc47c11492ac5cf258ad9.md | 4 +- .../66edd3711bb9f7efa73aef91.md | 4 +- .../66edd0ac31fea6e678eb925a.md | 108 ++--- .../66edd4f31ff19bf5573bf64b.md | 365 ++++------------- .../66edcc779993c0da6906dbb9.md | 355 +++++++++------- .../66edcd875b0d91de1fbbb492.md | 116 +++--- .../66edcdd18a4ef8df16e6bb7e.md | 2 +- .../66edcd49e73385dd4df54ac7.md | 60 +-- .../67358be1c7903489c0a7db78.md | 2 +- .../66edc3ab8c6413c344f401bf.md | 231 +++++------ .../66edcd0ecb4b25dc64a34804.md | 44 +- .../66edd3011f18f4ee1bd9d28b.md | 2 +- .../66edc31c44f1b9c1d5c5ebca.md | 80 ++-- .../66edc25ae5ea80bf6f785552.md | 76 ++-- .../66edd3f9bef926f129990425.md | 8 +- .../quiz-nano/66f1b03b922a53cb231e1c0d.md | 26 +- .../66f1a2009e65c9a40a26d51e.md | 8 +- .../66f1a417757b6ca4eecd89d6.md | 4 +- .../66edd43cded6bff30944b676.md | 14 +- .../66f1af82732957c895f0b21a.md | 10 +- .../66ed9034f45ce3ece4053ebd.md | 266 +++++++----- .../66ed903cf45ce3ece4053ebe.md | 4 +- .../66ed9043f45ce3ece4053ebf.md | 313 +++----------- .../quiz-testing/66f1aeffc5774ac692112a7e.md | 122 +++--- .../66f1ae758b77cfc3e4da6151.md | 4 +- .../66f1adcf97e3e4c1bd89ebf5.md | 4 +- .../6723d35bb07d1bd220d0f28d.md | 2 +- .../671a887a7e62c75e9ab1ee4a.md | 4 +- .../671a87e6dcef5b5bd765e5ed.md | 2 +- .../671a955b74ab5588735800d1.md | 2 +- .../671a88d636cebc5fbd407b78.md | 2 +- .../671a90c1cf517678b130419e.md | 12 +- .../671a940c69cdee833d4cc312.md | 2 +- .../671a99394bedfb9a5bc687c4.md | 50 ++- .../671a967424a00e8c6561b182.md | 8 +- .../671a907bad4538752765f2ff.md | 20 +- .../671a8f8350c20a7439015c98.md | 2 +- .../review-css/671a9a0a140c2b9d6a75629f.md | 10 +- .../671a892927fdba60db05edfe.md | 3 +- .../6723cc7a8e7aa3b9befd4bac.md | 8 +- .../6723ce555ff2dfc0cc04b69a.md | 2 +- .../671a87a39b88245a579c2271.md | 16 +- .../6723c66f623701a3cdf72130.md | 2 +- .../6723cf27c6e9a0c3f3041385.md | 2 +- .../6723c554025f449f4f39c3f5.md | 2 +- .../6723c5b8601a40a100bb59c9.md | 59 ++- .../6723ca166fe90eb0a3146848.md | 4 +- .../6723c837cd3276aa73e6da25.md | 4 +- .../6723c463e51a2d9b747d7529.md | 18 +- .../6723c77d1a44b8a7599277dd.md | 2 +- .../6723c1946e4cd7909a836bb4.md | 2 +- .../6723be264695fb7e619fe1fa.md | 10 +- .../6723d3cfdd0717d3f1bf27e3.md | 66 +-- .../6723d0ac516099c902394e8b.md | 2 +- .../67487e141bb6a7140a352e12.md | 2 +- .../6723d1f0568292cd394d6fb6.md | 4 +- .../671a83934b61f64cefe87a61.md | 2 +- .../671a915858de057ad84c5dbd.md | 2 +- .../614796cb8086be482d60e0ac.md | 6 +- .../6148e161ecec9511941f8833.md | 10 +- .../5dfb6250eacea3f48c6300b2.md | 12 +- .../5ef9b03c81a63668521804d2.md | 2 +- .../5f07be6ef7412fbad0c5626b.md | 4 +- .../66a8290a27c2c625e2355042.md | 2 +- .../66a83601cd819e37f0dccd14.md | 19 +- .../66a83bdcf425e7446900b7c4.md | 4 +- .../66a83e5e491625454b6f62c3.md | 2 +- .../66a83fec026a7a4631e084d2.md | 4 +- .../66a84111965a0c46df6bbd0a.md | 18 +- .../66a930b20f589b6664c51cb0.md | 4 +- .../66a93730719e1f68410cce54.md | 2 +- .../66a937e74920ba68ebe5e86d.md | 2 +- .../66a93bbe65a26169dbf3bc39.md | 8 +- .../66a93c95bc58e26a8fe95818.md | 10 +- .../66a9401c9d660d6bb15993e2.md | 6 +- .../66a9419e2d18476c645ce693.md | 12 +- .../66a94ea5df66236ebed260e8.md | 4 +- .../66a9521bc70162712caf118d.md | 16 +- .../66a954b2bcddba72076c1857.md | 18 +- .../66a9577022877d72d8f43b4f.md | 2 +- .../66a95d0eff8168747805f1f3.md | 20 +- .../66a96127422411756204bc1b.md | 18 +- .../66a962954f4e0d76223b37ed.md | 30 +- .../66a9689b1bf24b7750898a1b.md | 14 +- .../66a969951120be7818d8ee49.md | 10 +- .../66a96b01f33ef178dfca9e42.md | 2 +- .../66a972137acd1179fa3fe8a0.md | 10 +- .../66a975c259525b7bc2d5c776.md | 8 +- .../66a97ca8c4cbae7d0bb6e0ad.md | 10 +- .../66a97f40ddd40d7deb0618b7.md | 2 +- .../66a9824ac5d9f77ec304969f.md | 9 +- .../66a9843525e9fa8046d709b7.md | 2 +- .../67116d7584d0b469b14579c3.md | 2 +- .../672110bda073669bcc2302e6.md | 2 +- .../67213641373a23696b74424b.md | 2 +- .../674728eda5829d7b4c360643.md | 2 +- .../675309b2795c2a9ae03b8812.md | 4 +- .../67353950c86fe2dfd84bc2f3.md | 2 +- .../673543d867b44ac7580610a2.md | 2 +- .../66fbcf750a62784cf11f5630.md | 2 +- .../60fab8367d35de04e5cb7929.md | 2 +- .../6537e0be715fcb57d31ba8c3.md | 4 - .../6740495ba48aa94e5667b436.md | 2 +- .../674ef11f75254548672d998c.md | 22 +- .../674ef2d357676e50e4691658.md | 18 +- .../674ef2d357676e50e4691659.md | 68 ++-- .../674ef2d357676e50e469165a.md | 15 +- .../674ef2d357676e50e469165b.md | 28 +- .../674ef2d357676e50e469165c.md | 47 ++- .../674ef2d357676e50e469165d.md | 36 +- .../66e2df8c5676fe51cead8ec8.md | 2 +- .../66e2e5d890ac8a54c9d703bd.md | 2 +- .../66e2e99caa0cb3570f4822b4.md | 2 +- .../66e2eab8a5638f57b637b7cc.md | 2 +- .../66e2edb23013ca596f8d9568.md | 4 +- .../66e2f376df6f315ee81de81a.md | 4 +- .../63effe558c87a70e7072e447.md | 2 +- .../671fa47e415d88263d349a10.md | 2 +- 1085 files changed, 49225 insertions(+), 12025 deletions(-) create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f8ead39fe2804c782c8c9.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f90882f640e05f78fa901.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f90f45518530670ca5114.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f913a9584e206b4d205b9.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f91aca4fe09070619755f.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f91ef11ade10743700257.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f923709a40d07976ad2a0.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f927e948d3d07d594fb56.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f92d0be465d082912f34d.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f93114e9f0c08773806ac.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f952a8fb67309ad8be057.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f95eae1285f0a1e2c8e3b.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f991400370c0a848a57d6.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f999abaab350ad20314d4.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f99d60aabe70b1148f438.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9a5ccada890b7d7aaf97.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9aa911c1110bc1c41407.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9b142ee15b0c2b8080a9.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9b506ea2690c6c22ef7e.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9b8ad0f6760cb1d27753.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9d50ede84f0dfa1c300f.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9de774ab730e54080e0f.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9e4bd49de00e92692c94.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9e9e5478850ed27b060a.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9eee05eb8a0f34c3ba47.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9f301c904f0f8a145655.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9f72f14a710fc809c44a.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9fa9ef07411013cd1554.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa04029767410649850c3.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa099289c8f10bf926f09.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa6108ccfa512294d65f9.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa65b8e588b12735be5f2.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa6a5d3741512bcd56293.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa6e7b1f9bf1301b510cd.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa72c7c16cf135356bb5b.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa77172d9fc13a8336a30.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa7bace7ad913e51a7c45.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa7e75aa0191419f18b0c.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa8471227de1467898c0a.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fabe959e88415f6474313.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fac4406da40165a058179.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fac9a74c9b116c4ce68b3.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677face08ffbd71725b0add1.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fad49d2b623178319ccc9.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677faf6117b76b18c736b49c.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fb005be2dc618f664f9e2.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fb20891a92f19d2c5e7a4.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fb3e018bb121af7f62359.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fb67a87c2551cd6f93933.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fb90a1fd8951df9eb7761.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fba35d6f3031e9859dbff.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fbb832baa361f969be478.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fbd0d62536020653318c9.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fdf7b6032a62399fd1adc.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fe14e4f849324a45d5699.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fe3d1994371259f42548b.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fe67ccc6a2726782e274d.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fe7df617f30274e99a680.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677fe8d2af2bd0280ec7b0aa.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677feba621dd1e2924210526.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677feff132d56d2a40d6c4f1.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677ff1a16e3fa72b444e7461.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/677ff5788ac0ab2c3590249d.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6780cac5e13b5230d0d090d5.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6780ce2579aae4325ae0bf3c.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6780d10bba9c6133455f04c3.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6780d4cab106dd347fc30047.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6780d70ddcbe4a352b2c896b.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6780d81f2e367f35ebfc2130.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6780da8d4fe83a36edf1bee4.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6780e2447b47203831df9580.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67810e6675bb473b185339cc.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67810fc466ce3e3bc3eaaa8d.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678111b015a0413cf5ff5f91.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678115abb22ae13dffd55444.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6781174efbccb43ebf078536.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67811888485caf3f88c6db0a.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67824be088281c44ea6fd142.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67824d4d310ce645e59f19ea.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67824ee5e84e0d46eee32524.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678253507b3b1c487847713d.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6782554cf57c9e4956126827.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678257d9d12a574a3869314a.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678258a9a2bf814ae74e5418.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67825a2b3d567c4b90ae330d.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6784c41edae95d51056f51d4.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6784c4489e0292512b524f4e.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6784c74702a2ac52841677e6.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6784c9924dda4553c171442e.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6784cc760a89e854dc55e4d2.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6784cde0b4978d55aa3b69d8.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6784d1500f0a9757484f4c05.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6784d416a96a5858055ed288.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678507620156985b70c81f9f.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678508c63fb94a5c43ad8bd2.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67850aaa7a0e065d089322fb.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67850d82396cc05e32854374.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67850ffc432b605f3d7d7187.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6785120bd970cb5fff50866e.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678512e54c6e2e60c3ee1eff.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678514dc7a9a57619631abd8.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6785175ebbf89262b90a8a49.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678519c0009c0864277dbfcc.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678550a60e946b666aaa6de9.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6785520139b856671a3ca311.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678553a759feaa680cf381ab.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678554d17334f068f48856da.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6785562a8d1e2469f0e4adfd.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6785570d52b6016ae90cac76.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678558730bb1c36b924b8b4c.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678559c204808d6c6706556c.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678617cb0ad89b6f9bfe601e.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678619d1854f1a705b0fd76e.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67861d7d58b8a871619c146a.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67861f274572b9727bc11ee6.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67862358aa138073c5e91b9c.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67862a06733c0575a524cc02.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67862bdc2cbf3276d7599515.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67862d7c5a3e1877d43bdd50.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67863e4b91b5617a6a7dedb1.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678640bb149d137b27346d9e.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/678641e4a1acd27bba24cd24.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67864288ddcab97c35fa8955.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6786435171664b7cb1724644.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/67900eeff58f3aba1b5267b0.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6794acd2567757780af6a69d.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6794aeb63a22827b8b29fb52.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6794b0a616662d7d514a689f.md create mode 100644 curriculum/challenges/korean/24-b1-english-for-developers/learn-how-to-use-conditionals/6794b2b7175c5380161ba8c5.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f8ead39fe2804c782c8c9.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f90882f640e05f78fa901.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f90f45518530670ca5114.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f913a9584e206b4d205b9.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f91aca4fe09070619755f.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f91ef11ade10743700257.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f923709a40d07976ad2a0.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f927e948d3d07d594fb56.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f92d0be465d082912f34d.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f93114e9f0c08773806ac.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f952a8fb67309ad8be057.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f95eae1285f0a1e2c8e3b.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f991400370c0a848a57d6.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f999abaab350ad20314d4.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f99d60aabe70b1148f438.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9a5ccada890b7d7aaf97.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9aa911c1110bc1c41407.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9b142ee15b0c2b8080a9.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9b506ea2690c6c22ef7e.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9b8ad0f6760cb1d27753.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9d50ede84f0dfa1c300f.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9de774ab730e54080e0f.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9e4bd49de00e92692c94.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9e9e5478850ed27b060a.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9eee05eb8a0f34c3ba47.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9f301c904f0f8a145655.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9f72f14a710fc809c44a.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677f9fa9ef07411013cd1554.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa04029767410649850c3.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa099289c8f10bf926f09.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa6108ccfa512294d65f9.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa65b8e588b12735be5f2.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa6a5d3741512bcd56293.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa6e7b1f9bf1301b510cd.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa72c7c16cf135356bb5b.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa77172d9fc13a8336a30.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa7bace7ad913e51a7c45.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa7e75aa0191419f18b0c.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fa8471227de1467898c0a.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fabe959e88415f6474313.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fac4406da40165a058179.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fac9a74c9b116c4ce68b3.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677face08ffbd71725b0add1.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fad49d2b623178319ccc9.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677faf6117b76b18c736b49c.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fb005be2dc618f664f9e2.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fb20891a92f19d2c5e7a4.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fb3e018bb121af7f62359.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fb67a87c2551cd6f93933.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fb90a1fd8951df9eb7761.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fba35d6f3031e9859dbff.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fbb832baa361f969be478.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fbd0d62536020653318c9.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fdf7b6032a62399fd1adc.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fe14e4f849324a45d5699.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fe3d1994371259f42548b.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fe67ccc6a2726782e274d.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fe7df617f30274e99a680.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677fe8d2af2bd0280ec7b0aa.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677feba621dd1e2924210526.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677feff132d56d2a40d6c4f1.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677ff1a16e3fa72b444e7461.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/677ff5788ac0ab2c3590249d.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6780cac5e13b5230d0d090d5.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6780ce2579aae4325ae0bf3c.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6780d10bba9c6133455f04c3.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6780d4cab106dd347fc30047.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6780d70ddcbe4a352b2c896b.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6780d81f2e367f35ebfc2130.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6780da8d4fe83a36edf1bee4.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6780e2447b47203831df9580.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67810e6675bb473b185339cc.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67810fc466ce3e3bc3eaaa8d.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678111b015a0413cf5ff5f91.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678115abb22ae13dffd55444.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6781174efbccb43ebf078536.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67811888485caf3f88c6db0a.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67824be088281c44ea6fd142.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67824d4d310ce645e59f19ea.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67824ee5e84e0d46eee32524.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678253507b3b1c487847713d.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6782554cf57c9e4956126827.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678257d9d12a574a3869314a.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678258a9a2bf814ae74e5418.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67825a2b3d567c4b90ae330d.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6784c41edae95d51056f51d4.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6784c4489e0292512b524f4e.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6784c74702a2ac52841677e6.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6784c9924dda4553c171442e.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6784cc760a89e854dc55e4d2.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6784cde0b4978d55aa3b69d8.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6784d1500f0a9757484f4c05.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6784d416a96a5858055ed288.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678507620156985b70c81f9f.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678508c63fb94a5c43ad8bd2.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67850aaa7a0e065d089322fb.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67850d82396cc05e32854374.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67850ffc432b605f3d7d7187.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6785120bd970cb5fff50866e.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678512e54c6e2e60c3ee1eff.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678514dc7a9a57619631abd8.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6785175ebbf89262b90a8a49.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678519c0009c0864277dbfcc.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678550a60e946b666aaa6de9.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6785520139b856671a3ca311.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678553a759feaa680cf381ab.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678554d17334f068f48856da.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6785562a8d1e2469f0e4adfd.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6785570d52b6016ae90cac76.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678558730bb1c36b924b8b4c.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678559c204808d6c6706556c.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678617cb0ad89b6f9bfe601e.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678619d1854f1a705b0fd76e.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67861d7d58b8a871619c146a.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67861f274572b9727bc11ee6.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67862358aa138073c5e91b9c.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67862a06733c0575a524cc02.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67862bdc2cbf3276d7599515.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67862d7c5a3e1877d43bdd50.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67863e4b91b5617a6a7dedb1.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678640bb149d137b27346d9e.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/678641e4a1acd27bba24cd24.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67864288ddcab97c35fa8955.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6786435171664b7cb1724644.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/67900eeff58f3aba1b5267b0.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6794acd2567757780af6a69d.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6794aeb63a22827b8b29fb52.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6794b0a616662d7d514a689f.md create mode 100644 curriculum/challenges/portuguese/24-b1-english-for-developers/learn-how-to-use-conditionals/6794b2b7175c5380161ba8c5.md diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-recursion-by-solving-the-tower-of-hanoi-puzzle/64df45a3ad4f8719e5355244.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-recursion-by-solving-the-tower-of-hanoi-puzzle/64df45a3ad4f8719e5355244.md index 53d1bd4363..89bf636eea 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-recursion-by-solving-the-tower-of-hanoi-puzzle/64df45a3ad4f8719e5355244.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-recursion-by-solving-the-tower-of-hanoi-puzzle/64df45a3ad4f8719e5355244.md @@ -16,7 +16,42 @@ For now, each recursive call prints the `rods` dictionary without performing any You should remove the last element from the `rods[source]` list and append it to the `rods[target]` list before the `print` call. ```js -({ test: () => assert.match(code, /move\(\s*n\s*-\s*1\s*,\s*source\s*,\s*auxiliary\s*,\s*target\s*\)\s+rods\s*\[\s*target\s*\]\s*\.append\(\s*rods\s*\[\s*source\s*\]\s*\.pop\(\s*\)\s*\)/) }) +({ test: () => assert.isTrue(runPython(` +_log = [] +def capture_print(*args): + _log.append(repr(args)) + +old_print = print +print = capture_print + +old_rods = rods +rods2 = { + 'A': list(range(5, 0, -1)), + 'B': [], + 'C': [] +} +rods = rods2 + +move(5, 'A', 'B', 'C') +rods = old_rods +print = old_print + +_expected_prints = [ +r"({'A': [5, 4, 3, 2], 'B': [], 'C': [1]}, '\\n')", +r"({'A': [5, 4, 3], 'B': [], 'C': [1, 2]}, '\\n')", +r"({'A': [5, 4], 'B': [], 'C': [1, 2, 3]}, '\\n')", +r"({'A': [5], 'B': [], 'C': [1, 2, 3, 4]}, '\\n')", +r"({'A': [], 'B': [], 'C': [1, 2, 3, 4, 5]}, '\\n')", +] + +for args in _log: + if not _expected_prints: + break + if args == _expected_prints[0]: + _expected_prints.pop(0) + +not rods2['A'] and rods2['C'] == list(range(1, 6)) and not _expected_prints +`))}) ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md index 3b8138f8f9..f0aeaf9acb 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md @@ -46,7 +46,7 @@ assert( ); ``` -你的 `h1` 元素的文本應該是 “CatPhotoApp”。 你可能忽略了文本或有拼寫錯誤。 +Your `h1` element's text should be `CatPhotoApp`. 你可能忽略了文本或有拼寫錯誤。 ```js assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp'); @@ -64,7 +64,7 @@ assert(document.querySelector('h2')); assert(code.match(/<\/h2\>/)); ``` -你的 `h2` 元素中的文本應該是 “Cat Photos”。 僅將文本 `Cat Photos` 放在開始和結束 `h2` 標籤之間。 +Your `h2` element's text should be `Cat Photos`. 僅將文本 `Cat Photos` 放在開始和結束 `h2` 標籤之間。 ```js assert(document.querySelector('h2').innerText.toLowerCase() === 'cat photos'); diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md index ea1c38bc3d..5c5ea6a9dd 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md @@ -20,37 +20,34 @@ dashedName: step-24 在 `` 結束標籤之後應該有一個 `img` 元素。 ```js -assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeName, 'IMG'); +assert.equal(document.querySelectorAll('section')[1].querySelector('ul').nextElementSibling?.nodeName, 'IMG'); ``` 新圖像沒有 `alt` 屬性。 請檢查在開始標籤的名稱後面要有一個空格，且/或所有的屬性名稱前面也要有一個空格。 ```js -assert.isTrue(document.querySelectorAll('section')?.[1]?.lastElementChild?.hasAttribute('alt')); +assert.isTrue(document.querySelectorAll('section')[1].querySelector('ul').nextElementSibling?.hasAttribute('alt')); ``` 新圖像的 `alt` 值應爲 `A slice of lasagna on a plate.`。確保將 `alt` 屬性的值放在引號中。 ```js -assert( - document.querySelectorAll('section')?.[1] - ?.lastElementChild?.getAttribute('alt') - .replace(/\s+/g, ' ') - .match(/^A slice of lasagna on a plate\.?$/i) +assert.match( + document.querySelectorAll('section')[1].querySelector('ul').nextElementSibling?.getAttribute('alt')?.replace(/\s+/g, ' '), /^A slice of lasagna on a plate\.?$/i ); ``` 新圖像沒有 `src` 屬性。 請檢查確認在開始標籤的名稱後面要有一個空格，且所有的屬性名稱前面也要有一個空格。 ```js -assert.isTrue(document.querySelectorAll('section')?.[1]?.lastElementChild?.hasAttribute('src')); +assert.isTrue(document.querySelectorAll('section')[1].querySelector('ul').nextElementSibling?.hasAttribute('src')); ``` 新圖像的 `src` 值應爲 `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`。 確保將 `src` 屬性的值放在引號中。 ```js assert.strictEqual( - document.querySelectorAll('section')?.[1]?.lastElementChild?.getAttribute('src'), + document.querySelectorAll('section')[1].querySelector('ul').nextElementSibling?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' ); ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md index eb242460bb..1e5f2ee1cf 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md @@ -49,7 +49,7 @@ assert.equal(document.querySelector('fieldset:nth-child(3) + label > input + a') ```js const nestedAnchor = document.querySelector('fieldset:nth-child(3) + label > input + a')?.textContent; -const innerContent = nestedAnchor.innerHTML; +const innerContent = nestedAnchor?.innerHTML; assert.isNotTrue(/^\s+|\s+$/.test(innerContent)); ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md index a5f79dbd47..ef67f5ad13 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md @@ -147,10 +147,6 @@ input[type="file"] { padding: 1px 2px; } -.inline{ - display: inline; -} - --fcc-editable-region-- --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/build-a-palindrome-checker.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/build-a-palindrome-checker.md index cc5b840185..9280bc3f10 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/build-a-palindrome-checker.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/build-a-palindrome-checker.md @@ -19,20 +19,20 @@ dashedName: build-a-palindrome-checker 1. You should have an `input` element with an `id` of `"text-input"`. 1. You should have a `button` element with an `id` of `"check-btn"`. 1. You should have a `div`, `span` or `p` element with an `id` of `"result"`. -1. When you click on the `#check-btn` element without entering a value into the `#text-input` element, an alert should appear with the text `"Please input a value"`. -1. When the `#text-input` element only contains the letter `A` and the `#check-btn` element is clicked, the `#result` element should contain the text `"A is a palindrome"`. -1. When the `#text-input` element contains the text `eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `"eye is a palindrome"`. -1. When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `"_eye is a palindrome"`. -1. When the `#text-input` element contains the text `race car` and the `#check-btn` element is clicked, the `#result` element should contain the text `"race car is a palindrome"`. -1. When the `#text-input` element contains the text `not a palindrome` and the `#check-btn` element is clicked, the `#result` element should contain the text `"not a palindrome is not a palindrome"`. -1. When the `#text-input` element contains the text `A man, a plan, a canal. Panama` and the `#check-btn` element is clicked, the `#result` element should contain the text `"A man, a plan, a canal. Panama is a palindrome"`. -1. When the `#text-input` element contains the text `never odd or even` and the `#check-btn` element is clicked, the `#result` element should contain the text `"never odd or even is a palindrome"`. -1. When the `#text-input` element contains the text `nope` and the `#check-btn` element is clicked, the `#result` element should contain the text `"nope is not a palindrome"`. -1. When the `#text-input` element contains the text `almostomla` and the `#check-btn` element is clicked, the `#result` element should contain the text `"almostomla is not a palindrome"`. -1. When the `#text-input` element contains the text `My age is 0, 0 si ega ym.` and the `#check-btn` element is clicked, the `#result` element should contain the text `"My age is 0, 0 si ega ym. is a palindrome"`. -1. When the `#text-input` element contains the text `1 eye for of 1 eye.` and the `#check-btn` element is clicked, the `#result` element should contain the text `"1 eye for of 1 eye. is not a palindrome"`. -1. When the `#text-input` element contains the text `0_0 (: /-\ :) 0-0` and the `#check-btn` element is clicked, the `#result` element should contain the text `"0_0 (: /-\ :) 0-0 is a palindrome"`. -1. When the `#text-input` element contains the text `five|\_/|four` and the `#check-btn` element is clicked, the `#result` element should contain the text `"five|\_/|four is not a palindrome"`. +1. When you click on the `#check-btn` element without entering a value into the `#text-input` element, an alert should appear with the text `Please input a value`. +1. When the `#text-input` element only contains the letter `A` and the `#check-btn` element is clicked, the `#result` element should contain the text `A is a palindrome`. +1. When the `#text-input` element contains the text `eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `eye is a palindrome`. +1. When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `_eye is a palindrome`. +1. When the `#text-input` element contains the text `race car` and the `#check-btn` element is clicked, the `#result` element should contain the text `race car is a palindrome`. +1. When the `#text-input` element contains the text `not a palindrome` and the `#check-btn` element is clicked, the `#result` element should contain the text `not a palindrome is not a palindrome`. +1. When the `#text-input` element contains the text `A man, a plan, a canal. Panama` and the `#check-btn` element is clicked, the `#result` element should contain the text `A man, a plan, a canal. Panama is a palindrome`. +1. When the `#text-input` element contains the text `never odd or even` and the `#check-btn` element is clicked, the `#result` element should contain the text `never odd or even is a palindrome`. +1. When the `#text-input` element contains the text `nope` and the `#check-btn` element is clicked, the `#result` element should contain the text `nope is not a palindrome`. +1. When the `#text-input` element contains the text `almostomla` and the `#check-btn` element is clicked, the `#result` element should contain the text `almostomla is not a palindrome`. +1. When the `#text-input` element contains the text `My age is 0, 0 si ega ym.` and the `#check-btn` element is clicked, the `#result` element should contain the text `My age is 0, 0 si ega ym. is a palindrome`. +1. When the `#text-input` element contains the text `1 eye for of 1 eye.` and the `#check-btn` element is clicked, the `#result` element should contain the text `1 eye for of 1 eye. is not a palindrome`. +1. When the `#text-input` element contains the text `0_0 (: /-\ :) 0-0` and the `#check-btn` element is clicked, the `#result` element should contain the text `0_0 (: /-\ :) 0-0 is a palindrome`. +1. When the `#text-input` element contains the text `five|\_/|four` and the `#check-btn` element is clicked, the `#result` element should contain the text `five|\_/|four is not a palindrome`. 完成用戶需求並通過下面的所有測試來完成這個項目。 賦予它你的個人風格。 祝你編碼愉快！ @@ -52,14 +52,14 @@ const el = document.getElementById('check-btn'); assert.strictEqual(el?.nodeName?.toLowerCase(), 'button'); ``` -你應該有一個 `id` 爲 `result` 的 `div`、`span` 或 `p` 元素。 +You should have a `div`, `span`, or `p` element with an `id` of `"result"`. ```js const el = document.getElementById('result'); assert(['div', 'span', 'p'].includes(el?.nodeName?.toLowerCase())); ``` -當你點擊 `#check-btn` 元素但沒有給 `#text-input` 元素輸入一個值時，會出現提示 `"Please input a value"`。 +When you click on the `#check-btn` element without entering a value into the `#text-input` element, an alert should appear with the text `Please input a value`. ```js const inputEl = document.getElementById('text-input'); @@ -73,7 +73,7 @@ checkBtn.click(); assert.strictEqual(alertMessage?.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'please input a value'); ``` -當 `#text-input` 元素只包含字母 `A`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"A is a palindrome"`。 +When the `#text-input` element only contains the letter `A` and the `#check-btn` element is clicked, the `#result` element should contain the text `A is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -86,7 +86,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'a is a palindrome'); ``` -當 `#text-input` 元素包含文本 `eye`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"eye is a palindrome"`。 +When the `#text-input` element contains the text `eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `eye is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -99,7 +99,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'eye is a palindrome'); ``` -當 `#text-input` 元素包含文本 `_eye`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"_eye is a palindrome"`。 +When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `_eye is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -112,7 +112,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), '_eye is a palindrome'); ``` -當 `#text-input` 元素包含文本 `race car`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"race car is a palindrome"`。 +When the `#text-input` element contains the text `race car` and the `#check-btn` element is clicked, the `#result` element should contain the text `race car is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -125,7 +125,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'race car is a palindrome'); ``` -當 `#text-input` 元素包含文本 `not a palindrome`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"not a palindrome is not a palindrome"`。 +When the `#text-input` element contains the text `not a palindrome` and the `#check-btn` element is clicked, the `#result` element should contain the text `not a palindrome is not a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -138,7 +138,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'not a palindrome is not a palindrome'); ``` -When the `#text-input` element contains the text `A man, a plan, a canal. Panama` and the `#check-btn` element is clicked, the `#result` element should contain the text `"A man, a plan, a canal. Panama is a palindrome"`. +When the `#text-input` element contains the text `A man, a plan, a canal. Panama` and the `#check-btn` element is clicked, the `#result` element should contain the text `A man, a plan, a canal. Panama is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -151,7 +151,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'a man, a plan, a canal. panama is a palindrome'); ``` -當 `#text-input` 元素包含文本 `never odd or even`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"never odd or even is a palindrome"`。 +When the `#text-input` element contains the text `never odd or even` and the `#check-btn` element is clicked, the `#result` element should contain the text `never odd or even is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -164,7 +164,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'never odd or even is a palindrome'); ``` -當 `#text-input` 元素包含文本 `nope`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"nope is not a palindrome"`。 +When the `#text-input` element contains the text `nope` and the `#check-btn` element is clicked, the `#result` element should contain the text `nope is not a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -177,7 +177,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'nope is not a palindrome'); ``` -當 `#text-input` 元素包含文本 `almostomla`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"almostomla is not a palindrome"`。 +When the `#text-input` element contains the text `almostomla` and the `#check-btn` element is clicked, the `#result` element should contain the text `almostomla is not a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -190,7 +190,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'almostomla is not a palindrome'); ``` -當 `#text-input` 元素包含文本 `My age is 0, 0 si ega ym.`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"My age is 0, 0 si ega ym. is a palindrome"`。 +When the `#text-input` element contains the text `My age is 0, 0 si ega ym.` and the `#check-btn` element is clicked, the `#result` element should contain the text `My age is 0, 0 si ega ym. is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -203,7 +203,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'my age is 0, 0 si ega ym. is a palindrome'); ``` -When the `#text-input` element contains the text `1 eye for of 1 eye.` and the `#check-btn` element is clicked, the `#result` element should contain the text `"1 eye for of 1 eye. is not a palindrome"`. +When the `#text-input` element contains the text `1 eye for of 1 eye.` and the `#check-btn` element is clicked, the `#result` element should contain the text `1 eye for of 1 eye. is not a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -216,7 +216,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), '1 eye for of 1 eye. is not a palindrome'); ``` -當 `#text-input` 元素包含文本 `0_0 (: /-\ :) 0-0`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"0_0 (: /-\ :) 0-0 is a palindrome"`。 +When the `#text-input` element contains the text `0_0 (: /-\ :) 0-0` and the `#check-btn` element is clicked, the `#result` element should contain the text `0_0 (: /-\ :) 0-0 is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -229,7 +229,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), '0_0 (: /-\ :) 0-0 is a palindrome'); ``` -當 `#text-input` 元素包含文本 `five|\_/|four`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"five|\_/|four is not a palindrome"`。 +When the `#text-input` element contains the text `five|\_/|four` and the `#check-btn` element is clicked, the `#result` element should contain the text `five|\_/|four is not a palindrome`. ```js const inputEl = document.getElementById('text-input'); diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md index cdc950cd11..1ba18cd85e 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -11,7 +11,7 @@ dashedName: task-8 Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. 舉個例子： - `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to form a question. `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. # --questions-- diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md index 0d608ef168..1948771cef 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -9,7 +9,7 @@ dashedName: task-60 # --description-- -Lisnte to the audio and complete the sentence. +Listen to the audio and complete the sentence. # --fillInTheBlank-- diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661918b4f8dc067669326ac6.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661918b4f8dc067669326ac6.md index 8d98de0519..15be22ba7e 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661918b4f8dc067669326ac6.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661918b4f8dc067669326ac6.md @@ -9,7 +9,7 @@ dashedName: task-21 # --description-- -`Remote work` means doing your job from home or another location outside of the office. Instead of going to a workplace, you use computers and the internet to do you tasks. You talk to your colleagues through emails, video calls, and messages. `Remote work` gives flexibility and allows people to balance work and home life. +`Remote work` means doing your job from home or another location outside of the office. Instead of going to a workplace, you use computers and the internet to do your tasks. You talk to your colleagues through emails, video calls, and messages. `Remote work` gives flexibility and allows people to balance work and home life. Listen and fill in the blank. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a74152da45e881db4f54dc.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a74152da45e881db4f54dc.md index fcdcc7c6a6..9e96959892 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a74152da45e881db4f54dc.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a74152da45e881db4f54dc.md @@ -9,7 +9,7 @@ dashedName: task-117 # --description-- -`Around the world` means in many different places across the globe. For example, `This a game is popular around the world`, means people in many countries enjoy playing it. +`Around the world` means in many different places across the globe. For example, `This game is popular around the world`, means people in many countries enjoy playing it. `Come together` means to join or meet to do something as a group. For example, `people come together to clean up the park every week`, means they're working as a team to make the park cleaner. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a7957981392ed32523e628.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a7957981392ed32523e628.md index 0e9be11e00..d529b1cebc 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a7957981392ed32523e628.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a7957981392ed32523e628.md @@ -9,7 +9,7 @@ dashedName: task-138 # --description-- -`To grow to appreciate` means you start liking something more as you learn about it. For example, `Kids grow to appreciate vegetables with time` means they might not like them at first, but after some timethey start to like them more. +`To grow to appreciate` means you start liking something more as you learn about it. For example, `Kids grow to appreciate vegetables with time` means they might not like them at first, but after some time, they start to like them more. # --fillInTheBlank-- diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bbbe6d57609104b152625.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bbbe6d57609104b152625.md index 6c9e4ed424..1be32f19a2 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bbbe6d57609104b152625.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bbbe6d57609104b152625.md @@ -11,7 +11,7 @@ dashedName: task-5 Bob's statement uses the past continuous tense `I was checking` to describe an action that was ongoing in the past. -You can create sentences in the past continuous by combining the ver to be in the past `was` or `were` + `verb + ing`. +You can create sentences in the past continuous by combining the verb to be in the past `was` or `were` + `verb + ing`. He also uses the modal verb `should` to suggest a course of action. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e12834045640e90e58bd.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e12834045640e90e58bd.md index 08536eef2d..8a385e88a3 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e12834045640e90e58bd.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e12834045640e90e58bd.md @@ -76,7 +76,7 @@ It suggests that the projects will change and develop over time, affecting the g "startTime": 1, "finishTime": 6.26, "dialogue": { - "text": "Also, I would advise that we regularly review and update these guidelines as our projects involve.", + "text": "Also, I would advise that we regularly review and update these guidelines as our projects evolve.", "align": "center" } }, diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e758778ff8dc01567c9e7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e758778ff8dc01567c9e7.md index 5a02e03697..3f5240e7df 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e758778ff8dc01567c9e7.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e758778ff8dc01567c9e7.md @@ -9,7 +9,7 @@ dashedName: task-27 # --description-- -Remember, to form questions in the Present Perfect Tense, the sentence structure must be rearranged by changing the position of the subject and the auxiliary verb `have`. The verb in its participle form (in this case, `been`) is places after the subject. For example: `How long have you been a doctor?` +Remember, to form questions in the Present Perfect Tense, the sentence structure must be rearranged by changing the position of the subject and the auxiliary verb `have`. The verb in its participle form (in this case, `been`) is placed after the subject. For example: `How long have you been a doctor?` # --questions-- diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a35f7eaaa932ab0973d0c.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a35f7eaaa932ab0973d0c.md index 1020f0b0d4..dc400b9e4d 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a35f7eaaa932ab0973d0c.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a35f7eaaa932ab0973d0c.md @@ -15,7 +15,7 @@ A `variable` is like a box where you can store information. This information can A `data type` is a classification that specifies the type of data that a `variable` can hold. Common `data types` include integers (whole numbers), floats (numbers with a decimal), strings (text), and booleans (true or false). For example, if `age = 21`, the `data type` is an integer. -A `conditional statement` is a command that tells the computer to do something only if a specific condition is true. It's like making a decision in real life based on a certain situation. Common `conditional statements` are `if-else` statements. For example, `if (temperature > 20) {console.log("It's warm outside!");}` is a `conditional statement` that executes `{console.log("It's warm outside!")` if the temperature is above 20 degrees. +A `conditional statement` is a command that tells the computer to do something only if a specific condition is true. It's like making a decision in real life based on a certain situation. Common `conditional statements` are `if-else` statements. For example, `if (temperature > 20) {console.log("It's warm outside!");}` is a `conditional statement` that executes `console.log("It's warm outside!")` if the temperature is above 20 degrees. # --fillInTheBlank-- diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3450de7c2139809fb72b.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3450de7c2139809fb72b.md index b8dcdcfff8..f4d929a522 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3450de7c2139809fb72b.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3450de7c2139809fb72b.md @@ -13,7 +13,7 @@ Please answer the question below. ## --text-- -Which stuation is an appropriate use of `no worries`? +Which situation is an appropriate use of `no worries`? ## --answers-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-mood-board/673b3d6b7ef7318eef926d5a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-mood-board/673b3d6b7ef7318eef926d5a.md index 9db0fcc7f9..1167deeaa8 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-mood-board/673b3d6b7ef7318eef926d5a.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-mood-board/673b3d6b7ef7318eef926d5a.md @@ -41,111 +41,97 @@ You can use the following images in your Mood Board if you would like: You should export a `MoodBoardItem` component. ```js -const mockedComponent = Enzyme.mount( - React.createElement(window.index.MoodBoardItem) -); -assert.lengthOf(mockedComponent.find('MoodBoardItem'), 1); +assert.isFunction(window.index.MoodBoardItem, 1); ``` Your `MoodBoardItem` component should return a `div` with a class of `mood-board-item` at its top-level element. ```js -const mockedComponent = Enzyme.mount( - React.createElement(window.index.MoodBoardItem) -); -assert.equal(mockedComponent.childAt(0).type(), 'div'); -assert.isTrue(mockedComponent.childAt(0).hasClass('mood-board-item')); +const item = document.getElementsByClassName('mood-board-item')[0]; +assert.exists(item); +assert.equal(item.tagName, 'DIV'); ``` The background color of the `.mood-board-item` element should be set to the value of `color` prop using inline styles. ```js -const mockedComponent = Enzyme.mount( - React.createElement(window.index.MoodBoardItem) -); -mockedComponent.setProps({ color: 'colorValue' }); -assert.equal( - mockedComponent.find('.mood-board-item').prop('style').backgroundColor, - 'colorValue' -); +async () => { + const container = await __helpers.prepTestComponent(window.index.MoodBoardItem, { color: "red" }); + const moodBoardItem = container.querySelector(".mood-board-item"); + assert.equal(moodBoardItem.style.backgroundColor, "red"); +} ``` Your `MoodBoardItem` component should render an `img` element with a class of `mood-board-image` and its `src` set to the value of the `image` prop. ```js -const mockedComponent = Enzyme.mount( - React.createElement(window.index.MoodBoardItem) -); -mockedComponent.setProps({ image: 'imageValue' }); -const img = mockedComponent.find('img.mood-board-image'); -assert.lengthOf(img, 1); -assert.equal(img.prop('src'), 'imageValue'); +async () => { + const container = await __helpers.prepTestComponent(window.index.MoodBoardItem, { image: "https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg" }); + const img = container.querySelector(".mood-board-image"); + assert.exists(img); + assert.equal(img.tagName, "IMG"); + assert.equal(img.src, "https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg"); +} ``` Your `MoodBoardItem` component should render an `h3` element with a class of `mood-board-text` and its text set to the value of the `description` prop. ```js -const mockedComponent = Enzyme.mount( - React.createElement(window.index.MoodBoardItem) -); -mockedComponent.setProps({ description: 'descriptionValue' }); -const h3 = mockedComponent.find('h3.mood-board-text'); -assert.lengthOf(h3, 1); -assert.equal(h3.text(), 'descriptionValue'); +async () => { + const container = await __helpers.prepTestComponent(window.index.MoodBoardItem, { description: "Carribean" }); + const text = container.querySelector(".mood-board-text"); + assert.exists(text); + assert.equal(text.tagName, "H3"); + assert.equal(text.textContent, "Carribean"); +} ``` You should export a `MoodBoard` component. ```js -const mockedComponent = Enzyme.mount( - React.createElement(window.index.MoodBoard) -); -assert.lengthOf(mockedComponent.find('MoodBoard'), 1); +assert.isFunction(window.index.MoodBoard, 1); ``` Your `MoodBoard` component should return a `div` as its top-level element. ```js -const mockedComponent = Enzyme.mount( - React.createElement(window.index.MoodBoard) -); -assert.equal(mockedComponent.childAt(0).type(), 'div'); +const root = document.getElementById('root'); +assert.equal(root.children[0].tagName, 'DIV'); ``` Your `MoodBoard` component should render an `h1` element with a class of `mood-board-heading` and the text `Destination Mood Board`. ```js -const mockedComponent = Enzyme.mount( - React.createElement(window.index.MoodBoard) -); -const h1 = mockedComponent.find('h1.mood-board-heading'); -assert.lengthOf(h1, 1); -assert.equal(h1.text(), 'Destination Mood Board'); +const heading = document.getElementsByClassName('mood-board-heading')[0]; +assert.exists(heading); +assert.equal(heading.tagName, 'H1'); +assert.equal(heading.textContent, 'Destination Mood Board'); ``` Your `MoodBoard` component should render at least three `MoodBoardItem` components, each should pass `color`, `image`, and `description` props with valid values. ```js -const mockedComponent = Enzyme.mount( - React.createElement(window.index.MoodBoard) -); -const mbItems = mockedComponent.find(window.index.MoodBoardItem); -assert.isAtLeast(mbItems.length, 3); -const propsList = mbItems.map(item => item.props()); -propsList.forEach(({ color, image, description }) => { +const moodboard = document.getElementsByClassName('mood-board')[0]; +const items = moodboard.querySelectorAll(".mood-board-item"); +assert.isAtLeast(items.length, 3); + +items.forEach((item) => { + const color = item.style.backgroundColor; + const img = item.querySelector("img"); + const text = item.querySelector("h3"); + assert.isAtLeast(color.length, 1); - assert.isAtLeast(image.length, 1); - assert.isAtLeast(description.length, 1); + assert.isAtLeast(img.src.length, 1); + assert.isAtLeast(text.textContent.length, 1); }); ``` Your `MoodBoard` component should be rendered to the page's `#root` element. ```js -const mockedComponent = Enzyme.mount( - React.createElement(window.index.MoodBoard) -); -assert.equal(mockedComponent.html(), document.getElementById('root').innerHTML); +const root = document.getElementById('root'); +const moodBoard = root.getElementsByClassName('mood-board')[0]; +assert.exists(moodBoard); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-palindrome-checker/657bdc55a322aae1eac3838f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-palindrome-checker/657bdc55a322aae1eac3838f.md index 2692aaa851..c99b96028a 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-palindrome-checker/657bdc55a322aae1eac3838f.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-palindrome-checker/657bdc55a322aae1eac3838f.md @@ -19,20 +19,20 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. You should have an `input` element with an `id` of `"text-input"`. 1. You should have a `button` element with an `id` of `"check-btn"`. 1. You should have a `div`, `span` or `p` element with an `id` of `"result"`. -1. When you click on the `#check-btn` element without entering a value into the `#text-input` element, an alert should appear with the text `"Please input a value"`. -1. When the `#text-input` element only contains the letter `A` and the `#check-btn` element is clicked, the `#result` element should contain the text `"A is a palindrome"`. -1. When the `#text-input` element contains the text `eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `"eye is a palindrome"`. -1. When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `"_eye is a palindrome"`. -1. When the `#text-input` element contains the text `race car` and the `#check-btn` element is clicked, the `#result` element should contain the text `"race car is a palindrome"`. -1. When the `#text-input` element contains the text `not a palindrome` and the `#check-btn` element is clicked, the `#result` element should contain the text `"not a palindrome is not a palindrome"`. -1. When the `#text-input` element contains the text `A man, a plan, a canal. Panama` and the `#check-btn` element is clicked, the `#result` element should contain the text `"A man, a plan, a canal. Panama is a palindrome"`. -1. When the `#text-input` element contains the text `never odd or even` and the `#check-btn` element is clicked, the `#result` element should contain the text `"never odd or even is a palindrome"`. -1. When the `#text-input` element contains the text `nope` and the `#check-btn` element is clicked, the `#result` element should contain the text `"nope is not a palindrome"`. -1. When the `#text-input` element contains the text `almostomla` and the `#check-btn` element is clicked, the `#result` element should contain the text `"almostomla is not a palindrome"`. -1. When the `#text-input` element contains the text `My age is 0, 0 si ega ym.` and the `#check-btn` element is clicked, the `#result` element should contain the text `"My age is 0, 0 si ega ym. is a palindrome"`. -1. When the `#text-input` element contains the text `1 eye for of 1 eye.` and the `#check-btn` element is clicked, the `#result` element should contain the text `"1 eye for of 1 eye. is not a palindrome"`. -1. When the `#text-input` element contains the text `0_0 (: /-\ :) 0-0` and the `#check-btn` element is clicked, the `#result` element should contain the text `"0_0 (: /-\ :) 0-0 is a palindrome"`. -1. When the `#text-input` element contains the text `five|\_/|four` and the `#check-btn` element is clicked, the `#result` element should contain the text `"five|\_/|four is not a palindrome"`. +1. When you click on the `#check-btn` element without entering a value into the `#text-input` element, an alert should appear with the text `Please input a value`. +1. When the `#text-input` element only contains the letter `A` and the `#check-btn` element is clicked, the `#result` element should contain the text `A is a palindrome`. +1. When the `#text-input` element contains the text `eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `eye is a palindrome`. +1. When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `_eye is a palindrome`. +1. When the `#text-input` element contains the text `race car` and the `#check-btn` element is clicked, the `#result` element should contain the text `race car is a palindrome`. +1. When the `#text-input` element contains the text `not a palindrome` and the `#check-btn` element is clicked, the `#result` element should contain the text `not a palindrome is not a palindrome`. +1. When the `#text-input` element contains the text `A man, a plan, a canal. Panama` and the `#check-btn` element is clicked, the `#result` element should contain the text `A man, a plan, a canal. Panama is a palindrome`. +1. When the `#text-input` element contains the text `never odd or even` and the `#check-btn` element is clicked, the `#result` element should contain the text `never odd or even is a palindrome`. +1. When the `#text-input` element contains the text `nope` and the `#check-btn` element is clicked, the `#result` element should contain the text `nope is not a palindrome`. +1. When the `#text-input` element contains the text `almostomla` and the `#check-btn` element is clicked, the `#result` element should contain the text `almostomla is not a palindrome`. +1. When the `#text-input` element contains the text `My age is 0, 0 si ega ym.` and the `#check-btn` element is clicked, the `#result` element should contain the text `My age is 0, 0 si ega ym. is a palindrome`. +1. When the `#text-input` element contains the text `1 eye for of 1 eye.` and the `#check-btn` element is clicked, the `#result` element should contain the text `1 eye for of 1 eye. is not a palindrome`. +1. When the `#text-input` element contains the text `0_0 (: /-\ :) 0-0` and the `#check-btn` element is clicked, the `#result` element should contain the text `0_0 (: /-\ :) 0-0 is a palindrome`. +1. When the `#text-input` element contains the text `five|\_/|four` and the `#check-btn` element is clicked, the `#result` element should contain the text `five|\_/|four is not a palindrome`. # --hints-- @@ -50,14 +50,14 @@ const el = document.getElementById('check-btn'); assert.strictEqual(el?.nodeName?.toLowerCase(), 'button'); ``` -You should have a `div`, `span`, or `p` element with an `id` of `result`. +You should have a `div`, `span`, or `p` element with an `id` of `"result"`. ```js const el = document.getElementById('result'); assert(['div', 'span', 'p'].includes(el?.nodeName?.toLowerCase())); ``` -When you click on the `#check-btn` element without entering a value into the `#text-input` element, an alert should appear with the text `"Please input a value"`. +When you click on the `#check-btn` element without entering a value into the `#text-input` element, an alert should appear with the text `Please input a value`. ```js const inputEl = document.getElementById('text-input'); @@ -71,7 +71,7 @@ checkBtn.click(); assert.strictEqual(alertMessage?.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'please input a value'); ``` -When the `#text-input` element only contains the letter `A` and the `#check-btn` element is clicked, the `#result` element should contain the text `"A is a palindrome"`. +When the `#text-input` element only contains the letter `A` and the `#check-btn` element is clicked, the `#result` element should contain the text `A is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -84,7 +84,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'a is a palindrome'); ``` -When the `#text-input` element contains the text `eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `"eye is a palindrome"`. +When the `#text-input` element contains the text `eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `eye is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -97,7 +97,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'eye is a palindrome'); ``` -When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `"_eye is a palindrome"`. +When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `_eye is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -110,7 +110,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), '_eye is a palindrome'); ``` -When the `#text-input` element contains the text `race car` and the `#check-btn` element is clicked, the `#result` element should contain the text `"race car is a palindrome"`. +When the `#text-input` element contains the text `race car` and the `#check-btn` element is clicked, the `#result` element should contain the text `race car is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -123,7 +123,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'race car is a palindrome'); ``` -When the `#text-input` element contains the text `not a palindrome` and the `#check-btn` element is clicked, the `#result` element should contain the text `"not a palindrome is not a palindrome"`. +When the `#text-input` element contains the text `not a palindrome` and the `#check-btn` element is clicked, the `#result` element should contain the text `not a palindrome is not a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -136,7 +136,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'not a palindrome is not a palindrome'); ``` -When the `#text-input` element contains the text `A man, a plan, a canal. Panama` and the `#check-btn` element is clicked, the `#result` element should contain the text `"A man, a plan, a canal. Panama is a palindrome"`. +When the `#text-input` element contains the text `A man, a plan, a canal. Panama` and the `#check-btn` element is clicked, the `#result` element should contain the text `A man, a plan, a canal. Panama is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -149,7 +149,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'a man, a plan, a canal. panama is a palindrome'); ``` -When the `#text-input` element contains the text `never odd or even` and the `#check-btn` element is clicked, the `#result` element should contain the text `"never odd or even is a palindrome"`. +When the `#text-input` element contains the text `never odd or even` and the `#check-btn` element is clicked, the `#result` element should contain the text `never odd or even is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -162,7 +162,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'never odd or even is a palindrome'); ``` -When the `#text-input` element contains the text `nope` and the `#check-btn` element is clicked, the `#result` element should contain the text `"nope is not a palindrome"`. +When the `#text-input` element contains the text `nope` and the `#check-btn` element is clicked, the `#result` element should contain the text `nope is not a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -175,7 +175,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'nope is not a palindrome'); ``` -When the `#text-input` element contains the text `almostomla` and the `#check-btn` element is clicked, the `#result` element should contain the text `"almostomla is not a palindrome"`. +When the `#text-input` element contains the text `almostomla` and the `#check-btn` element is clicked, the `#result` element should contain the text `almostomla is not a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -188,7 +188,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'almostomla is not a palindrome'); ``` -When the `#text-input` element contains the text `My age is 0, 0 si ega ym.` and the `#check-btn` element is clicked, the `#result` element should contain the text `"My age is 0, 0 si ega ym. is a palindrome"`. +When the `#text-input` element contains the text `My age is 0, 0 si ega ym.` and the `#check-btn` element is clicked, the `#result` element should contain the text `My age is 0, 0 si ega ym. is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -201,7 +201,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'my age is 0, 0 si ega ym. is a palindrome'); ``` -When the `#text-input` element contains the text `1 eye for of 1 eye.` and the `#check-btn` element is clicked, the `#result` element should contain the text `"1 eye for of 1 eye. is not a palindrome"`. +When the `#text-input` element contains the text `1 eye for of 1 eye.` and the `#check-btn` element is clicked, the `#result` element should contain the text `1 eye for of 1 eye. is not a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -214,7 +214,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), '1 eye for of 1 eye. is not a palindrome'); ``` -When the `#text-input` element contains the text `0_0 (: /-\ :) 0-0` and the `#check-btn` element is clicked, the `#result` element should contain the text `"0_0 (: /-\ :) 0-0 is a palindrome"`. +When the `#text-input` element contains the text `0_0 (: /-\ :) 0-0` and the `#check-btn` element is clicked, the `#result` element should contain the text `0_0 (: /-\ :) 0-0 is a palindrome`. ```js const inputEl = document.getElementById('text-input'); @@ -227,7 +227,7 @@ checkBtn.click(); assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), '0_0 (: /-\ :) 0-0 is a palindrome'); ``` -When the `#text-input` element contains the text `five|\_/|four` and the `#check-btn` element is clicked, the `#result` element should contain the text `"five|\_/|four is not a palindrome"`. +When the `#text-input` element contains the text `five|\_/|four` and the `#check-btn` element is clicked, the `#result` element should contain the text `five|\_/|four is not a palindrome`. ```js const inputEl = document.getElementById('text-input'); diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md index 5b11923d0d..11d4699a56 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md @@ -17,7 +17,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. The `question` key should have the value of a string representing a question. 1. The `choices` key should have the value of an array containing three strings, which are alternative answers to the question. 1. The `answer` key should have the value of a string, representing the correct answer to the question. Also, the value of `answer` should be included in the `choices` array. -1. You should have a function named `getRandomQuestion` that returns a random question object from the `questions` array. +1. You should have a function named `getRandomQuestion` that takes the `questions` array and returns a random question object from the array. 1. You should have a function named `getRandomComputerChoice` that takes the array of the available choices as a parameter, and returns a random answer to the selected question. 1. You should have a function named `getResults` that takes the selected question object and the computer choice as its parameters and returns `The computer's choice is correct!` if the answer is correct. Otherwise, it returns `The computer's choice is wrong. The correct answer is: `, where `` is the value of the correct answer to the chosen question. @@ -82,12 +82,15 @@ assert.isNotEmpty(questions); questions.forEach(({answer, choices}) => assert.oneOf(answer, choices)); ``` -You should have a function named `getRandomQuestion` that returns a random question object from the `questions` array. +You should have a function named `getRandomQuestion` that takes the `questions` array and returns a random question object from the array. ```js +const parameters = __helpers.getFunctionParams(getRandomQuestion.toString()); + assert.isFunction(getRandomQuestion); -assert.isObject(getRandomQuestion()); -assert.deepInclude(questions, getRandomQuestion(), "getRandomQuestion did not return one of the objects inside questions"); +assert.lengthOf(parameters, 1); +assert.isObject(getRandomQuestion(questions)); +assert.deepInclude(questions, getRandomQuestion(questions), "getRandomQuestion did not return one of the objects inside questions"); ``` You should have a function named `getRandomComputerChoice` that takes the array of the available choices as a parameter, and returns a random answer to the selected question. @@ -160,9 +163,9 @@ const questions = [ } ] -function getRandomQuestion() { - const randomIndex = Math.floor(Math.random() * questions.length); - return questions[randomIndex]; +function getRandomQuestion(questionList) { + const randomIndex = Math.floor(Math.random() * questionList.length); + return questionList[randomIndex]; } function getRandomComputerChoice(choices) { @@ -176,7 +179,7 @@ function getResults(obj, computerChoice) { : `The computer's choice is wrong. The correct answer is: ${obj.answer}`; } -const questionObj = getRandomQuestion(); +const questionObj = getRandomQuestion(questions); const { question, choices } = questionObj; console.log(question); diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md index dade1e5cbe..a13df432d8 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md @@ -10,6 +10,107 @@ dashedName: what-are-css-animations Watch the video lecture and answer the questions below. +# --transcript-- + +What are CSS animations, and how do they work? + +CSS animations allow you to create dynamic, visually engaging effects on web pages without the need for JavaScript or complex programming. They provide a way to smoothly transition elements between different styles over a specified duration. + +At its core, a CSS animation consists of two main components: the `@keyframes` rule and the animation property. + +The `@keyframes` rule defines the stages and styles of the animation. It specifies what styles the element should have at various points during the animation. + +Here's an example: + +```css +@keyframes slide-in { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(0); + } +} +``` + +This `@keyframes` rule, named `slide-in`, defines an animation that moves an element from left to right. The percentages represent the progress of the animation, with `0%` being the start and `100%` being the end. + +The `translateX` function in your `@keyframes` animation is controlling the horizontal position of an element as it animates into view. + +To apply this animation to an element, you use the `animation` property: + +```css +.sliding-element { + animation: slide-in 2s ease-out; +} +``` + +This applies the `slide-in` animation to the element with a duration of 2 seconds and an `ease-out` timing function. + +The `animation` property is actually a shorthand for several individual properties: + +`animation-name` which specifies the `@keyframes` rule to use. + +`animation-duration` which sets how long the animation should take to complete. + +`animation-timing-function` which defines how the animation progresses over time - such as `ease`, `linear`, `ease-in-out`. + +`animation-delay` which specifies a delay before the animation starts. + +`animation-iteration-count` which sets how many times the animation should repeat. + +`animation-direction` which determines whether the animation should play forwards, backwards, or alternate. + +`animation-fill-mode` which specifies how the element should be styled before and after the animation. + +`animation-play-state` which allows you to pause and resume the animation. + +You can use these properties individually for more precise control: + +```css +.complex-animation { + animation-name: color-change; + animation-duration: 3s; + animation-timing-function: linear; + animation-delay: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +@keyframes color-change { + 0% { + background-color: red; + } + 50% { + background-color: blue; + } + 100% { + background-color: green; + } +} +``` + +This creates an animation that continuously transitions an element's background color between red, blue, and green. + +CSS animations can be triggered by various events, such as hovering over an element: + +```css +.button { + background-color: blue; + transition: background-color 0.3s; +} + +.button:hover { + background-color: red; +} +``` + +While this example uses the `transition` property, which is simpler for basic effects, it demonstrates how CSS can create interactive, animated elements. + +It's important to note that while CSS animations are powerful, they should be used in moderation. Overuse of animations can lead to poor performance and may be distracting or problematic for users with certain accessibility needs. Always consider providing options to reduce or disable animations for users who prefer less motion. + +CSS animations offer a way to create engaging, interactive web experiences without relying on JavaScript. By understanding the principles of `@keyframes` and `animation` properties, you can bring your web designs to life in a performant and accessible manner. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-animations-and-accessibility/672cf764cf55a70433590def.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-animations-and-accessibility/672cf764cf55a70433590def.md index 7aed75cda6..7739f5d326 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-animations-and-accessibility/672cf764cf55a70433590def.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-animations-and-accessibility/672cf764cf55a70433590def.md @@ -10,6 +10,71 @@ dashedName: what-are-accessibility-concerns-around-using-animations Watch the lecture video and answer the questions below. +# --transcript-- + +What are accessibility concerns around using animations, and how can `prefers-reduced-motion` help? + +Animations can greatly enhance the visual appeal and user experience of a website. However, they can also pose significant accessibility challenges for certain users. It's crucial to understand these concerns and implement solutions to ensure your website remains accessible to all users. + +One of the primary accessibility concerns with animations is that they can cause discomfort or even physical harm to some users. People with vestibular disorders or motion sensitivity may experience dizziness, nausea, or headaches when exposed to certain types of movement on screen. + +Additionally, animations can be distracting for users with cognitive disabilities or attention disorders. Rapid flashing or strobing effects are particularly problematic. They can trigger seizures in people with photosensitive epilepsy. As a general rule, avoid any content that flashes more than three times per second. + +Another issue is that animations can make it difficult for some users to focus on or read content. This is especially true for users with low vision or reading difficulties who may struggle to track moving text or shifting layouts. + +To address these concerns, CSS provides the `prefers-reduced-motion` media query. This feature allows web developers to detect if the user has requested minimal animations or motion effects at the system level. + +Here's how you can use `prefers-reduced-motion`: + +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} +``` + +This CSS code snippet effectively disables most animations and transitions for users who have indicated a preference for reduced motion. Let's break it down: + +The `@media` query rule checks if the user prefers reduced motion. If true, it applies the enclosed styles. + +Inside the media query, we're targeting all elements (`*`) and overriding animation and transition properties. + +We set `animation-duration` and `transition-duration` to an extremely small value (`0.01ms`). This essentially turns off the animations while still allowing them to complete, which can be important for certain functionality. + +`animation-iteration-count: 1` ensures that any looping animations only play once. + +`scroll-behavior: auto` disables smooth scrolling effects. + +The `!important` declaration is used to ensure these rules take precedence over other animation styles. + +It's important to note that while this method effectively reduces motion, it's a blanket approach. For more precise control, you might want to define specific reduced-motion alternatives for your animations. + +Here's an example of a more targeted approach: + +```css +.animated-element { + transition: transform 0.3s ease-in-out; +} + +@media (prefers-reduced-motion: reduce) { + .animated-element { + transition: none; + } +} +``` + +In this case, we're only disabling the `transition` for a specific element when reduced motion is preferred. This allows you to provide alternative, less motion-intensive experiences for users who need them. + +Remember, the goal is not to completely remove all motion from your site, but to provide options that allow all users to comfortably interact with your content. Some motion can still be beneficial for usability and feedback, even for users who prefer reduced motion. + +When implementing animations, consider using them thoughtfully rather than just for decoration. Avoid large, unexpected movements and provide controls to pause, stop, or hide animations when possible. Importantly, use the `prefers-reduced-motion` query to offer a low-motion alternative, ensuring your content remains accessible and comfortable for all users, including those sensitive to motion. + +By being mindful of these accessibility concerns and utilizing tools like `prefers-reduced-motion`, you can create engaging, animated experiences that are inclusive and accessible to all users. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-common-design-tools/672aa7005c24e45bbd53b20d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-common-design-tools/672aa7005c24e45bbd53b20d.md index 4fa428aa2f..79b83733eb 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-common-design-tools/672aa7005c24e45bbd53b20d.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-common-design-tools/672aa7005c24e45bbd53b20d.md @@ -10,6 +10,46 @@ dashedName: what-are-design-briefs Watch the video lecture and answer the questions below. +# --transcript-- + +What are design briefs and how do developers work with them? + +When it comes to designing new features or applications, a good first step would be to create a design brief. + +A design brief is a document that outlines the objectives, goals, and requirements of a project. It is a roadmap that guides the design process and ensures that the final product meets the needs of the client. + +Usually the client will write the design brief and it will serve as a working draft. Sometimes, the designer might write one and consult with the client to make sure it meets their needs. + +There are a few key elements that should be included in a design brief. + +The first element is the overview of the project and business. This overview should include the company's details, mission, values, unique selling points, and products or services. + +The next key element should be to document the goals and objectives for the project. This should include the purpose of the project, and the desired outcomes. + +Examples of goals include increasing traffic to a site or increasing the number of monthly page visits by X percent. + +Another key element would be the target audience. The design brief should include information about the target demographics, interests, and needs of the audience. + +You should also include information about the competition and how the project will differentiate itself from the competition. + +Another key element would be the project scope. This should include the deliverables, timeline, and budget. The deliverables should include a list of all the items that will be produced as part of the project, such as mockups, and final designs. + +Without clearly defining project scope, things can get out of hand and go over budget. So, it's best to be as detailed as possible about what is expected to be delivered and by when. + +One of the challenging aspects about project design is the timescale and budget. It is important to be realistic about what can be achieved within the given timeframe and budget. So, having a design brief that outlines these constraints is important. + +Once all of these details have been discussed and documented, the design brief should be reviewed and approved by all stakeholders before the project begins. At that point, that is when the designers can get started with their work. + +So, what is the developer's role in all of this? The developer's role is to take the designs, understand the project requirements, and turn them into a working product. + +This involves writing code, testing, and debugging the application to ensure that it meets the requirements outlined in the design brief. + +Oftentimes, developers will work in teams where the work is split up between multiple developers. + +There will also usually be a project manager who will be responsible for coordinating the work and making sure that the project stays on track. + +So, while you might not be involved in the design and initial decision making process as a developer, it is still important to understand the design brief and how it will impact your work. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-common-design-tools/672bb619f0d4538d0528760d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-common-design-tools/672bb619f0d4538d0528760d.md index b201185a11..fcc70be234 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-common-design-tools/672bb619f0d4538d0528760d.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-common-design-tools/672bb619f0d4538d0528760d.md @@ -10,6 +10,49 @@ dashedName: what-are-some-common-tools-developers-should-know-about Watch the lecture video and answer the questions below. +# --transcript-- + +What are some common tools developers should know about that are used by designers in the industry? + +Design is the foundation of every enterprise-level web application. That's why designers and developers work closely to create user-focused interfaces that are visually appealing and functional. + +Because of this, developers should be familiar with common design tools to make the most of what designers offer. Most of these design tools excel in vector-based design and prototyping. + +Vector-based design involves creating digital art using mathematical formulas to define lines, shapes, and colors. Prototyping, on the other hand, refers to the process of creating an interactive model of a product or user interface. + +Let's talk about some common design tools developers should know about. + +Figma is one of the most common and essential design tools that developers should know. This cloud-based tool specializes in User Interface and User Experience (UI/UX) design. It enables design and development teams to collaborate from anywhere, offering built-in features such as: + +- Vector-based design +- Automatic layout +- Commenting and feedback system +- Version history +- Real-time collaboration +- Design systems, and more. + +To get started with Figma, you can use the web-based interface or download the desktop app for your computer. It has a generous free tier, so you can get a lot done without paying for the pro version. + +Sketch is another essential design tool that developers should be familiar with. Like Figma, it is vector-based and primarily used for UI/UX design. + +Sketch is popular for its intuitive interface and simplicity, making it ideal for developers who want to quickly create prototypes. It's also widely used by designers for tasks like creating UIs, icons, and web layouts. + +The main constraints with Sketch are its lack of a cloud-based interface and its availability only on macOS. + +Adobe XD is another vector-based design and prototyping tool for UI/UX design, known for its seamless integration with other Adobe apps like Photoshop, Illustrator, and After Effects. + +This integration makes workflows such as interactive prototyping and animations more efficient. + +Adobe XD is available for both Windows and MacOS and includes a cloud-based interface. For the best experience, however, you should use the app directly. + +Another design tool worth mentioning is Canva. You can use Canva to create a wide range of visual content, including posters, cover photos, presentations, short videos, and more. Its user-friendly and simple design makes it ideal for beginners. + +Additionally, Canva offers a rich library of templates, images, and design elements that make it easy to create professional-looking designs. + +Beyond these features, Canva supports web interface design and allows for collaboration with teammates. The platform is available on the web and as an Android app. + +Other popular design tools developers should know are Framer, InVision, Adobe Photoshop, Adobe Illustrator, and Miro. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md index 02c9ce264a..cedf308e7c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md @@ -90,11 +90,11 @@ What is the specific use case of the `grid-area` property? ## --answers-- -To define the layout of the grid using named areas. +To specify an area of the grid to exclude. ### --feedback-- -This property places individual grid items within specific positions or named areas. +This property places individual grid items within specific positions. --- @@ -102,7 +102,7 @@ To specify the size of grid items. ### --feedback-- -This property places individual grid items within specific positions or named areas. +This property places individual grid items within specific positions. --- @@ -114,7 +114,7 @@ To create a visual representation of the grid. ### --feedback-- -This property places individual grid items within specific positions or named areas. +This property places individual grid items within specific positions. ## --video-solution-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md index c5d6ecb6eb..aa566773b0 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md @@ -10,6 +10,95 @@ dashedName: what-is-the-purpose-of-functions-and-how-do-they-work Watch the video lecture and answer the questions below. +# --transcript-- + +What is the purpose of functions, and how do they work? + +Functions are reusable pieces of code that perform a specific task or calculate a value. Think of functions as a machine that takes some input, does some operations on it, and then produces an output. Here is an example of declaring a function: + +```js +function greet() { + console.log("Hello, Jessica!"); +} +``` + +In this example, we have declared a function called `greet`. Inside that function, we have a `console.log` that logs the message `Hello, Jessica!`. If we tried to run this code, we would not see the message appear in the console. This because we need to call the function. + +A function call, or or invocation, is when we actually use or execute the function. To call a function, you will need to reference the function name followed by a set of parentheses: + +```js +function greet() { + console.log("Hello, Jessica!"); +} + +greet(); // "Hello, Jessica!" +``` + +Now the message of `Hello, Jessica!` will be logged to the console. But what if we wanted the message to say `Hello, Nick!` or `Hello, Anna!`? We don't want to write a new function each time we greet a different user. Instead, we can create a reusable function that uses function parameters and arguments. + +Parameters act as placeholders for the values that will be passed to the function when it is called. They allow functions to accept input and work with that input. Arguments are the actual values passed to the function when it is called. Here is an updated version of the `greet` function that uses parameters and arguments: + +```js +function greet(name) { + console.log("Hello, " + name + "!"); +} + +greet("Alice"); // Hello, Alice! +greet("Nick"); // Hello, Nick! +``` + +The `name` serves as the parameter while the strings `Alice` and `Nick` serve as the arguments. Now we have a reusable function that can be used dozens of times throughout our code with different arguments. + +When a function finishes its execution, it will always return a value. By default, the return value will be `undefined`. Here is an example: + +```js +function doSomething() { + console.log("Doing something..."); +} + +let result = doSomething(); +console.log(result); // undefined +``` + +If you need your function to return a specific value, then you will need to use the `return` statement. Here is an example of using a `return` statement to return the sum of two values: + +```js +function calculateSum(num1, num2) { + return num1 + num2; +} + +console.log(calculateSum(3, 4)); // 7 +``` + +Often times you will be using the `return` statement, because you can use that value that was output from the function later on in your code. + +So far, we've been working with named functions, but you can also create what's called an anonymous function. An anonymous function is a function without a name that can be assigned to a variable like this: + +```js +const sum = function (num1, num2) { + return num1 + num2; +}; + +console.log(sum(3, 4)); // 7 +``` + +In this example, we have a `const` variable called `sum` and we are assigning it an anonymous function that returns the sum of `num1` and `num2`. We are then able to call `sum` and pass in the numbers `3` and `4` to get the result of `7`. + +Functions support default parameters, allowing you to set default values for parameters. These default values are used if the function is called without an argument for that parameter. Here's an example: + +```js +function greetings(name = "Guest") { + console.log("Hello, " + name + "!"); +} + +greetings(); // Hello, Guest! +greetings("Anna"); // Hello, Anna! +``` + +In this example, if no argument is provided for `name`, it defaults to `Guest`. + +In summary, functions allow you to write reusable and organized code. They can take inputs (parameters), perform actions, and return outputs. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md index 8b8da846a9..41f8e74f7c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md @@ -10,6 +10,88 @@ dashedName: what-are-arrow-functions-and-how-do-they-work Watch the video lecture and answer the questions below. +# --transcript-- + +What are arrow functions, and how do they work? + +In the previous lecture video, you learned how to work with functions, which are reusable pieces of code that help make your code more modular, easier to maintain, and more efficient. All previous examples used the regular function syntax, like this: + +```js +function greetings(name) { + console.log("Hello, " + name + "!"); +} +``` + +But another way to write functions in JavaScript is to create an arrow function expression. Here is how you can refactor the previous example to use arrow function syntax instead: + +```js +const greetings = (name) => { + console.log("Hello, " + name + "!"); +}; +``` + +In this revised example, we are creating a `const` variable called `greetings` and assigning it an anonymous function. Most of the syntax will look familiar to you except for the missing `function` keyword and the addition of the arrow (`=>`) between the `name` parameter and the function body. If your parameter list only has one parameter in it, then you can remove the parentheses like this: + +```js +const greetings = name => { + console.log("Hello, " + name + "!"); +}; +``` + +If your arrow function has no parameters, then you must use the parentheses like this: + +```js +const greetings = () => { + console.log("Hello"); +}; +``` + +When first learning about functions, you had to wrap the function body in curly braces. But if your function body only contains a single line of code, you can remove the curly braces like this: + +```js +const greetings = name => console.log("Hello, " + name + "!"); +``` + +It is important to note that removing the parentheses and curly braces for regular function syntax will not work. You will get errors if you tried to do something like this: + +```js +// This will produce syntax errors +function greetings name console.log("Hello, " + name + "!"); +``` + +These types of one line functions only work if you are using the arrow function syntax. Another key concept is the `return` statement. Here is an example of using the arrow function syntax to calculate the area: + +```js +const calculateArea = (width, height) => { + const area = width * height; + return area; +}; + +console.log(calculateArea(5, 3)); // 15 +``` + +We are creating a variable inside the function called `area` and then returning that variable. But we could clean up our code a bit and return the calculation itself: + +```js +const calculateArea = (width, height) => { + return width * height; +}; +``` + +If you tried to remove the curly braces and place the calculation on the same line, then you would get an `Uncaught SyntaxError: Unexpected token 'return'` message: + +```js +const calculateArea = (width, height) => return width * height; +``` + +The reason why you are getting this error, is because you need to remove the `return` statement. When you remove that `return` statement, the error will disappear and the function will still implicitly return the calculation. + +```js +const calculateArea = (width, height) => width * height; +``` + +So when should you use the arrow function syntax? Well, it depends. Many developers use it consistently in their personal projects. However, when working on a team, the choice usually depends on whether the existing codebase uses regular functions or arrow functions. In future lecture videos, we'll cover when to use arrow functions and when to avoid them. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md index 8373bf7ebd..9aa2a5e9cf 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md @@ -10,6 +10,56 @@ dashedName: what-is-scope-in-programming-and-how-does-global-local-and-block-sco Watch the video lecture and answer the questions below. +# --transcript-- + +What is scope in programming, and how does global, local, and block scope work? + +Scope in programming refers to the visibility and accessibility of variables in different parts of your code. It determines where variables can be accessed or modified. In JavaScript, understanding scope is crucial for writing clean, efficient, and bug-free code. There are three main types of scope: global scope, local scope, and block scope. + +Global scope is the outermost scope in a JavaScript program. Variables declared in the global scope are accessible from anywhere in your code, including within functions and blocks. These variables are often called global variables. While global variables can be convenient, they should be used sparingly as they can lead to naming conflicts and make your code harder to maintain. Here's an example of a global variable: + +```js +let globalVar = "I'm a global variable"; + +function printGlobalVar() { + console.log(globalVar); +} + +printGlobalVar(); // Output: "I'm a global variable" +``` + +In this example, `globalVar` is declared in the global scope and can be accessed inside the `printGlobalVar` function. + +Local scope, on the other hand, refers to variables that are only accessible within a function. Here's an example of local scope: + +```js +function greet() { + let message = "Hello, local scope!"; + console.log(message); +} + +greet(); // Output: "Hello, local scope!" +console.log(message); // This will throw an error +``` + +In this code, `message` is a local variable within the `greet` function. It can be used inside the function, but trying to access it outside the function will result in an error. + +Block scope is a concept introduced with the `let` and `const` keywords in ES6. A block is any code section within curly braces, `{}`, such as in `if` statements, `for` loops, or `while` loops. The concept of loops will be taught in an upcoming lecture. + +Variables declared with `let` or `const` inside a block are only accessible within that block. Here's an example of block scope: + +```js +if (true) { + let blockVar = "I'm in a block"; + console.log(blockVar); // Output: "I'm in a block" +} +console.log(blockVar); // This will throw an error +``` + +In this example, `blockVar` is only accessible within the `if` block. Trying to access it outside the block will result in an error. Understanding these different types of scope is essential for managing variable accessibility and avoiding unintended side effects in your code. + +Global variables should be used sparingly, as they can lead to naming conflicts and make your code harder to maintain. Local variables help to keep different parts of your code isolated, which is especially useful in larger programs. Block scoping with `let` and `const` provides even finer control over variable accessibility, helping to prevent errors and make your code more predictable. Mastering these basic concepts of global, local, and block scope will provide a solid foundation for understanding more advanced topics. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/672d266e014ef8216df987d2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/672d266e014ef8216df987d2.md index ca24f48370..1e1f176705 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/672d266e014ef8216df987d2.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/672d266e014ef8216df987d2.md @@ -10,6 +10,74 @@ dashedName: what-is-the-number-type-in-javascript-and-what-are-the-different-typ Watch the video lecture and answer the questions below. +# --transcript-- + +What is the `Number` type in JavaScript, and what are the different types of numbers available? + +The `Number` type is one of the most used data types in JavaScript and other programming languages. Numbers might seem simple, but there's a lot to explore when it comes to numbers in JavaScript. So, let's take a deeper look. In JavaScript, the `Number` data type represents a numeric value. + +Unlike many other programming languages that separate integers and floating-point numbers into different types, JavaScript uses one unified `Number` type to account for numbers. This means you can work with whole numbers, decimals, and even special numeric values all under the same `Number` data type umbrella. + +Here's a basic example showing you integers, floating point numbers, and negative numbers are all of type number: + +```js +const wholeNumber = 50; +const decimalNumber = 4.5; +const negativeNumber = -7; + +console.log(typeof wholeNumber); // number +console.log(typeof decimalNumber); // number +console.log(typeof negativeNumber); // number +``` + +JavaScript's `Number` type includes various kinds of numeric values, ranging from simple integers and floating-point numbers to special cases like `Infinity` and `NaN`, or "Not a Number". Let's break down the main types you'll encounter. Integers are whole numbers without any fractional or decimal part. They can be positive, negative, or zero. Here are some examples: + +```js +const positiveInteger = 100; +const negativeInteger = -25; +const zero = 0; + +console.log(typeof positiveInteger); // number +console.log(typeof negativeInteger); // number +console.log(typeof zero); // number +``` + +Floating point numbers are numbers with decimal points. They're often referred to as just "floats" by JavaScript developers. Floats are useful when you need more precision, such as when you're dealing with measurements or currencies. Here are some examples: + +```js +const floatingPointNumber = 4.5; +const anotherFloat = 89.56; +const oneMoreFloat = 16.462; + +console.log(typeof floatingPointNumber); // number +console.log(typeof anotherFloat); // number +console.log(typeof oneMoreFloat); // number +``` + +JavaScript can represent numbers that are beyond the maximum limit with `Infinity`. You'll encounter this when you try to divide a number by zero or on rare occasions, exceed the upper boundary of the `Number` type. Here's an example: + +```js +const infiniteNumber = 1 / 0; +console.log(infiniteNumber); // Infinity +console.log(typeof infiniteNumber); // number +``` + +Sometimes in JavaScript, some mathematical operations don't result in a valid number. For instance, if you try to perform a mathematical operation on something that isn't a number, you'll get `NaN`, which stands for "Not a Number": + +```js +const notANumber = 'hello world' / 2; +console.log(notANumber); // NaN +``` + +Surprisingly, the type of `NaN` is also `Number`: + +```js +const notANumber = 'hello world' / 2; +console.log(typeof notANumber); // number +``` + +Apart from the standard decimal system (base 10), JavaScript also supports numbers in different bases such as binary, octal, and hexadecimal. Binary is a base-2 system that uses only digits 1 and 0. Octal is a base-8 system that uses only digits 0 to 7. Hexadecimal is a base-16 system that uses digits 0 to 9 and letters a to f, like you see in CSS hex colors. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271884bf678d8b9c64f56.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271884bf678d8b9c64f56.md index a9f1a0d033..0a8e28c6de 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271884bf678d8b9c64f56.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271884bf678d8b9c64f56.md @@ -10,6 +10,125 @@ dashedName: what-are-the-different-arithmetic-operators-in-javascript Watch the lecture video and answer the questions below. +# --transcript-- + +What are the different arithmetic operators in JavaScript? + +JavaScript provides tools to perform basic arithmetic operations on numbers, such as addition, subtraction, multiplication, and division. JavaScript also includes operators for more complex arithmetic operations, such as remainder and exponentiation. + +All these tools are called arithmetic operators. Let's look at these operators in detail, how to use them and how to combine them. + +The addition operator is a plus sign (`+`). The addition operator allows you to find the total of two or more numbers. In addition operations, the order of the numbers doesn't matter: + +```js +const num1 = 10; +const num2 = 5; +const num3 = 15; + +const result1 = num1 + num2; +const result2 = num2 + num1; +const result3 = num2 + num1 + num3; + +console.log(result1); // 15 +console.log(result2); // 15 +console.log(result3); // 30 +``` + +The subtraction operator is a minus sign (`-`). It allows you to find the difference between two numbers. Use the minus sign when you want to subtract a number from another number, usually a smaller one from a bigger one: + +```js +const difference = 10 - 5; +console.log(difference); // 5 +``` + +If a smaller number comes first, you'll get a negative result: + +```js +const difference = 5 - 10; +console.log(difference); // -5 +``` + +You can also assign the numbers to variables and do the subtraction with the variable names: + +```js +const num1 = 10; +const num2 = 5; +const result = num1 - num2; + +console.log(result); // 5 +``` + +In JavaScript, the multiplication operator is represented by an asterisk (`*`) and is used to find the product of two or more numbers. The order of the numbers you're multiplying does not matter: + +```js +const num1 = 10; +const num2 = 5; +const num3 = 15; + +const result1 = num1 * num2; +const result2 = num2 * num1; +const result3 = num2 * num1 * num3; + +console.log(result1); // 50 +console.log(result2); // 50 +console.log(result3); // 750 +``` + +In JavaScript, the division operator is a slash (`/`), which differs from the division symbol used in traditional math (`÷`). You perform division operations with the division operator. The order of the numbers you're dividing matters in this case: + +```js +const num1 = 10; +const num2 = 5; +const num3 = 15; + +const result1 = num1 / num2; +const result2 = num2 / num1; +const result3 = num2 / num1 / num3; + +console.log(result1); // 2 +console.log(result2); // 0.5 +console.log(result3); // 0.03333333333333333 +``` + +It's important to note that if you try to divide by zero, JavaScript will return `Infinity`: + +```js +const result = 10 / 0; + +console.log(result); // Infinity +``` + +Make sure to avoid those types of calculations so you don't end up with unexpected results in your code. + +The remainder operator, represented by a percentage sign (`%`), returns the remainder of a division. The remainder in math is the leftover value after performing division: + +```js +const num1 = 10; +const num2 = 3; +const remainder = num1 % num2; + +console.log(remainder); // 1 +``` + +The exponentiation operator, represented by a double asterisk (`**`), raises one number to the power of another: + +```js +const num1 = 2; +const num2 = 3; + +const exponent = num1 ** num2; +console.log(exponent); // 8 +``` + +It's possible to mix operators in a single operation or expression: + +```js +const result = 10 + 5 * 2 - 8 / 4; +console.log(result); // 18 +``` + +When you mix different operators in a single expression, the JavaScript engine follows a system called operator precedence to determine the order of operations. Operator precedence determines the order in which operations are executed in expressions. You will learn more about operator precedence in future lecture videos. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327195e77b1bd90bdd49d7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327195e77b1bd90bdd49d7.md index 0dddc6cbb0..9938fa069a 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327195e77b1bd90bdd49d7.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327195e77b1bd90bdd49d7.md @@ -10,6 +10,100 @@ dashedName: what-happens-when-you-try-to-do-calculations-with-numbers-and-string Watch the lecture video and answer the questions below. +# --transcript-- + +What happens when you try to do calculations with numbers and strings? + +JavaScript is a language where things sometimes work in surprising, or even weird, ways. One such surprise occurs when you mix numbers and strings in calculations. The first thing you'll probably try is to add a number and a string. In JavaScript, the `+` operator does double duty. It handles both addition and string concatenation, which is a way to join two strings together. + +When you use `+` with a number and a string, JavaScript decides to treat them both as strings and joins them together. If you check the type of the result with the `typeof` operator, you'd see it's indeed a string: + +```js +const result = 5 + '10'; + +console.log(result); // 510 +console.log(typeof result); // string +``` + +What do you think will happen if you switch the order of `5` and `'10'`? + +```js +const result = '10' + 5; + +console.log(result); // 105 +console.log(typeof result); // string +``` + +You can see the same thing happened. JavaScript sees a string in `'10'` and a number in `5`, so it converts the number to a string and concatenates them. This is known as type coercion. Type coercion is when a value from one data type is converted into another. + +Things get more interesting when you try to perform other arithmetic operations like subtraction, multiplication, or division with a string and number. In these cases, JavaScript tries to convert the string into a number before doing the math – another type coercion! Here's what happens: + +```js +const subtractionResult = '10' - 5; +console.log(subtractionResult); // 5 +console.log(typeof subtractionResult); // number + +const multiplicationResult = '10' * 2; +console.log(multiplicationResult); // 20 +console.log(typeof multiplicationResult); // number + +const divisionResult = '20' / 2; +console.log(divisionResult); // 10 +console.log(typeof divisionResult); // number +``` + +In the examples above, JavaScript successfully converts the string `'10'` or `'20'` to a number and then performs the calculation. As a result, `'10' - 5` yields `5`, `'10' * 2` gives `20`, and `'20' / 2` results in `10`. + +But what if the string doesn't look like a number? Let's see what happens in that case: + +```js +const subtractionResult = 'abc' - 5; +console.log(subtractionResult); // NaN +console.log(typeof subtractionResult); // number + +const multiplicationResult = 'abc' * 2; +console.log(multiplicationResult); // NaN +console.log(typeof multiplicationResult); // number + +const divisionResult = 'abc' / 2; +console.log(divisionResult); // NaN +console.log(typeof divisionResult); // number +``` + +In the examples above, the string `'abc'` does not represent a valid numeric value, so JavaScript cannot convert it into a meaningful number. When such conversion fails, JavaScript returns `NaN`, which stands for "Not a Number". `NaN` is a special value of the `Number` type that represents an invalid or unrepresentable number. + +What if you perform arithmetic operations with a boolean (`true` or `false`)? Let's see what happens. JavaScript treats booleans as numbers in mathematical operations: `true` becomes `1`, and `false` becomes `0`. + +```js +const result1 = true + 1; +console.log(result1); // 2 +console.log(typeof result1); // number + +const result2 = false + 1; +console.log(result2); // 1 +console.log(typeof result2); // number + +const result3 = 'Hello' + true; +console.log(result3); // "Hellotrue" +console.log(typeof result3); // string +``` + +In the first two examples, `true + 1` resulted in `2`, and `false + 1` resulted in `1`. In the third example, `'Hello' + true`, JavaScript converted `true` to a string and concatenates it with `'Hello'`, resulting in `'Hellotrue'`, which is a string. + +For `null` and `undefined`, JavaScript treats `null` as `0` and `undefined` as `NaN` in mathematical operations: + +```js +const result1 = null + 5; +console.log(result1); // 5 +console.log(typeof result1); // number + +const result2 = undefined + 5; +console.log(result2); // NaN +console.log(typeof result2); // number +``` + +JavaScript often performs type coercion, automatically converting data types such as numbers, strings, and booleans in sometimes unexpected ways. Understanding these conversions is crucial for avoiding bugs and writing robust code in your projects. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732719e2e3ad4d947410b65.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732719e2e3ad4d947410b65.md index 1ee9d0a810..e3ba35951e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732719e2e3ad4d947410b65.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732719e2e3ad4d947410b65.md @@ -10,6 +10,77 @@ dashedName: how-does-operator-precedence-work Watch the lecture video and answer the questions below. +# --transcript-- + +How does operator precedence work? + +If you write an expression with several operators in JavaScript, how does JavaScript decide which one to evaluate first? This is where operator precedence comes in. Let's explore operator precedence in detail with code examples, and also what happens when operators have the same precedence. + +Operator precedence determines the order in which operations are evaluated in an expression. Operators with higher precedence are evaluated before those with lower precedence. Think of operator precedence like in math, where division and multiplication happen before addition and subtraction. + +Without following this rule, basic equations would give you the wrong answer. JavaScript works the same way. It has its own rules for which operators come first, second, and so on. For example, take a look at the expression below: + +```js +const result = 2 + 3 * 4; + +console.log(result); // 14 +``` + +If JavaScript evaluated this expression from left to right, you'd expect `2 + 3 = 5`, then `5 * 4 = 20`. But because multiplication has a higher precedence than addition, JavaScript evaluates the `3 * 4` part first, resulting in `2 + 12 = 14`. + +Sometimes, you may want certain parts of your expression to run first, regardless of precedence rules. You can use parentheses, `()`, to do this. Anything inside parentheses is evaluated first, no matter what. Let's make the `2 + 3` part of the previous example evaluate first: + +```js +const result = (2 + 3) * 4; + +console.log(result); // 20 +``` + +In the example above, the parentheses force JavaScript to evaluate `2 + 3` first, and then multiply the result by `4`. This gives you `20` instead of `14`. + +The division operator has more precedence than addition or subtraction too: + +```js +const result = 2 + 6 / 3; + +console.log(result); // 4 +``` + +If JavaScript evaluated this expression from left to right, you might expect `2 + 6 = 8`, then `8 / 3 = 2.67`. But since division has a higher precedence than addition, JavaScript evaluates the division first: `6 / 3 = 2`, and then adds `2 + 2`, giving the result `4`. + +So, in both multiplication and division, those operations will always take place before addition and subtraction unless you use parentheses to change the order. So what happens if the operators have the same precedence? JavaScript uses associativity to figure out the order to evaluate them. + +Associativity is what tells JavaScript whether to evaluate operators from left to right or right to left. For most operators like addition and multiplication, associativity is left to right. So, JavaScript processes these from the leftmost side of the expression to the right: + +```js +const result = 10 - 2 + 3; + +console.log(result); // 11 +``` + +First, `10 - 2 = 8`, then `8 + 3 = 11`. JavaScript moves left to right in this case. Some operators, like assignment (`=`), are right-to-left associative. This means the right side of the expression gets evaluated first: + +```js +let a, b; +a = b = 5; + +console.log(a); // 5 +console.log(b); // 5 +console.log(a + b); // 10 +``` + +In the example above, JavaScript assigns `5` to `b` first, then assigns `b` (which is now `5`) to `a`. + +The exponent operator is also right-to-left associative: + +```js +const result = 2 ** 3 ** 2; + +console.log(result); // 512 +``` + +First, JavaScript evaluates `3 ** 2`, which equals `9`, then, it evaluates `2 ** 9`, which equals `512`. If the exponent operator had left-to-right associativity, JavaScript would have calculated `2 ** 3` first to get `8`, then `8 ** 2` to get `64`.  + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271a8998ddfd97578d095.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271a8998ddfd97578d095.md index 24d3384157..60db4baea7 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271a8998ddfd97578d095.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271a8998ddfd97578d095.md @@ -10,6 +10,66 @@ dashedName: how-do-the-increment-and-decrement-operators-work Watch the lecture video and answer the questions below. +# --transcript-- + +How do the increment and decrement operators work? + +If you're working with numbers and need to increase or decrease a value by one, the increment and decrement operators make the job easier. Let's break it down in a simple way. + +The increment and decrement operators are represented by `++` and `--`, respectively. They both allow you to adjust the value of a variable by `1`. + +Instead of writing something like `x = x + 1` or `x = x - 1`, you can simply use `x++` to add `1`, or `x--` to subtract `1`. It's faster, cleaner, and easier to read. + +There's a twist to how the increment and decrement operators work: they come in two forms, prefix and postfix, with the difference being when the value gets updated. For the increment operator, prefix is `++x` and postfix is `x++`. + +Prefix (`++x`) increases the value of the variable first, then returns a new value. Postfix (`x++`) returns the current value of the variable first, then increases it: + +```js +let x = 5; + +console.log(++x); // 6 +console.log(x); // 6 +``` + +In the code above, `++x` means "increment `x` first, then use it". So when you log `++x`, you immediately get the incremented value, which is `6`. + +Now, let's take a look at an example using the postfix: + +```js +let y = 5; + +console.log(y++); // 5 +console.log(y); // 6 +``` + +In this example, `y++` means "use `y` first, then increment it". When you log `y++`, you get `5`, but `y` becomes `6` after that line of code. + +The decrement operator does the same thing as increment, except it decreases the value by `1`. Again, there are two forms: prefix (`--x`) decreases the value of the variable first, then returns the new value. And postfix (`x--`) returns the current value first, then decreases it: + +```js +let x = 5; +console.log(--x); // 4 +console.log(x); // 4 + +let y = 5; +console.log(y--); // 5 +console.log(y); // 4 +``` + +So, which should you use: prefix or postfix? In many cases, it doesn't matter which one you use. Both get the job done. However, if you're using the value immediately in an expression, the difference becomes important. Let's take a look at this example: + +```js +let a = 5; +let b = ++a; +console.log(b); // 6 (a was incremented before assignment) + +let c = 5; +let d = c++; +console.log(d); // 5 (c was incremented after assignment) +``` + +So, if you need the updated value right away, use prefix. If you want the current value first and you don’t care about the increment until later, go with postfix. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md index 24073d903a..ca9a11f7bd 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md @@ -10,6 +10,85 @@ dashedName: what-are-compound-assignment-operators-in-javascript-and-how-do-they Watch the lecture video and answer the questions below. +# --transcript-- + +What are compound assignment operators in JavaScript, and how do they work? + +In JavaScript, all arithmetic operators have a compound assignment form. Compound assignment operators allow you to perform a mathematical operation and reassign the result back to the variable in one line of code. Instead of writing something like this: + +```js +let num = 5; +num = num + 2; + +console.log(num); // 7 +``` + +You can write something like this: + +```js +let num = 5; +num += 2; + +console.log(num); // 7 +``` + +Notice how `num += 2` combines both the addition and assignment steps into one. This saves time and reduces clutter in your code. Let's dive deeper into the most common compound assignment operators in JavaScript. + +As you've already seen, the `+=` operator lets you add a value to an existing variable. It is known as the addition assignment operator. The addition assignment operator takes the current value of the variable, adds the specified number to it, and then assigns the result back to the variable: + +```js +let total = 10; +total += 5; + +console.log(total); // 15 +``` + +As you might guess, there's a subtraction assignment operator denoted by `-=`. The subtraction assignment operator subtracts the specified value from the current value of the variable and assigns the new value back to the variable: + +```js +let score = 20; +score -= 7; + +console.log(score); // 13 +``` + +If you didn't use the subtraction assignment, you'd have done something like this: + +```js +let score = 20; +score = score - 7; + +console.log(score); // 13 +``` + +The multiplication assignment operator is represented by `*=`. It multiplies the current value of the variable by the specified number and reassigns it back to the variable: + +```js +let points = 5; +points *= 3; + +console.log(points); // 15 +``` + +Lastly, there's a division assignment operator denoted by `/=`. Just like others before it, it lets you divide the current value of a variable by a number you specify, then assign the result back to the variable: + +```js +let balance = 100; +balance /= 4; + +console.log(balance); // 25 +``` + +Remember there's a compound assignment operator for every operator in JavaScript. So, apart from the four already mentioned, we also have: + +- Remainder assignment operator (`%=`), which divides a variable by the specified number and assigns the remainder to the variable. + +- Exponent assignment operator (`**=`), which raises a variable to the power of the specified number and reassigns the result to the variable. + +- Bitwise AND assignment operator (`&=`), which performs a bitwise AND operation with the specified number and reassigns the result to the variable. + +- Bitwise OR assignment operator (`|=`), which performs a bitwise OR operation with the specified number and reassigns the result to the variable. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271c7581a27d9dd78f6d6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271c7581a27d9dd78f6d6.md index a75801d30b..4a04763057 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271c7581a27d9dd78f6d6.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271c7581a27d9dd78f6d6.md @@ -10,6 +10,66 @@ dashedName: what-are-booleans-and-how-do-they-work-with-equality-and-inequality- Watch the lecture video and answer the questions below. +# --transcript-- + +What are booleans, and how do they work with equality and inequality operators? + +In an earlier lecture video, you were first introduced to the concept of booleans, but in this video, we will dive deeper into how booleans work and how the equality and inequality operators work. + +Booleans are a data type with only `true` and `false` values. They're useful because they allow you to do something based on some conditions. Booleans are essential when you want to evaluate whether something should happen or not, like deciding if someone can access a certain feature in your app. Here is an example of setting the value `true` to a variable called `isOldEnoughToDrive`: + +```js +let isOldEnoughToDrive = true; + +console.log(isOldEnoughToDrive); // true +``` + +You can use this variable inside a conditional like this: + +```js +let isOldEnoughToDrive = true; + +if (isOldEnoughToDrive) { + console.log("You're old enough to drive"); // You're old enough to drive +} else { + console.log("Sorry, you are not old enough to drive"); +} +``` + +A conditional helps you make decisions in your code based on a condition. This example uses what is called an `if/else` statement. + +If `isOldEnoughToDrive` is `true`, then the sentence `You're old enough to drive` will be logged to the console. Otherwise, if the `isOldEnoughToDrive` is `false`, then the sentence `Sorry, you are not old enough to drive` will be logged to the console. Since the `isOldEnoughToDrive` variable is set to `true`, the first sentence will be logged to the console. You will learn more about `if/else` statements in a future lecture video. + +To compare two values, you can use either the equality or strict equality operator. The result of the comparison will be a boolean of either `true` or `false`. Here is an example of using the equality operator to compare a string and a number. The equality operator is represented by a double equals sign (`==`). + +```js +console.log(5 == "5"); // true +``` + +In this example, JavaScript converts the string `"5"` into the number `5` and then checks if they are equal. Since both values are now the same, the result is true. The equality operator uses type coercion before checking if each value is equal. + +This differs from the strict equality operator, which does not perform type coercion. The strict equality operator will check if the types are the same and if the values are the same. Here is an example using the strict equality operator to compare a number and string. This operator is represented by a triple equals sign (`===`). + +```js +console.log(5 === '5'); // false +``` + +The following comparison will be `false`, because a string data type is not the same as a number data type. If you need to check if something is not equal to another value, then you can use the inequality or strict inequality operators. Here is an example of using the inequality operator (`!=`) to compare a number with a string. + +```js +console.log(5 != "5"); // false +``` + +In this example, the result would be `false` because the inequality operator first converts the string value to a number and then compares the values. Since the values would be the same it will return `false`. If you tried to use the strict inequality operator, then you would get a different result. The strict inequality operator is represented by an exclamation mark followed by two equal signs (`!==`). + +```js +console.log(5 !== "5"); // true +``` + +The result would be `true` because the strict inequality operator does not perform any type coercion. Since the number `5` is not equal to the string `"5"`, then the result is `true`. + +It is considered best practice to use strict inequality and equality operators whenever possible, as they do not perform type coercion. Most of the time in professional projects, you will see codebases that usually prefer these two operators over the inequality and equality operators. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271dffbc34fda31da9515.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271dffbc34fda31da9515.md index 015656c81e..61146fc789 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271dffbc34fda31da9515.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271dffbc34fda31da9515.md @@ -10,6 +10,56 @@ dashedName: what-are-comparison-operators-and-how-do-they-work Watch the lecture video and answer the questions below. +# --transcript-- + +What are comparison operators and how do they work? + +Comparison operators allow you to compare two values and return a `true` or `false` result. You can then use the result to make a decision or control the flow of your program. You use comparisons in `if` statements, loops, and many other situations where you need to make decisions based on certain conditions. Let's dive into the most common comparison operators and see how they work. + +The greater than operator, represented by a right-angle bracket (`>`), checks if the value on the left is greater than the one on the right: + +```js +let a = 6; +let b = 9; + +console.log(a > b); // false +console.log(b > a); // true +``` + +The greater than or equal operator, represented by a right-angle bracket and the equals sign (`>=`), checks if the value on the left is either greater than or equal to the one on the right: + +```js +let a = 6; +let b = 9; +let c = 6; + +console.log(a >= b); // false +console.log(b >= a); // true +console.log(a >= c); // true +``` + +The lesser than operator, represented by a left-angle bracket (`<`) works similarly to `>`, but in reverse. It checks if the value on the left is smaller than the one on the right: + +```js +let a = 6; +let b = 9; + +console.log(a < b); // true +console.log(b < a); // false +``` + +The less than or equal operator, represented by a left-angle bracket and the equals sign (`<=`) checks if the value on the left is smaller than or equal to the one on the right: + +```js +let a = 6; +let b = 9; +let c = 6; + +console.log(a <= b); // true +console.log(b <= a); // false +console.log(a <= c); // true +``` + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271e8e3d43bda89f723b3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271e8e3d43bda89f723b3.md index 12b88aab00..58aadb2fbd 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271e8e3d43bda89f723b3.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271e8e3d43bda89f723b3.md @@ -10,6 +10,76 @@ dashedName: what-are-unary-operators-and-how-do-they-work Watch the lecture video and answer the questions below. +# --transcript-- + +What are unary operators, and how do they work? + +Unary operators act on a single operand to perform operations like type conversion, value manipulation, or checking certain conditions. Let's look at some common unary operators and how they work. + +The unary plus operator converts its operand into a number. If the operand is already a number, it remains unchanged. + +```js +const str = '42'; +const strToNum = +str; + +console.log(strToNum); // 42 +console.log(typeof str); // string +console.log(typeof strToNum); // number +``` + +Unary plus is handy when you want to make sure you're working with a numeric value. As you might guess, there's a unary negation operator. It negates the value of the operand. It works similarly to the unary plus, except it flips the sign. + +```js +const str = '42'; +const strToNegativeNum = -str; + +console.log(strToNegativeNum); // -42 +console.log(typeof str); // string +console.log(typeof strToNegativeNum); // number +``` + +The logical NOT operator, represented by an exclamation mark (`!`), is another unary operator. It flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it's `false`, it becomes `true`.  + +```js +let isOnline = true; +console.log(!isOnline); // false + +let isOffline = false; +console.log(!isOffline); // true +``` + +The bitwise NOT operator is a less commonly used unary operator. Represented by a tilde, `~`, it inverts the binary representation of a number. Computers store numbers in binary format (1s and 0s). The `~` operator flips every bit, meaning it changes all 1s to 0s and all 0s to 1s. You will learn more about binary and bits in a future lecture video. + +```js +const num = 5; // The binary for 5 is 00000101 + +console.log(~num); // -6 +``` + +In this example, `5` became `-6` because by applying the `~` operator to `5`, you get `- (5 + 1)`, which equals `-6` due to two's complement representation. Two's complement is a way computers represent negative numbers in binary. You probably won't use the bitwise NOT often unless you're working with low-level programming tasks like manipulating bits directly. + +The `void` keyword is a unary operator that evaluates an expression and returns `undefined`. + +```js +const result = void (2 + 2); + +console.log(result); // undefined +``` + +`void` is also commonly used in hyperlinks to prevent navigation: + +```js +Click Me +``` + +Finally, there is the `typeof` operator which you learned about in previous lecture videos. This returns the type of its operand as a string. + +```js +const value = 'Hello world'; + +console.log(typeof value); // string +``` + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271f39f124ddac28866d5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271f39f124ddac28866d5.md index d43333545d..f768fd2894 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271f39f124ddac28866d5.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271f39f124ddac28866d5.md @@ -10,6 +10,80 @@ dashedName: what-are-bitwise-operators-and-how-do-they-work Watch the lecture video and answer the questions below. +# --transcript-- + +What are bitwise operators, and how do they work? + +Bitwise operators in JavaScript are special operators that work on the binary representations of numbers. To understand bitwise operators, we first need to grasp the concept of bits and binary numbers. In computing, a bit is the most basic unit of information. It can have only two values: `0` or `1`. Binary is a number system that uses only these two digits to represent all numbers. + +For example, the binary representation of the decimal number `10` is `1010`. In this system, each digit represents a power of `2`, starting from the rightmost digit and increasing as we move left. + + +
+ +In the table above, the first row shows the binary number `1010`, the second row shows the power of `2` represented by each binary position, and the third row shows the result of each multiplication. If you add all the values in the third row, they total `10`. + +Now, let's dive into bitwise operators. These operators perform operations on the binary representations of numbers. JavaScript provides several bitwise operators, including AND (`&`), OR (`|`), XOR (`^`), NOT (`~`), left shift (`<<`), and right shift (`>>`). + +The bitwise AND (`&`) operator returns a `1` in each bit position for which the corresponding bits of both operands are `1`. Here's an example: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a & b); // Output: 1 (Binary: 001) +``` + +In this example, we perform a bitwise AND operation on `5` (`101` in binary) and `3` (`011` in binary). The result is `1` (`001` in binary) because only the rightmost bit is `1` in both numbers. + +The bitwise OR (`|`) operator returns a `1` in each bit position for which the corresponding bits of either or both operands are `1`. For example: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a | b); // Output: 7 (Binary: 111) +``` + +Here, the result is `7` (`111` in binary) because at least one of the bits is `1` in each position. + +The bitwise XOR (`^`) operator returns a `1` in each bit position for which the corresponding bits of either, but not both, operands are `1`. For instance: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a ^ b); // Output: 6 (Binary: 110) +``` + +The result is `6` (`110` in binary) because the first and second bits from the right are different in the two numbers. + +The bitwise NOT (`~`) operator inverts all the bits of its operand. For example: + +```js +let a = 5; // Binary: 101 +console.log(~a); // Output: -6 +``` + +This might seem surprising, but it's because of how negative numbers are represented in binary using two's complement. + +The left shift (`<<`) operator shifts all bits to the left by a specified number of positions. For example: + +```js +let a = 5; // Binary: 101 +console.log(a << 1); // Output: 10 (Binary: 1010) +``` + +Here, all bits are shifted one position to the left, effectively multiplying the number by `2`. + +The right shift (`>>`) operator shifts all bits to the right. For example: + +```js +let a = 5; // Binary: 101 +console.log(a >> 1); // Output: 2 (Binary: 10) +``` + +Here, all bits are shifted one position to the right, effectively dividing the number by `2` and rounding down. + +Bitwise operators are often used in low-level programming and cryptography. While they may not be as commonly used in everyday JavaScript programming, understanding them can be beneficial for certain specialized tasks and can deepen your understanding of how computers work at a fundamental level. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md index 525aa9fc34..91112f2bfe 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md @@ -10,6 +10,122 @@ dashedName: what-are-conditional-statements-and-how-do-if-else-if-else-statement Watch the lecture video and answer the questions below. +# --transcript-- + +What are conditional statements, and how do `if/else` statements work? + +Conditional statements let you make decisions in your JavaScript code. They allow your program to flow in a particular way based on certain conditions. Let's take a look at how `if`, `else if`, `else`, and the ternary operator work to let you control the flow of your code. + +An `if` statement takes a condition and runs a block of code if that condition is truthy. Truthy values are any values that result in `true` when evaluated in a Boolean context like an `if` statement. Here are examples of truthy values: + +- non-empty strings, for example, `hello` + +- any number other than `0` and `-0`, for example, `4`, `-5`, and others + +- arrays + +- objects + +- the boolean `true` + +On the other hand, falsy values are values that evaluate to `false` in a boolean context. JavaScript has few falsy values, which makes them easy to remember. Here are a few falsy values: + +- boolean `false` + +- `0` (zero) + +- `""` (empty string) + +- `null` + +- `undefined` + +- `NaN` (Not a Number) + +Now, that we have a basic understanding of truthy and falsy values, let's see how it works with `if` statements. In this first example, we are using a couple of `if` statements to check against truthy and falsy values: + +```js +if (null) { + console.log("This will not run."); +} + +if ("freeCodeCamp") { + console.log("This will run."); +} +``` + +Since `null` is a falsy value, the message inside the block will never be logged to the console. But for the second `if` statement, the string `freeCodeCamp` is a truthy value, and will be considered `true` in this boolean context of the `if` statement. As a result, the message `This will run.` will be logged to the console. + +Let's take a look at a few more examples on how `if` statements work with different comparison operators. Here is an example of using an `if` statement to check if the user is eligible to vote: + +```js +const age = 22; + +if (age >= 18) { + console.log("You're eligible to vote"); // You're eligible to vote +} +``` + +In this example, since `age` is currently `22`, this means the condition will evaluate to `true` because `22` is greater than or equal to `18`. So the message `You're eligible to vote` will be logged to the console. If we change the example so `age` is now `15`, then the condition will evaluate to `false` and the message will not be logged to the console: + +```js +const age = 15; + +if (age >= 18) { + console.log("You're eligible to vote"); // Code not running because age is less than 18 +} +``` + +When a condition is `false`, then you can use an `else` clause: + +```js +const age = 15; + +if (age >= 18) { + console.log("You're eligible to vote"); +} else { + console.log("You're not eligible to vote"); // You're not eligible to vote +} +``` + +In this example, `15` is not greater than or equal to `18`, so the condition would be `false`. The code inside the `else` block will run in this case. + +If you want to check multiple conditions, you can use an `else if` block. This allows your program to choose between more than two paths. + +```js +const score = 87; + +if (score >= 90) { + console.log('You got an A'); +} else if (score >= 80) { + console.log('You got a B'); // You got a B +} else if (score >= 70) { + console.log('You got a C'); +} else { + console.log('You failed! You need to study more!'); +} +``` + +Since the `score` is currently `87`, then the message of `You got a B` would be logged to the console. + +The ternary operator is a compact way to write simple `if/else` statements. It has three parts: a condition, a result if the condition is true, and a result if it is false. Here's the basic syntax: + +```js +condition ? expressionIfTrue : expressionIfFalse; +``` + +Here's an example dealing with weather temperatures in Celsius: + +```js +const weather = temperature > 25 ? 'sunny' : 'cool'; + +console.log(`It's a ${weather} day!`); +``` + +If `temperature` is greater than `25`, the code above logs `It's a sunny day!`. If `temperature` is ever less than `25`, it logs `It's a cool day!`. + +So, which should you use between an if statement and a ternary? Use a ternary while dealing with a single condition or single expressions, or when you want a compact syntax for simple logic. Use `if/else` statements when you're dealing with complex conditions and multiple statements, as things become unreadable if you nest ternaries.  + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md index 7ecb9e7567..39825d354c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md @@ -10,6 +10,101 @@ dashedName: what-are-binary-logical-operators-and-how-do-they-work Watch the lecture video and answer the questions below. +# --transcript-- + +What are binary logical operators, and how do they work? + +Binary logical operators help you evaluate two expressions and return a result based on their truthiness. Let's look at the three most common binary logical operators: logical AND, logical OR, and the nullish coalescing operator. + +The logical AND operator is represented by a double ampersand (`&&`). It checks if both operands are true and returns a result. If both operands are truthy, it returns the second value, that is, the one on the right: + +```js +const result = true && 'hello'; + +console.log(result); // hello +``` + +In the example above, the text `hello` is logged to the console because both operands are `true`. If either operand is falsy, it returns the falsy value: + +```js +const result = 0 && 3; + +console.log(result); // 0 +``` + +Since `0` is a falsy value, the number `0` is logged to the console. And if both operands are falsy, it returns the first falsy value: + +```js +const result = false && 0; + +console.log(result); // false +``` + +Since `false` is a falsey value, then `false` is logged to the console. The logical AND operator is useful when you want to check multiple conditions and ensure that all are true before proceeding. Here is an example: + +```js +if (2 < 3 && 3 < 4) { + console.log('The if block runs'); +} else { + console.log('The else block runs'); +} +``` + +In the condition, since `2` is less than `3` AND `3` is less than `4`, then the sentence `The if block runs` will be logged to the console. + +The logical OR operator checks if at least one of the operands is truthy. If the first operand is truthy, it returns that value: + +```js +const result = 'This is truthy' || false; + +console.log(result); // This is truthy +``` + +If the first operand is falsy but the second is truthy, the second value will be logged to the console: + +```js +const result = 0 || 'This is truthy'; + +console.log(result); // This is truthy +``` + +It is common to use the logical OR operator in `if/else` statements like this: + +```js +let userInput; + +if (userInput || 'Guest') { + console.log('A user is present'); +} else { + console.log('No user detected'); +} +``` + +Since we didn't assign a value to the `userInput` variable, it is currently `undefined`. The condition in the `if` statement checks if either the `userInput` variable or the string `Guest` are truthy. Since the string `Guest` is true in a boolean context like this, the string `A user is present` will be logged to the console. + +The nullish coalescing operator is more sophisticated than logical OR and logical AND. Represented by a double question mark (`??`), it helps in scenarios where you want to return a value only if the first one is `null` or `undefined`. Here is an example of working with the nullish coalescing operator: + +```js +const result = null ?? 'default'; + +console.log(result); // default +``` + +Since `null` is a falsey value, the string `default` would be logged to the console. The nullish coalescing operator is incredibly useful in situations where `null` or `undefined` are the only values that should trigger a fallback or default value. Here is an example of dealing with a user's preference settings: + +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +let theme = userSettings.theme ?? 'light'; +console.log(theme); // light +``` + +In the example above, we have an object called `userSettings` that contains `theme`, `volume` and `notifications` properties. We are accessing the `theme` using dot notation like `userSettings.theme`. You will learn more about how to work with objects in a future lecture video. Since the user's `theme` is currently set to `null`, then the string `light` will be logged to the console. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md index aae68540df..05d94f4443 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md @@ -10,6 +10,98 @@ dashedName: what-is-the-math-object-in-javascript-and-what-are-some-common-metho Watch the lecture video and answer the questions below. +# --transcript-- + +What is the `Math` object in JavaScript, and what are some common methods? + +When diving into JavaScript, you'll quickly discover that performing mathematical operations is a common task. While basic arithmetic operators can handle simple calculations, JavaScript offers a built-in `Math` object to tackle more complex math challenges. + +This handy tool provides a variety of methods that make it easier to perform advanced calculations and manipulate numbers. Let's explore these methods and see how they can simplify your coding experience. + +The `Math.random()` method generates a random floating-point number between `0` (inclusive) and `1` (exclusive). This means the possible output can be `0`, but it will never actually reach `1`. Here is an example working with the `Math.random()` method: + +```js +const randomNum = Math.random(); + +console.log(randomNum); +// any number between 0 and 1 – 0 inclusive and 1 exclusive +``` + +`Math.min()` and `Math.max()` both take a set of numbers and return the minimum and maximum value, respectively. Here is an example of working both of those methods: + +```js +const smallest = Math.min(1, 5, 3, 9); +console.log(smallest); // 1 + +const largest = Math.max(1, 5, 3, 9); +console.log(largest); // 9 +``` + +The first `console.log()` will log the number `1`, since `1` is the smallest in that list of numbers. And the second `console.log()` will log the number `9`, since `9` is the largest numbers in that list. + +If you wanted to round numbers up or down to the nearest whole integer, you could use the `Math.ceil()` and `Math.floor()` methods. Here is an example of working with `Math.ceil()`: + +```js +console.log(Math.ceil(4.3)); // 5 +``` + +`Math.ceil()` will round `4.3` up to the nearest whole integer, which is `5` in this case. Now, let's take a look at rounding a number down: + +```js +console.log(Math.floor(4.7)); // 4 +``` + +`Math.floor()` will round `4.7` down to the nearest whole integer, which is `4` in this case. `Math.round()` is the hybrid of `Math.ceil()` and `Math.floor()`. It rounds a number to its nearest integer, taking the decimal point into account: + +```js +console.log(Math.round(2.3)); // 2 +console.log(Math.round(4.5)); // 5 +console.log(Math.round(4.8)); // 5 +``` + +So, if the decimal point is less than `5`, the number is rounded down. And if the decimal point is `5` or greater, the number is rounded up. A practical application of `Math.floor()` and `Math.random()` is to generate a random number between two whole numbers. Here's the syntax for that: + +```js +Math.floor(Math.random() * (max - min)) + min; +``` + +Generating a random number between `20` and `1` would look like this: + +```js +const randomNumBtw1And20 = Math.floor(Math.random() * 20) + 1; +console.log(randomNumBtw1And20); +``` + +Another helpful `Math` method would be the `Math.trunc()` method. `Math.trunc()` removes the decimal part of a number, returning only the integer portion, without rounding: + +```js +console.log(Math.trunc(2.9)); // 2 +console.log(Math.trunc(9.1)); // 9 +``` + +If you need to get the square root or cube root of a number, you can use the `Math.sqrt()` and `Math.cbrt()` methods, respectively: + +```js +console.log(Math.sqrt(81)); // 9 +console.log(Math.cbrt(27)); // 3 +``` + +The first log statement, will log `9` because the square root of `81` is `9`, while the second log statement will log `3` because the cube root of `27` is `3`. If you need to get the absolute value of a number, you can use the `Math.abs()` method: + +```js +console.log(Math.abs(-5)); // 5 +console.log(Math.abs(5)); // 5 +``` + +`Math.abs()` returns the absolute value of a number, turning negatives into positives. The last method we will look at will be the `Math.pow()` method: + +```js +console.log(Math.pow(2, 3)); // 8 +console.log(Math.pow(8, 2)); // 64 +``` + +`Math.pow()` takes two numbers and raise the first to the power of the second. There are many more methods that belong to the `Math` object, that you can explore on your own. However, these are just a few of the more commonly used ones found in JavaScript codebases. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md index c21d32edac..bdfcf72a39 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md @@ -17,439 +17,439 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md index 269ab6ac91..5bd5ac030b 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md @@ -363,7 +363,7 @@ A synchronous response. #### --answer-- -A `Promise` that resolves to a `Response` object +A `Promise` that resolves to a `Response` object. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md index 56990ab396..dbadd37341 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md @@ -388,19 +388,19 @@ What does the command `echo $?` do? #### --distractors-- -Prints the value of the last used variable +Prints the value of the last used variable. --- -Prints the value of the last used arithmetic operation +Prints the value of the last used arithmetic operation. --- -Prints the value of the last executed condition +Prints the value of the last executed condition. #### --answer-- -Prints the exit code of the last executed command +Prints the exit code of the last executed command. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md index f444fea6f1..632cea711d 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md @@ -109,19 +109,19 @@ When using internal CSS, where is the `style` element placed within the HTML? #### --distractors-- -In the `meta` element +In the `meta` element. --- -In the `script` element +In the `script` element. --- -In the `body` element +In the `body` element. #### --answer-- -In the `head` element +In the `head` element. ### --question-- @@ -439,17 +439,17 @@ For `padding: 10px 20px 30px 40px`, what is the correct order of values? #### --distractors-- -Right, Top, Left, Bottom +Right, Top, Left, Bottom. --- -Top, Left, Bottom, Right +Top, Left, Bottom, Right. --- -Top, Bottom, Right, Left +Top, Bottom, Right, Left. #### --answer-- -Top, Right, Bottom, Left +Top, Right, Bottom, Left. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md index 0b138aa460..22bb7ba840 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md @@ -533,7 +533,7 @@ JPG --- -Creative Commons +Creative Commons. --- @@ -541,7 +541,7 @@ BSD #### --answer-- -Creative Commons 0 +Creative Commons 0. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md index 5dd20697f4..f48397cb58 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md @@ -25,7 +25,7 @@ Processor --- -Graphics Card +Graphics Card. --- @@ -77,7 +77,7 @@ Cable #### --answer-- -Fiber Optic +Fiber Optic. ### --question-- @@ -117,11 +117,11 @@ Opera --- -Microsoft Edge +Microsoft Edge. #### --answer-- -Google Drive +Google Drive. ### --question-- @@ -131,11 +131,11 @@ When you need to edit a piece of code, which of the following are you most likel #### --distractors-- -Node Package Manager +Node Package Manager. --- -Microsoft Edge +Microsoft Edge. --- @@ -143,7 +143,7 @@ Github #### --answer-- -Visual Studio Code +Visual Studio Code. ### --question-- @@ -157,15 +157,15 @@ Dropbox --- -Microsoft OneDrive +Microsoft OneDrive. --- -Google Drive +Google Drive. #### --answer-- -Windows File Explorer +Windows File Explorer. ### --question-- @@ -307,11 +307,11 @@ What is a piece of software that allows you to look at online content called? #### --distractors-- -Internet Content Displayer +Internet Content Displayer. --- -Search Engine +Search Engine. --- @@ -319,7 +319,7 @@ Website #### --answer-- -Web Browser +Web Browser. ### --question-- @@ -329,11 +329,11 @@ What is a piece of software that lists web pages related to a user's query calle #### --distractors-- -Page Finder +Page Finder. --- -Web Browser +Web Browser. --- @@ -341,7 +341,7 @@ Website #### --answer-- -Search Engine +Search Engine. ### --question-- @@ -351,7 +351,7 @@ What is a set of one or more web pages under one domain name called? #### --distractors-- -Web Browser +Web Browser. --- @@ -359,7 +359,7 @@ Hyperlink --- -Search Engine +Search Engine. #### --answer-- @@ -385,7 +385,7 @@ Brackets #### --answer-- -Quotation marks +Quotation marks. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md index 414d24f413..198acb0d7d 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md @@ -65,11 +65,11 @@ Which tool can help inspect element styles in a web browser? #### --distractors-- -Adobe Photoshop +Adobe Photoshop. --- -Microsoft Word +Microsoft Word. --- @@ -77,7 +77,7 @@ Notepad #### --answer-- -Chrome DevTools +Chrome DevTools. ### --question-- @@ -109,19 +109,19 @@ What does the `:hover` pseudo-class indicate? #### --distractors-- -Active state +Active state. --- -Element is focused +Element is focused. --- -Element is hidden +Element is hidden. #### --answer-- -Mouse is over the element +Mouse is over the element. ### --question-- @@ -143,7 +143,7 @@ Figma #### --answer-- -Contrast checker +Contrast checker. ### --question-- @@ -153,19 +153,19 @@ What is the purpose of the `alt` attribute in images? #### --distractors-- -To change image size +To change image size. --- -To add a title +To add a title. --- -To change image color +To change image color. #### --answer-- -To provide a text alternative +To provide a text alternative. ### --question-- @@ -175,19 +175,19 @@ What is a screen reader? #### --distractors-- -A browser for disabled users +A browser for disabled users. --- -A CSS tool +A CSS tool. --- -A web development library +A web development library. #### --answer-- -A text-to-speech software +A text-to-speech software. ### --question-- @@ -197,19 +197,19 @@ What does the 'Inspect Element' feature do? #### --distractors-- -Edits text directly +Edits text directly. --- -Downloads files +Downloads files. --- -Modifies images +Modifies images. #### --answer-- -Displays CSS and HTML +Displays CSS and HTML. ### --question-- @@ -241,19 +241,19 @@ What does the `opacity` property do in CSS? #### --distractors-- -Changes text size +Changes text size. --- -Adds a border +Adds a border. --- -Sets the element's position +Sets the element's position. #### --answer-- -Controls element transparency +Controls element transparency. ### --question-- @@ -285,19 +285,19 @@ What is a common use for `aria-hidden="true"`? #### --distractors-- -To show content +To show content. --- -To display on mobile +To display on mobile. --- -To increase visibility +To increase visibility. #### --answer-- -To hide content from screen readers +To hide content from screen readers. ### --question-- @@ -307,19 +307,19 @@ What is the `flex` property used for? #### --distractors-- -Changing text color +Changing text color. --- -Adjusting font size +Adjusting font size. --- -Adding animations +Adding animations. #### --answer-- -Creating responsive layouts +Creating responsive layouts. ### --question-- @@ -439,17 +439,17 @@ What is the `outline` property most commonly used to configure? #### --distractors-- -Border of an element +Border of an element. --- -Margin of an element +Margin of an element. --- -Padding of an element +Padding of an element. #### --answer-- -Focus indicator around an element +Focus indicator around an element. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md index f3355ce004..565bb9c58a 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md @@ -43,19 +43,19 @@ What does `matrix()` allow you to control? #### --distractors-- -Only scaling +Only scaling. --- -Only translation +Only translation. --- -Only rotation +Only rotation. #### --answer-- -Multiple transformations at once +Multiple transformations at once. ### --question-- @@ -109,19 +109,19 @@ What does `@keyframes` define? #### --distractors-- -CSS colors +CSS colors. --- -CSS transitions +CSS transitions. --- -CSS text styles +CSS text styles. #### --answer-- -CSS animation sequences +CSS animation sequences. ### --question-- @@ -131,19 +131,19 @@ What does `translate()` do? #### --distractors-- -Changes opacity +Changes opacity. --- -Rotates the element +Rotates the element. --- -Skews the element +Skews the element. #### --answer-- -Moves the element +Moves the element. ### --question-- @@ -153,7 +153,7 @@ What does accessibility focus on in web design? #### --distractors-- -Color choice +Color choice. --- @@ -161,11 +161,11 @@ Responsiveness --- -Layout complexity +Layout complexity. #### --answer-- -Usability for all users +Usability for all users. ### --question-- @@ -175,19 +175,19 @@ Where is `@keyframes` written? #### --distractors-- -Inside HTML tags +Inside HTML tags. --- -Inside CSS selectors +Inside CSS selectors. --- -In JavaScript +In JavaScript. #### --answer-- -In CSS +In CSS. ### --question-- @@ -219,19 +219,19 @@ Why is providing video captions important? #### --distractors-- -To improve SEO +To improve SEO. --- -To comply with web standards +To comply with web standards. --- -To enhance visuals +To enhance visuals. #### --answer-- -To provide accessibility for hearing impaired users +To provide accessibility for hearing impaired users. ### --question-- @@ -319,7 +319,7 @@ To adjust the layout. #### --answer-- -To highlight focused elements +To highlight focused elements. ### --question-- @@ -395,19 +395,19 @@ What does the animation shorthand property include? #### --distractors-- -Only animation name +Only animation name. --- -Only animation timing +Only animation timing. --- -Only animation duration +Only animation duration. #### --answer-- -All animation properties +All animation properties. ### --question-- @@ -417,7 +417,7 @@ What is the effect of using the `ease-in-out` timing function? #### --distractors-- -The animation will start fast and end slow +The animation will start fast and end slow. --- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md index 05c1d209c7..9a0fb9a439 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md @@ -61,23 +61,23 @@ Which property is used to control the position of the list item marker? #### --text-- -Which of the following is NOT a valid value for the `list-style-type` property? +What does the `line-height` property do? #### --distractors-- -`decimal` +It is used to set the background size for an element. --- -`disc` +It is used to style links that have not be visited by the user. --- -`square` +It is used to create space to the right of list items. #### --answer-- -`lower-arabic` +It is used to create space between lines of text. ### --question-- @@ -87,15 +87,15 @@ Which pseudo-class is used to style links when a user hovers over them? #### --distractors-- -`:active` +`:hovered` --- -`:link` +`:hovering` --- -`:visited` +`:hasHovered` #### --answer-- @@ -149,45 +149,45 @@ Which CSS property can be used to control the size of a background image? #### --text-- -How can you make a background image cover the entire element, maintaining aspect ratio? +Which of the following is the correct way to apply a solid red top border to an element? #### --distractors-- -`background-size: contain` +`set-top-border: 3px solid red;` --- -`background-repeat: stretch` +`border-top: apply 3px solid red;` --- -`background-fit: full` +`top-border: 3px solid red;` #### --answer-- -`background-size: cover` +`border-top: 3px solid red;` ### --question-- #### --text-- -What does `background-attachment: fixed` do? +Which of the following is NOT a valid `border` property? #### --distractors-- -The background moves with the scrolling content +`border-bottom` --- -The background scrolls twice as fast +`border-right` --- -The background image is resized to fill the screen +`border-top` #### --answer-- -The background stays fixed while the content scrolls +`border-side` ### --question-- @@ -215,45 +215,61 @@ Which of the following is a valid `border-style` value? #### --text-- -How can you make a link change color when clicked? +Which of the following is the correct way to apply borders using the shorthand property? #### --distractors-- -Use the `:link` pseudo-class +```css +.box { + borders: 1px solid black; +} +``` --- -Use the `:visited` pseudo-class +```css +.box { + borderShort: 1px solid black; +} +``` --- -Use the `:hover` pseudo-class +```css +.box { + border-short: 1px solid black; +} +``` #### --answer-- -Use the `:active` pseudo-class +```css +.box { + border: 1px solid black; +} +``` ### --question-- #### --text-- -What is the correct CSS property to create an outline around an element, besides using the `border` property? +What is the role of the `linear-gradient` function? #### --distractors-- -`border-wide` +It is used to set the style of an element's border. --- -`box-shadow` +It is used to determine how background images should be repeated along the horizontal and vertical axes. --- -`border-img` +It is used to style an element that was activated by the user. #### --answer-- -`outline` +It is used to create a transition between multiple colors along a straight line. ### --question-- @@ -281,95 +297,95 @@ Which value for the `background-repeat` property ensures the image repeats horiz #### --text-- -What's the purpose of the `border-radius` property? +What is the purpose of the `border-radius` property? #### --distractors-- -To create shadows around the border +To create shadows around the border. --- -To change the width of the border +To change the width of the border. --- -To make the border disappear +To make the border disappear. #### --answer-- -To round the corners of an element +To round the corners of an element. ### --question-- #### --text-- -Which property is used to add space between the border and the content? +Which of the following is NOT a valid value for the `background-position` property? #### --distractors-- -`margin` +`top` --- -`border-spacing` +`center` --- -`border-width` +`bottom` #### --answer-- -`padding` +`side` ### --question-- #### --text-- -How can you make a background image repeat only vertically? +Which of the following `background-repeat` values can be used to repeat a background image vertically? #### --distractors-- -`background-repeat: repeat-x` +`repeat-x` --- -`background-repeat: vertical-only` +`vertical-only` --- -`background-repeat: stretch` +`stretch` #### --answer-- -`background-repeat: repeat-y` +`repeat-y` ### --question-- #### --text-- -What does `background-position: center` do to a background image? +What does `background-position: center;` do to a background image? #### --distractors-- -It aligns the background image to the top of the element +It aligns the background image to the top of the element. --- -It repeats the background image horizontally and vertically +It repeats the background image horizontally and vertically. --- -It scales the background image to fill the entire element +It scales the background image to fill the entire element. #### --answer-- -It positions the background image in the center of the element +It positions the background image in the center of the element. ### --question-- #### --text-- -Which of these is NOT a valid border value? +Which of these is NOT a valid `border` value? #### --distractors-- @@ -381,7 +397,7 @@ Which of these is NOT a valid border value? --- -`2px grooved red` +`2px dashed red` #### --answer-- @@ -391,65 +407,81 @@ Which of these is NOT a valid border value? #### --text-- -How can you ensure that gradients used in web design are accessible? +What is does the `radial-gradient` function do? #### --distractors-- -Use only two colors in the gradient +It creates a background that transitions between multiple colors along a straight line. --- -Use gradients only for decorative purposes +It specifies whether the background image should scroll with the content or remain fixed in place. --- -Avoid using gradients in the background +It is used to style an element that was activated by the user. #### --answer-- -Ensure sufficient contrast between the gradient and any text. +It creates an image that radiates from a particular point and gradually transitions between multiple colors. ### --question-- #### --text-- -Which value for the `background-size` property will resize the background image to fit within the container while preserving the image's aspect ratio? +Which of the following is NOT a valid pseudo-class? #### --distractors-- -`fill` +`:focus` --- -`stretch` +`:visited` --- -`repeat` +`:link` #### --answer-- -`contain` +`:before` ### --question-- #### --text-- -How do you make an image border have rounded corners in CSS? +Which of the following shows the `background` shorthand property being used properly? #### --distractors-- -`border-style: round` +```css +body { + background: apply url("example-url-goes-here"); +} +``` --- -`border-corners: circle` +```css +body { + background: set url("example-url-goes-here"); +} +``` --- -`border-rounding: 10px` +```css +body { + background: 2px solid red url("example-url-goes-here"); +} +``` #### --answer-- -`border-radius: 10px` +```css +body { + background: no-repeat url("example-url-goes-here"); +} +``` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md index 7475192583..4671ada16c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md @@ -17,111 +17,111 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -Which of the following is a valid way to represent a color in CSS? +Which of these color systems cannot be used to set a color in CSS? #### --distractors-- -`color-value: black;` +RGB --- -`text-color: blue;` +HSL --- -`font-color: red;` +HEX #### --answer-- -`#ff5733` +CMYK ### --question-- #### --text-- -What is the correct syntax for setting the background color of an element? +What are the primary colors in color theory? #### --distractors-- -`bg-color: red;` +`Green`, `Blue`, `Purple` --- -`background_color: red;` +`Orange`, `Green`, `Purple` --- -`style: background-color: red;` +`Yellow`, `Green`, `Red` #### --answer-- -`background: red;` +`Yellow`, `Blue`, `Red` ### --question-- #### --text-- -How can you set the transparency of an element to 50%? +Which type of color scheme uses colors that are opposite each other on the color wheel? #### --distractors-- -`bg-opacity: 0.5;` +Analogous --- -`transparency: 50%;` +Triadic --- -`alpha: 0.5;` +Monochromatic #### --answer-- -`opacity: 0.5;` +Complementary ### --question-- #### --text-- -What is the equivalent `HSL` value for the color `#FF0000`? +Which type of color scheme uses colors that are adjacent to each other on the color wheel? #### --distractors-- -`hsl(180%, 100%, 50%)` +Complementary --- -`hsl(180, 100%, 50%)` +Triadic --- -`hsl(360, 100%, 50%)` +Monochromatic #### --answer-- -`hsl(0, 100%, 50%)` +Analogous ### --question-- #### --text-- -How can you set the color of an element to a random color? +What is the term for colors that are created by mixing equal parts of two primary colors? #### --distractors-- -`color: random();` +Tertiary --- -`color: #random;` +Complementary --- -`color: any();` +Analogous #### --answer-- -There is no direct way to do so. +Secondary ### --question-- @@ -237,45 +237,53 @@ Which of the following hex codes represents a shade of red? #### --text-- -Which keyword sets the text color to inherit from the parent element? +How many colors are required to create a valid CSS gradient? #### --distractors-- -`null` +At least 4. --- -`auto` +Exactly 2. --- -`default` +Exactly 3. #### --answer-- -`inherit` +At least 2. ### --question-- #### --text-- -How many colors are required to create a valid CSS gradient? +Which is NOT a valid way to apply a linear-gradient? #### --distractors-- -At least `4` +```css +background: linear-gradient(to right, red, blue); +``` --- -Exactly `2` +```css +background: linear-gradient(90deg, red, green, blue); +``` --- -Exactly `3` +```css +background: linear-gradient(#F00, #00F); +``` #### --answer-- -At least `2` +```css +background: linear-gradient(up, red, blue); +``` ### --question-- @@ -285,41 +293,41 @@ What unit is used to express the lightness value in the `hsl` color model? #### --distractors-- -`Degrees` +Degrees --- -`Hex` +Hex --- -`Pixels` +Pixels #### --answer-- -`Percent (%)` +Percent ### --question-- #### --text-- -Which CSS property would you use to add a solid color around an element? +What does the `rgb()` function stand for? #### --distractors-- -`color` +`Red`, `Gray`, `Black` --- -`outline-color` +`Radiant`, `Glow`, `Blend` --- -`text-color` +`Rendered`, `Graphic`, `Background` #### --answer-- -`border-color` +`Red`, `Green`, `Blue` ### --question-- @@ -329,37 +337,37 @@ What does the `hsl()` function stand for? #### --distractors-- -`Hue, Saturation, Luminosity` +`Hue`, `Saturation`, `Luminosity` --- -`Hue, Shadow, Lightness` +`Hue`, `Shadow`, `Lightness` --- -`Hue, Shadow, Luminosity` +`Hue`, `Shadow`, `Luminosity` #### --answer-- -`Hue, Saturation, Lightness` +`Hue`, `Saturation`, `Lightness` ### --question-- #### --text-- -Which of these is a valid CSS color keyword? +Which of these is a valid CSS named color? #### --distractors-- -`purple-red` +`hsl(yellow)` --- -`electricblue` +`rgb(red)` --- -`goldy` +`#blue` #### --answer-- @@ -391,29 +399,37 @@ What is the maximum value allowed for a single color component in the `RGB` colo #### --text-- -Which color model includes the `hue` component? +Which of these correctly uses one of the color models to set the background color? #### --distractors-- -`rgb` +```css +background: rgb(50%, 255, 155); +``` --- -`hex` +```css +background: #blue; +``` --- -`cmyk` +```css +background: #0I0I0I; +``` #### --answer-- -`hsl` +```css +background: hsl(50, 50%, 50%); +``` ### --question-- #### --text-- -Which color function also allows you to set the opacity of the color? +Which of these sets the opacity of the color? #### --distractors-- @@ -468,4 +484,3 @@ background: linear-gradient(blue, red) ```css background: linear-gradient(red, blue) ``` - diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md index 802c8e1a5e..68a68c012c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md @@ -44,32 +44,32 @@ What css property is set to enable the flexbox layout for the `div` element? #### --distractors-- ```css -div { - flex: 1; +div { + flex: 1; } ``` --- ```css -div { - flex-direction: row; +div { + flex-direction: row; } ``` --- ```css -div { - flex-wrap: wrap; +div { + flex-wrap: wrap; } ``` #### --answer-- ```css -div { - display: flex; +div { + display: flex; } ``` @@ -77,7 +77,7 @@ div { #### --text-- -Flexbox defaults to fit all children within a single row. What property can be modified when there are too many children within one row, and you want to spread them out into multiple rows? +Which CSS property lets flex items wrap onto a new row when the current row is full? #### --distractors-- @@ -103,19 +103,19 @@ What does the flexbox property `justify-content` control? #### --distractors-- -It controls the direction of the children elements of the flexbox container. +It controls the direction of the child elements of the flexbox container. --- -It controls the text style of the children elements of the flexbox container. +It controls the text style of the child elements of the flexbox container. --- -It controls the alignment of the children elements within the flexbox container. +It controls the alignment of the child elements within the flexbox container. #### --answer-- -It controls the distribution of the children elements on the main axis. +It controls the distribution of the child elements on the main axis. ### --question-- @@ -143,7 +143,7 @@ What property controls the direction of the elements within the flexbox containe #### --text-- -What CSS properties would you use to make a `.container` element's items flow from left to right, change lines when an item exceeds container width, and have new items go on top of the previous line? +Which CSS properties can be used to make flex items flow from left to right, and have the new flex item appear on top of the previous one if the width of the current row is exceeded? #### --distractors-- @@ -276,7 +276,7 @@ What CSS properties would you use to center an element within a flex container h #### --text-- -What value of `flex-direction` makes the children elements go from right to left? +What value of `flex-direction` makes the flex items go from right to left? #### --distractors-- @@ -324,7 +324,7 @@ What does the `stretch` value in `align-items` do? #### --distractors-- -Items are packed flush to each other toward the start edge of the container. +Items are packed directly against each other toward the start edge of the container. --- @@ -332,7 +332,7 @@ Items are aligned such that their flex container baselines align. --- -Items are packed flush to each other toward the end edge of the container. +Items are packed directly against each other toward the end edge of the container. #### --answer-- @@ -342,7 +342,7 @@ Auto-size items to be equally large to fill the container. #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, have the same spacing between each pair of adjacent items, and have items whose sides are flush against the main axis edge? +Which `justify-content` value places the first item at the start, the last item at the end, and evenly spaces the other items between them along the main axis? #### --distractors-- @@ -364,7 +364,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, and have the same spacing between each pair of adjacent items and against the main axis edge? +Which `justify-content` value spaces items so that the gaps between every pair of adjacent items and the container’s edges are all equal? #### --distractors-- @@ -386,7 +386,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, have the same spacing between each pair of adjacent items, and have items on the sides with half the spacing against the main axis edge? +Which `justify-content` value spaces items equally along the main axis while leaving half that amount of space at the container’s edges? #### --distractors-- @@ -408,7 +408,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `align-items` will make it so items are flush against the cross-axis start? +Which value for `align-items` will make it so items are directly against the cross-axis start? #### --distractors-- @@ -430,7 +430,7 @@ Which value for `align-items` will make it so items are flush against the cross- #### --text-- -Which value for `align-items` will make it so items are flush against the cross-axis end? +Which value for `align-items` will make it so items are directly against the cross-axis end? #### --distractors-- @@ -452,7 +452,7 @@ Which value for `align-items` will make it so items are flush against the cross- #### --text-- -Which value for `flex-direction` will make it so items are aligned along the main axis from left to right. +Which value for `flex-direction` will make it so items are aligned along the main axis from left to right? #### --distractors-- @@ -474,7 +474,7 @@ Which value for `flex-direction` will make it so items are aligned along the mai #### --text-- -Which value for `flex-direction` will make it so items are aligned along the cross axis from top to bottom. +Which value for `flex-direction` will make it so items are aligned along the cross axis from top to bottom? #### --distractors-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md index 3a1db70a11..511a8f7cf3 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md @@ -39,45 +39,45 @@ A two-dimensional layout for HTML documents. #### --text-- -Which property and attribute are used to turn an element into a grid container? +Which of the following is the correct way to create a grid container? #### --distractors-- -`display: grid-area` +`display: grid-area;` --- -`grid: grid-template` +`grid: grid-template;` --- -`grid-template: set` +`grid-template: set;` #### --answer-- -`display: grid` +`display: grid;` ### --question-- #### --text-- -Which one of these options for the `grid-template-columns` property will result in a middle column that is 80 relative units wide, and two columns taking up the remaining space? +What does the `grid-template-columns` property do? #### --distractors-- -`10% 80rem 10%` +Defines two columns and three rows for a grid container. --- -`1fr 8fr 1fr` +Sets all columns for the grid layout to a fixed length. --- -`10rem 80rem 10rem` +Creates a two column grid layout container. #### --answer-- -`1fr 80rem 1fr` +Defines the number of columns in a grid layout. ### --question-- @@ -95,11 +95,11 @@ Creates a template for creating new grid rows. --- -Specifies a default row size. +Specifies a default row size in the grid container. #### --answer-- -Specifies the number and heights of the rows in a grid layout. +Specifies the number and height for each row in a grid layout. ### --question-- @@ -121,7 +121,7 @@ Sets the minimal size of the element for browser working in full-screen mode. #### --answer-- -Defines a size range between the first and second value. +Sets the minimum and maximum sizes for a track. ### --question-- @@ -149,45 +149,45 @@ What is the shorthand for the `column-gap` and `row-gap` properties? #### --text-- -Which property defines on which row line the item will start? +What is the difference between an implicit and explicit grid? #### --distractors-- -`row-start` +Implicit grids use the `grid-template-columns` property while explicit grids use the `grid-template-rows` property. --- -`grid-row-begin` +Explicit grids use the `grid-template-columns` property while implicit grids use the `grid-template-rows` property. --- -`grid-row` +Implicit grids use the `grid-template-columns` or `grid-template-rows` properties to create columns while rows and columns are automatically created in explicit grids. #### --answer-- -`grid-row-start` +Explicit grids use the `grid-template-columns` or `grid-template-rows` properties to create columns while rows and columns are automatically created in implicit grids. ### --question-- #### --text-- -Which property automatically allocates rows based on a fixed size? +Which of the following units represents a fraction of the space within the grid container? #### --distractors-- -`grid-rows-size` +`fractional` --- -`grid-template` +`frac` --- -`grid-row` +`f` #### --answer-- -`grid-auto-rows` +`fr` ### --question-- @@ -227,7 +227,7 @@ Aligns text in the grid item vertically. --- -Specifies the number of columns in a grid element. +Sets two columns for a grid container. #### --answer-- @@ -241,41 +241,41 @@ How do you create four columns of equal width? #### --distractors-- -`grid-template-columns: repeat(4)` +`grid-template-columns: repeat(4);` --- -`grid-template-columns: 1, 1, 1, 1,` +`grid-template-columns: repeat(1, 4);` --- -`grid-column: repeat(4, 1fr)` +`grid-template-columns: repeat(1fr, 4);` #### --answer-- -`grid-template-columns: repeat(4, 1fr)` +`grid-template-columns: repeat(4, 1fr);` ### --question-- #### --text-- -Which property and value will make an element span the full width of the grid? +What does the `grid-template-areas` property do? #### --distractors-- -`grid-column: 1 / 1` +It is used to specify where the item begins on a line in the grid container. --- -`width: 100%` +It is used to create gaps between tracks in the container. --- -`grid-column: 100%` +It is used to repeat sections in the track listing. #### --answer-- -`grid-column: 1 / -1` +It is used to provide a name for the items you are going to position on the grid. ### --question-- @@ -303,111 +303,182 @@ Controls how auto-placed elements get inserted to the grid. #### --text-- -What does the secondary value `dense` do in the `grid-auto-flow` property? +Which of the following is the correct way to use the `grid-template-areas` property? #### --distractors-- -Narrows the grid container to fit to its content width. - ---- - -Groups grid items of the same size. - ---- - -Sorts grid items based on their size. +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: set( + "header header" + "sidebar main" + "footer footer" + ); + gap: 20px; +} +``` + +--- + +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: apply( + "header header" + "sidebar main" + "footer footer" + ); + gap: 20px; +} +``` + +--- + +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: set-areas; + gap: 20px; +} +``` #### --answer-- -Place smaller items to fill gaps in the grid. +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header" + "sidebar main" + "footer footer"; + gap: 20px; +} +``` ### --question-- #### --text-- -Which one of these options is NOT a unit used for the `gap` property? +Which of the following is the correct way to work with the `grid-auto-flow` property? #### --distractors-- -`px` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: none; + grid-auto-columns: 1fr; +} +``` --- -`%` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: allow; + grid-auto-columns: 1fr; +} +``` --- -`em` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: set; + grid-auto-columns: 1fr; +} +``` #### --answer-- -`fr` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; +} +``` ### --question-- #### --text-- -How do you make a grid item take up 2 rows using the `grid-row-end` property? +Which of the following is NOT a valid grid property? #### --distractors-- -`grid-row-end: 2 / 2` +`gap` --- -`grid-row-end: -2` +`grid-column` --- -`grid-row-end: 2` +`grid-template-columns` #### --answer-- -`grid-row-end: span 2` +`grid-set` ### --question-- #### --text-- -Which of these properties is NOT used to align items inside a grid element? +Which of these properties can be used to center items inside a grid element? #### --distractors-- -`align-items` +`allow-items` --- -`place-items` +`set-items` --- -`justify-items` +`center-items` #### --answer-- -`center-items` +`align-items` ### --question-- #### --text-- -Which of these properties can be used as a shorthand for the `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end` properties? +Which of the following is a correct value to use with the `grid-auto-columns` property? #### --distractors-- -`grid-section` +`grid-auto-columns: unset-grid;` --- -`grid-item` +`grid-auto-columns: revert-grid;` --- -`grid-row-column` +`grid-auto-columns: set-content(20%);` #### --answer-- -`grid-area` +`grid-auto-columns: 1fr;` ### --question-- @@ -435,21 +506,45 @@ Spaces between two adjacent grid lines. #### --text-- -How can you use dev tools to debug the CSS Grid layout? +Which of the following is the correct way to use the `minmax()` function? #### --distractors-- -To resize the elements to fill out the gaps in the grid. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(apply); +} +``` --- -To drag-and-drop elements inside the grid. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(); +} +``` --- -To automatically fix overlaying grid elements. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(set); +} +``` #### --answer-- -To preview the layout of grid lines. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(150px, auto); +} +``` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md index 1a0901cda1..cafa970cf8 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -What happens when there is too much content to fit in an element box? +What term is used in CSS to describe when an element's content exceeds the size of its container? #### --distractors-- @@ -39,23 +39,23 @@ Overflow #### --text-- -What is the default behavior of CSS when there is overflow? +What is the default behavior of CSS when content overflows an element? #### --distractors-- -Content is hidden +Hiding the content. --- -Content is clipped +Clipping the content. --- -Content is resized +Resizing the content. #### --answer-- -Content is visible +Keeping the content visible. ### --question-- @@ -65,63 +65,63 @@ Why does CSS typically avoid hiding content when there is overflow? #### --distractors-- -To enhance page design by hiding irrelevant content +To maintain the original layout and design. --- -To save memory and load pages faster +To prevent performance issues in the browser. --- -To automatically fix broken layout issues +To allow for better search engine optimization. #### --answer-- -To prevent data loss and make issues noticeable +To ensure all content is accessible to users. ### --question-- #### --text-- -How can you handle overflow in CSS to hide content or add scrollbars? +How can you handle vertical overflow in CSS by hiding content or displaying scrollbars? #### --distractors-- -Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars +Use `overflow-y: visible` to hide content and `overflow-y: auto` to always display scrollbars. --- -Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars +Use `overflow-y: collapse` to hide content and `overflow-y: expand` to display scrollbars. --- -Use `overflow: none` to hide content and `overflow: show` to display scrollbars +Use `overflow-y: none` to hide content and `overflow-y: show` to display scrollbars. #### --answer-- -Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars +Use `overflow-y: hidden` to hide content and `overflow-y: scroll` to always display scrollbars. ### --question-- #### --text-- -How can you specify different scrolling behaviors for the x-axis and y-axis in CSS? +How can you specify different horizontal and vertical scrolling behaviors in CSS? #### --distractors-- -By using `scroll-x` and `scroll-y` properties +By using the `scroll-x` and `scroll-y` properties. --- -By using `overflow-x` and `overflow-y` separately in every case +By specifying the same value for `overflow-x` and `overflow-y`. --- -By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x` +By specifying two values for the `overflow` property, where the first value applies to `overflow-y` and the second value to `overflow-x`. #### --answer-- -By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y` +By specifying two values for the `overflow` property, where the first value applies to `overflow-x` and the second value to `overflow-y`. ### --question-- @@ -131,47 +131,47 @@ What does the `transform` CSS property allow you to do? #### --distractors-- -Change the color and font style of an element +Change the color and font style of an element. --- -Adjust the margin and padding of an element +Adjust the margin and padding of an element. --- -Modify the visibility and display of an element +Modify the visibility and display of an element. #### --answer-- -Rotate, scale, skew, or translate an element +Rotate, scale, skew, and translate an element. ### --question-- #### --text-- -What does the `transform-box: fill-box` property do in an animation that rotates an element? +How does the `transform: translate(15px, 200px)` property modify an element? #### --distractors-- -It resizes the element to fit the canvas during the transformation +It moves the element 15 pixels to the left and 200 pixels down from its original position. --- -It changes the background of the element during transformation +It rotates the element 15 degrees in a clockwise direction. --- -It sets the transform origin to the top-left corner of the element +It moves the element 15 pixels to the right and 200 pixels up from its original position. #### --answer-- -It sets the transform origin to the center of the element's bounding box, allowing it to spin in place +It moves the element 15 pixels to the right and 200 pixels down from its original position. ### --question-- #### --text-- -What is the purpose of CSS's `overflow-x` and `overflow-y` properties? +What is the purpose of the CSS properties `overflow-x` and `overflow-y`? #### --distractors-- @@ -193,45 +193,45 @@ They control the horizontal and vertical overflow of an element's content. #### --text-- -How does margin affect the size of an element in CSS? +What is the purpose of the `margin` property in CSS? #### --distractors-- -Margin increases the actual size of the element's box +It defines the space between the content and the border of an element. --- -Margin has no effect on the element's size or position +It defines the space between the border and the padding of an element. --- -Margin decreases the total area the element occupies on the page +It defines the width and height of an element. #### --answer-- -Margin affects the total area an element occupies but is not part of the actual size of the box +It defines the space around an element, outside of its border. ### --question-- #### --text-- -What does the content area of an element in CSS represent? +What does the content area of an element represent in CSS? #### --distractors-- -It defines the margins and padding around the element +It defines the margins and padding around the element. --- -It specifies the border thickness of the element +It defines the thickness of the element's border. --- -It controls the visibility of the element on the page +It controls the visibility of the element on the page. #### --answer-- -It contains the "real" content of the element, such as text, images, or videos +It contains the actual content of the element, such as text, images, and videos. ### --question-- @@ -241,19 +241,19 @@ What is the difference between `content-box` and `border-box` in CSS? #### --distractors-- -`content-box` includes padding and border, while `border-box` includes only content dimensions +`content-box` includes padding and border, while `border-box` includes only content dimensions. --- -Both `content-box` and `border-box` include only the border dimensions +Both `content-box` and `border-box` include only the border dimensions. --- -`content-box` is used for 2D elements, while `border-box` is used for 3D elements +`content-box` is used for 2D elements, while `border-box` is used for 3D elements. #### --answer-- -`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions +`content-box` includes only content dimensions, while `border-box` includes content, padding, and border in the dimensions. ### --question-- @@ -263,47 +263,47 @@ What is the purpose of CSS resets? #### --distractors-- -To apply default styles to all elements for faster loading +To apply default styles to all elements for faster loading. --- -To minimize the size of CSS files by removing unused styles +To minimize the size of CSS files by removing unused styles. --- -To optimize images and fonts for better performance +To optimize images and fonts for better performance. #### --answer-- -To remove default browser styling and create a consistent baseline for styling across different browsers +To remove default browser styling and ensure consistent styling across browsers. ### --question-- #### --text-- -What are the common types of CSS resets? +Which of the following is a common example of a CSS reset? #### --distractors-- -Bootstrap Reset, Tailwind Reset, and Foundation Reset +Bootstrap.css --- -Simple Reset, Comprehensive Reset, and Adaptive Reset +Reset.css --- -Minimal Reset, Advanced Reset, and Legacy Reset +Restore.css #### --answer-- -Normalize.css, Eric Meyer's Reset, and HTML5 Reset +Normalize.css ### --question-- #### --text-- -Which CSS property is used to apply transformations such as rotation, scaling, and translation to elements? +Which CSS property is used to apply changes such as rotation, scaling, and translation to elements? #### --distractors-- @@ -325,131 +325,131 @@ Which CSS property is used to apply transformations such as rotation, scaling, a #### --text-- -How is the total width of an element calculated in CSS? +How is the total width of an element calculated in CSS when using the `border-box` value for the `box-sizing` property? #### --distractors-- -Total width = width + margin + padding + border +Total Width = Content Width + Border + Margin --- -Total width = width + margin + padding +Total Width = Content Width + Padding + Border + Margin --- -Total width = width + margin + border +Total Width = Content Width #### --answer-- -Total width = width + left padding + right padding + left border + right border +Total Width = Content Width + Padding + Border ### --question-- #### --text-- -What does the filter property in CSS do? +What is the purpose of the `filter` property in CSS? #### --distractors-- -It changes the layout of the element on the page +Changing the scale and rotation of an element. --- -It changes the background color and texture of an element +Changing the background color and texture of an element. --- -It alters the size and position of an element +Altering the size and position of an element. #### --answer-- -It applies visual effects like blur and saturation to an element +Modifying the visual appearance of an element by using various graphical effects. ### --question-- #### --text-- -How is the `filter` property specified in CSS? +What does the CSS property `filter: grayscale(50%);` do to an element? #### --distractors-- -As only a single function, where percentage values must be used +It increases the brightness of the element by 50%. --- -As `block` or `inline`, with values expressed in pixels +It decreases the contrast of the element by 50%. --- -As `none` or multiple functions, but only percentage values are accepted +It applies a sepia effect to the element. #### --answer-- -As `none` or one or more functions, where percentage values can also be expressed as decimals +It applies a 50% grayscale effect to the element. ### --question-- #### --text-- -What does the `contrast()` function in CSS do? +What is the purpose of the `contrast()` function in CSS? #### --distractors-- -Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white +It adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white. --- -Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it +It adjusts the contrast of the image, where `100%` makes it grey, `0%` has no effect, and values over `100%` increase contrast. --- -Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque +It adjusts the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque. #### --answer-- -Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast +It adjusts the contrast of the image, where `0%` makes it grey, `100%` has no effect, and values over `100%` increase contrast. ### --question-- #### --text-- -What does the `hue-rotate()` function in CSS do? +What is the purpose of the `hue-rotate()` function in CSS? #### --distractors-- -It changes the brightness of the input image based on degrees +It changes the brightness of an image. --- -It rotates an element's size and position in the document +It rotates an image clockwise by a certain number of degrees. --- -It adjusts the saturation and contrast of the input image +It adjusts the saturation and contrast of an image. #### --answer-- -It applies a hue rotation, where the `` value defines the degrees around the hue color circle +It applies a color shift, where the `angle` value defines the number of degrees to rotate around the color circle. ### --question-- #### --text-- -What happens when two animated filters have different function list lengths in CSS? +What is margin collapsing in CSS? #### --distractors-- -The shorter list's filters override the longer list's filters +When the margin of an element is set to a negative number and this causes issues in the layout. --- -The filters are discarded and no animation is applied +When the margin of an element is decreased by the padding and this changes the element's dimensions. --- -Only the first filter function in each list is animated +When the margin of an element is ignored by the browser, so it's not visible. #### --answer-- -The longer list's missing equivalent filter functions are added to the shorter list using their initial values +When the vertical margins of adjacent elements overlap, so they are combined into a single margin. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md index 9c4658cd5a..28247f60a1 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md @@ -21,19 +21,19 @@ What is a CSS framework? #### --distractors-- -A set of CSS rules +A set of CSS rules. --- -A JavaScript library +A JavaScript library. --- -A coding language +A coding language. #### --answer-- -A library for CSS styles +A library for CSS styles. ### --question-- @@ -65,19 +65,19 @@ What is a key advantage of using a CSS framework? #### --distractors-- -Provides predefined templates +Provides predefined templates. --- -Reduces loading speed +Reduces loading speed. --- -Increases code complexity +Increases code complexity. #### --answer-- -Simplifies design consistency +Simplifies design consistency. ### --question-- @@ -87,19 +87,19 @@ What is a disadvantage of CSS frameworks? #### --distractors-- -Too few components +Too few components. --- -No customization options +No customization options. --- -Improved browser support +Improved browser support. #### --answer-- -Can bloat CSS files +Can bloat CSS files. ### --question-- @@ -131,19 +131,19 @@ What is the primary purpose of the `.container` class in Bootstrap? #### --distractors-- -To add padding to elements +To add padding to elements. --- -To apply a background color +To apply a background color. --- -To center text +To center text. #### --answer-- -To create a fixed-width responsive container +To create a fixed-width responsive container. ### --question-- @@ -153,19 +153,19 @@ What does SCSS stand for? #### --distractors-- -Super Cascading Style Sheets +Super Cascading Style Sheets. --- -Structured CSS +Structured CSS. --- -Simple CSS +Simple CSS. #### --answer-- -Sassy CSS +Sassy CSS. ### --question-- @@ -175,19 +175,19 @@ What benefit do preprocessors like Sass provide? #### --distractors-- -Adds JavaScript functionality +Adds JavaScript functionality. --- -Directly edits HTML +Directly edits HTML. --- -Eliminates CSS +Eliminates CSS. #### --answer-- -Nesting of styles +Nesting of styles. ### --question-- @@ -201,11 +201,11 @@ Comments --- -CSS variables +CSS variables. --- -Inline CSS +Inline CSS. #### --answer-- @@ -219,19 +219,19 @@ What is Bootstrap known for? #### --distractors-- -Static design +Static design. --- -Focus on accessibility +Focus on accessibility. --- -No JavaScript support +No JavaScript support. #### --answer-- -Mobile-first approach +Mobile-first approach. ### --question-- @@ -241,19 +241,19 @@ What does Tailwind CSS focus on? #### --distractors-- -Component-based styling +Component-based styling. --- -Image optimization +Image optimization. --- -Mobile responsiveness +Mobile responsiveness. #### --answer-- -Utility-first design +Utility-first design. ### --question-- @@ -263,19 +263,19 @@ What does a CSS framework typically include? #### --distractors-- -JavaScript functions +JavaScript functions. --- -HTML templates +HTML templates. --- -Database management +Database management. #### --answer-- -Predefined styles and components +Predefined styles and components. ### --question-- @@ -307,15 +307,15 @@ What is a main feature of preprocessors? #### --distractors-- -Linear CSS +Linear CSS. --- -Uncompiled styles +Uncompiled styles. --- -Built-in animations +Built-in animations. #### --answer-- @@ -329,19 +329,19 @@ Which of the following is a drawback of Tailwind CSS? #### --distractors-- -Limited utility classes +Limited utility classes. --- -Lack of documentation +Lack of documentation. --- -Hard to learn +Hard to learn. #### --answer-- -Verbose class names +Verbose class names. ### --question-- @@ -395,19 +395,19 @@ What does Bootstrap's grid system help with? #### --distractors-- -CSS animations +CSS animations. --- -JavaScript functions +JavaScript functions. --- -Image loading +Image loading. #### --answer-- -Responsive layout +Responsive layout. ### --question-- @@ -439,17 +439,17 @@ Why might developers choose Materialize? #### --distractors-- -Strong community support +Strong community support. --- -Easy integration with HTML +Easy integration with HTML. --- -Comprehensive animation support +Comprehensive animation support. #### --answer-- -Focus on material design principles +Focus on material design principles. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md index 36b0a03ebf..747678072d 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md @@ -355,19 +355,19 @@ Which positioning method allows an element to stick to a defined position only w #### --distractors-- -Float positioning +Float positioning. --- -Fixed positioning +Fixed positioning. --- -Absolute positioning +Absolute positioning. #### --answer-- -Sticky positioning +Sticky positioning. ### --question-- @@ -480,9 +480,9 @@ Which of the following is a correct example for using the `clearfix` hack? ```css .clearfix::before { - position: fixed; - top: 0; - width: 100%; + position: fixed; + top: 0; + width: 100%; clear: both; } ``` @@ -549,9 +549,9 @@ Which of the following is an example of setting the navbar to the top of the pag ```css .navbar { - fixed: top; - top: 0; - width: 100%; + fixed: top; + top: 0; + width: 100%; } ``` @@ -559,8 +559,8 @@ Which of the following is an example of setting the navbar to the top of the pag ```css .navbar { - upper: fixed; - width: 100%; + upper: fixed; + width: 100%; } ``` @@ -568,9 +568,9 @@ Which of the following is an example of setting the navbar to the top of the pag ```css .navbar { - position: fixed-top; - top: 0; - width: 100%; + position: fixed-top; + top: 0; + width: 100%; } ``` @@ -578,9 +578,9 @@ Which of the following is an example of setting the navbar to the top of the pag ```css .navbar { - position: fixed; - top: 0; - width: 100%; + position: fixed; + top: 0; + width: 100%; } ``` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index 3f797ae969..d4d8054993 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -33,13 +33,13 @@ They are selector used to add movement effects to an element during interactions #### --answer-- -They are keywords added to a selector that change how an element looks or behaves when it's in a specific state. +They are keywords added to a selector that style an element based on its state. ### --question-- #### --text-- -Which pseudo-class applies when you hover over an element? +Which pseudo-class applies when a pointing device is being positioned over an element? #### --distractors-- @@ -83,7 +83,7 @@ Which pseudo-element allows you to style the first letter of a paragraph? #### --text-- -Which pseudo-class changes the style of an element when you click on it? +Which pseudo-class changes the style of an element while it is being clicked? #### --distractors-- @@ -105,7 +105,7 @@ Which pseudo-class changes the style of an element when you click on it? #### --text-- -Which pseudo-class is used to select and style an element when it's focused? +Which pseudo-class is used to style an element when it is ready to receive user input, such as a text field being clicked or tabbed into? #### --distractors-- @@ -127,29 +127,45 @@ Which pseudo-class is used to select and style an element when it's focused? #### --text-- -What does the `:hover` pseudo-class do? +Which of the following CSS rules correctly adds the text `Note:` in front of each paragraph element with a class of `note`? #### --distractors-- -It styles your element when you click on it. +```css +.note::before { + content: "Note:"; +} +``` --- -It makes your element float around the screen. +```css +p.note::after { + content: "Note:"; +} +``` --- -It hides elements on click. +```css +p::before { + content: "Note:"; +} +``` #### --answer-- -It styles an element when you hover over it. +```css +p.note::before { + content: "Note:"; +} +``` ### --question-- #### --text-- -Which pseudo-class is used for an input field that is checked? +Which pseudo-class applies to an input field when it is selected or toggled on? #### --distractors-- @@ -209,7 +225,7 @@ li:last-child { #### --text-- -Which pseudo-class applies when an input field is optional? +Which pseudo-class targets input fields that are not required to fill out? #### --distractors-- @@ -253,7 +269,7 @@ It styles elements that are not available for user interaction. #### --text-- -Which pseudo-class is triggered when a form input is valid? +Which pseudo-class applies when a form input meets its validation criteria? #### --distractors-- @@ -283,7 +299,7 @@ Which one of these is not a location pseudo-class? --- -`:scope` +`:any-link` --- @@ -335,23 +351,41 @@ li:nth-child(3) { #### --text-- -Which pseudo-class is used for the current active link? +Which elements will have a `color` of `blue` with the following CSS? + +```css +p:is(.blue, .highlight) { + color: blue; +} +``` #### --distractors-- -`:focus` +```html +

Paragraph 1

+

Paragraph 2

+``` --- -`:hover` +```html +
Paragraph 1
+
Paragraph 2
+``` --- -`:visited` +```html +

Paragraph 1

+Paragraph 2 +``` #### --answer-- -`:active` +```html +

Paragraph 1

+

Paragraph 2

+``` ### --question-- @@ -379,23 +413,29 @@ It selects elements that do not match a given selector. #### --text-- -What does the `:nth-child(4)` pseudo-class do? +What does the following CSS rule do? + +```css +p:first-of-type { + font-style: italic; +} +``` #### --distractors-- -It selects the last child. +It selects the first `p` element in the document. --- -It selects all children. +It selects all `p` elements in the document. --- -It styles odd children. +It selects the first child of every `p` element. #### --answer-- -It selects the fourth child. +It selects the first `p` element within a parent container. ### --question-- @@ -405,19 +445,19 @@ What does the `:last-of-type` pseudo class do? #### --distractors-- -It selects the first child element. +It selects the first child element of a specific type within its parent. --- -It selects the middle element. +It selects the middle child element of a specific type within its parent. --- -It selects every element in a group. +It selects every child element of a specific type within its parent. #### --answer-- -It selects the last sibling element. +It selects the last child element of a specific type within its parent. ### --question-- @@ -453,7 +493,7 @@ Which one of these is a functional pseudo-class? --- -`:last-of-type` +`:match()` --- @@ -483,5 +523,4 @@ Which one of these is not a functional pseudo-class? #### --answer-- -`::before` - +`:contains()` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md index fdbceb80b1..e979353934 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md @@ -17,23 +17,23 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -If the body text is `16px`, how much is `1em` in most child elements? +What is an absolute unit? #### --distractors-- -`18px` +Units that adjust dynamically based on screen size. --- -`12px` +Units that depend on the font size of the parent element. --- -It depends on the parent's font size +Units measured in percentages of the viewport. #### --answer-- -`16px` +Fixed length units that are not relative to anything else. ### --question-- @@ -43,41 +43,41 @@ What does `100vw` cover in terms of screen width? #### --distractors-- -100% of the screen width +`100%` of the screen width. --- -100% of the viewport height +`100%` of the viewport height. --- -100% of the parent's width +`100%` of the parent's width. #### --answer-- -100% of the viewport width +`100%` of the viewport width. ### --question-- #### --text-- -If a container is `1000px` wide, how wide is 5% of it? +Which of the following is a relative unit? #### --distractors-- -`100px` +`pt` --- -`500px` +`cm` --- -`5px` +`mm` #### --answer-- -`50px` +`em` ### --question-- @@ -109,41 +109,41 @@ What can the `calc()` function do in CSS? #### --distractors-- -Modify colors dynamically +Modify colors dynamically. --- -Set a fixed width +Set a fixed width. --- -Only work with percentages +Only work with percentages. #### --answer-- -Add, subtract, multiply, or divide different units +Add, subtract, multiply, or divide different units. ### --question-- #### --text-- -On a typical screen with 96 DPI resolution, how many points (`pt`) are in 1 pixel (`px`)? +Which unit is the most commonly used absolute unit in CSS? #### --distractors-- -`1.33pt` +`inch` --- -`1pt` +`rem` --- -`2pt` +`%` #### --answer-- -`0.75pt` +`px` ### --question-- @@ -215,23 +215,23 @@ It adds `10px` to `20%` of the parent's width. #### --text-- -If the parent element's text size is `20px`, how big is `1.5em`? +Which unit is relative to the font size of the root element? #### --distractors-- -`25px` +`px` --- -`15px` +`pt` --- -`20px` +`%` #### --answer-- -`30px` +`rem` ### --question-- @@ -259,45 +259,45 @@ With a root font size of `16px`, how big is `10rem`? #### --text-- -Why might you use `pt` instead of `px` in design? +Why might you use `point` instead of `pixels` in design? #### --distractors-- -Points are scalable +Points are scalable. --- -Points are better for responsive layouts +Points are better for responsive layouts. --- -Points are easier to manage on screens +Points are easier to manage on screens. #### --answer-- -Points are for print design +Points are for print design. ### --question-- #### --text-- -How does `calc(10vh + 50px)` work for height? +Why are `rem` units preferred over `pixels` in typography? #### --distractors-- -It adds `50px` to 10% of the viewport width. +Because they provide fixed sizing regardless of screen resolution. --- -It adds `10px` to 50% of the parent's height. +Because they ensure compatibility with older browsers. --- -It adds `10vh` to 50% of the document width. +Because they are easier to implement in responsive designs. #### --answer-- -It adds `50px` to 10% of the viewport height. +Because they scale proportionally with the user’s browser settings. ### --question-- @@ -307,11 +307,11 @@ How much screen space does `80vw` take? #### --distractors-- -80% of the parent's width +`80%` of the parent's width. --- -100% of the viewport height +`100%` of the viewport height. --- @@ -319,51 +319,51 @@ How much screen space does `80vw` take? #### --answer-- -80% of the viewport width +`80%` of the viewport width. ### --question-- #### --text-- -If the root font size is `18px`, how big is `2rem`? +Which units should you use if you want to make an element occupy a certain width or height by the percentage of the screen? #### --distractors-- -`24px` +`pt` and `px` --- -`18px` +`rem` and `em` --- -`20px` +`pt` and `pc` #### --answer-- -`36px` +`vw` and `vh` ### --question-- #### --text-- -What does `calc(50% + 20px)` do for width? +What does `vw` stand for? #### --distractors-- -It adds `20px` to 50% of the screen width. +Vertical Width. --- -It adds `50px` to the screen width. +Virtual Width. --- -It adds `50%` of the height to `20px`. +Variable Width. #### --answer-- -It adds `50%` of the parent's width to `20px`. +Viewport Width. ### --question-- @@ -373,41 +373,41 @@ What's the key difference between `rem` and `em` in CSS? #### --distractors-- -`rem` is only used for fonts. +`em` is relative to the root element, while rem is relative to the parent element. --- -`rem` is for width, `em` is for fonts. +`rem` is relative to desktop width, while `em` is relative to mobile width. --- -`rem` is always smaller than `em`. +`rem` is relative to the user-defined width, while `em` is relative to the browser width. #### --answer-- -`rem` is based on the root font size, `em` is based on the parent's font size. +`em` is relative to the font size of the parent element, while rem is relative to the root element. ### --question-- #### --text-- -How does `calc(100px + 10%)` work for width? +What is a `vh` unit? #### --distractors-- -It adds `10%` of the screen width to `100px`. +A unit based on the width of the viewport. --- -It adds `10%` of the height to `100px`. +A unit based on the height of the element. --- -It adds `100px` to `10%` of the document. +A unit that adjusts based on font size. #### --answer-- -It adds `10%` of the parent's width to `100px`. +A unit equal to 1% of the viewport height. ### --question-- @@ -435,21 +435,21 @@ It allows the browser to determine the width based on the content and container. #### --text-- -What happens when you use `calc(30vh - 10px)` for height? +What’s a key advantage of the `calc()` function? #### --distractors-- -It subtracts `10px` from the parent's height. +It automatically minifies your CSS files for better performance. --- -It subtracts `30px` from the screen height. +It enables the use of variables within CSS without any preprocessors. --- -It adds `30%` of the parent's height minus `10px`. +It allows embedding JavaScript expressions directly within CSS rules. #### --answer-- -It subtracts `10px` from `30%` of the viewport height. +It lets you determine the value of a CSS property dynamically based on different aspects of the application or viewport. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md index 2db93157b5..be96efaaee 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md @@ -43,19 +43,19 @@ What is the purpose of the offset values in the `text-shadow` property, and how #### --distractors-- -They adjust the text's size and weight +They adjust the text's size and weight. --- -They change the shadow color +They change the shadow color. --- -They remove text from the shadow's path +They remove text from the shadow's path. #### --answer-- -They control the horizontal and vertical position of the shadow relative to the text +They control the horizontal and vertical position of the shadow relative to the text. ### --question-- @@ -65,19 +65,19 @@ What does "kerning" mean in typography? #### --distractors-- -The space between lines of text +The space between lines of text. --- -The overall spacing of a text block +The overall spacing of a text block. --- -The size of the font +The size of the font. #### --answer-- -The space between individual letters +The space between individual letters. ### --question-- @@ -87,19 +87,19 @@ What's the most common way to add Google Fonts to a website? #### --distractors-- -Use the `` tag in the HTML file +Use the `` tag in the HTML file. --- -Use the `@import` rule in JavaScript +Use the `@import` rule in JavaScript. --- -Embed the font within an image +Embed the font within an image. #### --answer-- -Use the `` tag in the HTML file +Use the `` tag in the HTML file. ### --question-- @@ -131,7 +131,7 @@ Which one of the following is a web-safe font? #### --distractors-- -Comic Sans MS +Comic Sans MS. --- @@ -143,7 +143,7 @@ Impact #### --answer-- -Times New Roman +Times New Roman. ### --question-- @@ -153,19 +153,19 @@ What does the `@font-face` rule do in CSS? #### --distractors-- -It defines the font size +It defines the font size. --- -It creates a fallback font for web pages +It creates a fallback font for web pages. --- -It adjusts the line height for text +It adjusts the line height for text. #### --answer-- -It allows you to use custom fonts by importing them +It allows you to use custom fonts by importing them. ### --question-- @@ -179,15 +179,15 @@ Typekit --- -Adobe Fonts +Adobe Fonts. --- -Font Universe +Font Universe. #### --answer-- -Google Fonts +Google Fonts. ### --question-- @@ -197,19 +197,19 @@ Why is it important to include multiple font options in the `font-family` proper #### --distractors-- -It reduces page load times +It reduces page load times. --- -It prevents browser compatibility issues +It prevents browser compatibility issues. --- -It gives the page more visual variety +It gives the page more visual variety. #### --answer-- -It ensures a consistent experience in case the custom font doesn't load +It ensures a consistent experience in case the custom font doesn't load. ### --question-- @@ -219,19 +219,19 @@ What is the purpose of the `text-shadow` property in CSS, and how does it enhanc #### --distractors-- -Changes the text color +Changes the text color. --- -Adds a background color to text +Adds a background color to text. --- -Makes text bold +Makes text bold. #### --answer-- -Adds a shadow effect to text, making it stand out or appear 3D +Adds a shadow effect to text, making it stand out or appear 3D. ### --question-- @@ -253,7 +253,7 @@ What CSS property is used to set the font family for an element, and how should #### --answer-- -`font-family`, with multiple fonts listed to ensure compatibility across devices +`font-family`, with multiple fonts listed to ensure compatibility across devices. ### --question-- @@ -263,19 +263,19 @@ Why is typographic hierarchy important in design? #### --distractors-- -It improves the readability of large blocks of text +It improves the readability of large blocks of text. --- -It ensures consistency across different devices +It ensures consistency across different devices. --- -It allows decorative fonts to be used effectively +It allows decorative fonts to be used effectively. #### --answer-- -It helps organize content and guide users through the information +It helps organize content and guide users through the information. ### --question-- @@ -329,19 +329,19 @@ In the `text-shadow` property, how do the horizontal and vertical offsets affect #### --distractors-- -They control the shadow's color +They control the shadow's color. --- -They define the shadow's blur radius +They define the shadow's blur radius. --- -They adjust the opacity of the shadow +They adjust the opacity of the shadow. #### --answer-- -They determine the position of the shadow relative to the text on the x and y axes +They determine the position of the shadow relative to the text on the x and y axes. ### --question-- @@ -351,19 +351,19 @@ For body text, why is a sans-serif font generally considered easier to read on s #### --distractors-- -Serif fonts are more decorative +Serif fonts are more decorative. --- -Sans-serif fonts are thicker +Sans-serif fonts are thicker. --- -Sans-serif fonts use fewer colors +Sans-serif fonts use fewer colors. #### --answer-- -Sans-serif fonts are typically simpler and more legible at smaller sizes on screens +Sans-serif fonts are typically simpler and more legible at smaller sizes on screens. ### --question-- @@ -373,19 +373,19 @@ How do you list multiple font families in the `font-family` property? #### --distractors-- -Separate them with spaces, and list the preferred font first +Separate them with spaces, and list the preferred font first. --- -Enclose them in parentheses +Enclose them in parentheses. --- -Enclose them in curly braces +Enclose them in curly braces. #### --answer-- -Separate them with commas, and list the preferred font first +Separate them with commas, and list the preferred font first. ### --question-- @@ -417,19 +417,19 @@ Which of the following is a good practice when using fonts in web design? #### --distractors-- -Use only one font family throughout the website +Use only one font family throughout the website. --- -Always use decorative fonts for both headings and body text +Always use decorative fonts for both headings and body text. --- -Avoid using fallback fonts at all costs +Avoid using fallback fonts at all costs. #### --answer-- -Combine no more than two or three font families for balance +Combine no more than two or three font families for balance. ### --question-- @@ -439,17 +439,17 @@ What is the purpose of the `line-height` property in CSS? #### --distractors-- -It sets the width of the text +It sets the width of the text. --- -It specifies the text alignment +It specifies the text alignment. --- -It changes the text color +It changes the text color. #### --answer-- -It controls the amount of space between lines of text +It controls the amount of space between lines of text. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md index 80f213dbb3..016dbb599c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md @@ -17,29 +17,29 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -If you've declared a custom property for animation speed using `@property`, and a user adjusts their settings for animations in their browser, how would that affect your custom property? Would they be able to see the changes, or does it stick to the value you've set? +Which of the following is NOT a valid descriptor in the `@property` rule? #### --distractors-- -The animations will run slower regardless of user settings +`syntax` --- -The user's settings override your defined speed +`inherits` --- -The animations will completely stop if the user disables them +`initial-value` #### --answer-- -The user's preferences will take priority, and they can adjust how the animations play out +`animation` ### --question-- #### --text-- -In the following code, which value will color have if `--main-color` is not defined? +In the following code, which value will `color` have if `--main-color` is not defined? ```css p { @@ -49,19 +49,19 @@ p { #### --distractors-- -Undefined +`Undefined` --- -No color will be applied +No color will be applied. --- -main-color +`--main-color` #### --answer-- -pink +`pink` ### --question-- @@ -75,7 +75,7 @@ Which of the following is a valid way to declare a custom property in CSS? --- -`custom-variable: #333;` +`@property: #333` --- @@ -93,47 +93,47 @@ What is the main purpose of using custom properties in CSS? #### --distractors-- -To change the DOM structure +To change the DOM structure. --- -To create dynamic selectors +To create dynamic selectors. --- -To improve accessibility +To improve accessibility. #### --answer-- -To define reusable styles across a project +To define reusable styles. ### --question-- #### --text-- -Custom properties defined in the `:root` selector are considered as? +What does the `:root` selector represent? #### --distractors-- -Locally scoped +The first child element of the `body`. --- -Non-inheritable +The parent element of all `header` elements. --- -Element-specific +The first child of the `html` tag. #### --answer-- -Globally scoped +The highest-level element in the DOM tree. ### --question-- #### --text-- -How do you apply a previously defined custom property `--foreground` in CSS? +How do you apply a `--foreground` custom property as the `color` in CSS? #### --distractors-- @@ -155,67 +155,67 @@ How do you apply a previously defined custom property `--foreground` in CSS? #### --text-- -What happens if you use a custom property that is not defined in the current scope? +What is the purpose of the `@property` rule in CSS? #### --distractors-- -It results in an error +To define a media query. --- -It uses the value `inherit` +To control CSS animations and their timing. --- -The property is ignored +To group CSS properties into one rule. #### --answer-- -The browser applies the default value, if provided +To define how custom properties behave. ### --question-- #### --text-- -What is the purpose of the `@property` rule in CSS? +When declaring a custom `@property`, what is the purpose of the `syntax` in its definition? #### --distractors-- -To define a media query +It specifies the default value of the custom property. --- -To control CSS animations +It determines whether the property can be inherited by child elements. --- -To group CSS properties +It defines whether the property is applied to all elements. #### --answer-- -To define how custom properties behave +It enforces a specific data type or value pattern for the custom property. ### --question-- #### --text-- -What should you be cautious of when using custom properties in terms of browser compatibility? +What should you be cautious of when using custom properties? #### --distractors-- -Custom properties are automatically converted to `px` units +Custom properties are automatically converted to `px` units. --- -Custom properties always override inline styles +Custom properties always override inline styles. --- -Custom properties can cause layout shifts +Custom properties cannot be used to set font values. #### --answer-- -Older browsers may not support custom properties +Custom properties may not be supported in older browsers. ### --question-- @@ -225,19 +225,19 @@ What is the purpose of providing a fallback value in the `var()` function for CS #### --distractors-- -To reduce the amount of CSS code +To reduce the amount of CSS code. --- -To improve performance in modern browsers +To improve performance in modern browsers. --- -To optimize rendering time on slow networks +To optimize rendering time on slow networks. #### --answer-- -To ensure a valid value is applied if the custom property is undefined +To ensure a valid value is applied if the custom property is undefined. ### --question-- @@ -247,215 +247,238 @@ When defining a variable `--foreground` inside a media query, what happens when #### --distractors-- -The custom property is preserved and continues to apply +The custom property is preserved and continues to apply. --- -The custom property reverts to its initial value +The custom property reverts to its initial value. --- -The custom property is recalculated based on the viewport +The custom property is recalculated based on the viewport. #### --answer-- -The custom property is no longer available as it is scoped to the media query +The custom property is no longer available as it is scoped to the media query. ### --question-- #### --text-- -Which of the following is not true when defining custom properties? +How would the following declaration behave? + +```css +color: var(--main-color, var(--fallback-color, #000)); +``` #### --distractors-- -Custom properties can be inherited by child elements +It will apply `--main-color` even if it is not defined, defaulting to that value. --- -Custom properties can be defined at any level in the DOM hierarchy +It will apply `--main-color` and `--fallback-color` simultaneously, resulting in a blend of the two colors. --- -Custom properties can be updated dynamically using JavaScript +It will always default to `#000`, regardless of whether `--main-color` or `--fallback-color` is defined. #### --answer-- -Custom properties can override user agent styles by default +It applies `--main-color` if defined; otherwise, checks `--fallback-color;` and if both are undefined, it uses `#000`. ### --question-- #### --text-- -How would the following declaration behave: `color: var(--main-color, var(--fallback-color, #000));`? +What is one benefit of using `@property` in CSS? #### --distractors-- -It will apply `--main-color` even if it is not defined, defaulting to that value +It improves performance by precomputing custom property values. --- -It will apply `--main-color` and `--fallback-color` simultaneously, resulting in a blend of the two colors +It automatically prefixes custom properties for better browser support. --- -It will always default to `#000`, regardless of whether `--main-color` or `--fallback-color` is defined +It restricts the use of custom properties to specific elements. #### --answer-- -It applies `--main-color` if defined; otherwise, checks `--fallback-color;` and if both are undefined, it uses `#000` +It allows for animations of custom properties. ### --question-- #### --text-- -What is the primary use case for the `@property` rule when working with CSS animations? +What does the `inherits` property in a custom `@property` declaration control? #### --distractors-- -To modify keyframe sequences based on variable values +Whether the custom property will have an initial value. --- -To control custom property inheritance during animation +Whether the property can have a shorthand version. --- -To ensure that custom properties maintain compatibility with media queries +Whether the property accepts fallback values. #### --answer-- -To define which custom properties are allowed to animate and set their initial values +Whether the custom property's value is passed to child elements. ### --question-- #### --text-- -Which CSS pseudo-class can be used to detect if a custom property (CSS Variable) is defined or not? +In the declaration of a custom `@property`, what does the `initial-value` specify? #### --distractors-- -`:defined` +The acceptable values the property can accept. --- -`:not(--var)` +The priority of the property in the cascade. --- -`:is-var` +The type of value the property must have. #### --answer-- -None of the above +The fallback value for the property. ### --question-- #### --text-- -In which scenario might defining a custom property in a media query cause unexpected behavior? +Given the following HTML and CSS code, what will be the value of the `color` property for the `.box` element? + +```html +
+
Text
+
+``` + +```css +:root { + --main-color: red; +} + +.container { + --main-color: blue; +} + +.box { + color: var(--main-color, black); +} +``` #### --distractors-- -When the property is defined using a `px` unit +`black` --- -When the property is defined outside of the `:root` +`red` --- -When the property is defined at the bottom of the stylesheet +`green` #### --answer-- -When the media query condition no longer applies, and the custom property is no longer valid +`blue` ### --question-- #### --text-- -What is the advantage of using CSS variables over traditional hard-coded values in a stylesheet? +Which property should a CSS gradient be applied to? #### --distractors-- -CSS variables reduce the size of the HTML file +`color` --- -CSS variables are automatically minified by the browser +`border-radius` --- -CSS variables only work for colors, not other properties +`box-shadow` #### --answer-- -CSS variables allow for dynamic changes via JavaScript, making the code more flexible +`background` ### --question-- #### --text-- -When using custom properties with CSS Grid or Flexbox, what should you be cautious about? +What is the purpose of color stops in CSS gradients? #### --distractors-- -Custom properties override grid or flex properties by default +To define the transparency level of the gradient. --- -Flexbox and Grid ignore custom properties during layout calculations +To specify the direction of the gradient. --- -Custom properties can cause layout shifts when recalculated +To repeat the gradient in a fixed pattern. #### --answer-- -Custom properties should be managed carefully, as they are recalculated with each layout pass, potentially impacting performance +To define the specific points where colors change in the gradient. ### --question-- #### --text-- -When using a custom property (CSS variable) with the `calc()` function, which of the following is a correct way to apply it to set the `width` of an element? +What happens if no angle or direction is specified in a CSS linear gradient? #### --distractors-- -`width: calc(--main-width + 20px);` +The gradient defaults to a diagonal direction. --- -`width: var(--main-width) calc(20px);` +The gradient defaults to moving from bottom to top. --- -`width: var(calc(--main-width) + 20px);` +The gradient defaults to moving from left to right. #### --answer-- -`width: calc(var(--main-width) + 20px);` +The gradient defaults to moving from top to bottom. ### --question-- #### --text-- -Which of the following is the correct way to define a fallback value for a CSS variable when the custom property is not available? +Which CSS gradient function allows you to create a gradient that radiates outward from a central point? #### --distractors-- -`color: var(--primary-color && inherit);` +`linear-gradient()` --- -`color: var(--primary-color || inherit);` +`conic-gradient()` --- -`color: fallback(var(--primary-color), inherit);` +`repeating-linear-gradient()` #### --answer-- -`color: var(--primary-color, inherit);` - +`radial-gradient()` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md index 09f6c2d29e..f48a053528 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md @@ -21,19 +21,19 @@ What type of error occurs when a variable is used before it is defined? #### --distractors-- -Syntax error +Syntax error. --- -Logical error +Logical error. --- -Range error +Range error. #### --answer-- -Reference error +Reference error. ### --question-- @@ -87,19 +87,19 @@ Which of the following errors does `try...catch` handle? #### --distractors-- -Syntax errors +Syntax errors. --- -Infinite loops +Infinite loops. --- -Logical errors +Logical errors. #### --answer-- -Runtime errors +Runtime errors. ### --question-- @@ -135,7 +135,7 @@ Using `const` instead of `let` --- -Calling a function that doesn't exist +Calling a function that doesn't exist. --- @@ -143,7 +143,7 @@ Writing `==` instead of `===` #### --answer-- -Incorrectly calculating a sum +Incorrectly calculating a sum. ### --question-- @@ -153,19 +153,19 @@ What is the purpose of breakpoints in JavaScript debugging? #### --distractors-- -Automatically correct code mistakes +Automatically correct code mistakes. --- -Prevent code from being executed +Prevent code from being executed. --- -Log messages to the console +Log messages to the console. #### --answer-- -Pause execution at a specific point +Pause execution at a specific point. ### --question-- @@ -175,19 +175,19 @@ What happens when the `throw` statement is executed? #### --distractors-- -The code after `throw` continues running +The code after `throw` continues running. --- -It triggers the `finally` block directly +It triggers the `finally` block directly. --- -It pauses code execution until resumed +It pauses code execution until resumed. #### --answer-- -An exception is thrown and the `catch` block (if present) is executed +An exception is thrown and the `catch` block (if present) is executed. ### --question-- @@ -219,19 +219,19 @@ What kind of error is likely to occur if a function is called with an incorrect #### --distractors-- -Reference error +Reference error. --- -Syntax error +Syntax error. --- -Logical error +Logical error. #### --answer-- -Type error +Type error. ### --question-- @@ -249,11 +249,11 @@ Which tool is commonly used to step through code line by line during debugging? --- -`throw` statement +`throw` statement. #### --answer-- -Breakpoints in Developer Tools +Breakpoints in Developer Tools. ### --question-- @@ -263,19 +263,19 @@ What type of error occurs when attempting to access a property of `undefined`? #### --distractors-- -Syntax error +Syntax error. --- -Logical error +Logical error. --- -Range error +Range error. #### --answer-- -Type error +Type error. ### --question-- @@ -285,19 +285,19 @@ What does the `finally` block do in a `try...catch` statement? #### --distractors-- -Only executes if there's an error +Only executes if there's an error. --- -Skips execution if `catch` is triggered +Skips execution if `catch` is triggered. --- -Exits the code block immediately +Exits the code block immediately. #### --answer-- -Always executes, regardless of errors +Always executes, regardless of errors. ### --question-- @@ -307,19 +307,19 @@ Which of the following could be used to avoid runtime errors in JavaScript? #### --distractors-- -Skipping error handling +Skipping error handling. --- -Ignoring exceptions +Ignoring exceptions. --- -Using no `try...catch` statements +Using no `try...catch` statements. #### --answer-- -Using conditionals to check data validity +Using conditionals to check data validity. ### --question-- @@ -329,19 +329,19 @@ What is a common cause of a syntax error? #### --distractors-- -Running out of memory +Running out of memory. --- -Missing `return` statement +Missing `return` statement. --- -Declaring an unused variable +Declaring an unused variable. #### --answer-- -Missing a closing bracket +Missing a closing bracket. ### --question-- @@ -373,19 +373,19 @@ What is a "watcher" in the context of debugging? #### --distractors-- -A tool for pausing code execution +A tool for pausing code execution. --- -A built-in function for logging errors +A built-in function for logging errors. --- -A JavaScript method for handling exceptions +A JavaScript method for handling exceptions. #### --answer-- -A tool for monitoring the value of variables +A tool for monitoring the value of variables. ### --question-- @@ -395,19 +395,19 @@ When should you use `console.error()` instead of `console.log()`? #### --distractors-- -To display table data +To display table data. --- -To log messages only during debugging +To log messages only during debugging. --- -To log information about the browser +To log information about the browser. #### --answer-- -To log error messages +To log error messages. ### --question-- @@ -417,19 +417,19 @@ What does the `Error()` constructor do in JavaScript? #### --distractors-- -Logs error messages to the console +Logs error messages to the console. --- -Runs code in a sandbox +Runs code in a sandbox. --- -Terminates the program +Terminates the program. #### --answer-- -Creates a new error object that can be thrown +Creates a new error object that can be thrown. ### --question-- @@ -439,17 +439,17 @@ What will happen if a `catch` block is not provided with a `try` block? #### --distractors-- -The code will stop executing +The code will stop executing. --- -The error will be logged but ignored +The error will be logged but ignored. --- -The program will continue with default values +The program will continue with default values. #### --answer-- -An uncaught exception error will occur +An uncaught exception error will occur. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md index 17d106d010..98c5ee21fb 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md @@ -21,19 +21,19 @@ What are some reasons why whitespace is important for good design? #### --distractors-- -Improves readability by placing many elements on the page +Improves readability by placing many elements on the page. --- -Focuses the viewer's attention by having elements placed close together +Focuses the viewer's attention by having elements placed close together. --- -Creates breathing space in the design to make users scroll for more information +Creates breathing space in the design to make users scroll for more information. #### --answer-- -Creates visual hierarchy, improves readability, focuses the viewer's attention on different elements +Creates visual hierarchy, improves readability, focuses the viewer's attention on different elements. ### --question-- @@ -43,7 +43,7 @@ What is the design principle of carefully choosing the size of elements in relat #### --distractors-- -Visual hierarchy +Visual hierarchy. --- @@ -65,19 +65,19 @@ Which of the following sites would most likely benefit from using breadcrumbs? #### --distractors-- -A single-page portfolio site +A single-page portfolio site. --- -An infinite scroll gallery site +An infinite scroll gallery site. --- -A simple blog with only a few posts +A simple blog with only a few posts. #### --answer-- -A complex e-commerce site with multiple categories and subcategories +A complex e-commerce site with multiple categories and subcategories. ### --question-- @@ -87,19 +87,19 @@ Which design pattern allows users to access and interact with elements and conte #### --distractors-- -Captcha validation +Captcha validation. --- -Lazy loading +Lazy loading. --- -Progressive enhancement +Progressive enhancement. #### --answer-- -Deferred/lazy registration +Deferred/lazy registration. ### --question-- @@ -109,19 +109,19 @@ What are three types of text alignment? #### --distractors-- -Top, center, horizontal +Top, center, horizontal. --- -Left, right, middle +Left, right, middle. --- -Vertical, horizontal, equal +Vertical, horizontal, equal. #### --answer-- -Left, right, center +Left, right, center. ### --question-- @@ -131,19 +131,19 @@ Which interaction design pattern reduces the complexity of interaction by hiding #### --distractors-- -Extended discoverability +Extended discoverability. --- -Delayed implementation +Delayed implementation. --- -Gradual engagement +Gradual engagement. #### --answer-- -Progressive disclosure +Progressive disclosure. ### --question-- @@ -153,19 +153,19 @@ What is contrast in design? #### --distractors-- -Elements that are visually similar +Elements that are visually similar. --- -The difference in saturation between two colors +The difference in saturation between two colors. --- -Matching elements on a page +Matching elements on a page. #### --answer-- -Elements that are strikingly different from each other visually +Elements that are strikingly different from each other visually. ### --question-- @@ -175,15 +175,15 @@ Which of the following is an example of visual hierarchy in design? #### --distractors-- -Headline and title text are a similar color to the background and other elements to blend in +Headline and title text are a similar color to the background and other elements to blend in. --- -Text and images are all the same size on the page +Text and images are all the same size on the page. --- -The logo banner is smaller than all the minor images on the main landing page +The logo banner is smaller than all the minor images on the main landing page. #### --answer-- @@ -197,19 +197,19 @@ What is a common goal of conducting exit interviews in user research? #### --distractors-- -To increase the number of new users +To increase the number of new users. --- -To test new features with existing users +To test new features with existing users. --- -To gather data for A/B testing +To gather data for A/B testing. #### --answer-- -To understand the factors causing user churn +To understand the factors causing user churn. ### --question-- @@ -219,19 +219,19 @@ What is user centered design? #### --distractors-- -A design process where once the design is completed, designers test the product by getting user feedback +A design process where once the design is completed, designers test the product by getting user feedback. --- -A design process where designers consider user accessibility requirements +A design process where designers consider user accessibility requirements. --- -A design process focused on client requirements at every stage of the process +A design process focused on client requirements at every stage of the process. #### --answer-- -An iterative design process where designers design a product considering user requirements at every stage of the process +An iterative design process where designers design a product considering user requirements at every stage of the process. ### --question-- @@ -263,19 +263,19 @@ What are some colors to consider when designing dark mode? #### --distractors-- -Pure white +Pure white. --- -Highly saturated colors +Highly saturated colors. --- -Bright highly contrasting colors +Bright highly contrasting colors. #### --answer-- -Dark colors and muted light colors for contrast in dim lighting conditions +Dark colors and muted light colors for contrast in dim lighting conditions. ### --question-- @@ -285,19 +285,19 @@ How can user research impact user requirements? #### --distractors-- -It has no impact on user requirements +It has no impact on user requirements. --- -It only affects non-functional requirements +It only affects non-functional requirements. --- -It only affects functional requirements +It only affects functional requirements. #### --answer-- -It can help define and refine user requirements based on user feedback +It can help define and refine user requirements based on user feedback. ### --question-- @@ -307,19 +307,19 @@ Why is it important for a design brief to be reviewed and approved by all stakeh #### --distractors-- -To ensure everyone is aware of the project's social media strategy +To ensure everyone is aware of the project's social media strategy. --- -To finalize the color palette and design elements +To finalize the color palette and design elements. --- -To determine the project's marketing budget +To determine the project's marketing budget. #### --answer-- -To confirm that all stakeholders agree on the project's objectives and requirements +To confirm that all stakeholders agree on the project's objectives and requirements. ### --question-- @@ -329,19 +329,19 @@ What is considered bad practice when implementing infinite scroll? #### --distractors-- -Allowing users to jump to a page or section through the navbar or a pagination drop down menu +Allowing users to jump to a page or section through the navbar or a pagination drop down menu. --- -Adding a load more indicator or symbol after a certain point in the page along with the infinite scroll +Adding a load more indicator or symbol after a certain point in the page along with the infinite scroll. --- -Integrating a footer reveal at the bottom +Integrating a footer reveal at the bottom. #### --answer-- -Not adding alternative methods of navigating the page +Not adding alternative methods of navigating the page. ### --question-- @@ -351,19 +351,19 @@ Which of the following is a best practice when designing progress indicators for #### --distractors-- -Requiring users to restart the form if they navigate away from the page +Requiring users to restart the form if they navigate away from the page. --- -Keeping the progress indicator small and discreet +Keeping the progress indicator small and discreet. --- -Making sure the progress is just displayed visually without any text +Making sure the progress is just displayed visually without any text. #### --answer-- -Breaking the progress indicator into labeled sections +Breaking the progress indicator into labeled sections. ### --question-- @@ -373,19 +373,19 @@ What is one way to make shopping cart design intuitive and user friendly? #### --distractors-- -Use a new shopping cart icon that no other website has used before +Use a new shopping cart icon that no other website has used before. --- -Do not allow users to add or remove items from the cart +Do not allow users to add or remove items from the cart. --- -Automatically add products to the cart without user interaction +Automatically add products to the cart without user interaction. #### --answer-- -Include thumbnail images of products in the cart +Include thumbnail images of products in the cart. ### --question-- @@ -395,19 +395,19 @@ Dark mode doesn't mean pure black. What is a good technique to create an effecti #### --distractors-- -Make images and elements darker and reduce contrast between different elements to have them blend in +Make images and elements darker and reduce contrast between different elements to have them blend in. --- -Invert the color scheme +Invert the color scheme. --- -Use many saturated colors +Use many saturated colors. #### --answer-- -Use dark gray or a dark shade of the brand color instead of pure black +Use dark gray or a dark shade of the brand color instead of pure black. ### --question-- @@ -417,19 +417,19 @@ What is one good design practice when creating modals? #### --distractors-- -Put a lot of important information inside a modal +Put a lot of important information inside a modal. --- -Have multiple modals on the same screen +Have multiple modals on the same screen. --- -Ensure the modal draws the user's attention away from it +Ensure the modal draws the user's attention away from it. #### --answer-- -Make the modal dismiss icon visible +Make the modal dismiss icon visible. ### --question-- @@ -439,17 +439,17 @@ What is a design brief? #### --distractors-- -A document outlining the programming and design standards of the project +A document outlining the programming and design standards of the project. --- -A document explaining how to replicate a design +A document explaining how to replicate a design. --- -A document with detailed information of icons, colors, and assets the designer should use +A document with detailed information of icons, colors, and assets the designer should use. #### --answer-- -A document stating the goals and project scope, budget and design requirements +A document stating the goals and project scope, budget and design requirements. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md index 50a47ba445..2fbd8026d7 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md @@ -186,7 +186,7 @@ Which of the following statements is false? `window` is an alias for `navigator.window`: ```js -window === navigator.window // returns true +window === navigator.window // returns true. ``` --- @@ -198,7 +198,7 @@ You can use the user screen properties (like position and size) using the `Windo `navigation` is an alias for `window.navigation`: ```js -navigation === window.navigation // returns true +navigation === window.navigation // returns true. ``` #### --answer-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md index a722b78020..e31ff7b3a5 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md @@ -43,19 +43,19 @@ What happens if the `checkValidity()` method finds an invalid `input`? #### --distractors-- -The form is automatically submitted +The form is automatically submitted. --- -Nothing happens +Nothing happens. --- -The `input` value is cleared +The `input` value is cleared. #### --answer-- -The browser displays a validation message +The browser displays a validation message. ### --question-- @@ -87,19 +87,19 @@ What is the default validation behavior for required fields when the form is sub #### --distractors-- -The form is submitted even if required fields are empty +The form is submitted even if required fields are empty. --- -The form submits but gives a warning +The form submits but gives a warning. --- -The form resets the `input` values +The form resets the `input` values. #### --answer-- -The browser stops the form submission if required fields are empty +The browser stops the form submission if required fields are empty. ### --question-- @@ -109,11 +109,11 @@ Which actions does not cause an HTML form to be checked for errors? #### --distractors-- -Changing the `input` value +Changing the `input` value. --- -Submitting the form +Submitting the form. --- @@ -121,7 +121,7 @@ Calling `reportValidity()` #### --answer-- -Clicking a reset button +Clicking a reset button. ### --question-- @@ -153,15 +153,15 @@ When does the `checkValidity()` method stop form submission? #### --distractors-- -When the form has no submit button +When the form has no submit button. --- -When the form `action` is empty +When the form `action` is empty. --- -When the form method is POST +When the form method is POST. #### --answer-- @@ -175,19 +175,19 @@ What happens if `checkValidity()` is called, but a field fails validation? #### --distractors-- -The form submits without error +The form submits without error. --- -The `input` values are cleared +The `input` values are cleared. --- -The form closes immediately +The form closes immediately. #### --answer-- -The invalid field is highlighted and a message appears +The invalid field is highlighted and a message appears. ### --question-- @@ -197,19 +197,19 @@ Which action will make `checkValidity()` run? #### --distractors-- -Resetting the form +Resetting the form. --- -Changing an `input` value +Changing an `input` value. --- -Clicking an anchor tag +Clicking an anchor tag. #### --answer-- -Submitting the form manually +Submitting the form manually. ### --question-- @@ -219,19 +219,19 @@ What is the purpose of calling `checkValidity()` before submitting a form? #### --distractors-- -To automatically submit the form +To automatically submit the form. --- -To reload the page +To reload the page. --- -To clear all `input` fields +To clear all `input` fields. #### --answer-- -To check if all `input` elements meet their specified constraints +To check if all `input` elements meet their specified constraints. ### --question-- @@ -241,19 +241,19 @@ What is the main purpose of `e.preventDefault()`? #### --distractors-- -To reload the form +To reload the form. --- -To clear form data +To clear form data. --- -To reset the form values +To reset the form values. #### --answer-- -To stop the default action of an event +To stop the default action of an event. ### --question-- @@ -263,19 +263,19 @@ When used on a form's submit event, what does `e.preventDefault()` do? #### --distractors-- -It submits the form +It submits the form. --- -It clears all form fields +It clears all form fields. --- -It disables the form temporarily +It disables the form temporarily. #### --answer-- -It prevents the form from being submitted +It prevents the form from being submitted. ### --question-- @@ -285,19 +285,19 @@ In which scenario is `e.preventDefault()` most useful? #### --distractors-- -When handling a button click that submits a form +When handling a button click that submits a form. --- -When closing a modal dialog +When closing a modal dialog. --- -When opening a new page +When opening a new page. #### --answer-- -When submitting a form via AJAX and preventing a page reload +When submitting a form via AJAX and preventing a page reload. ### --question-- @@ -307,19 +307,19 @@ What happens if you forget to call `e.preventDefault()` on a form submit event? #### --distractors-- -The form is submitted via AJAX +The form is submitted via AJAX. --- -The form does not submit +The form does not submit. --- -The form data is lost +The form data is lost. #### --answer-- -The form submits and refreshes the page +The form submits and refreshes the page. ### --question-- @@ -329,15 +329,15 @@ Which default behavior can be prevented using `e.preventDefault()`? #### --distractors-- -Editing a form +Editing a form. --- -Rendering the form +Rendering the form. --- -Reloading the form +Reloading the form. #### --answer-- @@ -351,19 +351,19 @@ What triggers the form's submit event? #### --distractors-- -When an input field changes +When an input field changes. --- -When the form is reset +When the form is reset. --- -When the form's action is cleared +When the form's action is cleared. #### --answer-- -When a form's submit button is clicked or Enter is pressed +When a form's submit button is clicked or Enter is pressed. ### --question-- @@ -373,19 +373,19 @@ Where do you usually handle the submit event in JavaScript? #### --distractors-- -On a text input element +On a text input element. --- -On any field in the form +On any field in the form. --- -On a button element outside the form +On a button element outside the form. #### --answer-- -On the form element itself +On the form element itself. ### --question-- @@ -395,19 +395,19 @@ What does the submit event do by default? #### --distractors-- -It validates the form but doesn't submit it +It validates the form but doesn't submit it. --- -It clears the form fields +It clears the form fields. --- -It cancels form submission +It cancels form submission. #### --answer-- -It sends form data to the server specified in the form's action +It sends form data to the server specified in the form's action. ### --question-- @@ -443,7 +443,7 @@ Call `submit.preventDefault()` --- -Stop the form from being displayed +Stop the form from being displayed. --- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md index d15e929765..cca45d2d7b 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md @@ -29,7 +29,7 @@ Administrators --- -Subscribers/Premium Users +Subscribers/Premium Users. #### --answer-- @@ -43,11 +43,11 @@ Why is using version control software a best practice for high performing softwa #### --distractors-- -A complete long-term change history of every file +A complete long-term change history of every file. --- -Branching and merging +Branching and merging. --- @@ -55,7 +55,7 @@ Traceability #### --answer-- -All of the options +All of the options. ### --question-- @@ -143,7 +143,7 @@ Strangers #### --answer-- -All of the options +All of the options. ### --question-- @@ -205,7 +205,7 @@ What is the correct way to contribute to other people's repositories? --- -None of the options +None of the options. #### --answer-- @@ -289,15 +289,15 @@ GitHub.com --- -GitHub Codespaces +GitHub Codespaces. --- -GitHub Mobile +GitHub Mobile. #### --answer-- -All of the options +All of the options. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md index 97fddd99d5..1bbaa8b1e7 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md @@ -98,19 +98,19 @@ What are the six main categories of ARIA roles? #### --distractors-- -Document Structure, Landmark, Window, Explicit, Fidget, and Footer +Document Structure, Landmark, Window, Explicit, Fidget, and Footer. --- -Landmark, House, Live Region, Application, Window, and Extension +Landmark, House, Live Region, Application, Window, and Extension. --- -Window, Alert Dialog, Article, Cell, Banner, and Button +Window, Alert Dialog, Article, Cell, Banner, and Button. #### --answer-- -Document Structure, Landmark, Window, Abstract, Widget, and Live Region +Document Structure, Landmark, Window, Abstract, Widget, and Live Region. ### --question-- @@ -150,19 +150,19 @@ What does WAI-ARIA stand for? #### --distractors-- -Website Accessible Initiative - Accessible Rust Internet Applications +Website Accessible Initiative - Accessible Rust Internet Applications. --- -Web Anchor Initiative - Anchor Rich Internet Applications +Web Anchor Initiative - Anchor Rich Internet Applications. --- -Web Accessibility Initial - Accessible Ready Internet Applications +Web Accessibility Initial - Accessible Ready Internet Applications. #### --answer-- -Web Accessibility Initiative - Accessible Rich Internet Applications +Web Accessibility Initiative - Accessible Rich Internet Applications. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md index dfb273d8d4..d8ecfe228b 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md @@ -83,7 +83,7 @@ It is used to define a table cell. #### --text-- -What's the function of the `colspan` attribute? +What is the function of the `colspan` attribute? #### --distractors-- @@ -99,7 +99,7 @@ It's used to define the number of columns. #### --answer-- -It merges cells across multiple columns. +It defines the number of columns a table cell should span. ### --question-- @@ -109,19 +109,19 @@ What is the role of the `placeholder` attribute? #### --distractors-- -used to send data to the server when the form is submitted +It's used to send data to the server when the form is submitted. --- -used to associate a `label` element with an `input` element +It's used to associate a `label` element with an `input` element. --- -used to specify that an input field is read-only to the user +It's used to specify that an input field is read-only to the user. #### --answer-- -used to show a hint to the user +It's used to provide a hint for an input field. ### --question-- @@ -131,19 +131,19 @@ What is the purpose of the `thead` element? #### --distractors-- -it is used to group the rows in an HTML table +It's used to group the body content in an HTML table. --- -it is used to group the columns in an HTML table +It's used to group the description of an HTML table. --- -it is used to group the footer content in an HTML table +It's used to group the footer content in an HTML table. #### --answer-- -it is used to group the header content in an HTML table +It's used to group the header content in an HTML table. ### --question-- @@ -209,7 +209,7 @@ A validator is a tool that checks the syntax of HTML code to ensure it is valid. #### --text-- -Which element is used to define a new cell in a table? +Which element is used to define a cell in a table? #### --distractors-- @@ -247,29 +247,77 @@ ChatGPT #### --answer-- -DOM inspector +DOM inspector. ### --question-- #### --text-- -Which of the following attributes is used to specify the maximum number of characters allowed in an input field? +Which of the following is the correct way to group related input fields? #### --distractors-- -`getMaxLength` +```html +
+
+
+ + + + + + + + +``` --- -`max` +```html +
+ +

User information

+ + + + + + + + +``` --- -`maximumLen` +```html +
+
+ User information + + + + + + +
+ +``` #### --answer-- -`maxlength` +```html +
+
+ User information + + + + + + +
+ +``` ### --question-- @@ -346,25 +394,25 @@ Which of the following is the correct way to disable an input? #### --distractors-- ```html - + ``` --- ```html - + ``` --- ```html - + ``` #### --answer-- ```html - + ``` ### --question-- @@ -376,25 +424,25 @@ Which of the following is a valid value for the `type` attribute? #### --distractors-- ```html - + ``` --- ```html - + ``` --- ```html - + ``` #### --answer-- ```html - + ``` ### --question-- @@ -431,23 +479,23 @@ Which of the following is the correct use of the `size` attribute? #### --text-- -Which of the following attributes is used to specify the minimum number of characters required in an input field? +Which of the following attributes are used to specify the minimum and maximum number of characters required in an input field? #### --distractors-- -`minlen` +`minlen` and `maxlen` --- -`Mlength` +`min` and `max` --- -`minimumLen` +`minimumLen` and `maximumLen` #### --answer-- -`minlength` +`minlength` and `maxlength` ### --question-- @@ -483,7 +531,7 @@ Which of the following button examples does **NOT** use a correct value for the #### --text-- -Which attribute is used to specify the value for a button? +Which of the following attributes is used to specify the value for a button? #### --distractors-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md index 2a996ef3a0..060bea2423 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md @@ -50,28 +50,28 @@ Which of the following is the correct way access the string `"Jessica"` from the ```js const developers = ["Jessica", "Naomi", "Tom"]; -developers[1] +developers[1] ``` --- ```js const developers = ["Jessica", "Naomi", "Tom"]; -developers[2] +developers[2] ``` --- ```js const developers = ["Jessica", "Naomi", "Tom"]; -developers[-1] +developers[-1] ``` #### --answer-- ```js const developers = ["Jessica", "Naomi", "Tom"]; -developers[0] +developers[0] ``` ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md index 7d821914e4..c7d0c7c52e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md @@ -21,19 +21,19 @@ What is the purpose of the `Audio()` constructor in JavaScript? #### --distractors-- -Create a new audio file +Create a new audio file. --- -Play an existing audio file +Play an existing audio file. --- -Modify audio files +Modify audio files. #### --answer-- -Create and manipulate a new `audio` element +Create and manipulate a new `audio` element. ### --question-- @@ -65,19 +65,19 @@ What is the difference between `pause()` and `stop()` methods for media elements #### --distractors-- -There is no difference, they are synonyms +There is no difference, they are synonyms. --- -`pause()` stops playback permanently, while `stop()` allows resuming +`pause()` stops playback permanently, while `stop()` allows resuming. --- -`pause()` allows resuming playback, while `stop()` resets to the beginning +`pause()` allows resuming playback, while `stop()` resets to the beginning. #### --answer-- -`stop()` is not a valid method for media elements +`stop()` is not a valid method for media elements. ### --question-- @@ -109,19 +109,19 @@ What is the purpose of the `source` element within an `audio` or `video` element #### --distractors-- -Specify the volume of the media +Specify the volume of the media. --- -Add subtitles to the media +Add subtitles to the media. --- -Link to an external audio processor +Link to an external audio processor. #### --answer-- -Specify multiple media sources for different formats +Specify multiple media sources for different formats. ### --question-- @@ -153,19 +153,19 @@ What does a codec do in the context of audio and video? #### --distractors-- -Increases the volume of the media +Increases the volume of the media. --- -Changes the file format of the media +Changes the file format of the media. --- -Encrypts the media for secure transmission +Encrypts the media for secure transmission. #### --answer-- -Compresses and decompresses digital media +Compresses and decompresses digital media. ### --question-- @@ -175,19 +175,19 @@ Which API provides a way to create, process, and analyze audio in web applicatio #### --distractors-- -Audio Processing API +Audio Processing API. --- -Sound Manipulation API +Sound Manipulation API. --- -Media Stream API +Media Stream API. #### --answer-- -Web Audio API +Web Audio API. ### --question-- @@ -197,19 +197,19 @@ What is the purpose of the `getUserMedia()` method? #### --distractors-- -Authenticate users with a media service +Authenticate users with a media service. --- -Retrieve user preferences for media playback +Retrieve user preferences for media playback. --- -Download media files to the user's device +Download media files to the user's device. #### --answer-- -Access the user's camera and/or microphone +Access the user's camera and/or microphone. ### --question-- @@ -246,19 +246,19 @@ audio.loop = true; #### --distractors-- -Plays the audio file once +Plays the audio file once. --- -Increases the volume of the audio +Increases the volume of the audio. --- -Pauses the audio after one loop +Pauses the audio after one loop. #### --answer-- -Sets the audio to repeat indefinitely +Sets the audio to repeat indefinitely. ### --question-- @@ -290,19 +290,19 @@ What is the purpose of the `MediaRecorder` API? #### --distractors-- -To play audio and video files +To play audio and video files. --- -To edit existing media files +To edit existing media files. --- -To create visual representations of audio +To create visual representations of audio. #### --answer-- -To record audio and video from a media stream +To record audio and video from a media stream. ### --question-- @@ -334,19 +334,19 @@ What does the `preload` attribute do when used with audio or video elements? #### --distractors-- -Automatically starts playing the media +Automatically starts playing the media. --- -Loads the media file before loading the rest of the page +Loads the media file before loading the rest of the page. --- -Applies a filter to the media +Applies a filter to the media. #### --answer-- -Specifies how much of the media file should be loaded when the page loads +Specifies how much of the media file should be loaded when the page loads. ### --question-- @@ -378,19 +378,19 @@ What is the purpose of the Media Source Extensions API? #### --distractors-- -Add visual effects to video +Add visual effects to video. --- -Convert between different media formats +Convert between different media formats. --- -Enable JavaScript to synchronize multiple audio tracks +Enable JavaScript to synchronize multiple audio tracks. #### --answer-- -Enable JavaScript to generate media streams for playback +Enable JavaScript to generate media streams for playback. ### --question-- @@ -427,19 +427,19 @@ navigator.mediaDevices.enumerateDevices() #### --distractors-- -Plays all available media devices +Plays all available media devices. --- -Stops all active media streams +Stops all active media streams. --- -Counts the number of connected displays +Counts the number of connected displays. #### --answer-- -Lists all available media input and output devices +Lists all available media input and output devices. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md index e06087a7bd..f63aabe8b3 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md @@ -87,7 +87,7 @@ What does `this` represent inside a class constructor? #### --distractors-- -The global object. +The global class object. --- @@ -99,7 +99,7 @@ An undefined reference. #### --answer-- -The instance of the class being created. +An instance of the class. ### --question-- @@ -109,7 +109,7 @@ Which of the following describes how `this` behaves in an arrow function inside #### --distractors-- -It refers to the method calling the arrow function. +It inherits the value of `this` from the nearest function in a different scope. --- @@ -117,11 +117,11 @@ It refers to a newly created instance of the class. --- -It refers to `undefined` by default. +It inherits the value of `this` from the global object in strict mode. #### --answer-- -It inherits the value of `this` from the enclosing scope where they are defined. +It inherits the value of `this` from the enclosing scope where it is defined. ### --question-- @@ -131,7 +131,7 @@ What is the primary purpose of the `extends` keyword? #### --distractors-- -To define static methods in a class. +To define static methods in a parent class constructor. --- @@ -139,11 +139,11 @@ To create a method in a class. --- -To initialize properties in the parent class. +To initialize default properties in the parent class. #### --answer-- -To create a subclass that inherits methods from a parent class. +To create a subclass that inherits from a parent class. ### --question-- @@ -222,15 +222,15 @@ What is the function of the `super` keyword in a subclass? #### --distractors-- -To define a new instance of a class. +To define a new instance of the parent class. --- -To delete properties from a class. +To delete methods and properties from the parent class. --- -To access only the static methods of a class. +To access only the static methods of the parent class. #### --answer-- @@ -490,7 +490,7 @@ An undefined variable. #### --answer-- -The specific instance of `Animal` being created. +The instance of `Animal`. ### --question-- @@ -500,7 +500,7 @@ What is the primary use of static properties? #### --distractors-- -To set default values for each instance. +To define default propeties for each class instance. --- @@ -512,4 +512,4 @@ To define instance-specific data. #### --answer-- -To store class-wide data that remains constant across instances. +To store class-wide data shared across instances. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md index 47999af6dc..95252e677e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md @@ -287,7 +287,7 @@ Nothing gets printed to the console. ```js if (2 == "2") { - // Statement + // Statement. } ``` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md index 5736bbd1e8..0ae9ac774e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md @@ -53,19 +53,19 @@ parentList.addEventListener('click', function(event) { #### --distractors-- -DOM Manipulation +DOM Manipulation. --- -Event Bubbling +Event Bubbling. --- -Callback Function +Callback Function. #### --answer-- -Event Delegation +Event Delegation. ### --question-- @@ -75,19 +75,19 @@ What is the term for a function that runs in response to an event? #### --distractors-- -Middleware function +Middleware function. --- -Promise function +Promise function. --- -Asynchronous function +Asynchronous function. #### --answer-- -Callback function +Callback function. ### --question-- @@ -97,19 +97,19 @@ What does the `event.target` property return? #### --distractors-- -The parent of the event object +The parent of the event object. --- -The HTML document +The HTML document. --- -The window object +The window object. #### --answer-- -The element that triggered the event +The element that triggered the event. ### --question-- @@ -163,19 +163,19 @@ What is the main advantage of using `addEventListener()` over inline event handl #### --distractors-- -It supports synchronous handling +It supports synchronous handling. --- -It reduces CSS file size +It reduces CSS file size. --- -It can't be removed once added +It can't be removed once added. #### --answer-- -It allows multiple event listeners to be attached to a single element +It allows multiple event listeners to be attached to a single element. ### --question-- @@ -185,19 +185,19 @@ What is the purpose of the `event.preventDefault()` method? #### --distractors-- -To stop the event from propagating to other listeners +To stop the event from propagating to other listeners. --- -To set a default value to the event +To set a default value to the event. --- -To remove the event handler +To remove the event handler. #### --answer-- -To prevent the default action associated with an event from being executed +To prevent the default action associated with an event from being executed. ### --question-- @@ -207,19 +207,19 @@ What does the term "event propagation" refer to? #### --distractors-- -Events can only be handled by inline handlers +Events can only be handled by inline handlers. --- -Events are triggered by CSS changes +Events are triggered by CSS changes. --- -Events are copied to a new window +Events are copied to a new window. #### --answer-- -Events travel through the DOM in phases +Events travel through the DOM in phases. ### --question-- @@ -273,19 +273,19 @@ Which of the following is a common use case for event delegation? #### --distractors-- -Preventing default browser behaviors +Preventing default browser behaviors. --- -Canceling event propagation +Canceling event propagation. --- -Creating custom events +Creating custom events. #### --answer-- -Handling click events on dynamically created elements +Handling click events on dynamically created elements. ### --question-- @@ -295,19 +295,19 @@ What is meant by the "default action" of an event in JavaScript? #### --distractors-- -The event's propagation is stopped automatically +The event's propagation is stopped automatically. --- -An external stylesheet is applied +An external stylesheet is applied. --- -The event listener is called twice +The event listener is called twice. #### --answer-- -The browser's predefined behavior that occurs after an event is triggered +The browser's predefined behavior that occurs after an event is triggered. ### --question-- @@ -317,19 +317,19 @@ Why is the once option in `addEventListener()` useful? #### --distractors-- -It makes the event listener asynchronous +It makes the event listener asynchronous. --- -It allows capturing to be the default phase +It allows capturing to be the default phase. --- -It stops the event from bubbling up +It stops the event from bubbling up. #### --answer-- -It ensures that the event listener is removed after being triggered once +It ensures that the event listener is removed after being triggered once. ### --question-- @@ -361,19 +361,19 @@ How does the concept of event delegation improve performance? #### --distractors-- -It creates separate listeners for each child +It creates separate listeners for each child. --- -It prevents child elements from triggering events +It prevents child elements from triggering events. --- -It limits event propagation to the capturing phase +It limits event propagation to the capturing phase. #### --answer-- -It reduces the number of event listeners by using a single listener on a parent element +It reduces the number of event listeners by using a single listener on a parent element. ### --question-- @@ -383,19 +383,19 @@ Why is it important to remove event listeners when they are no longer needed? #### --distractors-- -It makes the page load slower +It makes the page load slower. --- -It prevents CSS styles from being applied +It prevents CSS styles from being applied. --- -It breaks JavaScript execution +It breaks JavaScript execution. #### --answer-- -It improves performance and reduces memory leaks +It improves performance and reduces memory leaks. ### --question-- @@ -405,19 +405,19 @@ What does the `DOMContentLoaded` event indicate? #### --distractors-- -The page fully loaded with all images +The page fully loaded with all images. --- -Only external styles are loaded +Only external styles are loaded. --- -The page is still loading +The page is still loading. #### --answer-- -The HTML document has been completely loaded and parsed +The HTML document has been completely loaded and parsed. ### --question-- @@ -427,19 +427,19 @@ What is the role of `stopPropagation()` in event handling? #### --distractors-- -To execute the default behavior of the event +To execute the default behavior of the event. --- -To start event capturing +To start event capturing. --- -To bind the event handler to multiple events +To bind the event handler to multiple events. #### --answer-- -To stop the event from propagating to parent elements +To stop the event from propagating to parent elements. ### --question-- @@ -461,5 +461,5 @@ How can you remove all event listeners attached to an element? #### --answer-- -There is no direct way to remove all event listeners +There is no direct way to remove all event listeners. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md index 7c59a461c7..1bbea0f79f 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-functional-programming # --description-- -To pass the quiz, you must correctly answer at least 18 of the 20 questions below. +To pass the quiz, you must correctly answer at least 9 of the 10 questions below. # --quizzes-- @@ -21,41 +21,19 @@ What is a pure function? #### --distractors-- -A function that modifies global variables +A function that modifies global variables and returns either `undefined` or `null`. --- -A function that prints to the console +A function that logs an output to the console. --- -A function that changes its behavior based on external factors +A function that changes its behavior based on external factors and returns `null`. #### --answer-- -A function that always returns the same output for the same input and produces no side effects - -### --question-- - -#### --text-- - -Which of the following is a characteristic of a pure function? - -#### --distractors-- - -It has side effects - ---- - -It relies on global state - ---- - -It modifies its input parameters - -#### --answer-- - -Its output depends solely on its input arguments +A function that always returns the same output for the same input and produces no side effects. ### --question-- @@ -65,41 +43,19 @@ What is a side effect in functional programming? #### --distractors-- -An unexpected error in the code +An unexpected `TypeError` in your code. --- -A function that takes too long to execute +A function that takes too long to execute and crashes the program. --- -A recursive function call +A recursive function call that produces an infinite loop and crashes the program. #### --answer-- -A change in program state or interaction with the outside world - -### --question-- - -#### --text-- - -Which of the following is an example of a side effect? - -#### --distractors-- - -Returning a value from a function - ---- - -Creating a new object within a function - ---- - -Using a local variable - -#### --answer-- - -Writing to a file +A change to the state of the program that are observable outside the function. ### --question-- @@ -109,71 +65,27 @@ What is currying in functional programming? #### --distractors-- -A technique for cooking functions +A technique for designing tests to help you ensure your code is 100% error free. --- -A method for optimizing recursive functions +A more optimized way to write recursive functions so they run twice as fast as other functions. --- -A way to combine multiple functions into one +The process of building, designing and testing your code to ensure that it meets the standards laid out by ECMAScript. #### --answer-- -The process of transforming a function with multiple arguments into a sequence of functions, each with a single argument +The process of transforming a function with multiple arguments into a sequence of functions, each with a single argument. ### --question-- #### --text-- -In the context of pure functions, what does "referential transparency" mean? - -#### --distractors-- - -The function's code is visible to other parts of the program - ---- - -The function references external variables transparently - ---- - -The function's name clearly indicates its purpose - -#### --answer-- +What will be the output for the following pure function? -The function can be replaced with its corresponding value without changing the program's behavior - -### --question-- - -#### --text-- - -Which of the following is NOT a benefit of using pure functions? - -#### --distractors-- - -Easier to test - ---- - -More predictable behavior - ---- - -Easier to reason about - -#### --answer-- - -Improved performance in all cases - -### --question-- - -#### --text-- - -What is the output of this pure function? - -```javascript +```js const add = (a, b) => a + b; console.log(add(2, 5)); ``` @@ -198,291 +110,182 @@ console.log(add(2, 5)); #### --text-- -Which statement about currying is true? +Which of the following is an example of currying? #### --distractors-- -Currying always improves performance - ---- - -Curried functions are always pure functions - ---- - -Currying is only possible in functional programming languages - -#### --answer-- - -Currying transforms a function with multiple arguments into a sequence of functions - -### --question-- - -#### --text-- - -What is a potential side effect of the following function? - -```javascript -const greet = (name) => { - console.log(`Hello, ${name}!`); -}; +```js +const curriedAverage = (a, b, c) => a + b + c / 3 ``` -#### --distractors-- - -It modifies a global variable - ---- - -It changes the input parameter - --- -It returns a value - -#### --answer-- - -It interacts with the console (I/O operation) - -### --question-- - -#### --text-- - -In functional programming, what is function composition? - -#### --distractors-- - -Writing functions with multiple arguments - ---- - -Declaring functions inside other functions - ---- - -Using arrow function syntax - -#### --answer-- - -Combining two or more functions to create a new function - -### --question-- - -#### --text-- - -Which of the following is an example of a pure function? - -#### --distractors-- - -```javascript -const random = () => Math.random(); +```js +const curriedAverage = (a, b, c) => a + b + c ``` --- -```javascript -const log = (x) => console.log(x); -``` - ---- +```js +function curriedAverage(a) { + return a +} -```javascript -let count = 0; -const increment = () => ++count; +function curried(c) { + return c +} ``` #### --answer-- -```javascript -const double = (x) => x * 2; +```js +function curriedAverage(a) { + return function(b) { + return function(c) { + return (a + b + c) / 3; + }; + }; +} ``` ### --question-- #### --text-- -What is the primary goal of currying? +Which of the following is a key principle of functional programming? #### --distractors-- -To improve code readability +Modifying global variables frequently. --- -To create functions with fewer arguments +Using mutable data structures extensively. --- -To eliminate the need for higher-order functions +Emphasizing object-oriented inheritance. #### --answer-- -To enable partial application of functions +Avoiding side effects and using immutable data. ### --question-- #### --text-- -Which statement about side effects is FALSE? +What is an impure function? #### --distractors-- -Side effects make code harder to test +A function that returns an object. --- -Modifying a global variable is a side effect +A function without side effects. --- -Reading from a database can be considered a side effect +A function that returns `null` #### --answer-- -Pure functions can have side effects +A function with side effects. ### --question-- #### --text-- -What is the result of currying the following function? - -```javascript -const add = (a, b, c) => a + b + c; -``` +Which of the following is the correct way to call a curried function? #### --distractors-- -```javascript -const curried = (a, b, c) => a() + b() + c(); +```js +curriedAverage(2 3 4); ``` --- -```javascript -const curried = a => (b, c) => a + b + c; +```js +curriedAverage(2)==(3)==(4); ``` --- -```javascript -const curried = (a, b) => c => a + b + c; +```js +curriedAverage(2)=>(3)=>(4); ``` #### --answer-- -```javascript -const curried = a => b => c => a + b + c; +```js +curriedAverage(2)(3)(4); ``` -### --question-- - -#### --text-- - -Which of the following is NOT a side effect? - -#### --distractors-- - -Modifying the DOM - ---- - -Sending an HTTP request - ---- - -Changing the value of a global variable - -#### --answer-- - -Creating a new object and returning it - -### --question-- - -#### --text-- - -What is a higher-order function? - -#### --distractors-- - -A function that takes longer to execute - ---- - -A function with more than three arguments - ---- - -A function that uses advanced JavaScript features - -#### --answer-- - -A function that returns another function ### --question-- #### --text-- -Which of the following is a key principle of functional programming? +Which of the following is an example of an impure function? #### --distractors-- -Modifying global variables frequently +```js +function example(num) { + return num; +} +``` --- -Using mutable data structures extensively +```js +function sum(num1, num2) { + return num1 + num2 +} +``` --- -Emphasizing object-oriented inheritance +```js +function addToTotal(value) { + let total = 0; + total += value; + return total; +} +``` #### --answer-- -Avoiding side effects and using immutable data +```js +let total = 0; +function addToTotal(value) { + total += value; + return total; +} +``` ### --question-- #### --text-- -What is the main advantage of using pure functions? +Which of the following is NOT an example of a side effect? #### --distractors-- -They always execute faster than impure functions +Writing to a file. --- -They can access and modify global state easily +Modifying a global variable. --- -They can perform I/O operations more efficiently +Making an API call. #### --answer-- -They are easier to test and reason about - -### --question-- - -#### --text-- - -In the context of functional programming, what does "immutability" mean? - -#### --distractors-- - -Variables can be declared but not assigned - ---- - -Functions cannot be modified at runtime - ---- - -Objects cannot have methods - -#### --answer-- +Returning the sum of two values. -Data cannot be changed after it's created diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md index dd7f298fdf..6ea8777a41 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md @@ -134,32 +134,32 @@ Which of the following is a valid function expression? #### --distractors-- ```js -expression function getSum(x, y) { - return x + y; +expression function getSum(x, y) { + return x + y; }; ``` --- ```js -getSum: function(x, y) { - return x + y; +getSum: function(x, y) { + return x + y; }; ``` --- ```js -function = getSum(x, y) { - return x + y; +function = getSum(x, y) { + return x + y; }; ``` #### --answer-- ```js -const getSum = function(x, y) { - return x + y; +const getSum = function(x, y) { + return x + y; }; ``` @@ -246,25 +246,25 @@ Which of the following is the correct syntax for an arrow function? #### --distractors-- ```js -const sum <<>> (num1, num2) => num1 + num2 +const sum <<>> (num1, num2) => num1 + num2 ``` --- ```js -const sum === (num1, num2) === num1 + num2 +const sum === (num1, num2) === num1 + num2 ``` --- ```js -const sum >=> (num1, num2) => num1 + num2 +const sum >=> (num1, num2) => num1 + num2 ``` #### --answer-- ```js -const sum = (num1, num2) => num1 + num2 +const sum = (num1, num2) => num1 + num2 ``` ### --question-- @@ -382,7 +382,7 @@ Which of the following is the correct way to use default parameters? ```js function sum (num1, num2 <<>> 12) { return num1 + num2 -} +} ``` --- @@ -390,7 +390,7 @@ function sum (num1, num2 <<>> 12) { ```js function sum (num1, num2 === 12) { return num1 + num2 -} +} ``` --- @@ -398,7 +398,7 @@ function sum (num1, num2 === 12) { ```js function sum (num1, num2 >> 12) { return num1 + num2 -} +} ``` #### --answer-- @@ -406,7 +406,7 @@ function sum (num1, num2 >> 12) { ```js function sum (num1, num2 = 12) { return num1 + num2 -} +} ``` ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md index 36e3ec148f..75e25e9214 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md @@ -21,19 +21,19 @@ What are default parameters? #### --distractors-- -Parameters that should always be present in a function +Parameters that should always be present in a function. --- -Parameters that are passed in an array +Parameters that are passed in an array. --- -Parameters that are destructured from an object +Parameters that are destructured from an object. #### --answer-- -Parameters that are optional and have a default value when not provided +Parameters that are optional and have a default value when not provided. ### --question-- @@ -65,19 +65,19 @@ What does the rest parameter syntax allow you to do in JavaScript? #### --distractors-- -Pass parameters by reference +Pass parameters by reference. --- -Provide a set default parameters +Provide a set default parameters. --- -Destructure an object into parameters +Destructure an object into parameters. #### --answer-- -Capture all arguments into one array +Capture all arguments into one array. ### --question-- @@ -109,19 +109,19 @@ What does destructuring allows you to do in JavaScript? #### --distractors-- -Build complex objects +Build complex objects. --- -Serialize objects +Serialize objects. --- -Merge arrays or objects +Merge arrays or objects. #### --answer-- -Extract properties from objects and elements from arrays +Extract properties from objects and elements from arrays. ### --question-- @@ -153,19 +153,19 @@ Which of these is NOT a good practice for naming variables and functions in Java #### --distractors-- -Use camelCase notation +Use camelCase notation. --- -Start variable names with a letter, $ or _ +Start variable names with a letter, $ or _. --- -Using meaningful names +Using meaningful names. #### --answer-- -Using reserved keywords as variable names +Using reserved keywords as variable names. ### --question-- @@ -175,19 +175,19 @@ What is the primary purpose of a linter in JavaScript development? #### --distractors-- -To format code automatically +To format code automatically. --- -To optimize code for performance +To optimize code for performance. --- -To create documentation for code +To create documentation for code. #### --answer-- -To detect potential errors and style issues in code +To detect potential errors and style issues in code. ### --question-- @@ -219,15 +219,15 @@ Which of these describes accessibility? #### --distractors-- -Making sure code is accessible to other developers +Making sure code is accessible to other developers. --- -Writing secure code +Writing secure code. --- -Controlling who can access certain data +Controlling who can access certain data. #### --answer-- @@ -245,15 +245,15 @@ It's slower than `let` and `const` --- -It causes a syntax error +It causes a syntax error. --- -It doesn't allow type checking +It doesn't allow type checking. #### --answer-- -It has function scope instead of block scope, which can lead to unexpected behaviors +It has function scope instead of block scope, which can lead to unexpected behaviors. ### --question-- @@ -263,19 +263,19 @@ In JavaScript, how is memory for variables typically allocated? #### --distractors-- -Manually by the developer +Manually by the developer. --- -By the browser +By the browser. --- -By the server +By the server. #### --answer-- -Automatically by the runtime engine +Automatically by the runtime engine. ### --question-- @@ -285,19 +285,19 @@ What is hoisting in JavaScript? #### --distractors-- -Raising errors to the top of the code +Raising errors to the top of the code. --- -The process of creating new variables +The process of creating new variables. --- -Automatically moving `var` declarations to the top of the block +Automatically moving `var` declarations to the top of the block. #### --answer-- -The process of moving variable declarations to the top of their scope +The process of moving variable declarations to the top of their scope. ### --question-- @@ -307,19 +307,19 @@ What is the purpose of modules in JavaScript? #### --distractors-- -To improve code performance +To improve code performance. --- -To make code more difficult to understand +To make code more difficult to understand. --- -To create new programming languages +To create new programming languages. #### --answer-- -To organize code into reusable units +To organize code into reusable units. ### --question-- @@ -329,19 +329,19 @@ In the context of JavaScript modules, what does `export` do? #### --distractors-- -Save the code to disk +Save the code to disk. --- -Include external libraries in your code +Include external libraries in your code. --- -Publish your code to a public repository +Publish your code to a public repository. #### --answer-- -Make variables, functions or classes available to be imported by other modules +Make variables, functions or classes available to be imported by other modules. ### --question-- @@ -373,19 +373,19 @@ In the context of JavaScript memory management, what are memory leaks? #### --distractors-- -Oversized memory use +Oversized memory use. --- -Coding errors leading to application crashes +Coding errors leading to application crashes. --- -Part of the garbage collection process +Part of the garbage collection process. #### --answer-- -Memory allocations which are never properly made unreachable +Memory allocations which are never properly made unreachable. ### --question-- @@ -395,19 +395,19 @@ What is the main difference between `import` and `require` in JavaScript? #### --distractors-- -`import` is used in Node.js, while `require` is used in the browser +`import` is used in Node.js, while `require` is used in the browser. --- -`import` supports asynchronous loading, while `require` does not +`import` supports asynchronous loading, while `require` does not. --- -`import` is used for CSS and image files, while `require` is used for JavaScript files +`import` is used for CSS and image files, while `require` is used for JavaScript files. #### --answer-- -`import` is part of ES6 syntax, while `require` is an older module loading syntax +`import` is part of ES6 syntax, while `require` is an older module loading syntax. ### --question-- @@ -417,11 +417,11 @@ What does `let` provide that `var` does not? #### --distractors-- -Global scope +Global scope. --- -Read-only variables +Read-only variables. --- @@ -429,7 +429,7 @@ Unlimited re-declaration #### --answer-- -Block scope +Block scope. ### --question-- @@ -439,17 +439,17 @@ What is the purpose of a module bundler like Webpack or Rollup? #### --distractors-- -To optimize code for performance +To optimize code for performance. --- -It translates JavaScript code into machine language +It translates JavaScript code into machine language. --- -To format code automatically +To format code automatically. #### --answer-- -To combine multiple JavaScript modules into a single file +To combine multiple JavaScript modules into a single file. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md index 765b9aa915..c76929783d 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md @@ -77,7 +77,7 @@ Array #### --answer-- -Math object +Math object. ### --question-- @@ -87,19 +87,19 @@ Which of the following is not a type of loop supported in JavaScript? #### --distractors-- -`for` loop +`for` loop. --- -`while` loop +`while` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`if...else` loop +`if...else` loop. ### --question-- @@ -143,19 +143,19 @@ Which loop executes the code block once, before checking if the condition is tru #### --distractors-- -`while` loop +`while` loop. --- -`for...of` loop +`for...of` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`do...while` loop +`do...while` loop. ### --question-- @@ -165,19 +165,19 @@ Which loop loops over the values of an iterable object? #### --distractors-- -`for...in` loop +`for...in` loop. --- -`for` loop +`for` loop. --- -`do...while` loop +`do...while` loop. #### --answer-- -`for...of` loop +`for...of` loop. ### --question-- @@ -209,19 +209,19 @@ For iterating over an array, which loop is not the best? #### --distractors-- -`for` loop +`for` loop. --- -`for...of` loop +`for...of` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`while` loop +`while` loop. ### --question-- @@ -231,19 +231,19 @@ Which loop is the best for iterating objects? #### --distractors-- -`for...of` loop +`for...of` loop. --- -`do...while` loop +`do...while` loop. --- -`for` loop +`for` loop. #### --answer-- -`for...in` loop +`for...in` loop. ### --question-- @@ -297,19 +297,19 @@ What statement can be used to break out of a loop completely? #### --distractors-- -The `continue` statement +The `continue` statement. --- -The `label` statement +The `label` statement. --- -The `skip` statement +The `skip` statement. #### --answer-- -The `break` statement +The `break` statement. ### --question-- @@ -319,19 +319,19 @@ Which statement can be used to skip the current iteration and move to the next i #### --distractors-- -The `break` statement +The `break` statement. --- -The `label` statement +The `label` statement. --- -The `return` statement +The `return` statement. #### --answer-- -The `continue` statement +The `continue` statement. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md index fa9233cfd8..1458c1b88a 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md @@ -65,15 +65,15 @@ What happens if you try to divide by zero in JavaScript? #### --distractors-- -JavaScript will output 0 +JavaScript will output 0. --- -Nothing will happen +Nothing will happen. --- -JavaScript will throw an error +JavaScript will throw an error. #### --answer-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md index 32d7860e61..52a8c63c7c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md @@ -21,19 +21,19 @@ Which of the following does not describe an object in JavaScript? #### --distractors-- -A collection of key-value pairs +A collection of key-value pairs. --- -A container for properties and methods +A container for properties and methods. --- -One of JavaScript's data types +One of JavaScript's data types. #### --answer-- -One of JavaScript's primitives +One of JavaScript's primitives. ### --question-- @@ -90,10 +90,10 @@ const obj = { key: "some-value" } Which of the following correctly accesses the value of the `street` property in the object below? ```js -const person = { - address: { +const person = { + address: { street: "sample-street" - } + } } ``` @@ -121,19 +121,19 @@ Which of the following property keys can only be used with a bracket notation as #### --distractors-- -A property key that is known and static +A property key that is known and static. --- -A property key nested in multiple levels of the object +A property key nested in multiple levels of the object. --- -A property key that might not exist in the object +A property key that might not exist in the object. #### --answer-- -A property key that is dynamic +A property key that is dynamic. ### --question-- @@ -168,10 +168,10 @@ const person = { name: "John" } Which of the following correctly accesses the value of `street` property via destructuring in the object below? ```js -const person = { - address: { +const person = { + address: { street: "sample-street" - } + } } ``` @@ -337,19 +337,19 @@ Which of the following is true about object setters? #### --distractors-- -An object setter must be called with a parenthesis +An object setter must be called with a parenthesis. --- -An object setter must be defined with the same name as the property it sets +An object setter must be defined with the same name as the property it sets. --- -An object setter must be accompanied by a getter +An object setter must be accompanied by a getter. #### --answer-- -An object setter must be defined with exactly one argument +An object setter must be defined with exactly one argument. ### --question-- @@ -389,11 +389,11 @@ Enumerable properties are defined by the object while non-enumerable properties --- -Enumerable properties can be accessed via dot notation while non-enumerable properties can only be accessed via bracket notation +Enumerable properties can be accessed via dot notation while non-enumerable properties can only be accessed via bracket notation. #### --answer-- -Enumerable properties are properties whose internal enumerable flag is set to true while non-enumerable properties' internal enumerable flag is set to false +Enumerable properties are properties whose internal enumerable flag is set to true while non-enumerable properties' internal enumerable flag is set to false. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md index fd6f7460d3..f318d04f85 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md @@ -87,19 +87,19 @@ Which of the following is a common naming convention for variables in JavaScript #### --distractors-- -JavaScript case +JavaScript case. --- -Lightning case +Lightning case. --- -Giraffe case +Giraffe case. #### --answer-- -Camel case +Camel case. ### --question-- @@ -323,7 +323,7 @@ Which of the following is a valid multi-line comment in JavaScript? ```py ''' -This is a +This is a multi-line comment ''' diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md index e24ac7258c..5a49dda885 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md @@ -201,15 +201,15 @@ Which of the following values can be directly converted to JSON using `JSON.stri --- -A Function +A Function. --- -A DOM Element +A DOM Element. #### --answer-- -An Object +An Object. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md index 0db555f3f7..bc6153e7d4 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md @@ -43,19 +43,19 @@ How do you run or start nano from a terminal? #### --distractors-- -Type `run nano`, then press the **Enter** key +Type `run nano`, then press the **Enter** key. --- -Type `start nano`, then press the **Enter** key +Type `start nano`, then press the **Enter** key. --- -Type `nano.exe`, then press the **Enter** key +Type `nano.exe`, then press the **Enter** key. #### --answer-- -Type `nano`, then press the **Enter** key +Type `nano`, then press the **Enter** key. ### --question-- @@ -65,19 +65,19 @@ How do you open a text file using nano? #### --distractors-- -Type `nano.exe [FILE]`, then press the **Enter** key +Type `nano.exe [FILE]`, then press the **Enter** key. --- -Type `emacs [FILE]`, then press the **Enter** key +Type `emacs [FILE]`, then press the **Enter** key. --- -Type `vim [FILE]`, then press the **Enter** key +Type `vim [FILE]`, then press the **Enter** key. #### --answer-- -Type `nano [FILE]`, then press the **Enter** key +Type `nano [FILE]`, then press the **Enter** key. ### --question-- @@ -87,19 +87,19 @@ What type of files is nano capable of creating and modifying? #### --distractors-- -PDF files +PDF files. --- -Word documents +Word documents. --- -Excel spreadsheets +Excel spreadsheets. #### --answer-- -Plain text files +Plain text files. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md index 3a650302e0..25b1ae5ddd 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md @@ -43,15 +43,15 @@ Which of the following is NOT a method for conditional rendering in React? #### --distractors-- -Ternary operators +Ternary operators. --- -Logical `&&` operator +Logical `&&` operator. --- -`switch` statements +`switch` statements. #### --answer-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md index ccd75bb2fc..ddfa29c6a6 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md @@ -421,7 +421,7 @@ Element #### --answer-- -Functional component +Functional component. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md index 4c664d2c9d..ee303bf4f7 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md @@ -190,7 +190,7 @@ console.log(sayHello(3)); --- -An error +An error. --- @@ -341,7 +341,7 @@ The following recursion is missing a base case: ```js function countDownToZero(number) { - // Base case goes here + // Base case goes here. console.log(number); countDownToZero(number - 1); @@ -462,19 +462,19 @@ What HTML structure is typically traversed recursively? #### --distractors-- -Style sheets +Style sheets. --- -Meta tags +Meta tags. --- -Script tags +Script tags. #### --answer-- -The DOM tree +The DOM tree. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md index 34a426be61..c9023537dd 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md @@ -65,19 +65,19 @@ What does the `\l` command do when executed in the PostgreSQL interactive termin #### --distractors-- -Lists all schemas +Lists all schemas. --- -Lists all tables +Lists all tables. --- -Connects to a database +Connects to a database. #### --answer-- -Lists all databases +Lists all databases. ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md index 81e621ef35..041c048aeb 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md @@ -17,375 +17,429 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -What CSS property is commonly used to create a flexible layout in a container? +What are breakpoints in responsive web design? #### --distractors-- -`display: block;` +Specific points in a design where floats overlap with other elements on the page. --- -`display: inline;` +Specific points used to set the columns and rows for a grid or flex layout. --- -`display: table;` +Specific points used to determine how a tabular layout will behave on the page. #### --answer-- -`display: flex;` +Specific points in a design where the layout and content adjust to accommodate different screen sizes. ### --question-- #### --text-- -What is the main purpose of media queries in responsive web design? +Which of the following is NOT a breakpoint used for smaller devices? #### --distractors-- -To change the color scheme of the page. +`600px` --- -To create animations. +`480px` --- -To adjust margins for print pages. +`320px` #### --answer-- -To apply different styles based on the screen size or device type. +`960px` ### --question-- #### --text-- -Which media feature in a media query checks the width of the browser window? +What is the main purpose of using media queries in responsive web design? #### --distractors-- -`min-height` +To change the color scheme of the page for Safari browsers. --- -`max-aspect-ratio` +To create animations for table layouts. --- -`resolution` +To adjust margins and padding for layouts using CSS flexbox. #### --answer-- -`min-width` +To apply different styles based on the screen size or device type. ### --question-- #### --text-- -Which CSS unit is relative to the width of the viewport? +Which media feature in a media query checks the width of the browser window? #### --distractors-- -`em` +`set-width` --- -`px` +`accept-width` --- -`rem` +`allow-width` #### --answer-- -`vw` +`min-width` ### --question-- #### --text-- -What does mobile-first design emphasize? +What will the following code do? + +```css +@media screen and (min-width: 768px) { + /* Styles go here */ +} +``` #### --distractors-- -Designing for desktops and scaling down for smaller devices. +This will ignore styles for screens that are `768px` wide. --- -Using only desktop breakpoints. +This will apply styles for screens that are only `768px` wide. --- -Focusing on the highest resolution devices first. +This will apply styles for screens that are smaller than `768px`. #### --answer-- -Designing for smaller screens first and scaling up for larger devices. +This will apply styles for screens that are `768px` and wider. ### --question-- #### --text-- -Which media query will apply styles when the device's width is between 600px and 1200px? +What does mobile-first design emphasize? #### --distractors-- -`@media screen and (max-width: 1200px)` +Designing for smaller devices only and ignoring the others. --- -`@media screen and (min-width: 600px)` +Designing for mobile devices built by Apple only. --- -`@media screen and (width: 800px)` +Designing for smaller Android screens first and ignoring Apple devices. #### --answer-- -`@media screen and (min-width: 600px) and (max-width: 1200px)` +Designing for smaller screens first and scaling up for larger devices. ### --question-- #### --text-- -What is the default flex-direction value in Flexbox? +Which media query will apply styles when the device's width is between 600px and 1200px? #### --distractors-- -`column` +`@media screen and (max-width: 1200px)` --- -`row-reverse` +`@media screen and (min-width: 600px)` --- -`column-reverse` +`@media screen and (width: 800px)` #### --answer-- -`row` +`@media screen and (min-width: 600px) and (max-width: 1200px)` ### --question-- #### --text-- -In Flexbox, how do you distribute space between items in a container? +Which of the following is NOT a valid media type? #### --distractors-- -`align-items` +`all` --- -`flex-grow` +`print` --- -`flex-wrap` +`screen` #### --answer-- -`justify-content` +`poster` ### --question-- #### --text-- -How do you apply a grid layout to a container in CSS? +Which of the following media types is intended for paged material and documents viewed on a screen in print preview mode? #### --distractors-- -`display: flexbox;` +`aspect-ratio` --- -`display: block;` +`flex` --- -`display: table;` +`screen` #### --answer-- -`display: grid;` +`print` ### --question-- #### --text-- -What does the `fr` unit represent in CSS Grid? +What does the `aspect-ratio` do in media queries? #### --distractors-- -Flexible ratio +It describes the ratio between flex properties in a flex layout. --- -Frame ratio +It describes the ratio between the x and y axis for grid containers. --- -Fixed region +It describes the ratio between rows and columns for table layouts. #### --answer-- -Fraction of available space +It describes the ratio between the width and height of the viewport. ### --question-- #### --text-- -Which of the following is a valid media query for targeting devices with a resolution of 2x or higher? +Which of the following is used to indicate whether the device is in landscape or portrait orientation? #### --distractors-- -`@media (resolution: 2x)` +`apply-orientation` --- -`@media (max-resolution: 2x)` +`set-orientation` --- -`@media screen and (min-width: 1200px)` +`oriente` #### --answer-- -`@media (min-resolution: 2px)` +`orientation` ### --question-- #### --text-- -Which property controls the number of columns in a grid container? +Which of the following is commonly used to target desktop screens and larger? #### --distractors-- -`grid-template-rows` +```css +@media screen and (min-width: 140000px) { + /* Styles go here */ +} +``` --- -`grid-auto-rows` +```css +@media screen and (min-width: 140px) { + /* Styles go here */ +} +``` --- -`grid-template` +```css +@media screen and (min-width: 14000px) { + /* Styles go here */ +} +``` #### --answer-- -`grid-template-columns` +```css +@media screen and (min-width: 1400px) { + /* Styles go here */ +} +``` ### --question-- #### --text-- -How do you set up a media query for screens larger than 768px? +Which of the following is used to detect if the user has requested a light or dark color theme? #### --distractors-- -`@media screen and (max-width: 768px)` +`allow-colors-scheme` --- -`@media only screen and (width > 768px)` +`apply-color-scheme` --- -`@media (screen-width: 768px)` +`set-colors-scheme` #### --answer-- -`@media screen and (min-width: 768px)` +`prefers-color-scheme` ### --question-- #### --text-- -What is the purpose of the `flex-wrap` property in Flexbox? +Which of the following is used to test whether the primary input mechanism can hover over elements? #### --distractors-- -To align items along the cross axis. +```css +@media (set: hover) { + /* Styles for devices that support hover */ +} +``` --- -To reverse the order of flex items. +```css +@media (apply: hover) { + /* Styles for devices that support hover */ +} +``` --- -To distribute space evenly between items. +```css +@media (hover: apply) { + /* Styles for devices that support hover */ +} +``` #### --answer-- -To allow flex items to wrap onto multiple lines. +```css +@media (hover: hover) { + /* Styles for devices that support hover */ +} +``` ### --question-- #### --text-- -Which of the following breakpoints is commonly used for tablets in responsive web design? +Which of the following is NOT a type of logical operator you can use with media queries? #### --distractors-- -`480px` +`only` --- -`1920px` +`not` --- -`2560px` +`and` #### --answer-- -`768px` +`accept` ### --question-- #### --text-- -How do you center an item horizontally in a flex container? +Which of the following breakpoints is commonly used for tablets in responsive web design? #### --distractors-- -`align-items: center;` +`480px` --- -`flex-direction: row;` +`1920px` --- -`flex-grow: 1;` +`2560px` #### --answer-- -`justify-content: center;` +`768px` ### --question-- #### --text-- -In mobile-first design, which media query should be used to target larger screens? +Which of the following is the correct way to apply the `aspect-ratio` in a media query? #### --distractors-- -`@media screen and (max-width: 600px)` +```css +@media screen and (aspect-ratio: 16-9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` --- -`@media screen and (height: 600px)` +```css +@media screen and (aspect-ratio: 16=9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` --- -`@media only screen` +```css +@media screen and (aspect-ratio: 16:9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` #### --answer-- -`@media screen and (min-width: 600px)` +```css +@media screen and (aspect-ratio: 16/9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` ### --question-- @@ -399,11 +453,11 @@ Which CSS property is used to create a layout that adjusts based on screen size --- -`display: block` +`display: block;` --- -`width: 100%` +`width: 100%;` #### --answer-- @@ -413,43 +467,59 @@ Which CSS property is used to create a layout that adjusts based on screen size #### --text-- -How do you prevent a flex container from shrinking smaller than its content? +Which of the following can be used to target landscape screens `768px` and larger? #### --distractors-- -`flex-shrink: 1;` +```css +@media screen and (min-width: 768px) and (landscape: orientation) { + /* Styles go here */ +} +``` --- -`flex-direction: column;` +```css +@media screen and (max-width: 768px) and (orientation: landscape) { + /* Styles go here */ +} +``` --- -`align-items: flex-start;` +```css +@media screen and (min-width: 768px) and (landscape: set) { + /* Styles go here */ +} +``` #### --answer-- -`flex-shrink: 0;` +```css +@media screen and (min-width: 768px) and (orientation: landscape) { + /* Styles go here */ +} +``` ### --question-- #### --text-- -How do you create a responsive image that scales with the width of its container? +What is the default media type if no media type is specified? #### --distractors-- -`max-height: 100%;` +`screen` --- -`object-fit: contain;` +`mobile` --- -`min-width: 100%;` +`print` #### --answer-- -`max-width: 100%;` +`all` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md index c425ccad6a..e711a1cfdb 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md @@ -7,7 +7,7 @@ dashedName: quiz-styling-forms # --description-- -To pass the quiz, you must correctly answer at least 18 of the 20 questions below. +To pass the quiz, you must correctly answer at least 9 of the 10 questions below. # --quizzes-- @@ -17,19 +17,19 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -Which of the following is a common issue with the `datetime-local` input type? +What is a common issue for styling the `datetime-local` input type? #### --distractors-- -It cannot be used with CSS variables. +It does not work with the `float` property. --- -It automatically submits the form upon value selection. +It is impossible to make it responsive. --- -It does not support real-time updates. +It does not work with `rem` units. #### --answer-- @@ -39,89 +39,89 @@ The input format is different across browsers. #### --text-- -Why is it important to use `box-sizing: border-box;` when styling text inputs? +Which of the following is considered best practice for styling text inputs? #### --distractors-- -It makes the text input focusable with a keyboard. +Text input font sizes need to be set with `em` units and colors should be a light gray. --- -It hides the input's placeholder text. +Text input sizes should only use dark green borders on focus and the text color should be dark gray. --- -It removes the default browser styling for inputs. +Text input font colors need to be light colors and the size should only be set using the `px` unit. #### --answer-- -It ensures padding and borders are included in the element's width and height. +Text input fonts need to be adequately sized, and the color needs to have sufficient contrast with the background. ### --question-- #### --text-- -What is a benefit of setting a max-width for text inputs? +Why is it important to not remove the ability for users to resize a `textarea` input? #### --distractors-- -It prevents users from entering long text. +Users should be able to zoom in and out and there should be no change in the input. --- -It makes the input unresponsive on larger screens. +Users should be able to zoom in and out and the input should increase to twice its size. --- -It automatically adjusts the font size. +Users should be able to zoom in and out and the input text should triple in size. #### --answer-- -It ensures the input doesn't stretch too wide on larger screens. +Users should be able to zoom in and out and the input should scale accordingly. ### --question-- #### --text-- -Why should you add `:focus` styles to text inputs? +What is a best practice for styling inputs in a focused state? #### --distractors-- -It hides the input's border. +It is important to use only light gray borders for focused inputs. --- -It disables user input. +It is important to only use dark red borders for focused inputs. --- -It forces the browser to ignore default styles. +It is important to remove any noticeable indicator. #### --answer-- -It improves accessibility by making the input easier to identify when focused. +It is important to preserve a noticeable indicator. ### --question-- #### --text-- -How can you prevent text inputs from being cut off when resized? +What is a best practice for styling inputs in an error state? #### --distractors-- -By adding `overflow: hidden;`. +Increase the font size for the input text to `3rem`. --- -By setting a fixed height and width. +Set the input to `display: none;` so it is removed from the page. --- -By removing padding from the input. +Set the input to be disabled so users can no longer interact with it. #### --answer-- -By using padding and line-height with flexible units like `em` or `rem`. +Provide a visual indicator with a message so users know that something is incorrect and needs to be fixed. ### --question-- @@ -143,313 +143,92 @@ It hides the input label, reducing visual clutter. #### --answer-- -It provides users with guidance on the expected input format without cluttering the interface. +It provides users with guidance on the expected input format. ### --question-- #### --text-- -Why should you avoid using `outline: none;` without adding a custom focus style? +What is WebKit? #### --distractors-- -It reduces the size of the text input. +It is a browser engine that ensures that there are no validation errors in your CSS. --- -It hides the input from assistive technology users. +It is a special CSS property used in CSS Grid. --- -It makes the input read-only. +It is a special CSS property used in CSS flexbox. #### --answer-- -It removes the focus outline, which may confuse users about which field is selected. +It is a browser engine that displays webpages. ### --question-- #### --text-- -What is the purpose of using Flexbox or Grid for form layout? +When is it appropriate to use `appearance: none;` for form elements? #### --distractors-- -To make form controls appear in random positions. +To remove form elements completely from the DOM and page. --- -To make the form smaller on mobile devices. +To hide form elements from those who use assistive technologies like screen readers. --- -To hide form controls on large screens. +To remove only default colors that are applied to the form elements and use your own. #### --answer-- -To create a well-structured and responsive form layout. +To remove some of the default styles that are applied to the form elements. ### --question-- #### --text-- -Why should input elements be styled with a solid border? +What are some considerations when working with `appearance: none;` on form elements? #### --distractors-- -It makes the form look more colorful. +It is important to preserve hovered and submit indicators on interactive elements. --- -It automatically increases form field size. +It is important to only use `appearance: none;` when you want to apply different styles for the Safari browser. --- -It forces users to zoom in on mobile devices. +It is important to use `appearance: none;` when you need to completely remove a form element from the page. #### --answer-- -To ensure input fields are clearly visible and easily recognizable as form controls. +It is important to preserve focus and error indicators on interactive elements. ### --question-- #### --text-- -How does increasing the margin between form elements affect form usability? +Which type of form elements are commonly styled using `appearance: none;` to remove their default look? #### --distractors-- -It decreases accessibility on mobile devices. +`label` elements. --- -It prevents users from submitting the form. +`div` elements. --- -It hides form labels. +`span` elements. #### --answer-- -It improves readability by helping users see the grouping of related form elements. - -### --question-- - -#### --text-- - -What is the primary reason for using `appearance: none` in form elements? - -#### --distractors-- - -To add new default styles to form elements. - ---- - -To enable form elements to appear larger on mobile devices. - ---- - -To disable form validation for specific elements. - -#### --answer-- - -To remove the default browser styling from form elements and apply custom styles. - -### --question-- - -#### --text-- - -Which type of form elements is commonly styled using `appearance: none` to remove their default look? - -#### --distractors-- - -`
User information
` element to define header cells and the `` element to define data cells. This helps people using assistive technologies understand the structure of the table. +- **Accessibility and Tables**: When using tables, you should use the `` element to define header cells and the `` element to define data cells. This helps people using assistive technologies understand the structure of the table. With the `
` element, you can write the caption (or title) of a table, so users, especially those who use assistive technologies, can quickly understand the table's purpose and content. You should place the `` element immediately after the opening tag of the ``element. This way, screen readers and other assistive technologies can provide more context by announcing the caption before reading the content. - **Importance for inputs to have an associated label**: You should use the `
+
+ +In the table above, the first row shows the binary number `1010`, the second row shows the power of `2` represented by each binary position, and the third row shows the result of each multiplication. If you add all the values in the third row, they total `10`. + +Now, let's dive into bitwise operators. These operators perform operations on the binary representations of numbers. JavaScript provides several bitwise operators, including AND (`&`), OR (`|`), XOR (`^`), NOT (`~`), left shift (`<<`), and right shift (`>>`). + +The bitwise AND (`&`) operator returns a `1` in each bit position for which the corresponding bits of both operands are `1`. Here's an example: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a & b); // Output: 1 (Binary: 001) +``` + +In this example, we perform a bitwise AND operation on `5` (`101` in binary) and `3` (`011` in binary). The result is `1` (`001` in binary) because only the rightmost bit is `1` in both numbers. + +The bitwise OR (`|`) operator returns a `1` in each bit position for which the corresponding bits of either or both operands are `1`. For example: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a | b); // Output: 7 (Binary: 111) +``` + +Here, the result is `7` (`111` in binary) because at least one of the bits is `1` in each position. + +The bitwise XOR (`^`) operator returns a `1` in each bit position for which the corresponding bits of either, but not both, operands are `1`. For instance: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a ^ b); // Output: 6 (Binary: 110) +``` + +The result is `6` (`110` in binary) because the first and second bits from the right are different in the two numbers. + +The bitwise NOT (`~`) operator inverts all the bits of its operand. For example: + +```js +let a = 5; // Binary: 101 +console.log(~a); // Output: -6 +``` + +This might seem surprising, but it's because of how negative numbers are represented in binary using two's complement. + +The left shift (`<<`) operator shifts all bits to the left by a specified number of positions. For example: + +```js +let a = 5; // Binary: 101 +console.log(a << 1); // Output: 10 (Binary: 1010) +``` + +Here, all bits are shifted one position to the left, effectively multiplying the number by `2`. + +The right shift (`>>`) operator shifts all bits to the right. For example: + +```js +let a = 5; // Binary: 101 +console.log(a >> 1); // Output: 2 (Binary: 10) +``` + +Here, all bits are shifted one position to the right, effectively dividing the number by `2` and rounding down. + +Bitwise operators are often used in low-level programming and cryptography. While they may not be as commonly used in everyday JavaScript programming, understanding them can be beneficial for certain specialized tasks and can deepen your understanding of how computers work at a fundamental level. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md index 525aa9fc34..91112f2bfe 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md @@ -10,6 +10,122 @@ dashedName: what-are-conditional-statements-and-how-do-if-else-if-else-statement Watch the lecture video and answer the questions below. +# --transcript-- + +What are conditional statements, and how do `if/else` statements work? + +Conditional statements let you make decisions in your JavaScript code. They allow your program to flow in a particular way based on certain conditions. Let's take a look at how `if`, `else if`, `else`, and the ternary operator work to let you control the flow of your code. + +An `if` statement takes a condition and runs a block of code if that condition is truthy. Truthy values are any values that result in `true` when evaluated in a Boolean context like an `if` statement. Here are examples of truthy values: + +- non-empty strings, for example, `hello` + +- any number other than `0` and `-0`, for example, `4`, `-5`, and others + +- arrays + +- objects + +- the boolean `true` + +On the other hand, falsy values are values that evaluate to `false` in a boolean context. JavaScript has few falsy values, which makes them easy to remember. Here are a few falsy values: + +- boolean `false` + +- `0` (zero) + +- `""` (empty string) + +- `null` + +- `undefined` + +- `NaN` (Not a Number) + +Now, that we have a basic understanding of truthy and falsy values, let's see how it works with `if` statements. In this first example, we are using a couple of `if` statements to check against truthy and falsy values: + +```js +if (null) { + console.log("This will not run."); +} + +if ("freeCodeCamp") { + console.log("This will run."); +} +``` + +Since `null` is a falsy value, the message inside the block will never be logged to the console. But for the second `if` statement, the string `freeCodeCamp` is a truthy value, and will be considered `true` in this boolean context of the `if` statement. As a result, the message `This will run.` will be logged to the console. + +Let's take a look at a few more examples on how `if` statements work with different comparison operators. Here is an example of using an `if` statement to check if the user is eligible to vote: + +```js +const age = 22; + +if (age >= 18) { + console.log("You're eligible to vote"); // You're eligible to vote +} +``` + +In this example, since `age` is currently `22`, this means the condition will evaluate to `true` because `22` is greater than or equal to `18`. So the message `You're eligible to vote` will be logged to the console. If we change the example so `age` is now `15`, then the condition will evaluate to `false` and the message will not be logged to the console: + +```js +const age = 15; + +if (age >= 18) { + console.log("You're eligible to vote"); // Code not running because age is less than 18 +} +``` + +When a condition is `false`, then you can use an `else` clause: + +```js +const age = 15; + +if (age >= 18) { + console.log("You're eligible to vote"); +} else { + console.log("You're not eligible to vote"); // You're not eligible to vote +} +``` + +In this example, `15` is not greater than or equal to `18`, so the condition would be `false`. The code inside the `else` block will run in this case. + +If you want to check multiple conditions, you can use an `else if` block. This allows your program to choose between more than two paths. + +```js +const score = 87; + +if (score >= 90) { + console.log('You got an A'); +} else if (score >= 80) { + console.log('You got a B'); // You got a B +} else if (score >= 70) { + console.log('You got a C'); +} else { + console.log('You failed! You need to study more!'); +} +``` + +Since the `score` is currently `87`, then the message of `You got a B` would be logged to the console. + +The ternary operator is a compact way to write simple `if/else` statements. It has three parts: a condition, a result if the condition is true, and a result if it is false. Here's the basic syntax: + +```js +condition ? expressionIfTrue : expressionIfFalse; +``` + +Here's an example dealing with weather temperatures in Celsius: + +```js +const weather = temperature > 25 ? 'sunny' : 'cool'; + +console.log(`It's a ${weather} day!`); +``` + +If `temperature` is greater than `25`, the code above logs `It's a sunny day!`. If `temperature` is ever less than `25`, it logs `It's a cool day!`. + +So, which should you use between an if statement and a ternary? Use a ternary while dealing with a single condition or single expressions, or when you want a compact syntax for simple logic. Use `if/else` statements when you're dealing with complex conditions and multiple statements, as things become unreadable if you nest ternaries.  + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md index 7ecb9e7567..39825d354c 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md @@ -10,6 +10,101 @@ dashedName: what-are-binary-logical-operators-and-how-do-they-work Watch the lecture video and answer the questions below. +# --transcript-- + +What are binary logical operators, and how do they work? + +Binary logical operators help you evaluate two expressions and return a result based on their truthiness. Let's look at the three most common binary logical operators: logical AND, logical OR, and the nullish coalescing operator. + +The logical AND operator is represented by a double ampersand (`&&`). It checks if both operands are true and returns a result. If both operands are truthy, it returns the second value, that is, the one on the right: + +```js +const result = true && 'hello'; + +console.log(result); // hello +``` + +In the example above, the text `hello` is logged to the console because both operands are `true`. If either operand is falsy, it returns the falsy value: + +```js +const result = 0 && 3; + +console.log(result); // 0 +``` + +Since `0` is a falsy value, the number `0` is logged to the console. And if both operands are falsy, it returns the first falsy value: + +```js +const result = false && 0; + +console.log(result); // false +``` + +Since `false` is a falsey value, then `false` is logged to the console. The logical AND operator is useful when you want to check multiple conditions and ensure that all are true before proceeding. Here is an example: + +```js +if (2 < 3 && 3 < 4) { + console.log('The if block runs'); +} else { + console.log('The else block runs'); +} +``` + +In the condition, since `2` is less than `3` AND `3` is less than `4`, then the sentence `The if block runs` will be logged to the console. + +The logical OR operator checks if at least one of the operands is truthy. If the first operand is truthy, it returns that value: + +```js +const result = 'This is truthy' || false; + +console.log(result); // This is truthy +``` + +If the first operand is falsy but the second is truthy, the second value will be logged to the console: + +```js +const result = 0 || 'This is truthy'; + +console.log(result); // This is truthy +``` + +It is common to use the logical OR operator in `if/else` statements like this: + +```js +let userInput; + +if (userInput || 'Guest') { + console.log('A user is present'); +} else { + console.log('No user detected'); +} +``` + +Since we didn't assign a value to the `userInput` variable, it is currently `undefined`. The condition in the `if` statement checks if either the `userInput` variable or the string `Guest` are truthy. Since the string `Guest` is true in a boolean context like this, the string `A user is present` will be logged to the console. + +The nullish coalescing operator is more sophisticated than logical OR and logical AND. Represented by a double question mark (`??`), it helps in scenarios where you want to return a value only if the first one is `null` or `undefined`. Here is an example of working with the nullish coalescing operator: + +```js +const result = null ?? 'default'; + +console.log(result); // default +``` + +Since `null` is a falsey value, the string `default` would be logged to the console. The nullish coalescing operator is incredibly useful in situations where `null` or `undefined` are the only values that should trigger a fallback or default value. Here is an example of dealing with a user's preference settings: + +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +let theme = userSettings.theme ?? 'light'; +console.log(theme); // light +``` + +In the example above, we have an object called `userSettings` that contains `theme`, `volume` and `notifications` properties. We are accessing the `theme` using dot notation like `userSettings.theme`. You will learn more about how to work with objects in a future lecture video. Since the user's `theme` is currently set to `null`, then the string `light` will be logged to the console. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md index aae68540df..05d94f4443 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md @@ -10,6 +10,98 @@ dashedName: what-is-the-math-object-in-javascript-and-what-are-some-common-metho Watch the lecture video and answer the questions below. +# --transcript-- + +What is the `Math` object in JavaScript, and what are some common methods? + +When diving into JavaScript, you'll quickly discover that performing mathematical operations is a common task. While basic arithmetic operators can handle simple calculations, JavaScript offers a built-in `Math` object to tackle more complex math challenges. + +This handy tool provides a variety of methods that make it easier to perform advanced calculations and manipulate numbers. Let's explore these methods and see how they can simplify your coding experience. + +The `Math.random()` method generates a random floating-point number between `0` (inclusive) and `1` (exclusive). This means the possible output can be `0`, but it will never actually reach `1`. Here is an example working with the `Math.random()` method: + +```js +const randomNum = Math.random(); + +console.log(randomNum); +// any number between 0 and 1 – 0 inclusive and 1 exclusive +``` + +`Math.min()` and `Math.max()` both take a set of numbers and return the minimum and maximum value, respectively. Here is an example of working both of those methods: + +```js +const smallest = Math.min(1, 5, 3, 9); +console.log(smallest); // 1 + +const largest = Math.max(1, 5, 3, 9); +console.log(largest); // 9 +``` + +The first `console.log()` will log the number `1`, since `1` is the smallest in that list of numbers. And the second `console.log()` will log the number `9`, since `9` is the largest numbers in that list. + +If you wanted to round numbers up or down to the nearest whole integer, you could use the `Math.ceil()` and `Math.floor()` methods. Here is an example of working with `Math.ceil()`: + +```js +console.log(Math.ceil(4.3)); // 5 +``` + +`Math.ceil()` will round `4.3` up to the nearest whole integer, which is `5` in this case. Now, let's take a look at rounding a number down: + +```js +console.log(Math.floor(4.7)); // 4 +``` + +`Math.floor()` will round `4.7` down to the nearest whole integer, which is `4` in this case. `Math.round()` is the hybrid of `Math.ceil()` and `Math.floor()`. It rounds a number to its nearest integer, taking the decimal point into account: + +```js +console.log(Math.round(2.3)); // 2 +console.log(Math.round(4.5)); // 5 +console.log(Math.round(4.8)); // 5 +``` + +So, if the decimal point is less than `5`, the number is rounded down. And if the decimal point is `5` or greater, the number is rounded up. A practical application of `Math.floor()` and `Math.random()` is to generate a random number between two whole numbers. Here's the syntax for that: + +```js +Math.floor(Math.random() * (max - min)) + min; +``` + +Generating a random number between `20` and `1` would look like this: + +```js +const randomNumBtw1And20 = Math.floor(Math.random() * 20) + 1; +console.log(randomNumBtw1And20); +``` + +Another helpful `Math` method would be the `Math.trunc()` method. `Math.trunc()` removes the decimal part of a number, returning only the integer portion, without rounding: + +```js +console.log(Math.trunc(2.9)); // 2 +console.log(Math.trunc(9.1)); // 9 +``` + +If you need to get the square root or cube root of a number, you can use the `Math.sqrt()` and `Math.cbrt()` methods, respectively: + +```js +console.log(Math.sqrt(81)); // 9 +console.log(Math.cbrt(27)); // 3 +``` + +The first log statement, will log `9` because the square root of `81` is `9`, while the second log statement will log `3` because the cube root of `27` is `3`. If you need to get the absolute value of a number, you can use the `Math.abs()` method: + +```js +console.log(Math.abs(-5)); // 5 +console.log(Math.abs(5)); // 5 +``` + +`Math.abs()` returns the absolute value of a number, turning negatives into positives. The last method we will look at will be the `Math.pow()` method: + +```js +console.log(Math.pow(2, 3)); // 8 +console.log(Math.pow(8, 2)); // 64 +``` + +`Math.pow()` takes two numbers and raise the first to the power of the second. There are many more methods that belong to the `Math` object, that you can explore on your own. However, these are just a few of the more commonly used ones found in JavaScript codebases. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md b/curriculum/challenges/chinese/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md index c21d32edac..bdfcf72a39 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md @@ -17,439 +17,439 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/chinese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md index 269ab6ac91..5bd5ac030b 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md @@ -363,7 +363,7 @@ A synchronous response. #### --answer-- -A `Promise` that resolves to a `Response` object +A `Promise` that resolves to a `Response` object. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md b/curriculum/challenges/chinese/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md index 56990ab396..dbadd37341 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md @@ -388,19 +388,19 @@ What does the command `echo $?` do? #### --distractors-- -Prints the value of the last used variable +Prints the value of the last used variable. --- -Prints the value of the last used arithmetic operation +Prints the value of the last used arithmetic operation. --- -Prints the value of the last executed condition +Prints the value of the last executed condition. #### --answer-- -Prints the exit code of the last executed command +Prints the exit code of the last executed command. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/chinese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md index f444fea6f1..632cea711d 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md @@ -109,19 +109,19 @@ When using internal CSS, where is the `style` element placed within the HTML? #### --distractors-- -In the `meta` element +In the `meta` element. --- -In the `script` element +In the `script` element. --- -In the `body` element +In the `body` element. #### --answer-- -In the `head` element +In the `head` element. ### --question-- @@ -439,17 +439,17 @@ For `padding: 10px 20px 30px 40px`, what is the correct order of values? #### --distractors-- -Right, Top, Left, Bottom +Right, Top, Left, Bottom. --- -Top, Left, Bottom, Right +Top, Left, Bottom, Right. --- -Top, Bottom, Right, Left +Top, Bottom, Right, Left. #### --answer-- -Top, Right, Bottom, Left +Top, Right, Bottom, Left. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md b/curriculum/challenges/chinese/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md index 0b138aa460..22bb7ba840 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md @@ -533,7 +533,7 @@ JPG --- -Creative Commons +Creative Commons. --- @@ -541,7 +541,7 @@ BSD #### --answer-- -Creative Commons 0 +Creative Commons 0. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md b/curriculum/challenges/chinese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md index 5dd20697f4..f48397cb58 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md @@ -25,7 +25,7 @@ Processor --- -Graphics Card +Graphics Card. --- @@ -77,7 +77,7 @@ Cable #### --answer-- -Fiber Optic +Fiber Optic. ### --question-- @@ -117,11 +117,11 @@ Opera --- -Microsoft Edge +Microsoft Edge. #### --answer-- -Google Drive +Google Drive. ### --question-- @@ -131,11 +131,11 @@ When you need to edit a piece of code, which of the following are you most likel #### --distractors-- -Node Package Manager +Node Package Manager. --- -Microsoft Edge +Microsoft Edge. --- @@ -143,7 +143,7 @@ Github #### --answer-- -Visual Studio Code +Visual Studio Code. ### --question-- @@ -157,15 +157,15 @@ Dropbox --- -Microsoft OneDrive +Microsoft OneDrive. --- -Google Drive +Google Drive. #### --answer-- -Windows File Explorer +Windows File Explorer. ### --question-- @@ -307,11 +307,11 @@ What is a piece of software that allows you to look at online content called? #### --distractors-- -Internet Content Displayer +Internet Content Displayer. --- -Search Engine +Search Engine. --- @@ -319,7 +319,7 @@ Website #### --answer-- -Web Browser +Web Browser. ### --question-- @@ -329,11 +329,11 @@ What is a piece of software that lists web pages related to a user's query calle #### --distractors-- -Page Finder +Page Finder. --- -Web Browser +Web Browser. --- @@ -341,7 +341,7 @@ Website #### --answer-- -Search Engine +Search Engine. ### --question-- @@ -351,7 +351,7 @@ What is a set of one or more web pages under one domain name called? #### --distractors-- -Web Browser +Web Browser. --- @@ -359,7 +359,7 @@ Hyperlink --- -Search Engine +Search Engine. #### --answer-- @@ -385,7 +385,7 @@ Brackets #### --answer-- -Quotation marks +Quotation marks. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md index 414d24f413..198acb0d7d 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md @@ -65,11 +65,11 @@ Which tool can help inspect element styles in a web browser? #### --distractors-- -Adobe Photoshop +Adobe Photoshop. --- -Microsoft Word +Microsoft Word. --- @@ -77,7 +77,7 @@ Notepad #### --answer-- -Chrome DevTools +Chrome DevTools. ### --question-- @@ -109,19 +109,19 @@ What does the `:hover` pseudo-class indicate? #### --distractors-- -Active state +Active state. --- -Element is focused +Element is focused. --- -Element is hidden +Element is hidden. #### --answer-- -Mouse is over the element +Mouse is over the element. ### --question-- @@ -143,7 +143,7 @@ Figma #### --answer-- -Contrast checker +Contrast checker. ### --question-- @@ -153,19 +153,19 @@ What is the purpose of the `alt` attribute in images? #### --distractors-- -To change image size +To change image size. --- -To add a title +To add a title. --- -To change image color +To change image color. #### --answer-- -To provide a text alternative +To provide a text alternative. ### --question-- @@ -175,19 +175,19 @@ What is a screen reader? #### --distractors-- -A browser for disabled users +A browser for disabled users. --- -A CSS tool +A CSS tool. --- -A web development library +A web development library. #### --answer-- -A text-to-speech software +A text-to-speech software. ### --question-- @@ -197,19 +197,19 @@ What does the 'Inspect Element' feature do? #### --distractors-- -Edits text directly +Edits text directly. --- -Downloads files +Downloads files. --- -Modifies images +Modifies images. #### --answer-- -Displays CSS and HTML +Displays CSS and HTML. ### --question-- @@ -241,19 +241,19 @@ What does the `opacity` property do in CSS? #### --distractors-- -Changes text size +Changes text size. --- -Adds a border +Adds a border. --- -Sets the element's position +Sets the element's position. #### --answer-- -Controls element transparency +Controls element transparency. ### --question-- @@ -285,19 +285,19 @@ What is a common use for `aria-hidden="true"`? #### --distractors-- -To show content +To show content. --- -To display on mobile +To display on mobile. --- -To increase visibility +To increase visibility. #### --answer-- -To hide content from screen readers +To hide content from screen readers. ### --question-- @@ -307,19 +307,19 @@ What is the `flex` property used for? #### --distractors-- -Changing text color +Changing text color. --- -Adjusting font size +Adjusting font size. --- -Adding animations +Adding animations. #### --answer-- -Creating responsive layouts +Creating responsive layouts. ### --question-- @@ -439,17 +439,17 @@ What is the `outline` property most commonly used to configure? #### --distractors-- -Border of an element +Border of an element. --- -Margin of an element +Margin of an element. --- -Padding of an element +Padding of an element. #### --answer-- -Focus indicator around an element +Focus indicator around an element. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md index f3355ce004..565bb9c58a 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md @@ -43,19 +43,19 @@ What does `matrix()` allow you to control? #### --distractors-- -Only scaling +Only scaling. --- -Only translation +Only translation. --- -Only rotation +Only rotation. #### --answer-- -Multiple transformations at once +Multiple transformations at once. ### --question-- @@ -109,19 +109,19 @@ What does `@keyframes` define? #### --distractors-- -CSS colors +CSS colors. --- -CSS transitions +CSS transitions. --- -CSS text styles +CSS text styles. #### --answer-- -CSS animation sequences +CSS animation sequences. ### --question-- @@ -131,19 +131,19 @@ What does `translate()` do? #### --distractors-- -Changes opacity +Changes opacity. --- -Rotates the element +Rotates the element. --- -Skews the element +Skews the element. #### --answer-- -Moves the element +Moves the element. ### --question-- @@ -153,7 +153,7 @@ What does accessibility focus on in web design? #### --distractors-- -Color choice +Color choice. --- @@ -161,11 +161,11 @@ Responsiveness --- -Layout complexity +Layout complexity. #### --answer-- -Usability for all users +Usability for all users. ### --question-- @@ -175,19 +175,19 @@ Where is `@keyframes` written? #### --distractors-- -Inside HTML tags +Inside HTML tags. --- -Inside CSS selectors +Inside CSS selectors. --- -In JavaScript +In JavaScript. #### --answer-- -In CSS +In CSS. ### --question-- @@ -219,19 +219,19 @@ Why is providing video captions important? #### --distractors-- -To improve SEO +To improve SEO. --- -To comply with web standards +To comply with web standards. --- -To enhance visuals +To enhance visuals. #### --answer-- -To provide accessibility for hearing impaired users +To provide accessibility for hearing impaired users. ### --question-- @@ -319,7 +319,7 @@ To adjust the layout. #### --answer-- -To highlight focused elements +To highlight focused elements. ### --question-- @@ -395,19 +395,19 @@ What does the animation shorthand property include? #### --distractors-- -Only animation name +Only animation name. --- -Only animation timing +Only animation timing. --- -Only animation duration +Only animation duration. #### --answer-- -All animation properties +All animation properties. ### --question-- @@ -417,7 +417,7 @@ What is the effect of using the `ease-in-out` timing function? #### --distractors-- -The animation will start fast and end slow +The animation will start fast and end slow. --- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md index 05c1d209c7..9a0fb9a439 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md @@ -61,23 +61,23 @@ Which property is used to control the position of the list item marker? #### --text-- -Which of the following is NOT a valid value for the `list-style-type` property? +What does the `line-height` property do? #### --distractors-- -`decimal` +It is used to set the background size for an element. --- -`disc` +It is used to style links that have not be visited by the user. --- -`square` +It is used to create space to the right of list items. #### --answer-- -`lower-arabic` +It is used to create space between lines of text. ### --question-- @@ -87,15 +87,15 @@ Which pseudo-class is used to style links when a user hovers over them? #### --distractors-- -`:active` +`:hovered` --- -`:link` +`:hovering` --- -`:visited` +`:hasHovered` #### --answer-- @@ -149,45 +149,45 @@ Which CSS property can be used to control the size of a background image? #### --text-- -How can you make a background image cover the entire element, maintaining aspect ratio? +Which of the following is the correct way to apply a solid red top border to an element? #### --distractors-- -`background-size: contain` +`set-top-border: 3px solid red;` --- -`background-repeat: stretch` +`border-top: apply 3px solid red;` --- -`background-fit: full` +`top-border: 3px solid red;` #### --answer-- -`background-size: cover` +`border-top: 3px solid red;` ### --question-- #### --text-- -What does `background-attachment: fixed` do? +Which of the following is NOT a valid `border` property? #### --distractors-- -The background moves with the scrolling content +`border-bottom` --- -The background scrolls twice as fast +`border-right` --- -The background image is resized to fill the screen +`border-top` #### --answer-- -The background stays fixed while the content scrolls +`border-side` ### --question-- @@ -215,45 +215,61 @@ Which of the following is a valid `border-style` value? #### --text-- -How can you make a link change color when clicked? +Which of the following is the correct way to apply borders using the shorthand property? #### --distractors-- -Use the `:link` pseudo-class +```css +.box { + borders: 1px solid black; +} +``` --- -Use the `:visited` pseudo-class +```css +.box { + borderShort: 1px solid black; +} +``` --- -Use the `:hover` pseudo-class +```css +.box { + border-short: 1px solid black; +} +``` #### --answer-- -Use the `:active` pseudo-class +```css +.box { + border: 1px solid black; +} +``` ### --question-- #### --text-- -What is the correct CSS property to create an outline around an element, besides using the `border` property? +What is the role of the `linear-gradient` function? #### --distractors-- -`border-wide` +It is used to set the style of an element's border. --- -`box-shadow` +It is used to determine how background images should be repeated along the horizontal and vertical axes. --- -`border-img` +It is used to style an element that was activated by the user. #### --answer-- -`outline` +It is used to create a transition between multiple colors along a straight line. ### --question-- @@ -281,95 +297,95 @@ Which value for the `background-repeat` property ensures the image repeats horiz #### --text-- -What's the purpose of the `border-radius` property? +What is the purpose of the `border-radius` property? #### --distractors-- -To create shadows around the border +To create shadows around the border. --- -To change the width of the border +To change the width of the border. --- -To make the border disappear +To make the border disappear. #### --answer-- -To round the corners of an element +To round the corners of an element. ### --question-- #### --text-- -Which property is used to add space between the border and the content? +Which of the following is NOT a valid value for the `background-position` property? #### --distractors-- -`margin` +`top` --- -`border-spacing` +`center` --- -`border-width` +`bottom` #### --answer-- -`padding` +`side` ### --question-- #### --text-- -How can you make a background image repeat only vertically? +Which of the following `background-repeat` values can be used to repeat a background image vertically? #### --distractors-- -`background-repeat: repeat-x` +`repeat-x` --- -`background-repeat: vertical-only` +`vertical-only` --- -`background-repeat: stretch` +`stretch` #### --answer-- -`background-repeat: repeat-y` +`repeat-y` ### --question-- #### --text-- -What does `background-position: center` do to a background image? +What does `background-position: center;` do to a background image? #### --distractors-- -It aligns the background image to the top of the element +It aligns the background image to the top of the element. --- -It repeats the background image horizontally and vertically +It repeats the background image horizontally and vertically. --- -It scales the background image to fill the entire element +It scales the background image to fill the entire element. #### --answer-- -It positions the background image in the center of the element +It positions the background image in the center of the element. ### --question-- #### --text-- -Which of these is NOT a valid border value? +Which of these is NOT a valid `border` value? #### --distractors-- @@ -381,7 +397,7 @@ Which of these is NOT a valid border value? --- -`2px grooved red` +`2px dashed red` #### --answer-- @@ -391,65 +407,81 @@ Which of these is NOT a valid border value? #### --text-- -How can you ensure that gradients used in web design are accessible? +What is does the `radial-gradient` function do? #### --distractors-- -Use only two colors in the gradient +It creates a background that transitions between multiple colors along a straight line. --- -Use gradients only for decorative purposes +It specifies whether the background image should scroll with the content or remain fixed in place. --- -Avoid using gradients in the background +It is used to style an element that was activated by the user. #### --answer-- -Ensure sufficient contrast between the gradient and any text. +It creates an image that radiates from a particular point and gradually transitions between multiple colors. ### --question-- #### --text-- -Which value for the `background-size` property will resize the background image to fit within the container while preserving the image's aspect ratio? +Which of the following is NOT a valid pseudo-class? #### --distractors-- -`fill` +`:focus` --- -`stretch` +`:visited` --- -`repeat` +`:link` #### --answer-- -`contain` +`:before` ### --question-- #### --text-- -How do you make an image border have rounded corners in CSS? +Which of the following shows the `background` shorthand property being used properly? #### --distractors-- -`border-style: round` +```css +body { + background: apply url("example-url-goes-here"); +} +``` --- -`border-corners: circle` +```css +body { + background: set url("example-url-goes-here"); +} +``` --- -`border-rounding: 10px` +```css +body { + background: 2px solid red url("example-url-goes-here"); +} +``` #### --answer-- -`border-radius: 10px` +```css +body { + background: no-repeat url("example-url-goes-here"); +} +``` diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md index 7475192583..4671ada16c 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md @@ -17,111 +17,111 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -Which of the following is a valid way to represent a color in CSS? +Which of these color systems cannot be used to set a color in CSS? #### --distractors-- -`color-value: black;` +RGB --- -`text-color: blue;` +HSL --- -`font-color: red;` +HEX #### --answer-- -`#ff5733` +CMYK ### --question-- #### --text-- -What is the correct syntax for setting the background color of an element? +What are the primary colors in color theory? #### --distractors-- -`bg-color: red;` +`Green`, `Blue`, `Purple` --- -`background_color: red;` +`Orange`, `Green`, `Purple` --- -`style: background-color: red;` +`Yellow`, `Green`, `Red` #### --answer-- -`background: red;` +`Yellow`, `Blue`, `Red` ### --question-- #### --text-- -How can you set the transparency of an element to 50%? +Which type of color scheme uses colors that are opposite each other on the color wheel? #### --distractors-- -`bg-opacity: 0.5;` +Analogous --- -`transparency: 50%;` +Triadic --- -`alpha: 0.5;` +Monochromatic #### --answer-- -`opacity: 0.5;` +Complementary ### --question-- #### --text-- -What is the equivalent `HSL` value for the color `#FF0000`? +Which type of color scheme uses colors that are adjacent to each other on the color wheel? #### --distractors-- -`hsl(180%, 100%, 50%)` +Complementary --- -`hsl(180, 100%, 50%)` +Triadic --- -`hsl(360, 100%, 50%)` +Monochromatic #### --answer-- -`hsl(0, 100%, 50%)` +Analogous ### --question-- #### --text-- -How can you set the color of an element to a random color? +What is the term for colors that are created by mixing equal parts of two primary colors? #### --distractors-- -`color: random();` +Tertiary --- -`color: #random;` +Complementary --- -`color: any();` +Analogous #### --answer-- -There is no direct way to do so. +Secondary ### --question-- @@ -237,45 +237,53 @@ Which of the following hex codes represents a shade of red? #### --text-- -Which keyword sets the text color to inherit from the parent element? +How many colors are required to create a valid CSS gradient? #### --distractors-- -`null` +At least 4. --- -`auto` +Exactly 2. --- -`default` +Exactly 3. #### --answer-- -`inherit` +At least 2. ### --question-- #### --text-- -How many colors are required to create a valid CSS gradient? +Which is NOT a valid way to apply a linear-gradient? #### --distractors-- -At least `4` +```css +background: linear-gradient(to right, red, blue); +``` --- -Exactly `2` +```css +background: linear-gradient(90deg, red, green, blue); +``` --- -Exactly `3` +```css +background: linear-gradient(#F00, #00F); +``` #### --answer-- -At least `2` +```css +background: linear-gradient(up, red, blue); +``` ### --question-- @@ -285,41 +293,41 @@ What unit is used to express the lightness value in the `hsl` color model? #### --distractors-- -`Degrees` +Degrees --- -`Hex` +Hex --- -`Pixels` +Pixels #### --answer-- -`Percent (%)` +Percent ### --question-- #### --text-- -Which CSS property would you use to add a solid color around an element? +What does the `rgb()` function stand for? #### --distractors-- -`color` +`Red`, `Gray`, `Black` --- -`outline-color` +`Radiant`, `Glow`, `Blend` --- -`text-color` +`Rendered`, `Graphic`, `Background` #### --answer-- -`border-color` +`Red`, `Green`, `Blue` ### --question-- @@ -329,37 +337,37 @@ What does the `hsl()` function stand for? #### --distractors-- -`Hue, Saturation, Luminosity` +`Hue`, `Saturation`, `Luminosity` --- -`Hue, Shadow, Lightness` +`Hue`, `Shadow`, `Lightness` --- -`Hue, Shadow, Luminosity` +`Hue`, `Shadow`, `Luminosity` #### --answer-- -`Hue, Saturation, Lightness` +`Hue`, `Saturation`, `Lightness` ### --question-- #### --text-- -Which of these is a valid CSS color keyword? +Which of these is a valid CSS named color? #### --distractors-- -`purple-red` +`hsl(yellow)` --- -`electricblue` +`rgb(red)` --- -`goldy` +`#blue` #### --answer-- @@ -391,29 +399,37 @@ What is the maximum value allowed for a single color component in the `RGB` colo #### --text-- -Which color model includes the `hue` component? +Which of these correctly uses one of the color models to set the background color? #### --distractors-- -`rgb` +```css +background: rgb(50%, 255, 155); +``` --- -`hex` +```css +background: #blue; +``` --- -`cmyk` +```css +background: #0I0I0I; +``` #### --answer-- -`hsl` +```css +background: hsl(50, 50%, 50%); +``` ### --question-- #### --text-- -Which color function also allows you to set the opacity of the color? +Which of these sets the opacity of the color? #### --distractors-- @@ -468,4 +484,3 @@ background: linear-gradient(blue, red) ```css background: linear-gradient(red, blue) ``` - diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md index 802c8e1a5e..68a68c012c 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md @@ -44,32 +44,32 @@ What css property is set to enable the flexbox layout for the `div` element? #### --distractors-- ```css -div { - flex: 1; +div { + flex: 1; } ``` --- ```css -div { - flex-direction: row; +div { + flex-direction: row; } ``` --- ```css -div { - flex-wrap: wrap; +div { + flex-wrap: wrap; } ``` #### --answer-- ```css -div { - display: flex; +div { + display: flex; } ``` @@ -77,7 +77,7 @@ div { #### --text-- -Flexbox defaults to fit all children within a single row. What property can be modified when there are too many children within one row, and you want to spread them out into multiple rows? +Which CSS property lets flex items wrap onto a new row when the current row is full? #### --distractors-- @@ -103,19 +103,19 @@ What does the flexbox property `justify-content` control? #### --distractors-- -It controls the direction of the children elements of the flexbox container. +It controls the direction of the child elements of the flexbox container. --- -It controls the text style of the children elements of the flexbox container. +It controls the text style of the child elements of the flexbox container. --- -It controls the alignment of the children elements within the flexbox container. +It controls the alignment of the child elements within the flexbox container. #### --answer-- -It controls the distribution of the children elements on the main axis. +It controls the distribution of the child elements on the main axis. ### --question-- @@ -143,7 +143,7 @@ What property controls the direction of the elements within the flexbox containe #### --text-- -What CSS properties would you use to make a `.container` element's items flow from left to right, change lines when an item exceeds container width, and have new items go on top of the previous line? +Which CSS properties can be used to make flex items flow from left to right, and have the new flex item appear on top of the previous one if the width of the current row is exceeded? #### --distractors-- @@ -276,7 +276,7 @@ What CSS properties would you use to center an element within a flex container h #### --text-- -What value of `flex-direction` makes the children elements go from right to left? +What value of `flex-direction` makes the flex items go from right to left? #### --distractors-- @@ -324,7 +324,7 @@ What does the `stretch` value in `align-items` do? #### --distractors-- -Items are packed flush to each other toward the start edge of the container. +Items are packed directly against each other toward the start edge of the container. --- @@ -332,7 +332,7 @@ Items are aligned such that their flex container baselines align. --- -Items are packed flush to each other toward the end edge of the container. +Items are packed directly against each other toward the end edge of the container. #### --answer-- @@ -342,7 +342,7 @@ Auto-size items to be equally large to fill the container. #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, have the same spacing between each pair of adjacent items, and have items whose sides are flush against the main axis edge? +Which `justify-content` value places the first item at the start, the last item at the end, and evenly spaces the other items between them along the main axis? #### --distractors-- @@ -364,7 +364,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, and have the same spacing between each pair of adjacent items and against the main axis edge? +Which `justify-content` value spaces items so that the gaps between every pair of adjacent items and the container’s edges are all equal? #### --distractors-- @@ -386,7 +386,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, have the same spacing between each pair of adjacent items, and have items on the sides with half the spacing against the main axis edge? +Which `justify-content` value spaces items equally along the main axis while leaving half that amount of space at the container’s edges? #### --distractors-- @@ -408,7 +408,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `align-items` will make it so items are flush against the cross-axis start? +Which value for `align-items` will make it so items are directly against the cross-axis start? #### --distractors-- @@ -430,7 +430,7 @@ Which value for `align-items` will make it so items are flush against the cross- #### --text-- -Which value for `align-items` will make it so items are flush against the cross-axis end? +Which value for `align-items` will make it so items are directly against the cross-axis end? #### --distractors-- @@ -452,7 +452,7 @@ Which value for `align-items` will make it so items are flush against the cross- #### --text-- -Which value for `flex-direction` will make it so items are aligned along the main axis from left to right. +Which value for `flex-direction` will make it so items are aligned along the main axis from left to right? #### --distractors-- @@ -474,7 +474,7 @@ Which value for `flex-direction` will make it so items are aligned along the mai #### --text-- -Which value for `flex-direction` will make it so items are aligned along the cross axis from top to bottom. +Which value for `flex-direction` will make it so items are aligned along the cross axis from top to bottom? #### --distractors-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md index 3a1db70a11..511a8f7cf3 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md @@ -39,45 +39,45 @@ A two-dimensional layout for HTML documents. #### --text-- -Which property and attribute are used to turn an element into a grid container? +Which of the following is the correct way to create a grid container? #### --distractors-- -`display: grid-area` +`display: grid-area;` --- -`grid: grid-template` +`grid: grid-template;` --- -`grid-template: set` +`grid-template: set;` #### --answer-- -`display: grid` +`display: grid;` ### --question-- #### --text-- -Which one of these options for the `grid-template-columns` property will result in a middle column that is 80 relative units wide, and two columns taking up the remaining space? +What does the `grid-template-columns` property do? #### --distractors-- -`10% 80rem 10%` +Defines two columns and three rows for a grid container. --- -`1fr 8fr 1fr` +Sets all columns for the grid layout to a fixed length. --- -`10rem 80rem 10rem` +Creates a two column grid layout container. #### --answer-- -`1fr 80rem 1fr` +Defines the number of columns in a grid layout. ### --question-- @@ -95,11 +95,11 @@ Creates a template for creating new grid rows. --- -Specifies a default row size. +Specifies a default row size in the grid container. #### --answer-- -Specifies the number and heights of the rows in a grid layout. +Specifies the number and height for each row in a grid layout. ### --question-- @@ -121,7 +121,7 @@ Sets the minimal size of the element for browser working in full-screen mode. #### --answer-- -Defines a size range between the first and second value. +Sets the minimum and maximum sizes for a track. ### --question-- @@ -149,45 +149,45 @@ What is the shorthand for the `column-gap` and `row-gap` properties? #### --text-- -Which property defines on which row line the item will start? +What is the difference between an implicit and explicit grid? #### --distractors-- -`row-start` +Implicit grids use the `grid-template-columns` property while explicit grids use the `grid-template-rows` property. --- -`grid-row-begin` +Explicit grids use the `grid-template-columns` property while implicit grids use the `grid-template-rows` property. --- -`grid-row` +Implicit grids use the `grid-template-columns` or `grid-template-rows` properties to create columns while rows and columns are automatically created in explicit grids. #### --answer-- -`grid-row-start` +Explicit grids use the `grid-template-columns` or `grid-template-rows` properties to create columns while rows and columns are automatically created in implicit grids. ### --question-- #### --text-- -Which property automatically allocates rows based on a fixed size? +Which of the following units represents a fraction of the space within the grid container? #### --distractors-- -`grid-rows-size` +`fractional` --- -`grid-template` +`frac` --- -`grid-row` +`f` #### --answer-- -`grid-auto-rows` +`fr` ### --question-- @@ -227,7 +227,7 @@ Aligns text in the grid item vertically. --- -Specifies the number of columns in a grid element. +Sets two columns for a grid container. #### --answer-- @@ -241,41 +241,41 @@ How do you create four columns of equal width? #### --distractors-- -`grid-template-columns: repeat(4)` +`grid-template-columns: repeat(4);` --- -`grid-template-columns: 1, 1, 1, 1,` +`grid-template-columns: repeat(1, 4);` --- -`grid-column: repeat(4, 1fr)` +`grid-template-columns: repeat(1fr, 4);` #### --answer-- -`grid-template-columns: repeat(4, 1fr)` +`grid-template-columns: repeat(4, 1fr);` ### --question-- #### --text-- -Which property and value will make an element span the full width of the grid? +What does the `grid-template-areas` property do? #### --distractors-- -`grid-column: 1 / 1` +It is used to specify where the item begins on a line in the grid container. --- -`width: 100%` +It is used to create gaps between tracks in the container. --- -`grid-column: 100%` +It is used to repeat sections in the track listing. #### --answer-- -`grid-column: 1 / -1` +It is used to provide a name for the items you are going to position on the grid. ### --question-- @@ -303,111 +303,182 @@ Controls how auto-placed elements get inserted to the grid. #### --text-- -What does the secondary value `dense` do in the `grid-auto-flow` property? +Which of the following is the correct way to use the `grid-template-areas` property? #### --distractors-- -Narrows the grid container to fit to its content width. - ---- - -Groups grid items of the same size. - ---- - -Sorts grid items based on their size. +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: set( + "header header" + "sidebar main" + "footer footer" + ); + gap: 20px; +} +``` + +--- + +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: apply( + "header header" + "sidebar main" + "footer footer" + ); + gap: 20px; +} +``` + +--- + +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: set-areas; + gap: 20px; +} +``` #### --answer-- -Place smaller items to fill gaps in the grid. +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header" + "sidebar main" + "footer footer"; + gap: 20px; +} +``` ### --question-- #### --text-- -Which one of these options is NOT a unit used for the `gap` property? +Which of the following is the correct way to work with the `grid-auto-flow` property? #### --distractors-- -`px` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: none; + grid-auto-columns: 1fr; +} +``` --- -`%` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: allow; + grid-auto-columns: 1fr; +} +``` --- -`em` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: set; + grid-auto-columns: 1fr; +} +``` #### --answer-- -`fr` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; +} +``` ### --question-- #### --text-- -How do you make a grid item take up 2 rows using the `grid-row-end` property? +Which of the following is NOT a valid grid property? #### --distractors-- -`grid-row-end: 2 / 2` +`gap` --- -`grid-row-end: -2` +`grid-column` --- -`grid-row-end: 2` +`grid-template-columns` #### --answer-- -`grid-row-end: span 2` +`grid-set` ### --question-- #### --text-- -Which of these properties is NOT used to align items inside a grid element? +Which of these properties can be used to center items inside a grid element? #### --distractors-- -`align-items` +`allow-items` --- -`place-items` +`set-items` --- -`justify-items` +`center-items` #### --answer-- -`center-items` +`align-items` ### --question-- #### --text-- -Which of these properties can be used as a shorthand for the `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end` properties? +Which of the following is a correct value to use with the `grid-auto-columns` property? #### --distractors-- -`grid-section` +`grid-auto-columns: unset-grid;` --- -`grid-item` +`grid-auto-columns: revert-grid;` --- -`grid-row-column` +`grid-auto-columns: set-content(20%);` #### --answer-- -`grid-area` +`grid-auto-columns: 1fr;` ### --question-- @@ -435,21 +506,45 @@ Spaces between two adjacent grid lines. #### --text-- -How can you use dev tools to debug the CSS Grid layout? +Which of the following is the correct way to use the `minmax()` function? #### --distractors-- -To resize the elements to fill out the gaps in the grid. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(apply); +} +``` --- -To drag-and-drop elements inside the grid. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(); +} +``` --- -To automatically fix overlaying grid elements. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(set); +} +``` #### --answer-- -To preview the layout of grid lines. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(150px, auto); +} +``` diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md index 1a0901cda1..cafa970cf8 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -What happens when there is too much content to fit in an element box? +What term is used in CSS to describe when an element's content exceeds the size of its container? #### --distractors-- @@ -39,23 +39,23 @@ Overflow #### --text-- -What is the default behavior of CSS when there is overflow? +What is the default behavior of CSS when content overflows an element? #### --distractors-- -Content is hidden +Hiding the content. --- -Content is clipped +Clipping the content. --- -Content is resized +Resizing the content. #### --answer-- -Content is visible +Keeping the content visible. ### --question-- @@ -65,63 +65,63 @@ Why does CSS typically avoid hiding content when there is overflow? #### --distractors-- -To enhance page design by hiding irrelevant content +To maintain the original layout and design. --- -To save memory and load pages faster +To prevent performance issues in the browser. --- -To automatically fix broken layout issues +To allow for better search engine optimization. #### --answer-- -To prevent data loss and make issues noticeable +To ensure all content is accessible to users. ### --question-- #### --text-- -How can you handle overflow in CSS to hide content or add scrollbars? +How can you handle vertical overflow in CSS by hiding content or displaying scrollbars? #### --distractors-- -Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars +Use `overflow-y: visible` to hide content and `overflow-y: auto` to always display scrollbars. --- -Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars +Use `overflow-y: collapse` to hide content and `overflow-y: expand` to display scrollbars. --- -Use `overflow: none` to hide content and `overflow: show` to display scrollbars +Use `overflow-y: none` to hide content and `overflow-y: show` to display scrollbars. #### --answer-- -Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars +Use `overflow-y: hidden` to hide content and `overflow-y: scroll` to always display scrollbars. ### --question-- #### --text-- -How can you specify different scrolling behaviors for the x-axis and y-axis in CSS? +How can you specify different horizontal and vertical scrolling behaviors in CSS? #### --distractors-- -By using `scroll-x` and `scroll-y` properties +By using the `scroll-x` and `scroll-y` properties. --- -By using `overflow-x` and `overflow-y` separately in every case +By specifying the same value for `overflow-x` and `overflow-y`. --- -By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x` +By specifying two values for the `overflow` property, where the first value applies to `overflow-y` and the second value to `overflow-x`. #### --answer-- -By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y` +By specifying two values for the `overflow` property, where the first value applies to `overflow-x` and the second value to `overflow-y`. ### --question-- @@ -131,47 +131,47 @@ What does the `transform` CSS property allow you to do? #### --distractors-- -Change the color and font style of an element +Change the color and font style of an element. --- -Adjust the margin and padding of an element +Adjust the margin and padding of an element. --- -Modify the visibility and display of an element +Modify the visibility and display of an element. #### --answer-- -Rotate, scale, skew, or translate an element +Rotate, scale, skew, and translate an element. ### --question-- #### --text-- -What does the `transform-box: fill-box` property do in an animation that rotates an element? +How does the `transform: translate(15px, 200px)` property modify an element? #### --distractors-- -It resizes the element to fit the canvas during the transformation +It moves the element 15 pixels to the left and 200 pixels down from its original position. --- -It changes the background of the element during transformation +It rotates the element 15 degrees in a clockwise direction. --- -It sets the transform origin to the top-left corner of the element +It moves the element 15 pixels to the right and 200 pixels up from its original position. #### --answer-- -It sets the transform origin to the center of the element's bounding box, allowing it to spin in place +It moves the element 15 pixels to the right and 200 pixels down from its original position. ### --question-- #### --text-- -What is the purpose of CSS's `overflow-x` and `overflow-y` properties? +What is the purpose of the CSS properties `overflow-x` and `overflow-y`? #### --distractors-- @@ -193,45 +193,45 @@ They control the horizontal and vertical overflow of an element's content. #### --text-- -How does margin affect the size of an element in CSS? +What is the purpose of the `margin` property in CSS? #### --distractors-- -Margin increases the actual size of the element's box +It defines the space between the content and the border of an element. --- -Margin has no effect on the element's size or position +It defines the space between the border and the padding of an element. --- -Margin decreases the total area the element occupies on the page +It defines the width and height of an element. #### --answer-- -Margin affects the total area an element occupies but is not part of the actual size of the box +It defines the space around an element, outside of its border. ### --question-- #### --text-- -What does the content area of an element in CSS represent? +What does the content area of an element represent in CSS? #### --distractors-- -It defines the margins and padding around the element +It defines the margins and padding around the element. --- -It specifies the border thickness of the element +It defines the thickness of the element's border. --- -It controls the visibility of the element on the page +It controls the visibility of the element on the page. #### --answer-- -It contains the "real" content of the element, such as text, images, or videos +It contains the actual content of the element, such as text, images, and videos. ### --question-- @@ -241,19 +241,19 @@ What is the difference between `content-box` and `border-box` in CSS? #### --distractors-- -`content-box` includes padding and border, while `border-box` includes only content dimensions +`content-box` includes padding and border, while `border-box` includes only content dimensions. --- -Both `content-box` and `border-box` include only the border dimensions +Both `content-box` and `border-box` include only the border dimensions. --- -`content-box` is used for 2D elements, while `border-box` is used for 3D elements +`content-box` is used for 2D elements, while `border-box` is used for 3D elements. #### --answer-- -`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions +`content-box` includes only content dimensions, while `border-box` includes content, padding, and border in the dimensions. ### --question-- @@ -263,47 +263,47 @@ What is the purpose of CSS resets? #### --distractors-- -To apply default styles to all elements for faster loading +To apply default styles to all elements for faster loading. --- -To minimize the size of CSS files by removing unused styles +To minimize the size of CSS files by removing unused styles. --- -To optimize images and fonts for better performance +To optimize images and fonts for better performance. #### --answer-- -To remove default browser styling and create a consistent baseline for styling across different browsers +To remove default browser styling and ensure consistent styling across browsers. ### --question-- #### --text-- -What are the common types of CSS resets? +Which of the following is a common example of a CSS reset? #### --distractors-- -Bootstrap Reset, Tailwind Reset, and Foundation Reset +Bootstrap.css --- -Simple Reset, Comprehensive Reset, and Adaptive Reset +Reset.css --- -Minimal Reset, Advanced Reset, and Legacy Reset +Restore.css #### --answer-- -Normalize.css, Eric Meyer's Reset, and HTML5 Reset +Normalize.css ### --question-- #### --text-- -Which CSS property is used to apply transformations such as rotation, scaling, and translation to elements? +Which CSS property is used to apply changes such as rotation, scaling, and translation to elements? #### --distractors-- @@ -325,131 +325,131 @@ Which CSS property is used to apply transformations such as rotation, scaling, a #### --text-- -How is the total width of an element calculated in CSS? +How is the total width of an element calculated in CSS when using the `border-box` value for the `box-sizing` property? #### --distractors-- -Total width = width + margin + padding + border +Total Width = Content Width + Border + Margin --- -Total width = width + margin + padding +Total Width = Content Width + Padding + Border + Margin --- -Total width = width + margin + border +Total Width = Content Width #### --answer-- -Total width = width + left padding + right padding + left border + right border +Total Width = Content Width + Padding + Border ### --question-- #### --text-- -What does the filter property in CSS do? +What is the purpose of the `filter` property in CSS? #### --distractors-- -It changes the layout of the element on the page +Changing the scale and rotation of an element. --- -It changes the background color and texture of an element +Changing the background color and texture of an element. --- -It alters the size and position of an element +Altering the size and position of an element. #### --answer-- -It applies visual effects like blur and saturation to an element +Modifying the visual appearance of an element by using various graphical effects. ### --question-- #### --text-- -How is the `filter` property specified in CSS? +What does the CSS property `filter: grayscale(50%);` do to an element? #### --distractors-- -As only a single function, where percentage values must be used +It increases the brightness of the element by 50%. --- -As `block` or `inline`, with values expressed in pixels +It decreases the contrast of the element by 50%. --- -As `none` or multiple functions, but only percentage values are accepted +It applies a sepia effect to the element. #### --answer-- -As `none` or one or more functions, where percentage values can also be expressed as decimals +It applies a 50% grayscale effect to the element. ### --question-- #### --text-- -What does the `contrast()` function in CSS do? +What is the purpose of the `contrast()` function in CSS? #### --distractors-- -Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white +It adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white. --- -Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it +It adjusts the contrast of the image, where `100%` makes it grey, `0%` has no effect, and values over `100%` increase contrast. --- -Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque +It adjusts the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque. #### --answer-- -Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast +It adjusts the contrast of the image, where `0%` makes it grey, `100%` has no effect, and values over `100%` increase contrast. ### --question-- #### --text-- -What does the `hue-rotate()` function in CSS do? +What is the purpose of the `hue-rotate()` function in CSS? #### --distractors-- -It changes the brightness of the input image based on degrees +It changes the brightness of an image. --- -It rotates an element's size and position in the document +It rotates an image clockwise by a certain number of degrees. --- -It adjusts the saturation and contrast of the input image +It adjusts the saturation and contrast of an image. #### --answer-- -It applies a hue rotation, where the `` value defines the degrees around the hue color circle +It applies a color shift, where the `angle` value defines the number of degrees to rotate around the color circle. ### --question-- #### --text-- -What happens when two animated filters have different function list lengths in CSS? +What is margin collapsing in CSS? #### --distractors-- -The shorter list's filters override the longer list's filters +When the margin of an element is set to a negative number and this causes issues in the layout. --- -The filters are discarded and no animation is applied +When the margin of an element is decreased by the padding and this changes the element's dimensions. --- -Only the first filter function in each list is animated +When the margin of an element is ignored by the browser, so it's not visible. #### --answer-- -The longer list's missing equivalent filter functions are added to the shorter list using their initial values +When the vertical margins of adjacent elements overlap, so they are combined into a single margin. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md index 9c4658cd5a..28247f60a1 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md @@ -21,19 +21,19 @@ What is a CSS framework? #### --distractors-- -A set of CSS rules +A set of CSS rules. --- -A JavaScript library +A JavaScript library. --- -A coding language +A coding language. #### --answer-- -A library for CSS styles +A library for CSS styles. ### --question-- @@ -65,19 +65,19 @@ What is a key advantage of using a CSS framework? #### --distractors-- -Provides predefined templates +Provides predefined templates. --- -Reduces loading speed +Reduces loading speed. --- -Increases code complexity +Increases code complexity. #### --answer-- -Simplifies design consistency +Simplifies design consistency. ### --question-- @@ -87,19 +87,19 @@ What is a disadvantage of CSS frameworks? #### --distractors-- -Too few components +Too few components. --- -No customization options +No customization options. --- -Improved browser support +Improved browser support. #### --answer-- -Can bloat CSS files +Can bloat CSS files. ### --question-- @@ -131,19 +131,19 @@ What is the primary purpose of the `.container` class in Bootstrap? #### --distractors-- -To add padding to elements +To add padding to elements. --- -To apply a background color +To apply a background color. --- -To center text +To center text. #### --answer-- -To create a fixed-width responsive container +To create a fixed-width responsive container. ### --question-- @@ -153,19 +153,19 @@ What does SCSS stand for? #### --distractors-- -Super Cascading Style Sheets +Super Cascading Style Sheets. --- -Structured CSS +Structured CSS. --- -Simple CSS +Simple CSS. #### --answer-- -Sassy CSS +Sassy CSS. ### --question-- @@ -175,19 +175,19 @@ What benefit do preprocessors like Sass provide? #### --distractors-- -Adds JavaScript functionality +Adds JavaScript functionality. --- -Directly edits HTML +Directly edits HTML. --- -Eliminates CSS +Eliminates CSS. #### --answer-- -Nesting of styles +Nesting of styles. ### --question-- @@ -201,11 +201,11 @@ Comments --- -CSS variables +CSS variables. --- -Inline CSS +Inline CSS. #### --answer-- @@ -219,19 +219,19 @@ What is Bootstrap known for? #### --distractors-- -Static design +Static design. --- -Focus on accessibility +Focus on accessibility. --- -No JavaScript support +No JavaScript support. #### --answer-- -Mobile-first approach +Mobile-first approach. ### --question-- @@ -241,19 +241,19 @@ What does Tailwind CSS focus on? #### --distractors-- -Component-based styling +Component-based styling. --- -Image optimization +Image optimization. --- -Mobile responsiveness +Mobile responsiveness. #### --answer-- -Utility-first design +Utility-first design. ### --question-- @@ -263,19 +263,19 @@ What does a CSS framework typically include? #### --distractors-- -JavaScript functions +JavaScript functions. --- -HTML templates +HTML templates. --- -Database management +Database management. #### --answer-- -Predefined styles and components +Predefined styles and components. ### --question-- @@ -307,15 +307,15 @@ What is a main feature of preprocessors? #### --distractors-- -Linear CSS +Linear CSS. --- -Uncompiled styles +Uncompiled styles. --- -Built-in animations +Built-in animations. #### --answer-- @@ -329,19 +329,19 @@ Which of the following is a drawback of Tailwind CSS? #### --distractors-- -Limited utility classes +Limited utility classes. --- -Lack of documentation +Lack of documentation. --- -Hard to learn +Hard to learn. #### --answer-- -Verbose class names +Verbose class names. ### --question-- @@ -395,19 +395,19 @@ What does Bootstrap's grid system help with? #### --distractors-- -CSS animations +CSS animations. --- -JavaScript functions +JavaScript functions. --- -Image loading +Image loading. #### --answer-- -Responsive layout +Responsive layout. ### --question-- @@ -439,17 +439,17 @@ Why might developers choose Materialize? #### --distractors-- -Strong community support +Strong community support. --- -Easy integration with HTML +Easy integration with HTML. --- -Comprehensive animation support +Comprehensive animation support. #### --answer-- -Focus on material design principles +Focus on material design principles. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md index 36b0a03ebf..747678072d 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md @@ -355,19 +355,19 @@ Which positioning method allows an element to stick to a defined position only w #### --distractors-- -Float positioning +Float positioning. --- -Fixed positioning +Fixed positioning. --- -Absolute positioning +Absolute positioning. #### --answer-- -Sticky positioning +Sticky positioning. ### --question-- @@ -480,9 +480,9 @@ Which of the following is a correct example for using the `clearfix` hack? ```css .clearfix::before { - position: fixed; - top: 0; - width: 100%; + position: fixed; + top: 0; + width: 100%; clear: both; } ``` @@ -549,9 +549,9 @@ Which of the following is an example of setting the navbar to the top of the pag ```css .navbar { - fixed: top; - top: 0; - width: 100%; + fixed: top; + top: 0; + width: 100%; } ``` @@ -559,8 +559,8 @@ Which of the following is an example of setting the navbar to the top of the pag ```css .navbar { - upper: fixed; - width: 100%; + upper: fixed; + width: 100%; } ``` @@ -568,9 +568,9 @@ Which of the following is an example of setting the navbar to the top of the pag ```css .navbar { - position: fixed-top; - top: 0; - width: 100%; + position: fixed-top; + top: 0; + width: 100%; } ``` @@ -578,9 +578,9 @@ Which of the following is an example of setting the navbar to the top of the pag ```css .navbar { - position: fixed; - top: 0; - width: 100%; + position: fixed; + top: 0; + width: 100%; } ``` diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index 3f797ae969..d4d8054993 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -33,13 +33,13 @@ They are selector used to add movement effects to an element during interactions #### --answer-- -They are keywords added to a selector that change how an element looks or behaves when it's in a specific state. +They are keywords added to a selector that style an element based on its state. ### --question-- #### --text-- -Which pseudo-class applies when you hover over an element? +Which pseudo-class applies when a pointing device is being positioned over an element? #### --distractors-- @@ -83,7 +83,7 @@ Which pseudo-element allows you to style the first letter of a paragraph? #### --text-- -Which pseudo-class changes the style of an element when you click on it? +Which pseudo-class changes the style of an element while it is being clicked? #### --distractors-- @@ -105,7 +105,7 @@ Which pseudo-class changes the style of an element when you click on it? #### --text-- -Which pseudo-class is used to select and style an element when it's focused? +Which pseudo-class is used to style an element when it is ready to receive user input, such as a text field being clicked or tabbed into? #### --distractors-- @@ -127,29 +127,45 @@ Which pseudo-class is used to select and style an element when it's focused? #### --text-- -What does the `:hover` pseudo-class do? +Which of the following CSS rules correctly adds the text `Note:` in front of each paragraph element with a class of `note`? #### --distractors-- -It styles your element when you click on it. +```css +.note::before { + content: "Note:"; +} +``` --- -It makes your element float around the screen. +```css +p.note::after { + content: "Note:"; +} +``` --- -It hides elements on click. +```css +p::before { + content: "Note:"; +} +``` #### --answer-- -It styles an element when you hover over it. +```css +p.note::before { + content: "Note:"; +} +``` ### --question-- #### --text-- -Which pseudo-class is used for an input field that is checked? +Which pseudo-class applies to an input field when it is selected or toggled on? #### --distractors-- @@ -209,7 +225,7 @@ li:last-child { #### --text-- -Which pseudo-class applies when an input field is optional? +Which pseudo-class targets input fields that are not required to fill out? #### --distractors-- @@ -253,7 +269,7 @@ It styles elements that are not available for user interaction. #### --text-- -Which pseudo-class is triggered when a form input is valid? +Which pseudo-class applies when a form input meets its validation criteria? #### --distractors-- @@ -283,7 +299,7 @@ Which one of these is not a location pseudo-class? --- -`:scope` +`:any-link` --- @@ -335,23 +351,41 @@ li:nth-child(3) { #### --text-- -Which pseudo-class is used for the current active link? +Which elements will have a `color` of `blue` with the following CSS? + +```css +p:is(.blue, .highlight) { + color: blue; +} +``` #### --distractors-- -`:focus` +```html +

Paragraph 1

+

Paragraph 2

+``` --- -`:hover` +```html +
Paragraph 1
+
Paragraph 2
+``` --- -`:visited` +```html +

Paragraph 1

+Paragraph 2 +``` #### --answer-- -`:active` +```html +

Paragraph 1

+

Paragraph 2

+``` ### --question-- @@ -379,23 +413,29 @@ It selects elements that do not match a given selector. #### --text-- -What does the `:nth-child(4)` pseudo-class do? +What does the following CSS rule do? + +```css +p:first-of-type { + font-style: italic; +} +``` #### --distractors-- -It selects the last child. +It selects the first `p` element in the document. --- -It selects all children. +It selects all `p` elements in the document. --- -It styles odd children. +It selects the first child of every `p` element. #### --answer-- -It selects the fourth child. +It selects the first `p` element within a parent container. ### --question-- @@ -405,19 +445,19 @@ What does the `:last-of-type` pseudo class do? #### --distractors-- -It selects the first child element. +It selects the first child element of a specific type within its parent. --- -It selects the middle element. +It selects the middle child element of a specific type within its parent. --- -It selects every element in a group. +It selects every child element of a specific type within its parent. #### --answer-- -It selects the last sibling element. +It selects the last child element of a specific type within its parent. ### --question-- @@ -453,7 +493,7 @@ Which one of these is a functional pseudo-class? --- -`:last-of-type` +`:match()` --- @@ -483,5 +523,4 @@ Which one of these is not a functional pseudo-class? #### --answer-- -`::before` - +`:contains()` diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md index fdbceb80b1..e979353934 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md @@ -17,23 +17,23 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -If the body text is `16px`, how much is `1em` in most child elements? +What is an absolute unit? #### --distractors-- -`18px` +Units that adjust dynamically based on screen size. --- -`12px` +Units that depend on the font size of the parent element. --- -It depends on the parent's font size +Units measured in percentages of the viewport. #### --answer-- -`16px` +Fixed length units that are not relative to anything else. ### --question-- @@ -43,41 +43,41 @@ What does `100vw` cover in terms of screen width? #### --distractors-- -100% of the screen width +`100%` of the screen width. --- -100% of the viewport height +`100%` of the viewport height. --- -100% of the parent's width +`100%` of the parent's width. #### --answer-- -100% of the viewport width +`100%` of the viewport width. ### --question-- #### --text-- -If a container is `1000px` wide, how wide is 5% of it? +Which of the following is a relative unit? #### --distractors-- -`100px` +`pt` --- -`500px` +`cm` --- -`5px` +`mm` #### --answer-- -`50px` +`em` ### --question-- @@ -109,41 +109,41 @@ What can the `calc()` function do in CSS? #### --distractors-- -Modify colors dynamically +Modify colors dynamically. --- -Set a fixed width +Set a fixed width. --- -Only work with percentages +Only work with percentages. #### --answer-- -Add, subtract, multiply, or divide different units +Add, subtract, multiply, or divide different units. ### --question-- #### --text-- -On a typical screen with 96 DPI resolution, how many points (`pt`) are in 1 pixel (`px`)? +Which unit is the most commonly used absolute unit in CSS? #### --distractors-- -`1.33pt` +`inch` --- -`1pt` +`rem` --- -`2pt` +`%` #### --answer-- -`0.75pt` +`px` ### --question-- @@ -215,23 +215,23 @@ It adds `10px` to `20%` of the parent's width. #### --text-- -If the parent element's text size is `20px`, how big is `1.5em`? +Which unit is relative to the font size of the root element? #### --distractors-- -`25px` +`px` --- -`15px` +`pt` --- -`20px` +`%` #### --answer-- -`30px` +`rem` ### --question-- @@ -259,45 +259,45 @@ With a root font size of `16px`, how big is `10rem`? #### --text-- -Why might you use `pt` instead of `px` in design? +Why might you use `point` instead of `pixels` in design? #### --distractors-- -Points are scalable +Points are scalable. --- -Points are better for responsive layouts +Points are better for responsive layouts. --- -Points are easier to manage on screens +Points are easier to manage on screens. #### --answer-- -Points are for print design +Points are for print design. ### --question-- #### --text-- -How does `calc(10vh + 50px)` work for height? +Why are `rem` units preferred over `pixels` in typography? #### --distractors-- -It adds `50px` to 10% of the viewport width. +Because they provide fixed sizing regardless of screen resolution. --- -It adds `10px` to 50% of the parent's height. +Because they ensure compatibility with older browsers. --- -It adds `10vh` to 50% of the document width. +Because they are easier to implement in responsive designs. #### --answer-- -It adds `50px` to 10% of the viewport height. +Because they scale proportionally with the user’s browser settings. ### --question-- @@ -307,11 +307,11 @@ How much screen space does `80vw` take? #### --distractors-- -80% of the parent's width +`80%` of the parent's width. --- -100% of the viewport height +`100%` of the viewport height. --- @@ -319,51 +319,51 @@ How much screen space does `80vw` take? #### --answer-- -80% of the viewport width +`80%` of the viewport width. ### --question-- #### --text-- -If the root font size is `18px`, how big is `2rem`? +Which units should you use if you want to make an element occupy a certain width or height by the percentage of the screen? #### --distractors-- -`24px` +`pt` and `px` --- -`18px` +`rem` and `em` --- -`20px` +`pt` and `pc` #### --answer-- -`36px` +`vw` and `vh` ### --question-- #### --text-- -What does `calc(50% + 20px)` do for width? +What does `vw` stand for? #### --distractors-- -It adds `20px` to 50% of the screen width. +Vertical Width. --- -It adds `50px` to the screen width. +Virtual Width. --- -It adds `50%` of the height to `20px`. +Variable Width. #### --answer-- -It adds `50%` of the parent's width to `20px`. +Viewport Width. ### --question-- @@ -373,41 +373,41 @@ What's the key difference between `rem` and `em` in CSS? #### --distractors-- -`rem` is only used for fonts. +`em` is relative to the root element, while rem is relative to the parent element. --- -`rem` is for width, `em` is for fonts. +`rem` is relative to desktop width, while `em` is relative to mobile width. --- -`rem` is always smaller than `em`. +`rem` is relative to the user-defined width, while `em` is relative to the browser width. #### --answer-- -`rem` is based on the root font size, `em` is based on the parent's font size. +`em` is relative to the font size of the parent element, while rem is relative to the root element. ### --question-- #### --text-- -How does `calc(100px + 10%)` work for width? +What is a `vh` unit? #### --distractors-- -It adds `10%` of the screen width to `100px`. +A unit based on the width of the viewport. --- -It adds `10%` of the height to `100px`. +A unit based on the height of the element. --- -It adds `100px` to `10%` of the document. +A unit that adjusts based on font size. #### --answer-- -It adds `10%` of the parent's width to `100px`. +A unit equal to 1% of the viewport height. ### --question-- @@ -435,21 +435,21 @@ It allows the browser to determine the width based on the content and container. #### --text-- -What happens when you use `calc(30vh - 10px)` for height? +What’s a key advantage of the `calc()` function? #### --distractors-- -It subtracts `10px` from the parent's height. +It automatically minifies your CSS files for better performance. --- -It subtracts `30px` from the screen height. +It enables the use of variables within CSS without any preprocessors. --- -It adds `30%` of the parent's height minus `10px`. +It allows embedding JavaScript expressions directly within CSS rules. #### --answer-- -It subtracts `10px` from `30%` of the viewport height. +It lets you determine the value of a CSS property dynamically based on different aspects of the application or viewport. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md index 2db93157b5..be96efaaee 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md @@ -43,19 +43,19 @@ What is the purpose of the offset values in the `text-shadow` property, and how #### --distractors-- -They adjust the text's size and weight +They adjust the text's size and weight. --- -They change the shadow color +They change the shadow color. --- -They remove text from the shadow's path +They remove text from the shadow's path. #### --answer-- -They control the horizontal and vertical position of the shadow relative to the text +They control the horizontal and vertical position of the shadow relative to the text. ### --question-- @@ -65,19 +65,19 @@ What does "kerning" mean in typography? #### --distractors-- -The space between lines of text +The space between lines of text. --- -The overall spacing of a text block +The overall spacing of a text block. --- -The size of the font +The size of the font. #### --answer-- -The space between individual letters +The space between individual letters. ### --question-- @@ -87,19 +87,19 @@ What's the most common way to add Google Fonts to a website? #### --distractors-- -Use the `` tag in the HTML file +Use the `` tag in the HTML file. --- -Use the `@import` rule in JavaScript +Use the `@import` rule in JavaScript. --- -Embed the font within an image +Embed the font within an image. #### --answer-- -Use the `` tag in the HTML file +Use the `` tag in the HTML file. ### --question-- @@ -131,7 +131,7 @@ Which one of the following is a web-safe font? #### --distractors-- -Comic Sans MS +Comic Sans MS. --- @@ -143,7 +143,7 @@ Impact #### --answer-- -Times New Roman +Times New Roman. ### --question-- @@ -153,19 +153,19 @@ What does the `@font-face` rule do in CSS? #### --distractors-- -It defines the font size +It defines the font size. --- -It creates a fallback font for web pages +It creates a fallback font for web pages. --- -It adjusts the line height for text +It adjusts the line height for text. #### --answer-- -It allows you to use custom fonts by importing them +It allows you to use custom fonts by importing them. ### --question-- @@ -179,15 +179,15 @@ Typekit --- -Adobe Fonts +Adobe Fonts. --- -Font Universe +Font Universe. #### --answer-- -Google Fonts +Google Fonts. ### --question-- @@ -197,19 +197,19 @@ Why is it important to include multiple font options in the `font-family` proper #### --distractors-- -It reduces page load times +It reduces page load times. --- -It prevents browser compatibility issues +It prevents browser compatibility issues. --- -It gives the page more visual variety +It gives the page more visual variety. #### --answer-- -It ensures a consistent experience in case the custom font doesn't load +It ensures a consistent experience in case the custom font doesn't load. ### --question-- @@ -219,19 +219,19 @@ What is the purpose of the `text-shadow` property in CSS, and how does it enhanc #### --distractors-- -Changes the text color +Changes the text color. --- -Adds a background color to text +Adds a background color to text. --- -Makes text bold +Makes text bold. #### --answer-- -Adds a shadow effect to text, making it stand out or appear 3D +Adds a shadow effect to text, making it stand out or appear 3D. ### --question-- @@ -253,7 +253,7 @@ What CSS property is used to set the font family for an element, and how should #### --answer-- -`font-family`, with multiple fonts listed to ensure compatibility across devices +`font-family`, with multiple fonts listed to ensure compatibility across devices. ### --question-- @@ -263,19 +263,19 @@ Why is typographic hierarchy important in design? #### --distractors-- -It improves the readability of large blocks of text +It improves the readability of large blocks of text. --- -It ensures consistency across different devices +It ensures consistency across different devices. --- -It allows decorative fonts to be used effectively +It allows decorative fonts to be used effectively. #### --answer-- -It helps organize content and guide users through the information +It helps organize content and guide users through the information. ### --question-- @@ -329,19 +329,19 @@ In the `text-shadow` property, how do the horizontal and vertical offsets affect #### --distractors-- -They control the shadow's color +They control the shadow's color. --- -They define the shadow's blur radius +They define the shadow's blur radius. --- -They adjust the opacity of the shadow +They adjust the opacity of the shadow. #### --answer-- -They determine the position of the shadow relative to the text on the x and y axes +They determine the position of the shadow relative to the text on the x and y axes. ### --question-- @@ -351,19 +351,19 @@ For body text, why is a sans-serif font generally considered easier to read on s #### --distractors-- -Serif fonts are more decorative +Serif fonts are more decorative. --- -Sans-serif fonts are thicker +Sans-serif fonts are thicker. --- -Sans-serif fonts use fewer colors +Sans-serif fonts use fewer colors. #### --answer-- -Sans-serif fonts are typically simpler and more legible at smaller sizes on screens +Sans-serif fonts are typically simpler and more legible at smaller sizes on screens. ### --question-- @@ -373,19 +373,19 @@ How do you list multiple font families in the `font-family` property? #### --distractors-- -Separate them with spaces, and list the preferred font first +Separate them with spaces, and list the preferred font first. --- -Enclose them in parentheses +Enclose them in parentheses. --- -Enclose them in curly braces +Enclose them in curly braces. #### --answer-- -Separate them with commas, and list the preferred font first +Separate them with commas, and list the preferred font first. ### --question-- @@ -417,19 +417,19 @@ Which of the following is a good practice when using fonts in web design? #### --distractors-- -Use only one font family throughout the website +Use only one font family throughout the website. --- -Always use decorative fonts for both headings and body text +Always use decorative fonts for both headings and body text. --- -Avoid using fallback fonts at all costs +Avoid using fallback fonts at all costs. #### --answer-- -Combine no more than two or three font families for balance +Combine no more than two or three font families for balance. ### --question-- @@ -439,17 +439,17 @@ What is the purpose of the `line-height` property in CSS? #### --distractors-- -It sets the width of the text +It sets the width of the text. --- -It specifies the text alignment +It specifies the text alignment. --- -It changes the text color +It changes the text color. #### --answer-- -It controls the amount of space between lines of text +It controls the amount of space between lines of text. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md index 80f213dbb3..016dbb599c 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md @@ -17,29 +17,29 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -If you've declared a custom property for animation speed using `@property`, and a user adjusts their settings for animations in their browser, how would that affect your custom property? Would they be able to see the changes, or does it stick to the value you've set? +Which of the following is NOT a valid descriptor in the `@property` rule? #### --distractors-- -The animations will run slower regardless of user settings +`syntax` --- -The user's settings override your defined speed +`inherits` --- -The animations will completely stop if the user disables them +`initial-value` #### --answer-- -The user's preferences will take priority, and they can adjust how the animations play out +`animation` ### --question-- #### --text-- -In the following code, which value will color have if `--main-color` is not defined? +In the following code, which value will `color` have if `--main-color` is not defined? ```css p { @@ -49,19 +49,19 @@ p { #### --distractors-- -Undefined +`Undefined` --- -No color will be applied +No color will be applied. --- -main-color +`--main-color` #### --answer-- -pink +`pink` ### --question-- @@ -75,7 +75,7 @@ Which of the following is a valid way to declare a custom property in CSS? --- -`custom-variable: #333;` +`@property: #333` --- @@ -93,47 +93,47 @@ What is the main purpose of using custom properties in CSS? #### --distractors-- -To change the DOM structure +To change the DOM structure. --- -To create dynamic selectors +To create dynamic selectors. --- -To improve accessibility +To improve accessibility. #### --answer-- -To define reusable styles across a project +To define reusable styles. ### --question-- #### --text-- -Custom properties defined in the `:root` selector are considered as? +What does the `:root` selector represent? #### --distractors-- -Locally scoped +The first child element of the `body`. --- -Non-inheritable +The parent element of all `header` elements. --- -Element-specific +The first child of the `html` tag. #### --answer-- -Globally scoped +The highest-level element in the DOM tree. ### --question-- #### --text-- -How do you apply a previously defined custom property `--foreground` in CSS? +How do you apply a `--foreground` custom property as the `color` in CSS? #### --distractors-- @@ -155,67 +155,67 @@ How do you apply a previously defined custom property `--foreground` in CSS? #### --text-- -What happens if you use a custom property that is not defined in the current scope? +What is the purpose of the `@property` rule in CSS? #### --distractors-- -It results in an error +To define a media query. --- -It uses the value `inherit` +To control CSS animations and their timing. --- -The property is ignored +To group CSS properties into one rule. #### --answer-- -The browser applies the default value, if provided +To define how custom properties behave. ### --question-- #### --text-- -What is the purpose of the `@property` rule in CSS? +When declaring a custom `@property`, what is the purpose of the `syntax` in its definition? #### --distractors-- -To define a media query +It specifies the default value of the custom property. --- -To control CSS animations +It determines whether the property can be inherited by child elements. --- -To group CSS properties +It defines whether the property is applied to all elements. #### --answer-- -To define how custom properties behave +It enforces a specific data type or value pattern for the custom property. ### --question-- #### --text-- -What should you be cautious of when using custom properties in terms of browser compatibility? +What should you be cautious of when using custom properties? #### --distractors-- -Custom properties are automatically converted to `px` units +Custom properties are automatically converted to `px` units. --- -Custom properties always override inline styles +Custom properties always override inline styles. --- -Custom properties can cause layout shifts +Custom properties cannot be used to set font values. #### --answer-- -Older browsers may not support custom properties +Custom properties may not be supported in older browsers. ### --question-- @@ -225,19 +225,19 @@ What is the purpose of providing a fallback value in the `var()` function for CS #### --distractors-- -To reduce the amount of CSS code +To reduce the amount of CSS code. --- -To improve performance in modern browsers +To improve performance in modern browsers. --- -To optimize rendering time on slow networks +To optimize rendering time on slow networks. #### --answer-- -To ensure a valid value is applied if the custom property is undefined +To ensure a valid value is applied if the custom property is undefined. ### --question-- @@ -247,215 +247,238 @@ When defining a variable `--foreground` inside a media query, what happens when #### --distractors-- -The custom property is preserved and continues to apply +The custom property is preserved and continues to apply. --- -The custom property reverts to its initial value +The custom property reverts to its initial value. --- -The custom property is recalculated based on the viewport +The custom property is recalculated based on the viewport. #### --answer-- -The custom property is no longer available as it is scoped to the media query +The custom property is no longer available as it is scoped to the media query. ### --question-- #### --text-- -Which of the following is not true when defining custom properties? +How would the following declaration behave? + +```css +color: var(--main-color, var(--fallback-color, #000)); +``` #### --distractors-- -Custom properties can be inherited by child elements +It will apply `--main-color` even if it is not defined, defaulting to that value. --- -Custom properties can be defined at any level in the DOM hierarchy +It will apply `--main-color` and `--fallback-color` simultaneously, resulting in a blend of the two colors. --- -Custom properties can be updated dynamically using JavaScript +It will always default to `#000`, regardless of whether `--main-color` or `--fallback-color` is defined. #### --answer-- -Custom properties can override user agent styles by default +It applies `--main-color` if defined; otherwise, checks `--fallback-color;` and if both are undefined, it uses `#000`. ### --question-- #### --text-- -How would the following declaration behave: `color: var(--main-color, var(--fallback-color, #000));`? +What is one benefit of using `@property` in CSS? #### --distractors-- -It will apply `--main-color` even if it is not defined, defaulting to that value +It improves performance by precomputing custom property values. --- -It will apply `--main-color` and `--fallback-color` simultaneously, resulting in a blend of the two colors +It automatically prefixes custom properties for better browser support. --- -It will always default to `#000`, regardless of whether `--main-color` or `--fallback-color` is defined +It restricts the use of custom properties to specific elements. #### --answer-- -It applies `--main-color` if defined; otherwise, checks `--fallback-color;` and if both are undefined, it uses `#000` +It allows for animations of custom properties. ### --question-- #### --text-- -What is the primary use case for the `@property` rule when working with CSS animations? +What does the `inherits` property in a custom `@property` declaration control? #### --distractors-- -To modify keyframe sequences based on variable values +Whether the custom property will have an initial value. --- -To control custom property inheritance during animation +Whether the property can have a shorthand version. --- -To ensure that custom properties maintain compatibility with media queries +Whether the property accepts fallback values. #### --answer-- -To define which custom properties are allowed to animate and set their initial values +Whether the custom property's value is passed to child elements. ### --question-- #### --text-- -Which CSS pseudo-class can be used to detect if a custom property (CSS Variable) is defined or not? +In the declaration of a custom `@property`, what does the `initial-value` specify? #### --distractors-- -`:defined` +The acceptable values the property can accept. --- -`:not(--var)` +The priority of the property in the cascade. --- -`:is-var` +The type of value the property must have. #### --answer-- -None of the above +The fallback value for the property. ### --question-- #### --text-- -In which scenario might defining a custom property in a media query cause unexpected behavior? +Given the following HTML and CSS code, what will be the value of the `color` property for the `.box` element? + +```html +
+
Text
+
+``` + +```css +:root { + --main-color: red; +} + +.container { + --main-color: blue; +} + +.box { + color: var(--main-color, black); +} +``` #### --distractors-- -When the property is defined using a `px` unit +`black` --- -When the property is defined outside of the `:root` +`red` --- -When the property is defined at the bottom of the stylesheet +`green` #### --answer-- -When the media query condition no longer applies, and the custom property is no longer valid +`blue` ### --question-- #### --text-- -What is the advantage of using CSS variables over traditional hard-coded values in a stylesheet? +Which property should a CSS gradient be applied to? #### --distractors-- -CSS variables reduce the size of the HTML file +`color` --- -CSS variables are automatically minified by the browser +`border-radius` --- -CSS variables only work for colors, not other properties +`box-shadow` #### --answer-- -CSS variables allow for dynamic changes via JavaScript, making the code more flexible +`background` ### --question-- #### --text-- -When using custom properties with CSS Grid or Flexbox, what should you be cautious about? +What is the purpose of color stops in CSS gradients? #### --distractors-- -Custom properties override grid or flex properties by default +To define the transparency level of the gradient. --- -Flexbox and Grid ignore custom properties during layout calculations +To specify the direction of the gradient. --- -Custom properties can cause layout shifts when recalculated +To repeat the gradient in a fixed pattern. #### --answer-- -Custom properties should be managed carefully, as they are recalculated with each layout pass, potentially impacting performance +To define the specific points where colors change in the gradient. ### --question-- #### --text-- -When using a custom property (CSS variable) with the `calc()` function, which of the following is a correct way to apply it to set the `width` of an element? +What happens if no angle or direction is specified in a CSS linear gradient? #### --distractors-- -`width: calc(--main-width + 20px);` +The gradient defaults to a diagonal direction. --- -`width: var(--main-width) calc(20px);` +The gradient defaults to moving from bottom to top. --- -`width: var(calc(--main-width) + 20px);` +The gradient defaults to moving from left to right. #### --answer-- -`width: calc(var(--main-width) + 20px);` +The gradient defaults to moving from top to bottom. ### --question-- #### --text-- -Which of the following is the correct way to define a fallback value for a CSS variable when the custom property is not available? +Which CSS gradient function allows you to create a gradient that radiates outward from a central point? #### --distractors-- -`color: var(--primary-color && inherit);` +`linear-gradient()` --- -`color: var(--primary-color || inherit);` +`conic-gradient()` --- -`color: fallback(var(--primary-color), inherit);` +`repeating-linear-gradient()` #### --answer-- -`color: var(--primary-color, inherit);` - +`radial-gradient()` diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md b/curriculum/challenges/chinese/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md index 09f6c2d29e..f48a053528 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md @@ -21,19 +21,19 @@ What type of error occurs when a variable is used before it is defined? #### --distractors-- -Syntax error +Syntax error. --- -Logical error +Logical error. --- -Range error +Range error. #### --answer-- -Reference error +Reference error. ### --question-- @@ -87,19 +87,19 @@ Which of the following errors does `try...catch` handle? #### --distractors-- -Syntax errors +Syntax errors. --- -Infinite loops +Infinite loops. --- -Logical errors +Logical errors. #### --answer-- -Runtime errors +Runtime errors. ### --question-- @@ -135,7 +135,7 @@ Using `const` instead of `let` --- -Calling a function that doesn't exist +Calling a function that doesn't exist. --- @@ -143,7 +143,7 @@ Writing `==` instead of `===` #### --answer-- -Incorrectly calculating a sum +Incorrectly calculating a sum. ### --question-- @@ -153,19 +153,19 @@ What is the purpose of breakpoints in JavaScript debugging? #### --distractors-- -Automatically correct code mistakes +Automatically correct code mistakes. --- -Prevent code from being executed +Prevent code from being executed. --- -Log messages to the console +Log messages to the console. #### --answer-- -Pause execution at a specific point +Pause execution at a specific point. ### --question-- @@ -175,19 +175,19 @@ What happens when the `throw` statement is executed? #### --distractors-- -The code after `throw` continues running +The code after `throw` continues running. --- -It triggers the `finally` block directly +It triggers the `finally` block directly. --- -It pauses code execution until resumed +It pauses code execution until resumed. #### --answer-- -An exception is thrown and the `catch` block (if present) is executed +An exception is thrown and the `catch` block (if present) is executed. ### --question-- @@ -219,19 +219,19 @@ What kind of error is likely to occur if a function is called with an incorrect #### --distractors-- -Reference error +Reference error. --- -Syntax error +Syntax error. --- -Logical error +Logical error. #### --answer-- -Type error +Type error. ### --question-- @@ -249,11 +249,11 @@ Which tool is commonly used to step through code line by line during debugging? --- -`throw` statement +`throw` statement. #### --answer-- -Breakpoints in Developer Tools +Breakpoints in Developer Tools. ### --question-- @@ -263,19 +263,19 @@ What type of error occurs when attempting to access a property of `undefined`? #### --distractors-- -Syntax error +Syntax error. --- -Logical error +Logical error. --- -Range error +Range error. #### --answer-- -Type error +Type error. ### --question-- @@ -285,19 +285,19 @@ What does the `finally` block do in a `try...catch` statement? #### --distractors-- -Only executes if there's an error +Only executes if there's an error. --- -Skips execution if `catch` is triggered +Skips execution if `catch` is triggered. --- -Exits the code block immediately +Exits the code block immediately. #### --answer-- -Always executes, regardless of errors +Always executes, regardless of errors. ### --question-- @@ -307,19 +307,19 @@ Which of the following could be used to avoid runtime errors in JavaScript? #### --distractors-- -Skipping error handling +Skipping error handling. --- -Ignoring exceptions +Ignoring exceptions. --- -Using no `try...catch` statements +Using no `try...catch` statements. #### --answer-- -Using conditionals to check data validity +Using conditionals to check data validity. ### --question-- @@ -329,19 +329,19 @@ What is a common cause of a syntax error? #### --distractors-- -Running out of memory +Running out of memory. --- -Missing `return` statement +Missing `return` statement. --- -Declaring an unused variable +Declaring an unused variable. #### --answer-- -Missing a closing bracket +Missing a closing bracket. ### --question-- @@ -373,19 +373,19 @@ What is a "watcher" in the context of debugging? #### --distractors-- -A tool for pausing code execution +A tool for pausing code execution. --- -A built-in function for logging errors +A built-in function for logging errors. --- -A JavaScript method for handling exceptions +A JavaScript method for handling exceptions. #### --answer-- -A tool for monitoring the value of variables +A tool for monitoring the value of variables. ### --question-- @@ -395,19 +395,19 @@ When should you use `console.error()` instead of `console.log()`? #### --distractors-- -To display table data +To display table data. --- -To log messages only during debugging +To log messages only during debugging. --- -To log information about the browser +To log information about the browser. #### --answer-- -To log error messages +To log error messages. ### --question-- @@ -417,19 +417,19 @@ What does the `Error()` constructor do in JavaScript? #### --distractors-- -Logs error messages to the console +Logs error messages to the console. --- -Runs code in a sandbox +Runs code in a sandbox. --- -Terminates the program +Terminates the program. #### --answer-- -Creates a new error object that can be thrown +Creates a new error object that can be thrown. ### --question-- @@ -439,17 +439,17 @@ What will happen if a `catch` block is not provided with a `try` block? #### --distractors-- -The code will stop executing +The code will stop executing. --- -The error will be logged but ignored +The error will be logged but ignored. --- -The program will continue with default values +The program will continue with default values. #### --answer-- -An uncaught exception error will occur +An uncaught exception error will occur. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md b/curriculum/challenges/chinese/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md index 17d106d010..98c5ee21fb 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md @@ -21,19 +21,19 @@ What are some reasons why whitespace is important for good design? #### --distractors-- -Improves readability by placing many elements on the page +Improves readability by placing many elements on the page. --- -Focuses the viewer's attention by having elements placed close together +Focuses the viewer's attention by having elements placed close together. --- -Creates breathing space in the design to make users scroll for more information +Creates breathing space in the design to make users scroll for more information. #### --answer-- -Creates visual hierarchy, improves readability, focuses the viewer's attention on different elements +Creates visual hierarchy, improves readability, focuses the viewer's attention on different elements. ### --question-- @@ -43,7 +43,7 @@ What is the design principle of carefully choosing the size of elements in relat #### --distractors-- -Visual hierarchy +Visual hierarchy. --- @@ -65,19 +65,19 @@ Which of the following sites would most likely benefit from using breadcrumbs? #### --distractors-- -A single-page portfolio site +A single-page portfolio site. --- -An infinite scroll gallery site +An infinite scroll gallery site. --- -A simple blog with only a few posts +A simple blog with only a few posts. #### --answer-- -A complex e-commerce site with multiple categories and subcategories +A complex e-commerce site with multiple categories and subcategories. ### --question-- @@ -87,19 +87,19 @@ Which design pattern allows users to access and interact with elements and conte #### --distractors-- -Captcha validation +Captcha validation. --- -Lazy loading +Lazy loading. --- -Progressive enhancement +Progressive enhancement. #### --answer-- -Deferred/lazy registration +Deferred/lazy registration. ### --question-- @@ -109,19 +109,19 @@ What are three types of text alignment? #### --distractors-- -Top, center, horizontal +Top, center, horizontal. --- -Left, right, middle +Left, right, middle. --- -Vertical, horizontal, equal +Vertical, horizontal, equal. #### --answer-- -Left, right, center +Left, right, center. ### --question-- @@ -131,19 +131,19 @@ Which interaction design pattern reduces the complexity of interaction by hiding #### --distractors-- -Extended discoverability +Extended discoverability. --- -Delayed implementation +Delayed implementation. --- -Gradual engagement +Gradual engagement. #### --answer-- -Progressive disclosure +Progressive disclosure. ### --question-- @@ -153,19 +153,19 @@ What is contrast in design? #### --distractors-- -Elements that are visually similar +Elements that are visually similar. --- -The difference in saturation between two colors +The difference in saturation between two colors. --- -Matching elements on a page +Matching elements on a page. #### --answer-- -Elements that are strikingly different from each other visually +Elements that are strikingly different from each other visually. ### --question-- @@ -175,15 +175,15 @@ Which of the following is an example of visual hierarchy in design? #### --distractors-- -Headline and title text are a similar color to the background and other elements to blend in +Headline and title text are a similar color to the background and other elements to blend in. --- -Text and images are all the same size on the page +Text and images are all the same size on the page. --- -The logo banner is smaller than all the minor images on the main landing page +The logo banner is smaller than all the minor images on the main landing page. #### --answer-- @@ -197,19 +197,19 @@ What is a common goal of conducting exit interviews in user research? #### --distractors-- -To increase the number of new users +To increase the number of new users. --- -To test new features with existing users +To test new features with existing users. --- -To gather data for A/B testing +To gather data for A/B testing. #### --answer-- -To understand the factors causing user churn +To understand the factors causing user churn. ### --question-- @@ -219,19 +219,19 @@ What is user centered design? #### --distractors-- -A design process where once the design is completed, designers test the product by getting user feedback +A design process where once the design is completed, designers test the product by getting user feedback. --- -A design process where designers consider user accessibility requirements +A design process where designers consider user accessibility requirements. --- -A design process focused on client requirements at every stage of the process +A design process focused on client requirements at every stage of the process. #### --answer-- -An iterative design process where designers design a product considering user requirements at every stage of the process +An iterative design process where designers design a product considering user requirements at every stage of the process. ### --question-- @@ -263,19 +263,19 @@ What are some colors to consider when designing dark mode? #### --distractors-- -Pure white +Pure white. --- -Highly saturated colors +Highly saturated colors. --- -Bright highly contrasting colors +Bright highly contrasting colors. #### --answer-- -Dark colors and muted light colors for contrast in dim lighting conditions +Dark colors and muted light colors for contrast in dim lighting conditions. ### --question-- @@ -285,19 +285,19 @@ How can user research impact user requirements? #### --distractors-- -It has no impact on user requirements +It has no impact on user requirements. --- -It only affects non-functional requirements +It only affects non-functional requirements. --- -It only affects functional requirements +It only affects functional requirements. #### --answer-- -It can help define and refine user requirements based on user feedback +It can help define and refine user requirements based on user feedback. ### --question-- @@ -307,19 +307,19 @@ Why is it important for a design brief to be reviewed and approved by all stakeh #### --distractors-- -To ensure everyone is aware of the project's social media strategy +To ensure everyone is aware of the project's social media strategy. --- -To finalize the color palette and design elements +To finalize the color palette and design elements. --- -To determine the project's marketing budget +To determine the project's marketing budget. #### --answer-- -To confirm that all stakeholders agree on the project's objectives and requirements +To confirm that all stakeholders agree on the project's objectives and requirements. ### --question-- @@ -329,19 +329,19 @@ What is considered bad practice when implementing infinite scroll? #### --distractors-- -Allowing users to jump to a page or section through the navbar or a pagination drop down menu +Allowing users to jump to a page or section through the navbar or a pagination drop down menu. --- -Adding a load more indicator or symbol after a certain point in the page along with the infinite scroll +Adding a load more indicator or symbol after a certain point in the page along with the infinite scroll. --- -Integrating a footer reveal at the bottom +Integrating a footer reveal at the bottom. #### --answer-- -Not adding alternative methods of navigating the page +Not adding alternative methods of navigating the page. ### --question-- @@ -351,19 +351,19 @@ Which of the following is a best practice when designing progress indicators for #### --distractors-- -Requiring users to restart the form if they navigate away from the page +Requiring users to restart the form if they navigate away from the page. --- -Keeping the progress indicator small and discreet +Keeping the progress indicator small and discreet. --- -Making sure the progress is just displayed visually without any text +Making sure the progress is just displayed visually without any text. #### --answer-- -Breaking the progress indicator into labeled sections +Breaking the progress indicator into labeled sections. ### --question-- @@ -373,19 +373,19 @@ What is one way to make shopping cart design intuitive and user friendly? #### --distractors-- -Use a new shopping cart icon that no other website has used before +Use a new shopping cart icon that no other website has used before. --- -Do not allow users to add or remove items from the cart +Do not allow users to add or remove items from the cart. --- -Automatically add products to the cart without user interaction +Automatically add products to the cart without user interaction. #### --answer-- -Include thumbnail images of products in the cart +Include thumbnail images of products in the cart. ### --question-- @@ -395,19 +395,19 @@ Dark mode doesn't mean pure black. What is a good technique to create an effecti #### --distractors-- -Make images and elements darker and reduce contrast between different elements to have them blend in +Make images and elements darker and reduce contrast between different elements to have them blend in. --- -Invert the color scheme +Invert the color scheme. --- -Use many saturated colors +Use many saturated colors. #### --answer-- -Use dark gray or a dark shade of the brand color instead of pure black +Use dark gray or a dark shade of the brand color instead of pure black. ### --question-- @@ -417,19 +417,19 @@ What is one good design practice when creating modals? #### --distractors-- -Put a lot of important information inside a modal +Put a lot of important information inside a modal. --- -Have multiple modals on the same screen +Have multiple modals on the same screen. --- -Ensure the modal draws the user's attention away from it +Ensure the modal draws the user's attention away from it. #### --answer-- -Make the modal dismiss icon visible +Make the modal dismiss icon visible. ### --question-- @@ -439,17 +439,17 @@ What is a design brief? #### --distractors-- -A document outlining the programming and design standards of the project +A document outlining the programming and design standards of the project. --- -A document explaining how to replicate a design +A document explaining how to replicate a design. --- -A document with detailed information of icons, colors, and assets the designer should use +A document with detailed information of icons, colors, and assets the designer should use. #### --answer-- -A document stating the goals and project scope, budget and design requirements +A document stating the goals and project scope, budget and design requirements. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md b/curriculum/challenges/chinese/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md index 50a47ba445..2fbd8026d7 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md @@ -186,7 +186,7 @@ Which of the following statements is false? `window` is an alias for `navigator.window`: ```js -window === navigator.window // returns true +window === navigator.window // returns true. ``` --- @@ -198,7 +198,7 @@ You can use the user screen properties (like position and size) using the `Windo `navigation` is an alias for `window.navigation`: ```js -navigation === window.navigation // returns true +navigation === window.navigation // returns true. ``` #### --answer-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/chinese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md index a722b78020..e31ff7b3a5 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md @@ -43,19 +43,19 @@ What happens if the `checkValidity()` method finds an invalid `input`? #### --distractors-- -The form is automatically submitted +The form is automatically submitted. --- -Nothing happens +Nothing happens. --- -The `input` value is cleared +The `input` value is cleared. #### --answer-- -The browser displays a validation message +The browser displays a validation message. ### --question-- @@ -87,19 +87,19 @@ What is the default validation behavior for required fields when the form is sub #### --distractors-- -The form is submitted even if required fields are empty +The form is submitted even if required fields are empty. --- -The form submits but gives a warning +The form submits but gives a warning. --- -The form resets the `input` values +The form resets the `input` values. #### --answer-- -The browser stops the form submission if required fields are empty +The browser stops the form submission if required fields are empty. ### --question-- @@ -109,11 +109,11 @@ Which actions does not cause an HTML form to be checked for errors? #### --distractors-- -Changing the `input` value +Changing the `input` value. --- -Submitting the form +Submitting the form. --- @@ -121,7 +121,7 @@ Calling `reportValidity()` #### --answer-- -Clicking a reset button +Clicking a reset button. ### --question-- @@ -153,15 +153,15 @@ When does the `checkValidity()` method stop form submission? #### --distractors-- -When the form has no submit button +When the form has no submit button. --- -When the form `action` is empty +When the form `action` is empty. --- -When the form method is POST +When the form method is POST. #### --answer-- @@ -175,19 +175,19 @@ What happens if `checkValidity()` is called, but a field fails validation? #### --distractors-- -The form submits without error +The form submits without error. --- -The `input` values are cleared +The `input` values are cleared. --- -The form closes immediately +The form closes immediately. #### --answer-- -The invalid field is highlighted and a message appears +The invalid field is highlighted and a message appears. ### --question-- @@ -197,19 +197,19 @@ Which action will make `checkValidity()` run? #### --distractors-- -Resetting the form +Resetting the form. --- -Changing an `input` value +Changing an `input` value. --- -Clicking an anchor tag +Clicking an anchor tag. #### --answer-- -Submitting the form manually +Submitting the form manually. ### --question-- @@ -219,19 +219,19 @@ What is the purpose of calling `checkValidity()` before submitting a form? #### --distractors-- -To automatically submit the form +To automatically submit the form. --- -To reload the page +To reload the page. --- -To clear all `input` fields +To clear all `input` fields. #### --answer-- -To check if all `input` elements meet their specified constraints +To check if all `input` elements meet their specified constraints. ### --question-- @@ -241,19 +241,19 @@ What is the main purpose of `e.preventDefault()`? #### --distractors-- -To reload the form +To reload the form. --- -To clear form data +To clear form data. --- -To reset the form values +To reset the form values. #### --answer-- -To stop the default action of an event +To stop the default action of an event. ### --question-- @@ -263,19 +263,19 @@ When used on a form's submit event, what does `e.preventDefault()` do? #### --distractors-- -It submits the form +It submits the form. --- -It clears all form fields +It clears all form fields. --- -It disables the form temporarily +It disables the form temporarily. #### --answer-- -It prevents the form from being submitted +It prevents the form from being submitted. ### --question-- @@ -285,19 +285,19 @@ In which scenario is `e.preventDefault()` most useful? #### --distractors-- -When handling a button click that submits a form +When handling a button click that submits a form. --- -When closing a modal dialog +When closing a modal dialog. --- -When opening a new page +When opening a new page. #### --answer-- -When submitting a form via AJAX and preventing a page reload +When submitting a form via AJAX and preventing a page reload. ### --question-- @@ -307,19 +307,19 @@ What happens if you forget to call `e.preventDefault()` on a form submit event? #### --distractors-- -The form is submitted via AJAX +The form is submitted via AJAX. --- -The form does not submit +The form does not submit. --- -The form data is lost +The form data is lost. #### --answer-- -The form submits and refreshes the page +The form submits and refreshes the page. ### --question-- @@ -329,15 +329,15 @@ Which default behavior can be prevented using `e.preventDefault()`? #### --distractors-- -Editing a form +Editing a form. --- -Rendering the form +Rendering the form. --- -Reloading the form +Reloading the form. #### --answer-- @@ -351,19 +351,19 @@ What triggers the form's submit event? #### --distractors-- -When an input field changes +When an input field changes. --- -When the form is reset +When the form is reset. --- -When the form's action is cleared +When the form's action is cleared. #### --answer-- -When a form's submit button is clicked or Enter is pressed +When a form's submit button is clicked or Enter is pressed. ### --question-- @@ -373,19 +373,19 @@ Where do you usually handle the submit event in JavaScript? #### --distractors-- -On a text input element +On a text input element. --- -On any field in the form +On any field in the form. --- -On a button element outside the form +On a button element outside the form. #### --answer-- -On the form element itself +On the form element itself. ### --question-- @@ -395,19 +395,19 @@ What does the submit event do by default? #### --distractors-- -It validates the form but doesn't submit it +It validates the form but doesn't submit it. --- -It clears the form fields +It clears the form fields. --- -It cancels form submission +It cancels form submission. #### --answer-- -It sends form data to the server specified in the form's action +It sends form data to the server specified in the form's action. ### --question-- @@ -443,7 +443,7 @@ Call `submit.preventDefault()` --- -Stop the form from being displayed +Stop the form from being displayed. --- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md b/curriculum/challenges/chinese/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md index d15e929765..cca45d2d7b 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md @@ -29,7 +29,7 @@ Administrators --- -Subscribers/Premium Users +Subscribers/Premium Users. #### --answer-- @@ -43,11 +43,11 @@ Why is using version control software a best practice for high performing softwa #### --distractors-- -A complete long-term change history of every file +A complete long-term change history of every file. --- -Branching and merging +Branching and merging. --- @@ -55,7 +55,7 @@ Traceability #### --answer-- -All of the options +All of the options. ### --question-- @@ -143,7 +143,7 @@ Strangers #### --answer-- -All of the options +All of the options. ### --question-- @@ -205,7 +205,7 @@ What is the correct way to contribute to other people's repositories? --- -None of the options +None of the options. #### --answer-- @@ -289,15 +289,15 @@ GitHub.com --- -GitHub Codespaces +GitHub Codespaces. --- -GitHub Mobile +GitHub Mobile. #### --answer-- -All of the options +All of the options. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md b/curriculum/challenges/chinese/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md index 97fddd99d5..1bbaa8b1e7 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md @@ -98,19 +98,19 @@ What are the six main categories of ARIA roles? #### --distractors-- -Document Structure, Landmark, Window, Explicit, Fidget, and Footer +Document Structure, Landmark, Window, Explicit, Fidget, and Footer. --- -Landmark, House, Live Region, Application, Window, and Extension +Landmark, House, Live Region, Application, Window, and Extension. --- -Window, Alert Dialog, Article, Cell, Banner, and Button +Window, Alert Dialog, Article, Cell, Banner, and Button. #### --answer-- -Document Structure, Landmark, Window, Abstract, Widget, and Live Region +Document Structure, Landmark, Window, Abstract, Widget, and Live Region. ### --question-- @@ -150,19 +150,19 @@ What does WAI-ARIA stand for? #### --distractors-- -Website Accessible Initiative - Accessible Rust Internet Applications +Website Accessible Initiative - Accessible Rust Internet Applications. --- -Web Anchor Initiative - Anchor Rich Internet Applications +Web Anchor Initiative - Anchor Rich Internet Applications. --- -Web Accessibility Initial - Accessible Ready Internet Applications +Web Accessibility Initial - Accessible Ready Internet Applications. #### --answer-- -Web Accessibility Initiative - Accessible Rich Internet Applications +Web Accessibility Initiative - Accessible Rich Internet Applications. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md b/curriculum/challenges/chinese/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md index dfb273d8d4..d8ecfe228b 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md @@ -83,7 +83,7 @@ It is used to define a table cell. #### --text-- -What's the function of the `colspan` attribute? +What is the function of the `colspan` attribute? #### --distractors-- @@ -99,7 +99,7 @@ It's used to define the number of columns. #### --answer-- -It merges cells across multiple columns. +It defines the number of columns a table cell should span. ### --question-- @@ -109,19 +109,19 @@ What is the role of the `placeholder` attribute? #### --distractors-- -used to send data to the server when the form is submitted +It's used to send data to the server when the form is submitted. --- -used to associate a `label` element with an `input` element +It's used to associate a `label` element with an `input` element. --- -used to specify that an input field is read-only to the user +It's used to specify that an input field is read-only to the user. #### --answer-- -used to show a hint to the user +It's used to provide a hint for an input field. ### --question-- @@ -131,19 +131,19 @@ What is the purpose of the `thead` element? #### --distractors-- -it is used to group the rows in an HTML table +It's used to group the body content in an HTML table. --- -it is used to group the columns in an HTML table +It's used to group the description of an HTML table. --- -it is used to group the footer content in an HTML table +It's used to group the footer content in an HTML table. #### --answer-- -it is used to group the header content in an HTML table +It's used to group the header content in an HTML table. ### --question-- @@ -209,7 +209,7 @@ A validator is a tool that checks the syntax of HTML code to ensure it is valid. #### --text-- -Which element is used to define a new cell in a table? +Which element is used to define a cell in a table? #### --distractors-- @@ -247,29 +247,77 @@ ChatGPT #### --answer-- -DOM inspector +DOM inspector. ### --question-- #### --text-- -Which of the following attributes is used to specify the maximum number of characters allowed in an input field? +Which of the following is the correct way to group related input fields? #### --distractors-- -`getMaxLength` +```html +
+
+
+ + + + + + + + +``` --- -`max` +```html +
+ +

User information

+ + + + + + + + +``` --- -`maximumLen` +```html +
+
+ User information + + + + + + +
+ +``` #### --answer-- -`maxlength` +```html +
+
+ User information + + + + + + +
+ +``` ### --question-- @@ -346,25 +394,25 @@ Which of the following is the correct way to disable an input? #### --distractors-- ```html - + ``` --- ```html - + ``` --- ```html - + ``` #### --answer-- ```html - + ``` ### --question-- @@ -376,25 +424,25 @@ Which of the following is a valid value for the `type` attribute? #### --distractors-- ```html - + ``` --- ```html - + ``` --- ```html - + ``` #### --answer-- ```html - + ``` ### --question-- @@ -431,23 +479,23 @@ Which of the following is the correct use of the `size` attribute? #### --text-- -Which of the following attributes is used to specify the minimum number of characters required in an input field? +Which of the following attributes are used to specify the minimum and maximum number of characters required in an input field? #### --distractors-- -`minlen` +`minlen` and `maxlen` --- -`Mlength` +`min` and `max` --- -`minimumLen` +`minimumLen` and `maximumLen` #### --answer-- -`minlength` +`minlength` and `maxlength` ### --question-- @@ -483,7 +531,7 @@ Which of the following button examples does **NOT** use a correct value for the #### --text-- -Which attribute is used to specify the value for a button? +Which of the following attributes is used to specify the value for a button? #### --distractors-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md index 2a996ef3a0..060bea2423 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md @@ -50,28 +50,28 @@ Which of the following is the correct way access the string `"Jessica"` from the ```js const developers = ["Jessica", "Naomi", "Tom"]; -developers[1] +developers[1] ``` --- ```js const developers = ["Jessica", "Naomi", "Tom"]; -developers[2] +developers[2] ``` --- ```js const developers = ["Jessica", "Naomi", "Tom"]; -developers[-1] +developers[-1] ``` #### --answer-- ```js const developers = ["Jessica", "Naomi", "Tom"]; -developers[0] +developers[0] ``` ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md index 7d821914e4..c7d0c7c52e 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md @@ -21,19 +21,19 @@ What is the purpose of the `Audio()` constructor in JavaScript? #### --distractors-- -Create a new audio file +Create a new audio file. --- -Play an existing audio file +Play an existing audio file. --- -Modify audio files +Modify audio files. #### --answer-- -Create and manipulate a new `audio` element +Create and manipulate a new `audio` element. ### --question-- @@ -65,19 +65,19 @@ What is the difference between `pause()` and `stop()` methods for media elements #### --distractors-- -There is no difference, they are synonyms +There is no difference, they are synonyms. --- -`pause()` stops playback permanently, while `stop()` allows resuming +`pause()` stops playback permanently, while `stop()` allows resuming. --- -`pause()` allows resuming playback, while `stop()` resets to the beginning +`pause()` allows resuming playback, while `stop()` resets to the beginning. #### --answer-- -`stop()` is not a valid method for media elements +`stop()` is not a valid method for media elements. ### --question-- @@ -109,19 +109,19 @@ What is the purpose of the `source` element within an `audio` or `video` element #### --distractors-- -Specify the volume of the media +Specify the volume of the media. --- -Add subtitles to the media +Add subtitles to the media. --- -Link to an external audio processor +Link to an external audio processor. #### --answer-- -Specify multiple media sources for different formats +Specify multiple media sources for different formats. ### --question-- @@ -153,19 +153,19 @@ What does a codec do in the context of audio and video? #### --distractors-- -Increases the volume of the media +Increases the volume of the media. --- -Changes the file format of the media +Changes the file format of the media. --- -Encrypts the media for secure transmission +Encrypts the media for secure transmission. #### --answer-- -Compresses and decompresses digital media +Compresses and decompresses digital media. ### --question-- @@ -175,19 +175,19 @@ Which API provides a way to create, process, and analyze audio in web applicatio #### --distractors-- -Audio Processing API +Audio Processing API. --- -Sound Manipulation API +Sound Manipulation API. --- -Media Stream API +Media Stream API. #### --answer-- -Web Audio API +Web Audio API. ### --question-- @@ -197,19 +197,19 @@ What is the purpose of the `getUserMedia()` method? #### --distractors-- -Authenticate users with a media service +Authenticate users with a media service. --- -Retrieve user preferences for media playback +Retrieve user preferences for media playback. --- -Download media files to the user's device +Download media files to the user's device. #### --answer-- -Access the user's camera and/or microphone +Access the user's camera and/or microphone. ### --question-- @@ -246,19 +246,19 @@ audio.loop = true; #### --distractors-- -Plays the audio file once +Plays the audio file once. --- -Increases the volume of the audio +Increases the volume of the audio. --- -Pauses the audio after one loop +Pauses the audio after one loop. #### --answer-- -Sets the audio to repeat indefinitely +Sets the audio to repeat indefinitely. ### --question-- @@ -290,19 +290,19 @@ What is the purpose of the `MediaRecorder` API? #### --distractors-- -To play audio and video files +To play audio and video files. --- -To edit existing media files +To edit existing media files. --- -To create visual representations of audio +To create visual representations of audio. #### --answer-- -To record audio and video from a media stream +To record audio and video from a media stream. ### --question-- @@ -334,19 +334,19 @@ What does the `preload` attribute do when used with audio or video elements? #### --distractors-- -Automatically starts playing the media +Automatically starts playing the media. --- -Loads the media file before loading the rest of the page +Loads the media file before loading the rest of the page. --- -Applies a filter to the media +Applies a filter to the media. #### --answer-- -Specifies how much of the media file should be loaded when the page loads +Specifies how much of the media file should be loaded when the page loads. ### --question-- @@ -378,19 +378,19 @@ What is the purpose of the Media Source Extensions API? #### --distractors-- -Add visual effects to video +Add visual effects to video. --- -Convert between different media formats +Convert between different media formats. --- -Enable JavaScript to synchronize multiple audio tracks +Enable JavaScript to synchronize multiple audio tracks. #### --answer-- -Enable JavaScript to generate media streams for playback +Enable JavaScript to generate media streams for playback. ### --question-- @@ -427,19 +427,19 @@ navigator.mediaDevices.enumerateDevices() #### --distractors-- -Plays all available media devices +Plays all available media devices. --- -Stops all active media streams +Stops all active media streams. --- -Counts the number of connected displays +Counts the number of connected displays. #### --answer-- -Lists all available media input and output devices +Lists all available media input and output devices. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md index e06087a7bd..f63aabe8b3 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md @@ -87,7 +87,7 @@ What does `this` represent inside a class constructor? #### --distractors-- -The global object. +The global class object. --- @@ -99,7 +99,7 @@ An undefined reference. #### --answer-- -The instance of the class being created. +An instance of the class. ### --question-- @@ -109,7 +109,7 @@ Which of the following describes how `this` behaves in an arrow function inside #### --distractors-- -It refers to the method calling the arrow function. +It inherits the value of `this` from the nearest function in a different scope. --- @@ -117,11 +117,11 @@ It refers to a newly created instance of the class. --- -It refers to `undefined` by default. +It inherits the value of `this` from the global object in strict mode. #### --answer-- -It inherits the value of `this` from the enclosing scope where they are defined. +It inherits the value of `this` from the enclosing scope where it is defined. ### --question-- @@ -131,7 +131,7 @@ What is the primary purpose of the `extends` keyword? #### --distractors-- -To define static methods in a class. +To define static methods in a parent class constructor. --- @@ -139,11 +139,11 @@ To create a method in a class. --- -To initialize properties in the parent class. +To initialize default properties in the parent class. #### --answer-- -To create a subclass that inherits methods from a parent class. +To create a subclass that inherits from a parent class. ### --question-- @@ -222,15 +222,15 @@ What is the function of the `super` keyword in a subclass? #### --distractors-- -To define a new instance of a class. +To define a new instance of the parent class. --- -To delete properties from a class. +To delete methods and properties from the parent class. --- -To access only the static methods of a class. +To access only the static methods of the parent class. #### --answer-- @@ -490,7 +490,7 @@ An undefined variable. #### --answer-- -The specific instance of `Animal` being created. +The instance of `Animal`. ### --question-- @@ -500,7 +500,7 @@ What is the primary use of static properties? #### --distractors-- -To set default values for each instance. +To define default propeties for each class instance. --- @@ -512,4 +512,4 @@ To define instance-specific data. #### --answer-- -To store class-wide data that remains constant across instances. +To store class-wide data shared across instances. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md index 47999af6dc..95252e677e 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md @@ -287,7 +287,7 @@ Nothing gets printed to the console. ```js if (2 == "2") { - // Statement + // Statement. } ``` diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md index 5736bbd1e8..0ae9ac774e 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md @@ -53,19 +53,19 @@ parentList.addEventListener('click', function(event) { #### --distractors-- -DOM Manipulation +DOM Manipulation. --- -Event Bubbling +Event Bubbling. --- -Callback Function +Callback Function. #### --answer-- -Event Delegation +Event Delegation. ### --question-- @@ -75,19 +75,19 @@ What is the term for a function that runs in response to an event? #### --distractors-- -Middleware function +Middleware function. --- -Promise function +Promise function. --- -Asynchronous function +Asynchronous function. #### --answer-- -Callback function +Callback function. ### --question-- @@ -97,19 +97,19 @@ What does the `event.target` property return? #### --distractors-- -The parent of the event object +The parent of the event object. --- -The HTML document +The HTML document. --- -The window object +The window object. #### --answer-- -The element that triggered the event +The element that triggered the event. ### --question-- @@ -163,19 +163,19 @@ What is the main advantage of using `addEventListener()` over inline event handl #### --distractors-- -It supports synchronous handling +It supports synchronous handling. --- -It reduces CSS file size +It reduces CSS file size. --- -It can't be removed once added +It can't be removed once added. #### --answer-- -It allows multiple event listeners to be attached to a single element +It allows multiple event listeners to be attached to a single element. ### --question-- @@ -185,19 +185,19 @@ What is the purpose of the `event.preventDefault()` method? #### --distractors-- -To stop the event from propagating to other listeners +To stop the event from propagating to other listeners. --- -To set a default value to the event +To set a default value to the event. --- -To remove the event handler +To remove the event handler. #### --answer-- -To prevent the default action associated with an event from being executed +To prevent the default action associated with an event from being executed. ### --question-- @@ -207,19 +207,19 @@ What does the term "event propagation" refer to? #### --distractors-- -Events can only be handled by inline handlers +Events can only be handled by inline handlers. --- -Events are triggered by CSS changes +Events are triggered by CSS changes. --- -Events are copied to a new window +Events are copied to a new window. #### --answer-- -Events travel through the DOM in phases +Events travel through the DOM in phases. ### --question-- @@ -273,19 +273,19 @@ Which of the following is a common use case for event delegation? #### --distractors-- -Preventing default browser behaviors +Preventing default browser behaviors. --- -Canceling event propagation +Canceling event propagation. --- -Creating custom events +Creating custom events. #### --answer-- -Handling click events on dynamically created elements +Handling click events on dynamically created elements. ### --question-- @@ -295,19 +295,19 @@ What is meant by the "default action" of an event in JavaScript? #### --distractors-- -The event's propagation is stopped automatically +The event's propagation is stopped automatically. --- -An external stylesheet is applied +An external stylesheet is applied. --- -The event listener is called twice +The event listener is called twice. #### --answer-- -The browser's predefined behavior that occurs after an event is triggered +The browser's predefined behavior that occurs after an event is triggered. ### --question-- @@ -317,19 +317,19 @@ Why is the once option in `addEventListener()` useful? #### --distractors-- -It makes the event listener asynchronous +It makes the event listener asynchronous. --- -It allows capturing to be the default phase +It allows capturing to be the default phase. --- -It stops the event from bubbling up +It stops the event from bubbling up. #### --answer-- -It ensures that the event listener is removed after being triggered once +It ensures that the event listener is removed after being triggered once. ### --question-- @@ -361,19 +361,19 @@ How does the concept of event delegation improve performance? #### --distractors-- -It creates separate listeners for each child +It creates separate listeners for each child. --- -It prevents child elements from triggering events +It prevents child elements from triggering events. --- -It limits event propagation to the capturing phase +It limits event propagation to the capturing phase. #### --answer-- -It reduces the number of event listeners by using a single listener on a parent element +It reduces the number of event listeners by using a single listener on a parent element. ### --question-- @@ -383,19 +383,19 @@ Why is it important to remove event listeners when they are no longer needed? #### --distractors-- -It makes the page load slower +It makes the page load slower. --- -It prevents CSS styles from being applied +It prevents CSS styles from being applied. --- -It breaks JavaScript execution +It breaks JavaScript execution. #### --answer-- -It improves performance and reduces memory leaks +It improves performance and reduces memory leaks. ### --question-- @@ -405,19 +405,19 @@ What does the `DOMContentLoaded` event indicate? #### --distractors-- -The page fully loaded with all images +The page fully loaded with all images. --- -Only external styles are loaded +Only external styles are loaded. --- -The page is still loading +The page is still loading. #### --answer-- -The HTML document has been completely loaded and parsed +The HTML document has been completely loaded and parsed. ### --question-- @@ -427,19 +427,19 @@ What is the role of `stopPropagation()` in event handling? #### --distractors-- -To execute the default behavior of the event +To execute the default behavior of the event. --- -To start event capturing +To start event capturing. --- -To bind the event handler to multiple events +To bind the event handler to multiple events. #### --answer-- -To stop the event from propagating to parent elements +To stop the event from propagating to parent elements. ### --question-- @@ -461,5 +461,5 @@ How can you remove all event listeners attached to an element? #### --answer-- -There is no direct way to remove all event listeners +There is no direct way to remove all event listeners. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md index 7c59a461c7..1bbea0f79f 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-functional-programming # --description-- -To pass the quiz, you must correctly answer at least 18 of the 20 questions below. +To pass the quiz, you must correctly answer at least 9 of the 10 questions below. # --quizzes-- @@ -21,41 +21,19 @@ What is a pure function? #### --distractors-- -A function that modifies global variables +A function that modifies global variables and returns either `undefined` or `null`. --- -A function that prints to the console +A function that logs an output to the console. --- -A function that changes its behavior based on external factors +A function that changes its behavior based on external factors and returns `null`. #### --answer-- -A function that always returns the same output for the same input and produces no side effects - -### --question-- - -#### --text-- - -Which of the following is a characteristic of a pure function? - -#### --distractors-- - -It has side effects - ---- - -It relies on global state - ---- - -It modifies its input parameters - -#### --answer-- - -Its output depends solely on its input arguments +A function that always returns the same output for the same input and produces no side effects. ### --question-- @@ -65,41 +43,19 @@ What is a side effect in functional programming? #### --distractors-- -An unexpected error in the code +An unexpected `TypeError` in your code. --- -A function that takes too long to execute +A function that takes too long to execute and crashes the program. --- -A recursive function call +A recursive function call that produces an infinite loop and crashes the program. #### --answer-- -A change in program state or interaction with the outside world - -### --question-- - -#### --text-- - -Which of the following is an example of a side effect? - -#### --distractors-- - -Returning a value from a function - ---- - -Creating a new object within a function - ---- - -Using a local variable - -#### --answer-- - -Writing to a file +A change to the state of the program that are observable outside the function. ### --question-- @@ -109,71 +65,27 @@ What is currying in functional programming? #### --distractors-- -A technique for cooking functions +A technique for designing tests to help you ensure your code is 100% error free. --- -A method for optimizing recursive functions +A more optimized way to write recursive functions so they run twice as fast as other functions. --- -A way to combine multiple functions into one +The process of building, designing and testing your code to ensure that it meets the standards laid out by ECMAScript. #### --answer-- -The process of transforming a function with multiple arguments into a sequence of functions, each with a single argument +The process of transforming a function with multiple arguments into a sequence of functions, each with a single argument. ### --question-- #### --text-- -In the context of pure functions, what does "referential transparency" mean? - -#### --distractors-- - -The function's code is visible to other parts of the program - ---- - -The function references external variables transparently - ---- - -The function's name clearly indicates its purpose - -#### --answer-- +What will be the output for the following pure function? -The function can be replaced with its corresponding value without changing the program's behavior - -### --question-- - -#### --text-- - -Which of the following is NOT a benefit of using pure functions? - -#### --distractors-- - -Easier to test - ---- - -More predictable behavior - ---- - -Easier to reason about - -#### --answer-- - -Improved performance in all cases - -### --question-- - -#### --text-- - -What is the output of this pure function? - -```javascript +```js const add = (a, b) => a + b; console.log(add(2, 5)); ``` @@ -198,291 +110,182 @@ console.log(add(2, 5)); #### --text-- -Which statement about currying is true? +Which of the following is an example of currying? #### --distractors-- -Currying always improves performance - ---- - -Curried functions are always pure functions - ---- - -Currying is only possible in functional programming languages - -#### --answer-- - -Currying transforms a function with multiple arguments into a sequence of functions - -### --question-- - -#### --text-- - -What is a potential side effect of the following function? - -```javascript -const greet = (name) => { - console.log(`Hello, ${name}!`); -}; +```js +const curriedAverage = (a, b, c) => a + b + c / 3 ``` -#### --distractors-- - -It modifies a global variable - ---- - -It changes the input parameter - --- -It returns a value - -#### --answer-- - -It interacts with the console (I/O operation) - -### --question-- - -#### --text-- - -In functional programming, what is function composition? - -#### --distractors-- - -Writing functions with multiple arguments - ---- - -Declaring functions inside other functions - ---- - -Using arrow function syntax - -#### --answer-- - -Combining two or more functions to create a new function - -### --question-- - -#### --text-- - -Which of the following is an example of a pure function? - -#### --distractors-- - -```javascript -const random = () => Math.random(); +```js +const curriedAverage = (a, b, c) => a + b + c ``` --- -```javascript -const log = (x) => console.log(x); -``` - ---- +```js +function curriedAverage(a) { + return a +} -```javascript -let count = 0; -const increment = () => ++count; +function curried(c) { + return c +} ``` #### --answer-- -```javascript -const double = (x) => x * 2; +```js +function curriedAverage(a) { + return function(b) { + return function(c) { + return (a + b + c) / 3; + }; + }; +} ``` ### --question-- #### --text-- -What is the primary goal of currying? +Which of the following is a key principle of functional programming? #### --distractors-- -To improve code readability +Modifying global variables frequently. --- -To create functions with fewer arguments +Using mutable data structures extensively. --- -To eliminate the need for higher-order functions +Emphasizing object-oriented inheritance. #### --answer-- -To enable partial application of functions +Avoiding side effects and using immutable data. ### --question-- #### --text-- -Which statement about side effects is FALSE? +What is an impure function? #### --distractors-- -Side effects make code harder to test +A function that returns an object. --- -Modifying a global variable is a side effect +A function without side effects. --- -Reading from a database can be considered a side effect +A function that returns `null` #### --answer-- -Pure functions can have side effects +A function with side effects. ### --question-- #### --text-- -What is the result of currying the following function? - -```javascript -const add = (a, b, c) => a + b + c; -``` +Which of the following is the correct way to call a curried function? #### --distractors-- -```javascript -const curried = (a, b, c) => a() + b() + c(); +```js +curriedAverage(2 3 4); ``` --- -```javascript -const curried = a => (b, c) => a + b + c; +```js +curriedAverage(2)==(3)==(4); ``` --- -```javascript -const curried = (a, b) => c => a + b + c; +```js +curriedAverage(2)=>(3)=>(4); ``` #### --answer-- -```javascript -const curried = a => b => c => a + b + c; +```js +curriedAverage(2)(3)(4); ``` -### --question-- - -#### --text-- - -Which of the following is NOT a side effect? - -#### --distractors-- - -Modifying the DOM - ---- - -Sending an HTTP request - ---- - -Changing the value of a global variable - -#### --answer-- - -Creating a new object and returning it - -### --question-- - -#### --text-- - -What is a higher-order function? - -#### --distractors-- - -A function that takes longer to execute - ---- - -A function with more than three arguments - ---- - -A function that uses advanced JavaScript features - -#### --answer-- - -A function that returns another function ### --question-- #### --text-- -Which of the following is a key principle of functional programming? +Which of the following is an example of an impure function? #### --distractors-- -Modifying global variables frequently +```js +function example(num) { + return num; +} +``` --- -Using mutable data structures extensively +```js +function sum(num1, num2) { + return num1 + num2 +} +``` --- -Emphasizing object-oriented inheritance +```js +function addToTotal(value) { + let total = 0; + total += value; + return total; +} +``` #### --answer-- -Avoiding side effects and using immutable data +```js +let total = 0; +function addToTotal(value) { + total += value; + return total; +} +``` ### --question-- #### --text-- -What is the main advantage of using pure functions? +Which of the following is NOT an example of a side effect? #### --distractors-- -They always execute faster than impure functions +Writing to a file. --- -They can access and modify global state easily +Modifying a global variable. --- -They can perform I/O operations more efficiently +Making an API call. #### --answer-- -They are easier to test and reason about - -### --question-- - -#### --text-- - -In the context of functional programming, what does "immutability" mean? - -#### --distractors-- - -Variables can be declared but not assigned - ---- - -Functions cannot be modified at runtime - ---- - -Objects cannot have methods - -#### --answer-- +Returning the sum of two values. -Data cannot be changed after it's created diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md index dd7f298fdf..6ea8777a41 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md @@ -134,32 +134,32 @@ Which of the following is a valid function expression? #### --distractors-- ```js -expression function getSum(x, y) { - return x + y; +expression function getSum(x, y) { + return x + y; }; ``` --- ```js -getSum: function(x, y) { - return x + y; +getSum: function(x, y) { + return x + y; }; ``` --- ```js -function = getSum(x, y) { - return x + y; +function = getSum(x, y) { + return x + y; }; ``` #### --answer-- ```js -const getSum = function(x, y) { - return x + y; +const getSum = function(x, y) { + return x + y; }; ``` @@ -246,25 +246,25 @@ Which of the following is the correct syntax for an arrow function? #### --distractors-- ```js -const sum <<>> (num1, num2) => num1 + num2 +const sum <<>> (num1, num2) => num1 + num2 ``` --- ```js -const sum === (num1, num2) === num1 + num2 +const sum === (num1, num2) === num1 + num2 ``` --- ```js -const sum >=> (num1, num2) => num1 + num2 +const sum >=> (num1, num2) => num1 + num2 ``` #### --answer-- ```js -const sum = (num1, num2) => num1 + num2 +const sum = (num1, num2) => num1 + num2 ``` ### --question-- @@ -382,7 +382,7 @@ Which of the following is the correct way to use default parameters? ```js function sum (num1, num2 <<>> 12) { return num1 + num2 -} +} ``` --- @@ -390,7 +390,7 @@ function sum (num1, num2 <<>> 12) { ```js function sum (num1, num2 === 12) { return num1 + num2 -} +} ``` --- @@ -398,7 +398,7 @@ function sum (num1, num2 === 12) { ```js function sum (num1, num2 >> 12) { return num1 + num2 -} +} ``` #### --answer-- @@ -406,7 +406,7 @@ function sum (num1, num2 >> 12) { ```js function sum (num1, num2 = 12) { return num1 + num2 -} +} ``` ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md index 36e3ec148f..75e25e9214 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md @@ -21,19 +21,19 @@ What are default parameters? #### --distractors-- -Parameters that should always be present in a function +Parameters that should always be present in a function. --- -Parameters that are passed in an array +Parameters that are passed in an array. --- -Parameters that are destructured from an object +Parameters that are destructured from an object. #### --answer-- -Parameters that are optional and have a default value when not provided +Parameters that are optional and have a default value when not provided. ### --question-- @@ -65,19 +65,19 @@ What does the rest parameter syntax allow you to do in JavaScript? #### --distractors-- -Pass parameters by reference +Pass parameters by reference. --- -Provide a set default parameters +Provide a set default parameters. --- -Destructure an object into parameters +Destructure an object into parameters. #### --answer-- -Capture all arguments into one array +Capture all arguments into one array. ### --question-- @@ -109,19 +109,19 @@ What does destructuring allows you to do in JavaScript? #### --distractors-- -Build complex objects +Build complex objects. --- -Serialize objects +Serialize objects. --- -Merge arrays or objects +Merge arrays or objects. #### --answer-- -Extract properties from objects and elements from arrays +Extract properties from objects and elements from arrays. ### --question-- @@ -153,19 +153,19 @@ Which of these is NOT a good practice for naming variables and functions in Java #### --distractors-- -Use camelCase notation +Use camelCase notation. --- -Start variable names with a letter, $ or _ +Start variable names with a letter, $ or _. --- -Using meaningful names +Using meaningful names. #### --answer-- -Using reserved keywords as variable names +Using reserved keywords as variable names. ### --question-- @@ -175,19 +175,19 @@ What is the primary purpose of a linter in JavaScript development? #### --distractors-- -To format code automatically +To format code automatically. --- -To optimize code for performance +To optimize code for performance. --- -To create documentation for code +To create documentation for code. #### --answer-- -To detect potential errors and style issues in code +To detect potential errors and style issues in code. ### --question-- @@ -219,15 +219,15 @@ Which of these describes accessibility? #### --distractors-- -Making sure code is accessible to other developers +Making sure code is accessible to other developers. --- -Writing secure code +Writing secure code. --- -Controlling who can access certain data +Controlling who can access certain data. #### --answer-- @@ -245,15 +245,15 @@ It's slower than `let` and `const` --- -It causes a syntax error +It causes a syntax error. --- -It doesn't allow type checking +It doesn't allow type checking. #### --answer-- -It has function scope instead of block scope, which can lead to unexpected behaviors +It has function scope instead of block scope, which can lead to unexpected behaviors. ### --question-- @@ -263,19 +263,19 @@ In JavaScript, how is memory for variables typically allocated? #### --distractors-- -Manually by the developer +Manually by the developer. --- -By the browser +By the browser. --- -By the server +By the server. #### --answer-- -Automatically by the runtime engine +Automatically by the runtime engine. ### --question-- @@ -285,19 +285,19 @@ What is hoisting in JavaScript? #### --distractors-- -Raising errors to the top of the code +Raising errors to the top of the code. --- -The process of creating new variables +The process of creating new variables. --- -Automatically moving `var` declarations to the top of the block +Automatically moving `var` declarations to the top of the block. #### --answer-- -The process of moving variable declarations to the top of their scope +The process of moving variable declarations to the top of their scope. ### --question-- @@ -307,19 +307,19 @@ What is the purpose of modules in JavaScript? #### --distractors-- -To improve code performance +To improve code performance. --- -To make code more difficult to understand +To make code more difficult to understand. --- -To create new programming languages +To create new programming languages. #### --answer-- -To organize code into reusable units +To organize code into reusable units. ### --question-- @@ -329,19 +329,19 @@ In the context of JavaScript modules, what does `export` do? #### --distractors-- -Save the code to disk +Save the code to disk. --- -Include external libraries in your code +Include external libraries in your code. --- -Publish your code to a public repository +Publish your code to a public repository. #### --answer-- -Make variables, functions or classes available to be imported by other modules +Make variables, functions or classes available to be imported by other modules. ### --question-- @@ -373,19 +373,19 @@ In the context of JavaScript memory management, what are memory leaks? #### --distractors-- -Oversized memory use +Oversized memory use. --- -Coding errors leading to application crashes +Coding errors leading to application crashes. --- -Part of the garbage collection process +Part of the garbage collection process. #### --answer-- -Memory allocations which are never properly made unreachable +Memory allocations which are never properly made unreachable. ### --question-- @@ -395,19 +395,19 @@ What is the main difference between `import` and `require` in JavaScript? #### --distractors-- -`import` is used in Node.js, while `require` is used in the browser +`import` is used in Node.js, while `require` is used in the browser. --- -`import` supports asynchronous loading, while `require` does not +`import` supports asynchronous loading, while `require` does not. --- -`import` is used for CSS and image files, while `require` is used for JavaScript files +`import` is used for CSS and image files, while `require` is used for JavaScript files. #### --answer-- -`import` is part of ES6 syntax, while `require` is an older module loading syntax +`import` is part of ES6 syntax, while `require` is an older module loading syntax. ### --question-- @@ -417,11 +417,11 @@ What does `let` provide that `var` does not? #### --distractors-- -Global scope +Global scope. --- -Read-only variables +Read-only variables. --- @@ -429,7 +429,7 @@ Unlimited re-declaration #### --answer-- -Block scope +Block scope. ### --question-- @@ -439,17 +439,17 @@ What is the purpose of a module bundler like Webpack or Rollup? #### --distractors-- -To optimize code for performance +To optimize code for performance. --- -It translates JavaScript code into machine language +It translates JavaScript code into machine language. --- -To format code automatically +To format code automatically. #### --answer-- -To combine multiple JavaScript modules into a single file +To combine multiple JavaScript modules into a single file. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md index 765b9aa915..c76929783d 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md @@ -77,7 +77,7 @@ Array #### --answer-- -Math object +Math object. ### --question-- @@ -87,19 +87,19 @@ Which of the following is not a type of loop supported in JavaScript? #### --distractors-- -`for` loop +`for` loop. --- -`while` loop +`while` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`if...else` loop +`if...else` loop. ### --question-- @@ -143,19 +143,19 @@ Which loop executes the code block once, before checking if the condition is tru #### --distractors-- -`while` loop +`while` loop. --- -`for...of` loop +`for...of` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`do...while` loop +`do...while` loop. ### --question-- @@ -165,19 +165,19 @@ Which loop loops over the values of an iterable object? #### --distractors-- -`for...in` loop +`for...in` loop. --- -`for` loop +`for` loop. --- -`do...while` loop +`do...while` loop. #### --answer-- -`for...of` loop +`for...of` loop. ### --question-- @@ -209,19 +209,19 @@ For iterating over an array, which loop is not the best? #### --distractors-- -`for` loop +`for` loop. --- -`for...of` loop +`for...of` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`while` loop +`while` loop. ### --question-- @@ -231,19 +231,19 @@ Which loop is the best for iterating objects? #### --distractors-- -`for...of` loop +`for...of` loop. --- -`do...while` loop +`do...while` loop. --- -`for` loop +`for` loop. #### --answer-- -`for...in` loop +`for...in` loop. ### --question-- @@ -297,19 +297,19 @@ What statement can be used to break out of a loop completely? #### --distractors-- -The `continue` statement +The `continue` statement. --- -The `label` statement +The `label` statement. --- -The `skip` statement +The `skip` statement. #### --answer-- -The `break` statement +The `break` statement. ### --question-- @@ -319,19 +319,19 @@ Which statement can be used to skip the current iteration and move to the next i #### --distractors-- -The `break` statement +The `break` statement. --- -The `label` statement +The `label` statement. --- -The `return` statement +The `return` statement. #### --answer-- -The `continue` statement +The `continue` statement. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md index fa9233cfd8..1458c1b88a 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md @@ -65,15 +65,15 @@ What happens if you try to divide by zero in JavaScript? #### --distractors-- -JavaScript will output 0 +JavaScript will output 0. --- -Nothing will happen +Nothing will happen. --- -JavaScript will throw an error +JavaScript will throw an error. #### --answer-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md index 32d7860e61..52a8c63c7c 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md @@ -21,19 +21,19 @@ Which of the following does not describe an object in JavaScript? #### --distractors-- -A collection of key-value pairs +A collection of key-value pairs. --- -A container for properties and methods +A container for properties and methods. --- -One of JavaScript's data types +One of JavaScript's data types. #### --answer-- -One of JavaScript's primitives +One of JavaScript's primitives. ### --question-- @@ -90,10 +90,10 @@ const obj = { key: "some-value" } Which of the following correctly accesses the value of the `street` property in the object below? ```js -const person = { - address: { +const person = { + address: { street: "sample-street" - } + } } ``` @@ -121,19 +121,19 @@ Which of the following property keys can only be used with a bracket notation as #### --distractors-- -A property key that is known and static +A property key that is known and static. --- -A property key nested in multiple levels of the object +A property key nested in multiple levels of the object. --- -A property key that might not exist in the object +A property key that might not exist in the object. #### --answer-- -A property key that is dynamic +A property key that is dynamic. ### --question-- @@ -168,10 +168,10 @@ const person = { name: "John" } Which of the following correctly accesses the value of `street` property via destructuring in the object below? ```js -const person = { - address: { +const person = { + address: { street: "sample-street" - } + } } ``` @@ -337,19 +337,19 @@ Which of the following is true about object setters? #### --distractors-- -An object setter must be called with a parenthesis +An object setter must be called with a parenthesis. --- -An object setter must be defined with the same name as the property it sets +An object setter must be defined with the same name as the property it sets. --- -An object setter must be accompanied by a getter +An object setter must be accompanied by a getter. #### --answer-- -An object setter must be defined with exactly one argument +An object setter must be defined with exactly one argument. ### --question-- @@ -389,11 +389,11 @@ Enumerable properties are defined by the object while non-enumerable properties --- -Enumerable properties can be accessed via dot notation while non-enumerable properties can only be accessed via bracket notation +Enumerable properties can be accessed via dot notation while non-enumerable properties can only be accessed via bracket notation. #### --answer-- -Enumerable properties are properties whose internal enumerable flag is set to true while non-enumerable properties' internal enumerable flag is set to false +Enumerable properties are properties whose internal enumerable flag is set to true while non-enumerable properties' internal enumerable flag is set to false. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md index fd6f7460d3..f318d04f85 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md @@ -87,19 +87,19 @@ Which of the following is a common naming convention for variables in JavaScript #### --distractors-- -JavaScript case +JavaScript case. --- -Lightning case +Lightning case. --- -Giraffe case +Giraffe case. #### --answer-- -Camel case +Camel case. ### --question-- @@ -323,7 +323,7 @@ Which of the following is a valid multi-line comment in JavaScript? ```py ''' -This is a +This is a multi-line comment ''' diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md b/curriculum/challenges/chinese/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md index e24ac7258c..5a49dda885 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md @@ -201,15 +201,15 @@ Which of the following values can be directly converted to JSON using `JSON.stri --- -A Function +A Function. --- -A DOM Element +A DOM Element. #### --answer-- -An Object +An Object. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md b/curriculum/challenges/chinese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md index 0db555f3f7..bc6153e7d4 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md @@ -43,19 +43,19 @@ How do you run or start nano from a terminal? #### --distractors-- -Type `run nano`, then press the **Enter** key +Type `run nano`, then press the **Enter** key. --- -Type `start nano`, then press the **Enter** key +Type `start nano`, then press the **Enter** key. --- -Type `nano.exe`, then press the **Enter** key +Type `nano.exe`, then press the **Enter** key. #### --answer-- -Type `nano`, then press the **Enter** key +Type `nano`, then press the **Enter** key. ### --question-- @@ -65,19 +65,19 @@ How do you open a text file using nano? #### --distractors-- -Type `nano.exe [FILE]`, then press the **Enter** key +Type `nano.exe [FILE]`, then press the **Enter** key. --- -Type `emacs [FILE]`, then press the **Enter** key +Type `emacs [FILE]`, then press the **Enter** key. --- -Type `vim [FILE]`, then press the **Enter** key +Type `vim [FILE]`, then press the **Enter** key. #### --answer-- -Type `nano [FILE]`, then press the **Enter** key +Type `nano [FILE]`, then press the **Enter** key. ### --question-- @@ -87,19 +87,19 @@ What type of files is nano capable of creating and modifying? #### --distractors-- -PDF files +PDF files. --- -Word documents +Word documents. --- -Excel spreadsheets +Excel spreadsheets. #### --answer-- -Plain text files +Plain text files. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/chinese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md index 3a650302e0..25b1ae5ddd 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md @@ -43,15 +43,15 @@ Which of the following is NOT a method for conditional rendering in React? #### --distractors-- -Ternary operators +Ternary operators. --- -Logical `&&` operator +Logical `&&` operator. --- -`switch` statements +`switch` statements. #### --answer-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md b/curriculum/challenges/chinese/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md index ccd75bb2fc..ddfa29c6a6 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md @@ -421,7 +421,7 @@ Element #### --answer-- -Functional component +Functional component. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md b/curriculum/challenges/chinese/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md index 4c664d2c9d..ee303bf4f7 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md @@ -190,7 +190,7 @@ console.log(sayHello(3)); --- -An error +An error. --- @@ -341,7 +341,7 @@ The following recursion is missing a base case: ```js function countDownToZero(number) { - // Base case goes here + // Base case goes here. console.log(number); countDownToZero(number - 1); @@ -462,19 +462,19 @@ What HTML structure is typically traversed recursively? #### --distractors-- -Style sheets +Style sheets. --- -Meta tags +Meta tags. --- -Script tags +Script tags. #### --answer-- -The DOM tree +The DOM tree. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/chinese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md index 34a426be61..c9023537dd 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md @@ -65,19 +65,19 @@ What does the `\l` command do when executed in the PostgreSQL interactive termin #### --distractors-- -Lists all schemas +Lists all schemas. --- -Lists all tables +Lists all tables. --- -Connects to a database +Connects to a database. #### --answer-- -Lists all databases +Lists all databases. ### --question-- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md b/curriculum/challenges/chinese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md index 81e621ef35..041c048aeb 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md @@ -17,375 +17,429 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -What CSS property is commonly used to create a flexible layout in a container? +What are breakpoints in responsive web design? #### --distractors-- -`display: block;` +Specific points in a design where floats overlap with other elements on the page. --- -`display: inline;` +Specific points used to set the columns and rows for a grid or flex layout. --- -`display: table;` +Specific points used to determine how a tabular layout will behave on the page. #### --answer-- -`display: flex;` +Specific points in a design where the layout and content adjust to accommodate different screen sizes. ### --question-- #### --text-- -What is the main purpose of media queries in responsive web design? +Which of the following is NOT a breakpoint used for smaller devices? #### --distractors-- -To change the color scheme of the page. +`600px` --- -To create animations. +`480px` --- -To adjust margins for print pages. +`320px` #### --answer-- -To apply different styles based on the screen size or device type. +`960px` ### --question-- #### --text-- -Which media feature in a media query checks the width of the browser window? +What is the main purpose of using media queries in responsive web design? #### --distractors-- -`min-height` +To change the color scheme of the page for Safari browsers. --- -`max-aspect-ratio` +To create animations for table layouts. --- -`resolution` +To adjust margins and padding for layouts using CSS flexbox. #### --answer-- -`min-width` +To apply different styles based on the screen size or device type. ### --question-- #### --text-- -Which CSS unit is relative to the width of the viewport? +Which media feature in a media query checks the width of the browser window? #### --distractors-- -`em` +`set-width` --- -`px` +`accept-width` --- -`rem` +`allow-width` #### --answer-- -`vw` +`min-width` ### --question-- #### --text-- -What does mobile-first design emphasize? +What will the following code do? + +```css +@media screen and (min-width: 768px) { + /* Styles go here */ +} +``` #### --distractors-- -Designing for desktops and scaling down for smaller devices. +This will ignore styles for screens that are `768px` wide. --- -Using only desktop breakpoints. +This will apply styles for screens that are only `768px` wide. --- -Focusing on the highest resolution devices first. +This will apply styles for screens that are smaller than `768px`. #### --answer-- -Designing for smaller screens first and scaling up for larger devices. +This will apply styles for screens that are `768px` and wider. ### --question-- #### --text-- -Which media query will apply styles when the device's width is between 600px and 1200px? +What does mobile-first design emphasize? #### --distractors-- -`@media screen and (max-width: 1200px)` +Designing for smaller devices only and ignoring the others. --- -`@media screen and (min-width: 600px)` +Designing for mobile devices built by Apple only. --- -`@media screen and (width: 800px)` +Designing for smaller Android screens first and ignoring Apple devices. #### --answer-- -`@media screen and (min-width: 600px) and (max-width: 1200px)` +Designing for smaller screens first and scaling up for larger devices. ### --question-- #### --text-- -What is the default flex-direction value in Flexbox? +Which media query will apply styles when the device's width is between 600px and 1200px? #### --distractors-- -`column` +`@media screen and (max-width: 1200px)` --- -`row-reverse` +`@media screen and (min-width: 600px)` --- -`column-reverse` +`@media screen and (width: 800px)` #### --answer-- -`row` +`@media screen and (min-width: 600px) and (max-width: 1200px)` ### --question-- #### --text-- -In Flexbox, how do you distribute space between items in a container? +Which of the following is NOT a valid media type? #### --distractors-- -`align-items` +`all` --- -`flex-grow` +`print` --- -`flex-wrap` +`screen` #### --answer-- -`justify-content` +`poster` ### --question-- #### --text-- -How do you apply a grid layout to a container in CSS? +Which of the following media types is intended for paged material and documents viewed on a screen in print preview mode? #### --distractors-- -`display: flexbox;` +`aspect-ratio` --- -`display: block;` +`flex` --- -`display: table;` +`screen` #### --answer-- -`display: grid;` +`print` ### --question-- #### --text-- -What does the `fr` unit represent in CSS Grid? +What does the `aspect-ratio` do in media queries? #### --distractors-- -Flexible ratio +It describes the ratio between flex properties in a flex layout. --- -Frame ratio +It describes the ratio between the x and y axis for grid containers. --- -Fixed region +It describes the ratio between rows and columns for table layouts. #### --answer-- -Fraction of available space +It describes the ratio between the width and height of the viewport. ### --question-- #### --text-- -Which of the following is a valid media query for targeting devices with a resolution of 2x or higher? +Which of the following is used to indicate whether the device is in landscape or portrait orientation? #### --distractors-- -`@media (resolution: 2x)` +`apply-orientation` --- -`@media (max-resolution: 2x)` +`set-orientation` --- -`@media screen and (min-width: 1200px)` +`oriente` #### --answer-- -`@media (min-resolution: 2px)` +`orientation` ### --question-- #### --text-- -Which property controls the number of columns in a grid container? +Which of the following is commonly used to target desktop screens and larger? #### --distractors-- -`grid-template-rows` +```css +@media screen and (min-width: 140000px) { + /* Styles go here */ +} +``` --- -`grid-auto-rows` +```css +@media screen and (min-width: 140px) { + /* Styles go here */ +} +``` --- -`grid-template` +```css +@media screen and (min-width: 14000px) { + /* Styles go here */ +} +``` #### --answer-- -`grid-template-columns` +```css +@media screen and (min-width: 1400px) { + /* Styles go here */ +} +``` ### --question-- #### --text-- -How do you set up a media query for screens larger than 768px? +Which of the following is used to detect if the user has requested a light or dark color theme? #### --distractors-- -`@media screen and (max-width: 768px)` +`allow-colors-scheme` --- -`@media only screen and (width > 768px)` +`apply-color-scheme` --- -`@media (screen-width: 768px)` +`set-colors-scheme` #### --answer-- -`@media screen and (min-width: 768px)` +`prefers-color-scheme` ### --question-- #### --text-- -What is the purpose of the `flex-wrap` property in Flexbox? +Which of the following is used to test whether the primary input mechanism can hover over elements? #### --distractors-- -To align items along the cross axis. +```css +@media (set: hover) { + /* Styles for devices that support hover */ +} +``` --- -To reverse the order of flex items. +```css +@media (apply: hover) { + /* Styles for devices that support hover */ +} +``` --- -To distribute space evenly between items. +```css +@media (hover: apply) { + /* Styles for devices that support hover */ +} +``` #### --answer-- -To allow flex items to wrap onto multiple lines. +```css +@media (hover: hover) { + /* Styles for devices that support hover */ +} +``` ### --question-- #### --text-- -Which of the following breakpoints is commonly used for tablets in responsive web design? +Which of the following is NOT a type of logical operator you can use with media queries? #### --distractors-- -`480px` +`only` --- -`1920px` +`not` --- -`2560px` +`and` #### --answer-- -`768px` +`accept` ### --question-- #### --text-- -How do you center an item horizontally in a flex container? +Which of the following breakpoints is commonly used for tablets in responsive web design? #### --distractors-- -`align-items: center;` +`480px` --- -`flex-direction: row;` +`1920px` --- -`flex-grow: 1;` +`2560px` #### --answer-- -`justify-content: center;` +`768px` ### --question-- #### --text-- -In mobile-first design, which media query should be used to target larger screens? +Which of the following is the correct way to apply the `aspect-ratio` in a media query? #### --distractors-- -`@media screen and (max-width: 600px)` +```css +@media screen and (aspect-ratio: 16-9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` --- -`@media screen and (height: 600px)` +```css +@media screen and (aspect-ratio: 16=9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` --- -`@media only screen` +```css +@media screen and (aspect-ratio: 16:9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` #### --answer-- -`@media screen and (min-width: 600px)` +```css +@media screen and (aspect-ratio: 16/9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` ### --question-- @@ -399,11 +453,11 @@ Which CSS property is used to create a layout that adjusts based on screen size --- -`display: block` +`display: block;` --- -`width: 100%` +`width: 100%;` #### --answer-- @@ -413,43 +467,59 @@ Which CSS property is used to create a layout that adjusts based on screen size #### --text-- -How do you prevent a flex container from shrinking smaller than its content? +Which of the following can be used to target landscape screens `768px` and larger? #### --distractors-- -`flex-shrink: 1;` +```css +@media screen and (min-width: 768px) and (landscape: orientation) { + /* Styles go here */ +} +``` --- -`flex-direction: column;` +```css +@media screen and (max-width: 768px) and (orientation: landscape) { + /* Styles go here */ +} +``` --- -`align-items: flex-start;` +```css +@media screen and (min-width: 768px) and (landscape: set) { + /* Styles go here */ +} +``` #### --answer-- -`flex-shrink: 0;` +```css +@media screen and (min-width: 768px) and (orientation: landscape) { + /* Styles go here */ +} +``` ### --question-- #### --text-- -How do you create a responsive image that scales with the width of its container? +What is the default media type if no media type is specified? #### --distractors-- -`max-height: 100%;` +`screen` --- -`object-fit: contain;` +`mobile` --- -`min-width: 100%;` +`print` #### --answer-- -`max-width: 100%;` +`all` diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/chinese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md index c425ccad6a..e711a1cfdb 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md @@ -7,7 +7,7 @@ dashedName: quiz-styling-forms # --description-- -To pass the quiz, you must correctly answer at least 18 of the 20 questions below. +To pass the quiz, you must correctly answer at least 9 of the 10 questions below. # --quizzes-- @@ -17,19 +17,19 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -Which of the following is a common issue with the `datetime-local` input type? +What is a common issue for styling the `datetime-local` input type? #### --distractors-- -It cannot be used with CSS variables. +It does not work with the `float` property. --- -It automatically submits the form upon value selection. +It is impossible to make it responsive. --- -It does not support real-time updates. +It does not work with `rem` units. #### --answer-- @@ -39,89 +39,89 @@ The input format is different across browsers. #### --text-- -Why is it important to use `box-sizing: border-box;` when styling text inputs? +Which of the following is considered best practice for styling text inputs? #### --distractors-- -It makes the text input focusable with a keyboard. +Text input font sizes need to be set with `em` units and colors should be a light gray. --- -It hides the input's placeholder text. +Text input sizes should only use dark green borders on focus and the text color should be dark gray. --- -It removes the default browser styling for inputs. +Text input font colors need to be light colors and the size should only be set using the `px` unit. #### --answer-- -It ensures padding and borders are included in the element's width and height. +Text input fonts need to be adequately sized, and the color needs to have sufficient contrast with the background. ### --question-- #### --text-- -What is a benefit of setting a max-width for text inputs? +Why is it important to not remove the ability for users to resize a `textarea` input? #### --distractors-- -It prevents users from entering long text. +Users should be able to zoom in and out and there should be no change in the input. --- -It makes the input unresponsive on larger screens. +Users should be able to zoom in and out and the input should increase to twice its size. --- -It automatically adjusts the font size. +Users should be able to zoom in and out and the input text should triple in size. #### --answer-- -It ensures the input doesn't stretch too wide on larger screens. +Users should be able to zoom in and out and the input should scale accordingly. ### --question-- #### --text-- -Why should you add `:focus` styles to text inputs? +What is a best practice for styling inputs in a focused state? #### --distractors-- -It hides the input's border. +It is important to use only light gray borders for focused inputs. --- -It disables user input. +It is important to only use dark red borders for focused inputs. --- -It forces the browser to ignore default styles. +It is important to remove any noticeable indicator. #### --answer-- -It improves accessibility by making the input easier to identify when focused. +It is important to preserve a noticeable indicator. ### --question-- #### --text-- -How can you prevent text inputs from being cut off when resized? +What is a best practice for styling inputs in an error state? #### --distractors-- -By adding `overflow: hidden;`. +Increase the font size for the input text to `3rem`. --- -By setting a fixed height and width. +Set the input to `display: none;` so it is removed from the page. --- -By removing padding from the input. +Set the input to be disabled so users can no longer interact with it. #### --answer-- -By using padding and line-height with flexible units like `em` or `rem`. +Provide a visual indicator with a message so users know that something is incorrect and needs to be fixed. ### --question-- @@ -143,313 +143,92 @@ It hides the input label, reducing visual clutter. #### --answer-- -It provides users with guidance on the expected input format without cluttering the interface. +It provides users with guidance on the expected input format. ### --question-- #### --text-- -Why should you avoid using `outline: none;` without adding a custom focus style? +What is WebKit? #### --distractors-- -It reduces the size of the text input. +It is a browser engine that ensures that there are no validation errors in your CSS. --- -It hides the input from assistive technology users. +It is a special CSS property used in CSS Grid. --- -It makes the input read-only. +It is a special CSS property used in CSS flexbox. #### --answer-- -It removes the focus outline, which may confuse users about which field is selected. +It is a browser engine that displays webpages. ### --question-- #### --text-- -What is the purpose of using Flexbox or Grid for form layout? +When is it appropriate to use `appearance: none;` for form elements? #### --distractors-- -To make form controls appear in random positions. +To remove form elements completely from the DOM and page. --- -To make the form smaller on mobile devices. +To hide form elements from those who use assistive technologies like screen readers. --- -To hide form controls on large screens. +To remove only default colors that are applied to the form elements and use your own. #### --answer-- -To create a well-structured and responsive form layout. +To remove some of the default styles that are applied to the form elements. ### --question-- #### --text-- -Why should input elements be styled with a solid border? +What are some considerations when working with `appearance: none;` on form elements? #### --distractors-- -It makes the form look more colorful. +It is important to preserve hovered and submit indicators on interactive elements. --- -It automatically increases form field size. +It is important to only use `appearance: none;` when you want to apply different styles for the Safari browser. --- -It forces users to zoom in on mobile devices. +It is important to use `appearance: none;` when you need to completely remove a form element from the page. #### --answer-- -To ensure input fields are clearly visible and easily recognizable as form controls. +It is important to preserve focus and error indicators on interactive elements. ### --question-- #### --text-- -How does increasing the margin between form elements affect form usability? +Which type of form elements are commonly styled using `appearance: none;` to remove their default look? #### --distractors-- -It decreases accessibility on mobile devices. +`label` elements. --- -It prevents users from submitting the form. +`div` elements. --- -It hides form labels. +`span` elements. #### --answer-- -It improves readability by helping users see the grouping of related form elements. - -### --question-- - -#### --text-- - -What is the primary reason for using `appearance: none` in form elements? - -#### --distractors-- - -To add new default styles to form elements. - ---- - -To enable form elements to appear larger on mobile devices. - ---- - -To disable form validation for specific elements. - -#### --answer-- - -To remove the default browser styling from form elements and apply custom styles. - -### --question-- - -#### --text-- - -Which type of form elements is commonly styled using `appearance: none` to remove their default look? - -#### --distractors-- - -`
User information
` element to define header cells and the `` element to define data cells. This helps people using assistive technologies understand the structure of the table. +- **Accessibility and Tables**: When using tables, you should use the `` element to define header cells and the `` element to define data cells. This helps people using assistive technologies understand the structure of the table. With the `
` element, you can write the caption (or title) of a table, so users, especially those who use assistive technologies, can quickly understand the table's purpose and content. You should place the `` element immediately after the opening tag of the ``element. This way, screen readers and other assistive technologies can provide more context by announcing the caption before reading the content. - **Importance for inputs to have an associated label**: You should use the `
+
+ +In the table above, the first row shows the binary number `1010`, the second row shows the power of `2` represented by each binary position, and the third row shows the result of each multiplication. If you add all the values in the third row, they total `10`. + +Now, let's dive into bitwise operators. These operators perform operations on the binary representations of numbers. JavaScript provides several bitwise operators, including AND (`&`), OR (`|`), XOR (`^`), NOT (`~`), left shift (`<<`), and right shift (`>>`). + +The bitwise AND (`&`) operator returns a `1` in each bit position for which the corresponding bits of both operands are `1`. Here's an example: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a & b); // Output: 1 (Binary: 001) +``` + +In this example, we perform a bitwise AND operation on `5` (`101` in binary) and `3` (`011` in binary). The result is `1` (`001` in binary) because only the rightmost bit is `1` in both numbers. + +The bitwise OR (`|`) operator returns a `1` in each bit position for which the corresponding bits of either or both operands are `1`. For example: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a | b); // Output: 7 (Binary: 111) +``` + +Here, the result is `7` (`111` in binary) because at least one of the bits is `1` in each position. + +The bitwise XOR (`^`) operator returns a `1` in each bit position for which the corresponding bits of either, but not both, operands are `1`. For instance: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a ^ b); // Output: 6 (Binary: 110) +``` + +The result is `6` (`110` in binary) because the first and second bits from the right are different in the two numbers. + +The bitwise NOT (`~`) operator inverts all the bits of its operand. For example: + +```js +let a = 5; // Binary: 101 +console.log(~a); // Output: -6 +``` + +This might seem surprising, but it's because of how negative numbers are represented in binary using two's complement. + +The left shift (`<<`) operator shifts all bits to the left by a specified number of positions. For example: + +```js +let a = 5; // Binary: 101 +console.log(a << 1); // Output: 10 (Binary: 1010) +``` + +Here, all bits are shifted one position to the left, effectively multiplying the number by `2`. + +The right shift (`>>`) operator shifts all bits to the right. For example: + +```js +let a = 5; // Binary: 101 +console.log(a >> 1); // Output: 2 (Binary: 10) +``` + +Here, all bits are shifted one position to the right, effectively dividing the number by `2` and rounding down. + +Bitwise operators are often used in low-level programming and cryptography. While they may not be as commonly used in everyday JavaScript programming, understanding them can be beneficial for certain specialized tasks and can deepen your understanding of how computers work at a fundamental level. + # --questions-- ## --text-- diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md b/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md index 525aa9fc34..91112f2bfe 100644 --- a/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md +++ b/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md @@ -10,6 +10,122 @@ dashedName: what-are-conditional-statements-and-how-do-if-else-if-else-statement Watch the lecture video and answer the questions below. +# --transcript-- + +What are conditional statements, and how do `if/else` statements work? + +Conditional statements let you make decisions in your JavaScript code. They allow your program to flow in a particular way based on certain conditions. Let's take a look at how `if`, `else if`, `else`, and the ternary operator work to let you control the flow of your code. + +An `if` statement takes a condition and runs a block of code if that condition is truthy. Truthy values are any values that result in `true` when evaluated in a Boolean context like an `if` statement. Here are examples of truthy values: + +- non-empty strings, for example, `hello` + +- any number other than `0` and `-0`, for example, `4`, `-5`, and others + +- arrays + +- objects + +- the boolean `true` + +On the other hand, falsy values are values that evaluate to `false` in a boolean context. JavaScript has few falsy values, which makes them easy to remember. Here are a few falsy values: + +- boolean `false` + +- `0` (zero) + +- `""` (empty string) + +- `null` + +- `undefined` + +- `NaN` (Not a Number) + +Now, that we have a basic understanding of truthy and falsy values, let's see how it works with `if` statements. In this first example, we are using a couple of `if` statements to check against truthy and falsy values: + +```js +if (null) { + console.log("This will not run."); +} + +if ("freeCodeCamp") { + console.log("This will run."); +} +``` + +Since `null` is a falsy value, the message inside the block will never be logged to the console. But for the second `if` statement, the string `freeCodeCamp` is a truthy value, and will be considered `true` in this boolean context of the `if` statement. As a result, the message `This will run.` will be logged to the console. + +Let's take a look at a few more examples on how `if` statements work with different comparison operators. Here is an example of using an `if` statement to check if the user is eligible to vote: + +```js +const age = 22; + +if (age >= 18) { + console.log("You're eligible to vote"); // You're eligible to vote +} +``` + +In this example, since `age` is currently `22`, this means the condition will evaluate to `true` because `22` is greater than or equal to `18`. So the message `You're eligible to vote` will be logged to the console. If we change the example so `age` is now `15`, then the condition will evaluate to `false` and the message will not be logged to the console: + +```js +const age = 15; + +if (age >= 18) { + console.log("You're eligible to vote"); // Code not running because age is less than 18 +} +``` + +When a condition is `false`, then you can use an `else` clause: + +```js +const age = 15; + +if (age >= 18) { + console.log("You're eligible to vote"); +} else { + console.log("You're not eligible to vote"); // You're not eligible to vote +} +``` + +In this example, `15` is not greater than or equal to `18`, so the condition would be `false`. The code inside the `else` block will run in this case. + +If you want to check multiple conditions, you can use an `else if` block. This allows your program to choose between more than two paths. + +```js +const score = 87; + +if (score >= 90) { + console.log('You got an A'); +} else if (score >= 80) { + console.log('You got a B'); // You got a B +} else if (score >= 70) { + console.log('You got a C'); +} else { + console.log('You failed! You need to study more!'); +} +``` + +Since the `score` is currently `87`, then the message of `You got a B` would be logged to the console. + +The ternary operator is a compact way to write simple `if/else` statements. It has three parts: a condition, a result if the condition is true, and a result if it is false. Here's the basic syntax: + +```js +condition ? expressionIfTrue : expressionIfFalse; +``` + +Here's an example dealing with weather temperatures in Celsius: + +```js +const weather = temperature > 25 ? 'sunny' : 'cool'; + +console.log(`It's a ${weather} day!`); +``` + +If `temperature` is greater than `25`, the code above logs `It's a sunny day!`. If `temperature` is ever less than `25`, it logs `It's a cool day!`. + +So, which should you use between an if statement and a ternary? Use a ternary while dealing with a single condition or single expressions, or when you want a compact syntax for simple logic. Use `if/else` statements when you're dealing with complex conditions and multiple statements, as things become unreadable if you nest ternaries.  + # --questions-- ## --text-- diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md b/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md index 7ecb9e7567..39825d354c 100644 --- a/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md +++ b/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md @@ -10,6 +10,101 @@ dashedName: what-are-binary-logical-operators-and-how-do-they-work Watch the lecture video and answer the questions below. +# --transcript-- + +What are binary logical operators, and how do they work? + +Binary logical operators help you evaluate two expressions and return a result based on their truthiness. Let's look at the three most common binary logical operators: logical AND, logical OR, and the nullish coalescing operator. + +The logical AND operator is represented by a double ampersand (`&&`). It checks if both operands are true and returns a result. If both operands are truthy, it returns the second value, that is, the one on the right: + +```js +const result = true && 'hello'; + +console.log(result); // hello +``` + +In the example above, the text `hello` is logged to the console because both operands are `true`. If either operand is falsy, it returns the falsy value: + +```js +const result = 0 && 3; + +console.log(result); // 0 +``` + +Since `0` is a falsy value, the number `0` is logged to the console. And if both operands are falsy, it returns the first falsy value: + +```js +const result = false && 0; + +console.log(result); // false +``` + +Since `false` is a falsey value, then `false` is logged to the console. The logical AND operator is useful when you want to check multiple conditions and ensure that all are true before proceeding. Here is an example: + +```js +if (2 < 3 && 3 < 4) { + console.log('The if block runs'); +} else { + console.log('The else block runs'); +} +``` + +In the condition, since `2` is less than `3` AND `3` is less than `4`, then the sentence `The if block runs` will be logged to the console. + +The logical OR operator checks if at least one of the operands is truthy. If the first operand is truthy, it returns that value: + +```js +const result = 'This is truthy' || false; + +console.log(result); // This is truthy +``` + +If the first operand is falsy but the second is truthy, the second value will be logged to the console: + +```js +const result = 0 || 'This is truthy'; + +console.log(result); // This is truthy +``` + +It is common to use the logical OR operator in `if/else` statements like this: + +```js +let userInput; + +if (userInput || 'Guest') { + console.log('A user is present'); +} else { + console.log('No user detected'); +} +``` + +Since we didn't assign a value to the `userInput` variable, it is currently `undefined`. The condition in the `if` statement checks if either the `userInput` variable or the string `Guest` are truthy. Since the string `Guest` is true in a boolean context like this, the string `A user is present` will be logged to the console. + +The nullish coalescing operator is more sophisticated than logical OR and logical AND. Represented by a double question mark (`??`), it helps in scenarios where you want to return a value only if the first one is `null` or `undefined`. Here is an example of working with the nullish coalescing operator: + +```js +const result = null ?? 'default'; + +console.log(result); // default +``` + +Since `null` is a falsey value, the string `default` would be logged to the console. The nullish coalescing operator is incredibly useful in situations where `null` or `undefined` are the only values that should trigger a fallback or default value. Here is an example of dealing with a user's preference settings: + +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +let theme = userSettings.theme ?? 'light'; +console.log(theme); // light +``` + +In the example above, we have an object called `userSettings` that contains `theme`, `volume` and `notifications` properties. We are accessing the `theme` using dot notation like `userSettings.theme`. You will learn more about how to work with objects in a future lecture video. Since the user's `theme` is currently set to `null`, then the string `light` will be logged to the console. + # --questions-- ## --text-- diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md b/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md index aae68540df..05d94f4443 100644 --- a/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md +++ b/curriculum/challenges/korean/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md @@ -10,6 +10,98 @@ dashedName: what-is-the-math-object-in-javascript-and-what-are-some-common-metho Watch the lecture video and answer the questions below. +# --transcript-- + +What is the `Math` object in JavaScript, and what are some common methods? + +When diving into JavaScript, you'll quickly discover that performing mathematical operations is a common task. While basic arithmetic operators can handle simple calculations, JavaScript offers a built-in `Math` object to tackle more complex math challenges. + +This handy tool provides a variety of methods that make it easier to perform advanced calculations and manipulate numbers. Let's explore these methods and see how they can simplify your coding experience. + +The `Math.random()` method generates a random floating-point number between `0` (inclusive) and `1` (exclusive). This means the possible output can be `0`, but it will never actually reach `1`. Here is an example working with the `Math.random()` method: + +```js +const randomNum = Math.random(); + +console.log(randomNum); +// any number between 0 and 1 – 0 inclusive and 1 exclusive +``` + +`Math.min()` and `Math.max()` both take a set of numbers and return the minimum and maximum value, respectively. Here is an example of working both of those methods: + +```js +const smallest = Math.min(1, 5, 3, 9); +console.log(smallest); // 1 + +const largest = Math.max(1, 5, 3, 9); +console.log(largest); // 9 +``` + +The first `console.log()` will log the number `1`, since `1` is the smallest in that list of numbers. And the second `console.log()` will log the number `9`, since `9` is the largest numbers in that list. + +If you wanted to round numbers up or down to the nearest whole integer, you could use the `Math.ceil()` and `Math.floor()` methods. Here is an example of working with `Math.ceil()`: + +```js +console.log(Math.ceil(4.3)); // 5 +``` + +`Math.ceil()` will round `4.3` up to the nearest whole integer, which is `5` in this case. Now, let's take a look at rounding a number down: + +```js +console.log(Math.floor(4.7)); // 4 +``` + +`Math.floor()` will round `4.7` down to the nearest whole integer, which is `4` in this case. `Math.round()` is the hybrid of `Math.ceil()` and `Math.floor()`. It rounds a number to its nearest integer, taking the decimal point into account: + +```js +console.log(Math.round(2.3)); // 2 +console.log(Math.round(4.5)); // 5 +console.log(Math.round(4.8)); // 5 +``` + +So, if the decimal point is less than `5`, the number is rounded down. And if the decimal point is `5` or greater, the number is rounded up. A practical application of `Math.floor()` and `Math.random()` is to generate a random number between two whole numbers. Here's the syntax for that: + +```js +Math.floor(Math.random() * (max - min)) + min; +``` + +Generating a random number between `20` and `1` would look like this: + +```js +const randomNumBtw1And20 = Math.floor(Math.random() * 20) + 1; +console.log(randomNumBtw1And20); +``` + +Another helpful `Math` method would be the `Math.trunc()` method. `Math.trunc()` removes the decimal part of a number, returning only the integer portion, without rounding: + +```js +console.log(Math.trunc(2.9)); // 2 +console.log(Math.trunc(9.1)); // 9 +``` + +If you need to get the square root or cube root of a number, you can use the `Math.sqrt()` and `Math.cbrt()` methods, respectively: + +```js +console.log(Math.sqrt(81)); // 9 +console.log(Math.cbrt(27)); // 3 +``` + +The first log statement, will log `9` because the square root of `81` is `9`, while the second log statement will log `3` because the cube root of `27` is `3`. If you need to get the absolute value of a number, you can use the `Math.abs()` method: + +```js +console.log(Math.abs(-5)); // 5 +console.log(Math.abs(5)); // 5 +``` + +`Math.abs()` returns the absolute value of a number, turning negatives into positives. The last method we will look at will be the `Math.pow()` method: + +```js +console.log(Math.pow(2, 3)); // 8 +console.log(Math.pow(8, 2)); // 64 +``` + +`Math.pow()` takes two numbers and raise the first to the power of the second. There are many more methods that belong to the `Math` object, that you can explore on your own. However, these are just a few of the more commonly used ones found in JavaScript codebases. + # --questions-- ## --text-- diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md b/curriculum/challenges/korean/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md index 9999634949..4aa306a97c 100644 --- a/curriculum/challenges/korean/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md +++ b/curriculum/challenges/korean/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md @@ -2,7 +2,7 @@ id: 673263e80dd43da7df3ae565 title: How Can You Find the Position of a Substring in a String? challengeType: 11 -videoId: k2QaBPHl_00 +videoId: tTm8t9inci8 dashedName: how-can-you-find-the-position-of-a-substring-in-a-string --- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md b/curriculum/challenges/korean/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md index cb439f3337..bdfcf72a39 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md @@ -7,7 +7,7 @@ dashedName: quiz-advanced-react # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,439 +17,439 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/korean/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md index 59a3d2a8e3..5bd5ac030b 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md @@ -7,7 +7,7 @@ dashedName: quiz-asynchronous-javascript # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -363,7 +363,7 @@ A synchronous response. #### --answer-- -A `Promise` that resolves to a `Response` object +A `Promise` that resolves to a `Response` object. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-bash-and-sql/66f1affc0ef4fcca423d4688.md b/curriculum/challenges/korean/25-front-end-development/quiz-bash-and-sql/66f1affc0ef4fcca423d4688.md index a5b185a89e..761190010c 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-bash-and-sql/66f1affc0ef4fcca423d4688.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-bash-and-sql/66f1affc0ef4fcca423d4688.md @@ -7,7 +7,7 @@ dashedName: quiz-bash-and-sql # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-bash-commands/66f1af4fedf643c78d024c5e.md b/curriculum/challenges/korean/25-front-end-development/quiz-bash-commands/66f1af4fedf643c78d024c5e.md index c1d376c0ca..32bd4a6f46 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-bash-commands/66f1af4fedf643c78d024c5e.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-bash-commands/66f1af4fedf643c78d024c5e.md @@ -7,7 +7,7 @@ dashedName: quiz-bash-commands # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md b/curriculum/challenges/korean/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md index 9a81db9e10..dbadd37341 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md @@ -7,7 +7,7 @@ dashedName: quiz-bash-scripting # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -388,19 +388,19 @@ What does the command `echo $?` do? #### --distractors-- -Prints the value of the last used variable +Prints the value of the last used variable. --- -Prints the value of the last used arithmetic operation +Prints the value of the last used arithmetic operation. --- -Prints the value of the last executed condition +Prints the value of the last executed condition. #### --answer-- -Prints the exit code of the last executed command +Prints the exit code of the last executed command. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/korean/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md index 288e6b89dd..632cea711d 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md @@ -7,7 +7,7 @@ dashedName: quiz-basic-css # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -39,7 +39,7 @@ Cascading Style Sheets #### --text-- -Which answer uses the correct structure of using a CSS rule? +Which of the following is a correct CSS rule? #### --distractors-- @@ -65,19 +65,19 @@ What does `` do? #### --distractors-- -Establishes flexbox within the device. +It links external stylesheets to a webpage for responsive design. --- -Creates the font for the device. +It specifies the metadata used by search engines to index a webpage. --- -Makes the website automatically responsive. +It specifies the character encoding used on the webpage. #### --answer-- -Controls the shape and size of the web page from a user's device. +It controls the shape and size of a web page on different screen sizes. ### --question-- @@ -109,19 +109,19 @@ When using internal CSS, where is the `style` element placed within the HTML? #### --distractors-- -In the `meta` element +In the `meta` element. --- -In the `script` element +In the `script` element. --- -In the `body` element +In the `body` element. #### --answer-- -In the `head` element +In the `head` element. ### --question-- @@ -241,19 +241,19 @@ What statement is TRUE about block-level elements? #### --distractors-- -Block-level elements don't start on new lines. +Block-level elements stack horizontally by default. --- -Block-level elements only takes up as much as it needs. +`width` and `height` properties usually do not apply to block-level elements unless you set their `display` property to `inline-block`. --- -Block-level elements come with no margin. +Block-level elements cannot contain inline elements inside them. #### --answer-- -Block-level elements start on a new line with margin before and after the element. +Block-level elements start on a new line and take up the full width of their container. ### --question-- @@ -263,19 +263,19 @@ What statement is TRUE when using the `inline-block` value? #### --distractors-- -Doesn't allow you to set the height and width. +Elements stack vertically, always taking up the full width of their container. --- -Top and bottom margins not respected. +Elements align horizontally but cannot apply vertical padding or margin. --- -Adds a line break after an element. +Elements respect width and height settings but cannot contain other elements inside them. #### --answer-- -Allows you to place elements next to each other while letting you set the height and width. +Elements retain inline flow but allow setting width and height. ### --question-- @@ -351,19 +351,19 @@ What does `!important` do in CSS? #### --distractors-- -It doesn't effect the code. +It makes the CSS rule work exclusively for inline styles and ignores styles defined in external or internal stylesheets. --- -Applies to all properties in the code. +It disables all other CSS properties applied to the same element, effectively making it the only rule that affects the element's styling. --- -Applies on to a certain selector or group of elements. +It applies on to a certain selector or group of elements. #### --answer-- -Overrides any other values applied to the property for that selector. +It overrides any other values applied to the property for that selector. ### --question-- @@ -373,19 +373,19 @@ How does the CSS Cascade algorithm work? #### --distractors-- -Determines styles of the element based on alphabetical order. +It determines styles of the element based on order of declaration, regardless of other factors. --- -Gives animations to the page. +It applies styles based solely on the order they are written, ignoring specificity. --- -Improves Search Engine Optimization (SEO). +It applies styles prioritizing specificity, ignoring origin and relevance. #### --answer-- -Determines styles of the element based on specificity and order of declaration. +It determines styles of the element based on specificity and order of declaration. ### --question-- @@ -439,17 +439,17 @@ For `padding: 10px 20px 30px 40px`, what is the correct order of values? #### --distractors-- -Right, Top, Left, Bottom +Right, Top, Left, Bottom. --- -Top, Left, Bottom, Right +Top, Left, Bottom, Right. --- -Top, Bottom, Right, Left +Top, Bottom, Right, Left. #### --answer-- -Top, Right, Bottom, Left +Top, Right, Bottom, Left. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md b/curriculum/challenges/korean/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md index c136b3183d..22bb7ba840 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md @@ -7,7 +7,7 @@ dashedName: quiz-basic-html # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -533,7 +533,7 @@ JPG --- -Creative Commons +Creative Commons. --- @@ -541,7 +541,7 @@ BSD #### --answer-- -Creative Commons 0 +Creative Commons 0. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md b/curriculum/challenges/korean/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md index e59a69ece4..f48397cb58 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md @@ -7,7 +7,7 @@ dashedName: quiz-computer-basics # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -25,7 +25,7 @@ Processor --- -Graphics Card +Graphics Card. --- @@ -39,23 +39,23 @@ Motherboard #### --text-- -Which is not a conventional way to connect a keyboard to the computer? +What are browser developer tools? #### --distractors-- -USB Receiver +Tools for editing browser settings and managing user profiles. --- -Bluetooth +Utilities for blocking ads and improving web page performance. --- -USB Cable +Software for managing browser extensions and plug-ins. #### --answer-- -Ethernet Cable +Built-in features in browsers that help developers debug and inspect websites. ### --question-- @@ -77,7 +77,7 @@ Cable #### --answer-- -Fiber Optic +Fiber Optic. ### --question-- @@ -87,25 +87,25 @@ Which of the following is NOT a safe practice when signing in? #### --distractors-- -Using a fingerprint or face scanner +Using a fingerprint or face scanner. --- -Making a long and complex password like `@ppl3_+B@nana34823` +Making a long and complex password like `@ppl3_+B@nana34823`. --- -Utilizing a physical USB security key +Setting up two-factor authentication (2FA). #### --answer-- -Saving passwords in the browser on a public computer +Using passwords based on personal information like your birthday. ### --question-- #### --text-- -Which of the following is not a Web Browser? +Which of the following is NOT a Web Browser? #### --distractors-- @@ -113,15 +113,15 @@ Safari --- -Opera GX +Opera --- -DuckDuckGo +Microsoft Edge. #### --answer-- -Google Drive +Google Drive. ### --question-- @@ -131,11 +131,11 @@ When you need to edit a piece of code, which of the following are you most likel #### --distractors-- -Node Package Manager +Node Package Manager. --- -Microsoft Edge +Microsoft Edge. --- @@ -143,13 +143,13 @@ Github #### --answer-- -Visual Studio Code +Visual Studio Code. ### --question-- #### --text-- -Which of the following stores and accesses files on the hard drive? +Which of the following is used primarily for managing files stored on a local hard drive? #### --distractors-- @@ -157,59 +157,59 @@ Dropbox --- -Microsoft OneDrive +Microsoft OneDrive. --- -Google Drive +Google Drive. #### --answer-- -Windows File Explorer +Windows File Explorer. ### --question-- #### --text-- -What is not a good practice when naming files for later use? +What is NOT a good practice when naming files? #### --distractors-- -Putting an underscore or hyphen between words +Putting an underscore or hyphen between words. --- -Use a casing style such as camelCase and sticking with it +Use a casing style such as camelCase and sticking with it. --- -Putting a version number at the end of a document like `summaryReport_v2.docx` +Putting a version number at the end of a document like `summaryReport_v2.docx`. #### --answer-- -Being lazy and pounding your keyboard like `asdfloweiueld` to get it over with +Using non-descriptive names like `file1.txt`. ### --question-- #### --text-- -Which of the following is a way to move files? +What does the term "domain name" refer to? #### --distractors-- -Using `Ctrl + X` and `Ctrl + V` (or `Command + X` and `Command + V` on Mac) +A type of software that manages website files and databases. --- -Dragging the file and dropping it at the destination +The physical location of a web server in a data center. --- -Using a terminal command such as `move` (`mv` on Mac) +None of the other choices. #### --answer-- -All of the other choices +The address used to identify websites on the internet. ### --question-- @@ -219,47 +219,47 @@ Which of the following is a way to send a file to the Recycle Bin/Trash? #### --distractors-- -All of the other choices +All of the other choices. --- -Pressing the `Backspace` key on the keyboard +Pressing the `Backspace` key on the keyboard. --- -Moving it to an Archived folder +Moving it to an Archived folder. #### --answer-- -Pressing the `Delete` key on the keyboard (`Command + Delete` on Mac) +Right-click on it and select the Delete/Move to trash option. ### --question-- #### --text-- -Which of the following is not a feature when searching for files locally? +What is a RAM? #### --distractors-- -Using boolean operators like `AND`, `OR`, and `NOT` +A network protocol used for transferring files between devices. --- -Using filters like `*.jpg` +A permanent storage device used for saving files and applications. --- -Using Cortana on Windows or Spotlight Search on Mac +A component in a computer responsible for generating graphics and rendering images. #### --answer-- -Typing the name of the file into your Web Browser and hitting `Enter` +A temporary memory for fast data access by the processor. ### --question-- #### --text-- -What file type will be best suited for writing documentation? +What file type will be best suited for writing a `README` file? #### --distractors-- @@ -281,37 +281,37 @@ What file type will be best suited for writing documentation? #### --text-- -Which of the following is not a configuration file? +What is an Integrated Development Environment (IDE)? #### --distractors-- -`.env` +A platform designed for deploying and hosting web applications. --- -`.build` +A type of hardware device used for testing and debugging electronic circuits. --- -`.yaml` or `.yml` +A version control system that helps developers track changes in source code during software development. #### --answer-- -`.log` +A program that integrates tools for writing, debugging, and running code. ### --question-- #### --text-- -A piece of software that allows you to look at online content is called a: +What is a piece of software that allows you to look at online content called? #### --distractors-- -Internet Content Displayer +Internet Content Displayer. --- -Search Engine +Search Engine. --- @@ -319,21 +319,21 @@ Website #### --answer-- -Web Browser +Web Browser. ### --question-- #### --text-- -A piece of software that lists web pages related to a user's query is a called a: +What is a piece of software that lists web pages related to a user's query called? #### --distractors-- -Page Finder +Page Finder. --- -Web Browser +Web Browser. --- @@ -341,17 +341,17 @@ Website #### --answer-- -Search Engine +Search Engine. ### --question-- #### --text-- -A set of one or more web pages under one domain name is called a: +What is a set of one or more web pages under one domain name called? #### --distractors-- -Web Browser +Web Browser. --- @@ -359,7 +359,7 @@ Hyperlink --- -Search Engine +Search Engine. #### --answer-- @@ -369,15 +369,15 @@ Website #### --text-- -To search for an exact phrase, you should use what character? +To search for an exact phrase, what should you enclose your search query with? #### --distractors-- -Backtick +Backticks --- -Parenthesis +Parentheses --- @@ -385,71 +385,71 @@ Brackets #### --answer-- -Quotation marks +Quotation marks. ### --question-- #### --text-- -Which is not a way to install a Web Browser? +Which is NOT a way to install a Web Browser? #### --distractors-- -Using a Package Manager +Using a Package Manager. --- -Directly downloading from the website +Directly downloading from the website. --- -Using an App Store like Microsoft Store +Using an App Store like Microsoft Store. #### --answer-- -Pressing the Network/Internet button in Settings +Pressing the Network/Internet button in Settings. ### --question-- #### --text-- -Which of these peripherals is an input device? +Which of the following formats does NOT preserve image quality after compression? #### --distractors-- -Projector +All of the other choices. --- -Speakers +PNG --- -Monitor +SVG #### --answer-- -Microphone +JPEG ### --question-- #### --text-- -Which of the following lists of parts can all be found in the circuit board? +Which of the following parts can be found in the circuit board? #### --distractors-- -Printer, Router, USB Ports +Printer and Router. --- -Mouse, Keyboard, Monitor +Mouse and Keyboard. --- -Motherboard, Hard Drive, GPU +Hard Drive and GPU. #### --answer-- -BIOS/UEFI Chip, CPU, RAM +CPU and RAM. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md index 019e90821e..198acb0d7d 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md @@ -7,7 +7,7 @@ dashedName: quiz-css-accessibility # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -65,11 +65,11 @@ Which tool can help inspect element styles in a web browser? #### --distractors-- -Adobe Photoshop +Adobe Photoshop. --- -Microsoft Word +Microsoft Word. --- @@ -77,7 +77,7 @@ Notepad #### --answer-- -Chrome DevTools +Chrome DevTools. ### --question-- @@ -109,19 +109,19 @@ What does the `:hover` pseudo-class indicate? #### --distractors-- -Active state +Active state. --- -Element is focused +Element is focused. --- -Element is hidden +Element is hidden. #### --answer-- -Mouse is over the element +Mouse is over the element. ### --question-- @@ -143,7 +143,7 @@ Figma #### --answer-- -Contrast checker +Contrast checker. ### --question-- @@ -153,19 +153,19 @@ What is the purpose of the `alt` attribute in images? #### --distractors-- -To change image size +To change image size. --- -To add a title +To add a title. --- -To change image color +To change image color. #### --answer-- -To provide a text alternative +To provide a text alternative. ### --question-- @@ -175,19 +175,19 @@ What is a screen reader? #### --distractors-- -A browser for disabled users +A browser for disabled users. --- -A CSS tool +A CSS tool. --- -A web development library +A web development library. #### --answer-- -A text-to-speech software +A text-to-speech software. ### --question-- @@ -197,19 +197,19 @@ What does the 'Inspect Element' feature do? #### --distractors-- -Edits text directly +Edits text directly. --- -Downloads files +Downloads files. --- -Modifies images +Modifies images. #### --answer-- -Displays CSS and HTML +Displays CSS and HTML. ### --question-- @@ -241,19 +241,19 @@ What does the `opacity` property do in CSS? #### --distractors-- -Changes text size +Changes text size. --- -Adds a border +Adds a border. --- -Sets the element's position +Sets the element's position. #### --answer-- -Controls element transparency +Controls element transparency. ### --question-- @@ -285,19 +285,19 @@ What is a common use for `aria-hidden="true"`? #### --distractors-- -To show content +To show content. --- -To display on mobile +To display on mobile. --- -To increase visibility +To increase visibility. #### --answer-- -To hide content from screen readers +To hide content from screen readers. ### --question-- @@ -307,19 +307,19 @@ What is the `flex` property used for? #### --distractors-- -Changing text color +Changing text color. --- -Adjusting font size +Adjusting font size. --- -Adding animations +Adding animations. #### --answer-- -Creating responsive layouts +Creating responsive layouts. ### --question-- @@ -439,17 +439,17 @@ What is the `outline` property most commonly used to configure? #### --distractors-- -Border of an element +Border of an element. --- -Margin of an element +Margin of an element. --- -Padding of an element +Padding of an element. #### --answer-- -Focus indicator around an element +Focus indicator around an element. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md index 4befddea1b..565bb9c58a 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md @@ -7,7 +7,7 @@ dashedName: quiz-css-animations # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -43,19 +43,19 @@ What does `matrix()` allow you to control? #### --distractors-- -Only scaling +Only scaling. --- -Only translation +Only translation. --- -Only rotation +Only rotation. #### --answer-- -Multiple transformations at once +Multiple transformations at once. ### --question-- @@ -109,19 +109,19 @@ What does `@keyframes` define? #### --distractors-- -CSS colors +CSS colors. --- -CSS transitions +CSS transitions. --- -CSS text styles +CSS text styles. #### --answer-- -CSS animation sequences +CSS animation sequences. ### --question-- @@ -131,19 +131,19 @@ What does `translate()` do? #### --distractors-- -Changes opacity +Changes opacity. --- -Rotates the element +Rotates the element. --- -Skews the element +Skews the element. #### --answer-- -Moves the element +Moves the element. ### --question-- @@ -153,7 +153,7 @@ What does accessibility focus on in web design? #### --distractors-- -Color choice +Color choice. --- @@ -161,11 +161,11 @@ Responsiveness --- -Layout complexity +Layout complexity. #### --answer-- -Usability for all users +Usability for all users. ### --question-- @@ -175,19 +175,19 @@ Where is `@keyframes` written? #### --distractors-- -Inside HTML tags +Inside HTML tags. --- -Inside CSS selectors +Inside CSS selectors. --- -In JavaScript +In JavaScript. #### --answer-- -In CSS +In CSS. ### --question-- @@ -219,19 +219,19 @@ Why is providing video captions important? #### --distractors-- -To improve SEO +To improve SEO. --- -To comply with web standards +To comply with web standards. --- -To enhance visuals +To enhance visuals. #### --answer-- -To provide accessibility for hearing impaired users +To provide accessibility for hearing impaired users. ### --question-- @@ -319,7 +319,7 @@ To adjust the layout. #### --answer-- -To highlight focused elements +To highlight focused elements. ### --question-- @@ -395,19 +395,19 @@ What does the animation shorthand property include? #### --distractors-- -Only animation name +Only animation name. --- -Only animation timing +Only animation timing. --- -Only animation duration +Only animation duration. #### --answer-- -All animation properties +All animation properties. ### --question-- @@ -417,7 +417,7 @@ What is the effect of using the `ease-in-out` timing function? #### --distractors-- -The animation will start fast and end slow +The animation will start fast and end slow. --- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md index 8e578e4f09..725a82871d 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md @@ -7,7 +7,7 @@ dashedName: quiz-css-attribute-selectors # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md index 7558dd38a0..9a0fb9a439 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md @@ -7,7 +7,7 @@ dashedName: quiz-css-backgrounds-and-borders # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -61,23 +61,23 @@ Which property is used to control the position of the list item marker? #### --text-- -Which of the following is NOT a valid value for the `list-style-type` property? +What does the `line-height` property do? #### --distractors-- -`decimal` +It is used to set the background size for an element. --- -`disc` +It is used to style links that have not be visited by the user. --- -`square` +It is used to create space to the right of list items. #### --answer-- -`lower-arabic` +It is used to create space between lines of text. ### --question-- @@ -87,15 +87,15 @@ Which pseudo-class is used to style links when a user hovers over them? #### --distractors-- -`:active` +`:hovered` --- -`:link` +`:hovering` --- -`:visited` +`:hasHovered` #### --answer-- @@ -149,45 +149,45 @@ Which CSS property can be used to control the size of a background image? #### --text-- -How can you make a background image cover the entire element, maintaining aspect ratio? +Which of the following is the correct way to apply a solid red top border to an element? #### --distractors-- -`background-size: contain` +`set-top-border: 3px solid red;` --- -`background-repeat: stretch` +`border-top: apply 3px solid red;` --- -`background-fit: full` +`top-border: 3px solid red;` #### --answer-- -`background-size: cover` +`border-top: 3px solid red;` ### --question-- #### --text-- -What does `background-attachment: fixed` do? +Which of the following is NOT a valid `border` property? #### --distractors-- -The background moves with the scrolling content +`border-bottom` --- -The background scrolls twice as fast +`border-right` --- -The background image is resized to fill the screen +`border-top` #### --answer-- -The background stays fixed while the content scrolls +`border-side` ### --question-- @@ -215,45 +215,61 @@ Which of the following is a valid `border-style` value? #### --text-- -How can you make a link change color when clicked? +Which of the following is the correct way to apply borders using the shorthand property? #### --distractors-- -Use the `:link` pseudo-class +```css +.box { + borders: 1px solid black; +} +``` --- -Use the `:visited` pseudo-class +```css +.box { + borderShort: 1px solid black; +} +``` --- -Use the `:hover` pseudo-class +```css +.box { + border-short: 1px solid black; +} +``` #### --answer-- -Use the `:active` pseudo-class +```css +.box { + border: 1px solid black; +} +``` ### --question-- #### --text-- -What is the correct CSS property to create an outline around an element, besides using the `border` property? +What is the role of the `linear-gradient` function? #### --distractors-- -`border-wide` +It is used to set the style of an element's border. --- -`box-shadow` +It is used to determine how background images should be repeated along the horizontal and vertical axes. --- -`border-img` +It is used to style an element that was activated by the user. #### --answer-- -`outline` +It is used to create a transition between multiple colors along a straight line. ### --question-- @@ -281,95 +297,95 @@ Which value for the `background-repeat` property ensures the image repeats horiz #### --text-- -What's the purpose of the `border-radius` property? +What is the purpose of the `border-radius` property? #### --distractors-- -To create shadows around the border +To create shadows around the border. --- -To change the width of the border +To change the width of the border. --- -To make the border disappear +To make the border disappear. #### --answer-- -To round the corners of an element +To round the corners of an element. ### --question-- #### --text-- -Which property is used to add space between the border and the content? +Which of the following is NOT a valid value for the `background-position` property? #### --distractors-- -`margin` +`top` --- -`border-spacing` +`center` --- -`border-width` +`bottom` #### --answer-- -`padding` +`side` ### --question-- #### --text-- -How can you make a background image repeat only vertically? +Which of the following `background-repeat` values can be used to repeat a background image vertically? #### --distractors-- -`background-repeat: repeat-x` +`repeat-x` --- -`background-repeat: vertical-only` +`vertical-only` --- -`background-repeat: stretch` +`stretch` #### --answer-- -`background-repeat: repeat-y` +`repeat-y` ### --question-- #### --text-- -What does `background-position: center` do to a background image? +What does `background-position: center;` do to a background image? #### --distractors-- -It aligns the background image to the top of the element +It aligns the background image to the top of the element. --- -It repeats the background image horizontally and vertically +It repeats the background image horizontally and vertically. --- -It scales the background image to fill the entire element +It scales the background image to fill the entire element. #### --answer-- -It positions the background image in the center of the element +It positions the background image in the center of the element. ### --question-- #### --text-- -Which of these is NOT a valid border value? +Which of these is NOT a valid `border` value? #### --distractors-- @@ -381,7 +397,7 @@ Which of these is NOT a valid border value? --- -`2px grooved red` +`2px dashed red` #### --answer-- @@ -391,65 +407,81 @@ Which of these is NOT a valid border value? #### --text-- -How can you ensure that gradients used in web design are accessible? +What is does the `radial-gradient` function do? #### --distractors-- -Use only two colors in the gradient +It creates a background that transitions between multiple colors along a straight line. --- -Use gradients only for decorative purposes +It specifies whether the background image should scroll with the content or remain fixed in place. --- -Avoid using gradients in the background +It is used to style an element that was activated by the user. #### --answer-- -Ensure sufficient contrast between the gradient and any text. +It creates an image that radiates from a particular point and gradually transitions between multiple colors. ### --question-- #### --text-- -Which value for the `background-size` property will resize the background image to fit within the container while preserving the image's aspect ratio? +Which of the following is NOT a valid pseudo-class? #### --distractors-- -`fill` +`:focus` --- -`stretch` +`:visited` --- -`repeat` +`:link` #### --answer-- -`contain` +`:before` ### --question-- #### --text-- -How do you make an image border have rounded corners in CSS? +Which of the following shows the `background` shorthand property being used properly? #### --distractors-- -`border-style: round` +```css +body { + background: apply url("example-url-goes-here"); +} +``` --- -`border-corners: circle` +```css +body { + background: set url("example-url-goes-here"); +} +``` --- -`border-rounding: 10px` +```css +body { + background: 2px solid red url("example-url-goes-here"); +} +``` #### --answer-- -`border-radius: 10px` +```css +body { + background: no-repeat url("example-url-goes-here"); +} +``` diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md index 449e3fe6e7..4671ada16c 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md @@ -7,7 +7,7 @@ dashedName: quiz-css-colors # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,111 +17,111 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -Which of the following is a valid way to represent a color in CSS? +Which of these color systems cannot be used to set a color in CSS? #### --distractors-- -`color-value: black;` +RGB --- -`text-color: blue;` +HSL --- -`font-color: red;` +HEX #### --answer-- -`#ff5733` +CMYK ### --question-- #### --text-- -What is the correct syntax for setting the background color of an element? +What are the primary colors in color theory? #### --distractors-- -`bg-color: red;` +`Green`, `Blue`, `Purple` --- -`background_color: red;` +`Orange`, `Green`, `Purple` --- -`style: background-color: red;` +`Yellow`, `Green`, `Red` #### --answer-- -`background: red;` +`Yellow`, `Blue`, `Red` ### --question-- #### --text-- -How can you set the transparency of an element to 50%? +Which type of color scheme uses colors that are opposite each other on the color wheel? #### --distractors-- -`bg-opacity: 0.5;` +Analogous --- -`transparency: 50%;` +Triadic --- -`alpha: 0.5;` +Monochromatic #### --answer-- -`opacity: 0.5;` +Complementary ### --question-- #### --text-- -What is the equivalent `HSL` value for the color `#FF0000`? +Which type of color scheme uses colors that are adjacent to each other on the color wheel? #### --distractors-- -`hsl(180%, 100%, 50%)` +Complementary --- -`hsl(180, 100%, 50%)` +Triadic --- -`hsl(360, 100%, 50%)` +Monochromatic #### --answer-- -`hsl(0, 100%, 50%)` +Analogous ### --question-- #### --text-- -How can you set the color of an element to a random color? +What is the term for colors that are created by mixing equal parts of two primary colors? #### --distractors-- -`color: random();` +Tertiary --- -`color: #random;` +Complementary --- -`color: any();` +Analogous #### --answer-- -There is no direct way to do so. +Secondary ### --question-- @@ -237,45 +237,53 @@ Which of the following hex codes represents a shade of red? #### --text-- -Which keyword sets the text color to inherit from the parent element? +How many colors are required to create a valid CSS gradient? #### --distractors-- -`null` +At least 4. --- -`auto` +Exactly 2. --- -`default` +Exactly 3. #### --answer-- -`inherit` +At least 2. ### --question-- #### --text-- -How many colors are required to create a valid CSS gradient? +Which is NOT a valid way to apply a linear-gradient? #### --distractors-- -At least `4` +```css +background: linear-gradient(to right, red, blue); +``` --- -Exactly `2` +```css +background: linear-gradient(90deg, red, green, blue); +``` --- -Exactly `3` +```css +background: linear-gradient(#F00, #00F); +``` #### --answer-- -At least `2` +```css +background: linear-gradient(up, red, blue); +``` ### --question-- @@ -285,41 +293,41 @@ What unit is used to express the lightness value in the `hsl` color model? #### --distractors-- -`Degrees` +Degrees --- -`Hex` +Hex --- -`Pixels` +Pixels #### --answer-- -`Percent (%)` +Percent ### --question-- #### --text-- -Which CSS property would you use to add a solid color around an element? +What does the `rgb()` function stand for? #### --distractors-- -`color` +`Red`, `Gray`, `Black` --- -`outline-color` +`Radiant`, `Glow`, `Blend` --- -`text-color` +`Rendered`, `Graphic`, `Background` #### --answer-- -`border-color` +`Red`, `Green`, `Blue` ### --question-- @@ -329,37 +337,37 @@ What does the `hsl()` function stand for? #### --distractors-- -`Hue, Saturation, Luminosity` +`Hue`, `Saturation`, `Luminosity` --- -`Hue, Shadow, Lightness` +`Hue`, `Shadow`, `Lightness` --- -`Hue, Shadow, Luminosity` +`Hue`, `Shadow`, `Luminosity` #### --answer-- -`Hue, Saturation, Lightness` +`Hue`, `Saturation`, `Lightness` ### --question-- #### --text-- -Which of these is a valid CSS color keyword? +Which of these is a valid CSS named color? #### --distractors-- -`purple-red` +`hsl(yellow)` --- -`electricblue` +`rgb(red)` --- -`goldy` +`#blue` #### --answer-- @@ -391,113 +399,88 @@ What is the maximum value allowed for a single color component in the `RGB` colo #### --text-- -Which color model includes the `hue` component? +Which of these correctly uses one of the color models to set the background color? #### --distractors-- -`rgb` +```css +background: rgb(50%, 255, 155); +``` --- -`hex` +```css +background: #blue; +``` --- -`cmyk` +```css +background: #0I0I0I; +``` #### --answer-- -`hsl` +```css +background: hsl(50, 50%, 50%); +``` ### --question-- #### --text-- -Which of the following is the correct syntax to create a CSS variable with a fallback value? +Which of these sets the opacity of the color? #### --distractors-- ```css -.element { - color: var(--main-color; red); -} +hsl(0, 20%, 30%, 50%) ``` --- ```css -.element { - color: var(--main-color); -} +rgb(20, 30, 80, 0.5) ``` --- ```css -.element { - color: var(--main-color: red); -} +rgba(20, 30, 80) ``` #### --answer-- ```css -.element { - color: var(--main-color, red); -} +hsla(0, 20%, 30%, 50%) ``` ### --question-- #### --text-- -How can you use CSS variables to dynamically change the color of multiple elements? +Which of the following is the correct way to give an element a top-to-bottom red-to-blue gradient background? #### --distractors-- ```css -:root { - primary-color: blue; -} - -.element1, .element2 { - color: --primary-color; -} +background: radial-gradient(red, blue) ``` --- ```css -body { - --color: blue; -} - -.element1, .element2 { - color: var(color); -} +background: radial-gradient(blue, red) ``` --- ```css -:root { - primary: blue; -} - -.element1, .element2 { - color: var(--primary); -} +background: linear-gradient(blue, red) ``` #### --answer-- ```css -:root { - --primary-color: blue; -} - -.element1, .element2 { - color: var(--primary-color); -} +background: linear-gradient(red, blue) ``` - diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md index 64800f658e..68a68c012c 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md @@ -7,7 +7,7 @@ dashedName: quiz-css-flexbox # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -44,32 +44,32 @@ What css property is set to enable the flexbox layout for the `div` element? #### --distractors-- ```css -div { - flex: 1; +div { + flex: 1; } ``` --- ```css -div { - flex-direction: row; +div { + flex-direction: row; } ``` --- ```css -div { - flex-wrap: wrap; +div { + flex-wrap: wrap; } ``` #### --answer-- ```css -div { - display: flex; +div { + display: flex; } ``` @@ -77,7 +77,7 @@ div { #### --text-- -Flexbox defaults to fit all children within a single row. What property can be modified when there are too many children within one row, and you want to spread them out into multiple rows? +Which CSS property lets flex items wrap onto a new row when the current row is full? #### --distractors-- @@ -103,19 +103,19 @@ What does the flexbox property `justify-content` control? #### --distractors-- -It controls the direction of the children elements of the flexbox container. +It controls the direction of the child elements of the flexbox container. --- -It controls the text style of the children elements of the flexbox container. +It controls the text style of the child elements of the flexbox container. --- -It controls the alignment of the children elements within the flexbox container. +It controls the alignment of the child elements within the flexbox container. #### --answer-- -It controls the distribution of the children elements on the main axis. +It controls the distribution of the child elements on the main axis. ### --question-- @@ -143,7 +143,7 @@ What property controls the direction of the elements within the flexbox containe #### --text-- -What CSS properties would you use to make a `.container` element's items flow from left to right, change lines when an item exceeds container width, and have new items go on top of the previous line? +Which CSS properties can be used to make flex items flow from left to right, and have the new flex item appear on top of the previous one if the width of the current row is exceeded? #### --distractors-- @@ -276,7 +276,7 @@ What CSS properties would you use to center an element within a flex container h #### --text-- -What value of `flex-direction` makes the children elements go from right to left? +What value of `flex-direction` makes the flex items go from right to left? #### --distractors-- @@ -324,7 +324,7 @@ What does the `stretch` value in `align-items` do? #### --distractors-- -Items are packed flush to each other toward the start edge of the container. +Items are packed directly against each other toward the start edge of the container. --- @@ -332,7 +332,7 @@ Items are aligned such that their flex container baselines align. --- -Items are packed flush to each other toward the end edge of the container. +Items are packed directly against each other toward the end edge of the container. #### --answer-- @@ -342,7 +342,7 @@ Auto-size items to be equally large to fill the container. #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, have the same spacing between each pair of adjacent items, and have items whose sides are flush against the main axis edge? +Which `justify-content` value places the first item at the start, the last item at the end, and evenly spaces the other items between them along the main axis? #### --distractors-- @@ -364,7 +364,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, and have the same spacing between each pair of adjacent items and against the main axis edge? +Which `justify-content` value spaces items so that the gaps between every pair of adjacent items and the container’s edges are all equal? #### --distractors-- @@ -386,7 +386,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, have the same spacing between each pair of adjacent items, and have items on the sides with half the spacing against the main axis edge? +Which `justify-content` value spaces items equally along the main axis while leaving half that amount of space at the container’s edges? #### --distractors-- @@ -408,7 +408,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `align-items` will make it so items are flush against the cross-axis start? +Which value for `align-items` will make it so items are directly against the cross-axis start? #### --distractors-- @@ -430,7 +430,7 @@ Which value for `align-items` will make it so items are flush against the cross- #### --text-- -Which value for `align-items` will make it so items are flush against the cross-axis end? +Which value for `align-items` will make it so items are directly against the cross-axis end? #### --distractors-- @@ -452,7 +452,7 @@ Which value for `align-items` will make it so items are flush against the cross- #### --text-- -Which value for `flex-direction` will make it so items are aligned along the main axis from left to right. +Which value for `flex-direction` will make it so items are aligned along the main axis from left to right? #### --distractors-- @@ -474,7 +474,7 @@ Which value for `flex-direction` will make it so items are aligned along the mai #### --text-- -Which value for `flex-direction` will make it so items are aligned along the cross axis from top to bottom. +Which value for `flex-direction` will make it so items are aligned along the cross axis from top to bottom? #### --distractors-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md index 212a4d9174..511a8f7cf3 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md @@ -7,7 +7,7 @@ dashedName: quiz-css-grid # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -39,45 +39,45 @@ A two-dimensional layout for HTML documents. #### --text-- -Which property and attribute are used to turn an element into a grid container? +Which of the following is the correct way to create a grid container? #### --distractors-- -`display: grid-area` +`display: grid-area;` --- -`grid: grid-template` +`grid: grid-template;` --- -`grid-template: set` +`grid-template: set;` #### --answer-- -`display: grid` +`display: grid;` ### --question-- #### --text-- -Which one of these options for the `grid-template-columns` property will result in a middle column that is 80 relative units wide, and two columns taking up the remaining space? +What does the `grid-template-columns` property do? #### --distractors-- -`10% 80rem 10%` +Defines two columns and three rows for a grid container. --- -`1fr 8fr 1fr` +Sets all columns for the grid layout to a fixed length. --- -`10rem 80rem 10rem` +Creates a two column grid layout container. #### --answer-- -`1fr 80rem 1fr` +Defines the number of columns in a grid layout. ### --question-- @@ -95,11 +95,11 @@ Creates a template for creating new grid rows. --- -Specifies a default row size. +Specifies a default row size in the grid container. #### --answer-- -Specifies the number and heights of the rows in a grid layout. +Specifies the number and height for each row in a grid layout. ### --question-- @@ -121,7 +121,7 @@ Sets the minimal size of the element for browser working in full-screen mode. #### --answer-- -Defines a size range between the first and second value. +Sets the minimum and maximum sizes for a track. ### --question-- @@ -149,45 +149,45 @@ What is the shorthand for the `column-gap` and `row-gap` properties? #### --text-- -Which property defines on which row line the item will start? +What is the difference between an implicit and explicit grid? #### --distractors-- -`row-start` +Implicit grids use the `grid-template-columns` property while explicit grids use the `grid-template-rows` property. --- -`grid-row-begin` +Explicit grids use the `grid-template-columns` property while implicit grids use the `grid-template-rows` property. --- -`grid-row` +Implicit grids use the `grid-template-columns` or `grid-template-rows` properties to create columns while rows and columns are automatically created in explicit grids. #### --answer-- -`grid-row-start` +Explicit grids use the `grid-template-columns` or `grid-template-rows` properties to create columns while rows and columns are automatically created in implicit grids. ### --question-- #### --text-- -Which property automatically allocates rows based on a fixed size? +Which of the following units represents a fraction of the space within the grid container? #### --distractors-- -`grid-rows-size` +`fractional` --- -`grid-template` +`frac` --- -`grid-row` +`f` #### --answer-- -`grid-auto-rows` +`fr` ### --question-- @@ -227,7 +227,7 @@ Aligns text in the grid item vertically. --- -Specifies the number of columns in a grid element. +Sets two columns for a grid container. #### --answer-- @@ -241,41 +241,41 @@ How do you create four columns of equal width? #### --distractors-- -`grid-template-columns: repeat(4)` +`grid-template-columns: repeat(4);` --- -`grid-template-columns: 1, 1, 1, 1,` +`grid-template-columns: repeat(1, 4);` --- -`grid-column: repeat(4, 1fr)` +`grid-template-columns: repeat(1fr, 4);` #### --answer-- -`grid-template-columns: repeat(4, 1fr)` +`grid-template-columns: repeat(4, 1fr);` ### --question-- #### --text-- -Which property and value will make an element span the full width of the grid? +What does the `grid-template-areas` property do? #### --distractors-- -`grid-column: 1 / 1` +It is used to specify where the item begins on a line in the grid container. --- -`width: 100%` +It is used to create gaps between tracks in the container. --- -`grid-column: 100%` +It is used to repeat sections in the track listing. #### --answer-- -`grid-column: 1 / -1` +It is used to provide a name for the items you are going to position on the grid. ### --question-- @@ -303,111 +303,182 @@ Controls how auto-placed elements get inserted to the grid. #### --text-- -What does the secondary value `dense` do in the `grid-auto-flow` property? +Which of the following is the correct way to use the `grid-template-areas` property? #### --distractors-- -Narrows the grid container to fit to its content width. - ---- - -Groups grid items of the same size. - ---- - -Sorts grid items based on their size. +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: set( + "header header" + "sidebar main" + "footer footer" + ); + gap: 20px; +} +``` + +--- + +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: apply( + "header header" + "sidebar main" + "footer footer" + ); + gap: 20px; +} +``` + +--- + +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: set-areas; + gap: 20px; +} +``` #### --answer-- -Place smaller items to fill gaps in the grid. +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header" + "sidebar main" + "footer footer"; + gap: 20px; +} +``` ### --question-- #### --text-- -Which one of these options is NOT a unit used for the `gap` property? +Which of the following is the correct way to work with the `grid-auto-flow` property? #### --distractors-- -`px` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: none; + grid-auto-columns: 1fr; +} +``` --- -`%` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: allow; + grid-auto-columns: 1fr; +} +``` --- -`em` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: set; + grid-auto-columns: 1fr; +} +``` #### --answer-- -`fr` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; +} +``` ### --question-- #### --text-- -How do you make a grid item take up 2 rows using the `grid-row-end` property? +Which of the following is NOT a valid grid property? #### --distractors-- -`grid-row-end: 2 / 2` +`gap` --- -`grid-row-end: -2` +`grid-column` --- -`grid-row-end: 2` +`grid-template-columns` #### --answer-- -`grid-row-end: span 2` +`grid-set` ### --question-- #### --text-- -Which of these properties is NOT used to align items inside a grid element? +Which of these properties can be used to center items inside a grid element? #### --distractors-- -`align-items` +`allow-items` --- -`place-items` +`set-items` --- -`justify-items` +`center-items` #### --answer-- -`center-items` +`align-items` ### --question-- #### --text-- -Which of these properties can be used as a shorthand for the `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end` properties? +Which of the following is a correct value to use with the `grid-auto-columns` property? #### --distractors-- -`grid-section` +`grid-auto-columns: unset-grid;` --- -`grid-item` +`grid-auto-columns: revert-grid;` --- -`grid-row-column` +`grid-auto-columns: set-content(20%);` #### --answer-- -`grid-area` +`grid-auto-columns: 1fr;` ### --question-- @@ -435,21 +506,45 @@ Spaces between two adjacent grid lines. #### --text-- -How can you use dev tools to debug the CSS Grid layout? +Which of the following is the correct way to use the `minmax()` function? #### --distractors-- -To resize the elements to fill out the gaps in the grid. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(apply); +} +``` --- -To drag-and-drop elements inside the grid. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(); +} +``` --- -To automatically fix overlaying grid elements. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(set); +} +``` #### --answer-- -To preview the layout of grid lines. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(150px, auto); +} +``` diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md index 96fa9703af..cafa970cf8 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md @@ -7,7 +7,7 @@ dashedName: quiz-css-layout-and-effects # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What happens when there is too much content to fit in an element box? +What term is used in CSS to describe when an element's content exceeds the size of its container? #### --distractors-- @@ -39,23 +39,23 @@ Overflow #### --text-- -What is the default behavior of CSS when there is overflow? +What is the default behavior of CSS when content overflows an element? #### --distractors-- -Content is hidden +Hiding the content. --- -Content is clipped +Clipping the content. --- -Content is resized +Resizing the content. #### --answer-- -Content is visible +Keeping the content visible. ### --question-- @@ -65,63 +65,63 @@ Why does CSS typically avoid hiding content when there is overflow? #### --distractors-- -To enhance page design by hiding irrelevant content +To maintain the original layout and design. --- -To save memory and load pages faster +To prevent performance issues in the browser. --- -To automatically fix broken layout issues +To allow for better search engine optimization. #### --answer-- -To prevent data loss and make issues noticeable +To ensure all content is accessible to users. ### --question-- #### --text-- -How can you handle overflow in CSS to hide content or add scrollbars? +How can you handle vertical overflow in CSS by hiding content or displaying scrollbars? #### --distractors-- -Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars +Use `overflow-y: visible` to hide content and `overflow-y: auto` to always display scrollbars. --- -Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars +Use `overflow-y: collapse` to hide content and `overflow-y: expand` to display scrollbars. --- -Use `overflow: none` to hide content and `overflow: show` to display scrollbars +Use `overflow-y: none` to hide content and `overflow-y: show` to display scrollbars. #### --answer-- -Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars +Use `overflow-y: hidden` to hide content and `overflow-y: scroll` to always display scrollbars. ### --question-- #### --text-- -How can you specify different scrolling behaviors for the x-axis and y-axis in CSS? +How can you specify different horizontal and vertical scrolling behaviors in CSS? #### --distractors-- -By using `scroll-x` and `scroll-y` properties +By using the `scroll-x` and `scroll-y` properties. --- -By using `overflow-x` and `overflow-y` separately in every case +By specifying the same value for `overflow-x` and `overflow-y`. --- -By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x` +By specifying two values for the `overflow` property, where the first value applies to `overflow-y` and the second value to `overflow-x`. #### --answer-- -By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y` +By specifying two values for the `overflow` property, where the first value applies to `overflow-x` and the second value to `overflow-y`. ### --question-- @@ -131,47 +131,47 @@ What does the `transform` CSS property allow you to do? #### --distractors-- -Change the color and font style of an element +Change the color and font style of an element. --- -Adjust the margin and padding of an element +Adjust the margin and padding of an element. --- -Modify the visibility and display of an element +Modify the visibility and display of an element. #### --answer-- -Rotate, scale, skew, or translate an element +Rotate, scale, skew, and translate an element. ### --question-- #### --text-- -What does the `transform-box: fill-box` property do in an animation that rotates an element? +How does the `transform: translate(15px, 200px)` property modify an element? #### --distractors-- -It resizes the element to fit the canvas during the transformation +It moves the element 15 pixels to the left and 200 pixels down from its original position. --- -It changes the background of the element during transformation +It rotates the element 15 degrees in a clockwise direction. --- -It sets the transform origin to the top-left corner of the element +It moves the element 15 pixels to the right and 200 pixels up from its original position. #### --answer-- -It sets the transform origin to the center of the element's bounding box, allowing it to spin in place +It moves the element 15 pixels to the right and 200 pixels down from its original position. ### --question-- #### --text-- -What is the purpose of CSS's `overflow-x` and `overflow-y` properties? +What is the purpose of the CSS properties `overflow-x` and `overflow-y`? #### --distractors-- @@ -193,45 +193,45 @@ They control the horizontal and vertical overflow of an element's content. #### --text-- -How does margin affect the size of an element in CSS? +What is the purpose of the `margin` property in CSS? #### --distractors-- -Margin increases the actual size of the element's box +It defines the space between the content and the border of an element. --- -Margin has no effect on the element's size or position +It defines the space between the border and the padding of an element. --- -Margin decreases the total area the element occupies on the page +It defines the width and height of an element. #### --answer-- -Margin affects the total area an element occupies but is not part of the actual size of the box +It defines the space around an element, outside of its border. ### --question-- #### --text-- -What does the content area of an element in CSS represent? +What does the content area of an element represent in CSS? #### --distractors-- -It defines the margins and padding around the element +It defines the margins and padding around the element. --- -It specifies the border thickness of the element +It defines the thickness of the element's border. --- -It controls the visibility of the element on the page +It controls the visibility of the element on the page. #### --answer-- -It contains the "real" content of the element, such as text, images, or videos +It contains the actual content of the element, such as text, images, and videos. ### --question-- @@ -241,19 +241,19 @@ What is the difference between `content-box` and `border-box` in CSS? #### --distractors-- -`content-box` includes padding and border, while `border-box` includes only content dimensions +`content-box` includes padding and border, while `border-box` includes only content dimensions. --- -Both `content-box` and `border-box` include only the border dimensions +Both `content-box` and `border-box` include only the border dimensions. --- -`content-box` is used for 2D elements, while `border-box` is used for 3D elements +`content-box` is used for 2D elements, while `border-box` is used for 3D elements. #### --answer-- -`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions +`content-box` includes only content dimensions, while `border-box` includes content, padding, and border in the dimensions. ### --question-- @@ -263,47 +263,47 @@ What is the purpose of CSS resets? #### --distractors-- -To apply default styles to all elements for faster loading +To apply default styles to all elements for faster loading. --- -To minimize the size of CSS files by removing unused styles +To minimize the size of CSS files by removing unused styles. --- -To optimize images and fonts for better performance +To optimize images and fonts for better performance. #### --answer-- -To remove default browser styling and create a consistent baseline for styling across different browsers +To remove default browser styling and ensure consistent styling across browsers. ### --question-- #### --text-- -What are the common types of CSS resets? +Which of the following is a common example of a CSS reset? #### --distractors-- -Bootstrap Reset, Tailwind Reset, and Foundation Reset +Bootstrap.css --- -Simple Reset, Comprehensive Reset, and Adaptive Reset +Reset.css --- -Minimal Reset, Advanced Reset, and Legacy Reset +Restore.css #### --answer-- -Normalize.css, Eric Meyer's Reset, and HTML5 Reset +Normalize.css ### --question-- #### --text-- -Which CSS property is used to apply transformations such as rotation, scaling, and translation to elements? +Which CSS property is used to apply changes such as rotation, scaling, and translation to elements? #### --distractors-- @@ -325,131 +325,131 @@ Which CSS property is used to apply transformations such as rotation, scaling, a #### --text-- -How is the total width of an element calculated in CSS? +How is the total width of an element calculated in CSS when using the `border-box` value for the `box-sizing` property? #### --distractors-- -Total width = width + margin + padding + border +Total Width = Content Width + Border + Margin --- -Total width = width + margin + padding +Total Width = Content Width + Padding + Border + Margin --- -Total width = width + margin + border +Total Width = Content Width #### --answer-- -Total width = width + left padding + right padding + left border + right border +Total Width = Content Width + Padding + Border ### --question-- #### --text-- -What does the filter property in CSS do? +What is the purpose of the `filter` property in CSS? #### --distractors-- -It changes the layout of the element on the page +Changing the scale and rotation of an element. --- -It changes the background color and texture of an element +Changing the background color and texture of an element. --- -It alters the size and position of an element +Altering the size and position of an element. #### --answer-- -It applies visual effects like blur and saturation to an element +Modifying the visual appearance of an element by using various graphical effects. ### --question-- #### --text-- -How is the `filter` property specified in CSS? +What does the CSS property `filter: grayscale(50%);` do to an element? #### --distractors-- -As only a single function, where percentage values must be used +It increases the brightness of the element by 50%. --- -As `block` or `inline`, with values expressed in pixels +It decreases the contrast of the element by 50%. --- -As `none` or multiple functions, but only percentage values are accepted +It applies a sepia effect to the element. #### --answer-- -As `none` or one or more functions, where percentage values can also be expressed as decimals +It applies a 50% grayscale effect to the element. ### --question-- #### --text-- -What does the `contrast()` function in CSS do? +What is the purpose of the `contrast()` function in CSS? #### --distractors-- -Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white +It adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white. --- -Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it +It adjusts the contrast of the image, where `100%` makes it grey, `0%` has no effect, and values over `100%` increase contrast. --- -Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque +It adjusts the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque. #### --answer-- -Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast +It adjusts the contrast of the image, where `0%` makes it grey, `100%` has no effect, and values over `100%` increase contrast. ### --question-- #### --text-- -What does the `hue-rotate()` function in CSS do? +What is the purpose of the `hue-rotate()` function in CSS? #### --distractors-- -It changes the brightness of the input image based on degrees +It changes the brightness of an image. --- -It rotates an element's size and position in the document +It rotates an image clockwise by a certain number of degrees. --- -It adjusts the saturation and contrast of the input image +It adjusts the saturation and contrast of an image. #### --answer-- -It applies a hue rotation, where the `` value defines the degrees around the hue color circle +It applies a color shift, where the `angle` value defines the number of degrees to rotate around the color circle. ### --question-- #### --text-- -What happens when two animated filters have different function list lengths in CSS? +What is margin collapsing in CSS? #### --distractors-- -The shorter list's filters override the longer list's filters +When the margin of an element is set to a negative number and this causes issues in the layout. --- -The filters are discarded and no animation is applied +When the margin of an element is decreased by the padding and this changes the element's dimensions. --- -Only the first filter function in each list is animated +When the margin of an element is ignored by the browser, so it's not visible. #### --answer-- -The longer list's missing equivalent filter functions are added to the shorter list using their initial values +When the vertical margins of adjacent elements overlap, so they are combined into a single margin. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md index 1becf6756e..28247f60a1 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md @@ -7,7 +7,7 @@ dashedName: quiz-css-libraries-and-frameworks # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,19 +21,19 @@ What is a CSS framework? #### --distractors-- -A set of CSS rules +A set of CSS rules. --- -A JavaScript library +A JavaScript library. --- -A coding language +A coding language. #### --answer-- -A library for CSS styles +A library for CSS styles. ### --question-- @@ -65,19 +65,19 @@ What is a key advantage of using a CSS framework? #### --distractors-- -Provides predefined templates +Provides predefined templates. --- -Reduces loading speed +Reduces loading speed. --- -Increases code complexity +Increases code complexity. #### --answer-- -Simplifies design consistency +Simplifies design consistency. ### --question-- @@ -87,19 +87,19 @@ What is a disadvantage of CSS frameworks? #### --distractors-- -Too few components +Too few components. --- -No customization options +No customization options. --- -Improved browser support +Improved browser support. #### --answer-- -Can bloat CSS files +Can bloat CSS files. ### --question-- @@ -131,19 +131,19 @@ What is the primary purpose of the `.container` class in Bootstrap? #### --distractors-- -To add padding to elements +To add padding to elements. --- -To apply a background color +To apply a background color. --- -To center text +To center text. #### --answer-- -To create a fixed-width responsive container +To create a fixed-width responsive container. ### --question-- @@ -153,19 +153,19 @@ What does SCSS stand for? #### --distractors-- -Super Cascading Style Sheets +Super Cascading Style Sheets. --- -Structured CSS +Structured CSS. --- -Simple CSS +Simple CSS. #### --answer-- -Sassy CSS +Sassy CSS. ### --question-- @@ -175,19 +175,19 @@ What benefit do preprocessors like Sass provide? #### --distractors-- -Adds JavaScript functionality +Adds JavaScript functionality. --- -Directly edits HTML +Directly edits HTML. --- -Eliminates CSS +Eliminates CSS. #### --answer-- -Nesting of styles +Nesting of styles. ### --question-- @@ -201,11 +201,11 @@ Comments --- -CSS variables +CSS variables. --- -Inline CSS +Inline CSS. #### --answer-- @@ -219,19 +219,19 @@ What is Bootstrap known for? #### --distractors-- -Static design +Static design. --- -Focus on accessibility +Focus on accessibility. --- -No JavaScript support +No JavaScript support. #### --answer-- -Mobile-first approach +Mobile-first approach. ### --question-- @@ -241,19 +241,19 @@ What does Tailwind CSS focus on? #### --distractors-- -Component-based styling +Component-based styling. --- -Image optimization +Image optimization. --- -Mobile responsiveness +Mobile responsiveness. #### --answer-- -Utility-first design +Utility-first design. ### --question-- @@ -263,19 +263,19 @@ What does a CSS framework typically include? #### --distractors-- -JavaScript functions +JavaScript functions. --- -HTML templates +HTML templates. --- -Database management +Database management. #### --answer-- -Predefined styles and components +Predefined styles and components. ### --question-- @@ -307,15 +307,15 @@ What is a main feature of preprocessors? #### --distractors-- -Linear CSS +Linear CSS. --- -Uncompiled styles +Uncompiled styles. --- -Built-in animations +Built-in animations. #### --answer-- @@ -329,19 +329,19 @@ Which of the following is a drawback of Tailwind CSS? #### --distractors-- -Limited utility classes +Limited utility classes. --- -Lack of documentation +Lack of documentation. --- -Hard to learn +Hard to learn. #### --answer-- -Verbose class names +Verbose class names. ### --question-- @@ -395,19 +395,19 @@ What does Bootstrap's grid system help with? #### --distractors-- -CSS animations +CSS animations. --- -JavaScript functions +JavaScript functions. --- -Image loading +Image loading. #### --answer-- -Responsive layout +Responsive layout. ### --question-- @@ -439,17 +439,17 @@ Why might developers choose Materialize? #### --distractors-- -Strong community support +Strong community support. --- -Easy integration with HTML +Easy integration with HTML. --- -Comprehensive animation support +Comprehensive animation support. #### --answer-- -Focus on material design principles +Focus on material design principles. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md index 9ac0e24c3c..747678072d 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md @@ -7,7 +7,7 @@ dashedName: quiz-css-positioning # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,438 +17,594 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is the main purpose of the `float` property in CSS? +Which of the following is NOT a valid value for the `position` property? #### --distractors-- -To create rounded corners. +`fixed` --- -To control opacity. +`absolute` --- -To center vertically. +`relative` #### --answer-- -To align elements to either the left or the right of their container. +`above` ### --question-- #### --text-- -Which CSS property is used to set the stack order of an element? +What is the main purpose of the `float` property in CSS? #### --distractors-- -`position` +Floats are used to remove an element from its normal flow on the page and automatically position it in the upper right hand side of the webpage. --- -`bg-green` +Floats are used to remove an element from its normal flow on the page and position it to the top of its container. --- -`float` +Floats are used to remove an element from its normal flow on the page and automatically position it to the bottom right hand side of webpage. #### --answer-- -`z-index` +Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. ### --question-- #### --text-- -What happens when you apply `position: relative` to an element in CSS? +Which of the following is an example making a box element float to the left? #### --distractors-- -It removes the element from document flow. +```css +.box { + left: float; + margin-right: 15px; + width: 50px; + height: 50px; + background-color: black; +} +``` --- -It only moves the element relative to the viewport. +```css +.box { + position: float-left; + margin-right: 15px; + width: 50px; + height: 50px; + background-color: black; +} +``` --- -It positions the element in a fixed position relative to the viewport. +```css +.box { + float: left-side; + margin-right: 15px; + width: 50px; + height: 50px; + background-color: black; +} +``` #### --answer-- -It moves the element relative to its default position in the document. +```css +.box { + float: left; + margin-right: 15px; + width: 50px; + height: 50px; + background-color: black; +} +``` ### --question-- #### --text-- -Which CSS property would you use to fix an element at a certain position on the page so that it does not move when scrolling occurs? +What is the role of the `clear` property? #### --distractors-- -`position: absolute` +It is used to determine if an element needs to be moved to the bottom of the page. --- -`position: relative` +It is used to determine if an element needs to be completely cleared from the page. --- -`display: block` +It is used to determine if an element needs to be fixed to the top of the page. #### --answer-- -`position: fixed` +It is used to determine if an element needs to be moved below the floated content. ### --question-- #### --text-- -If an element has `position: absolute`, what element is it positioned relatively to? +Which CSS property is used to control the vertical stacking order of positioned elements that overlap on the page? #### --distractors-- -The closest ancestor with `position: fixed`. +`position` --- -The closest ancestor with `position: absolute`. +`bg-green` --- -The `` element. +`float` #### --answer-- -The closest positioned ancestor with `position` set to `relative`, `absolute`, or `fixed`. +`z-index` ### --question-- #### --text-- -Which positioning method allows an element to stick to a defined position only when you scroll past a certain point? +Which of the following is the correct syntax for relative positioning? #### --distractors-- -`position: float` +```css +.relative { + position: relative-position; + top: 30px; + left: 30px; +} +``` --- -`position: fixed` +```css +.relative { + relative-position: relative; + top: 30px; + left: 30px; +} +``` --- -`position: absolute` +```css +.relative { + relative: position; + top: 30px; + left: 30px; +} +``` #### --answer-- -`position: sticky` - -### --question-- - -#### --text-- - -Given the following code: - ```css -#box1 { +.relative { position: relative; - z-index: 1; + top: 30px; + left: 30px; } +``` -#box2 { - position: relative; - z-index: 2; -} +### --question-- -#box3 { - position: relative; - z-index: -1; -} -``` +#### --text-- -How will `#box3` be positioned on the page? +Which CSS property would you use to fix an element at a certain position on the page so that it does not move when scrolling occurs? #### --distractors-- -It will be stacked above all the other elements on the page. +`position: no-scroll;` --- -It will disappear from view. +`position: relative;` --- -It will stay at the bottom corner of the page. +`display: block;` #### --answer-- -It will be stacked below all the other elements on the page. +`position: fixed;` ### --question-- #### --text-- -How does a floated element affect the layout of surrounding elements? +What does absolute positioning do to an element? #### --distractors-- -Other elements are placed in relation to the floated element. +Absolute positioning is used to determine if an element needs to be moved below the floated content. --- -The surrounding elements ignore the floated element and overlap it. +Absolute positioning is used to position the element within the normal document flow. --- -It will shift surrounding elements behind the floated element. +Absolute positioning is used to control the vertical stacking order of positioned elements that overlap on the page. #### --answer-- -Block elements surrounding it flow around the floated element. +Absolute positioning allows you to take an element out of the normal document flow, making it behave independently from other elements. ### --question-- #### --text-- -What does an element with `position: sticky` require for it to work? +Which of the following is NOT a valid property that you can use for absolute positioning? #### --distractors-- -A `position: relative` parent element. +`right` --- -A `z-index` value greater than 1. +`bottom` --- -A `z-index` of 0 or greater. +`top` #### --answer-- -A declared `top`, `left`, `right`, or `bottom` property. +`side` ### --question-- #### --text-- -What happens when setting the `overflow` property of a parent to `auto` and one of its children has the property `position: sticky`? +What is the key difference between relative and absolute positioning? #### --distractors-- -The child element's sticky behavior is not affected by the `overflow` property of the parent. +Absolute positioning sets the element in a sticky position while relative positioning takes an element out of the normal document flow. --- -The sticky element will maintain its behavior regardless of scrolling. +Relative positioning sets the element in a fixed position while absolute positioning takes an element out of the normal document flow. --- -The sticky element will act as if it has `position: fixed` within the parent. +Absolute positioning positions the element within the normal document flow while relative positioning takes an element out of the normal document flow. #### --answer-- -The child will lose its sticky behavior when the parent scrolls. +Relative positioning positions the element within the normal document flow while absolute positioning takes an element out of the normal document flow. ### --question-- #### --text-- -Which of the following properties is used to offset a positioned element from its normal position? +Which of the following is an example of positioning a box in the upper left hand corner of the page? #### --distractors-- -`float` +```css +.box { + position: absolute; + bottom: 0; + left: 0; + background-color: coral; + width: 50px; + height: 50px; +} +``` --- -`padding-right` +```css +.box { + position: absolute; + top: 0; + right: 0; + background-color: coral; + width: 50px; + height: 50px; +} +``` --- -`margin-right` +```css +.box { + position: absolute; + bottom: 0; + right: 0; + background-color: coral; + width: 50px; + height: 50px; +} +``` #### --answer-- -`right` +```css +.box { + position: absolute; + top: 0; + left: 0; + background-color: coral; + width: 50px; + height: 50px; +} +``` ### --question-- #### --text-- -How does a floated element impact the height of its containing block when the containing block does not have an explicit height defined? +Which positioning method allows an element to stick to a defined position only when you scroll past a certain point? #### --distractors-- -The height of the containing block is automatically expanded to fit the floated element. +Float positioning. --- -The height will automatically adapt to fit all the floated elements. +Fixed positioning. --- -The containing block will automatically apply `clear: both` to fit the floated element. +Absolute positioning. #### --answer-- -The containing block will collapse, completely ignoring its floated element height. +Sticky positioning. ### --question-- #### --text-- -Which of the following CSS techniques is an accepted method for preventing a parent container from shrinking in size when it contains only floated elements? +Which of the following is a correct example of using sticky positioning? #### --distractors-- -Set `float: none` to the container. +```css +.box { + sticky: position; + top: 30px; + right: 30px; + width: 50px; + height: 50px; + background-color: red; +} +``` --- -Add `margin: auto` to the parent container. +```css +.box { + position: sticky-fixed; + top: 30px; + right: 30px; + width: 50px; + height: 50px; + background-color: red; +} +``` --- -Use the `position: relative` on the parent container. +```css +.box { + position: sticky-top; + right: 30px; + width: 50px; + height: 50px; + background-color: red; +} +``` #### --answer-- -Adding the property `overflow: auto` or `overflow: hidden` to the parent container. +```css +.box { + position: sticky; + top: 30px; + right: 30px; + width: 50px; + height: 50px; + background-color: red; +} +``` ### --question-- #### --text-- -When a floating element is followed by non-floating inline elements, how will their layout be affected? +What is the difference between sticky and fixed positioning? #### --distractors-- -The inline elements will be positioned below the floated element. +Sticky elements can only be used in table layouts while fixed elements can be used in any type of CSS layout. --- -Inline elements will always be on top of the floated element. +Sticky elements will always remain in the same position while fixed elements will stick to a certain point then behave like relative elements. --- -The inline elements will overlap the floated element. +Fixed elements will be positioned relative to its normal position while sticky elements will only stick to a certain point then behave like relative elements. #### --answer-- -Inline elements will wrap around the floated element if there is enough space. +Fixed elements will remain in the same position on the screen while sticky elements will only stick to a certain point then behave like relative elements. ### --question-- #### --text-- -What happens when `clear: both` is applied to an element following two floated elements - one left and one right - in a container? +What problem did the `clearfix` hack solve when working with floats? #### --distractors-- -The element will be positioned to the left of the floated elements. +The `clearfix` hack helped solve the issue of floated elements being removed from the normal document flow and being placed in a fixed position on the page. --- -The element will align between the two floated elements. +The `clearfix` hack helped solve the issue of floated elements not being responsive in mobile and tablet layouts. --- -The element will wrap around the floated elements depending on space. +The `clearfix` hack helped solve the issue of floated elements disappearing from the page. #### --answer-- -The element will be underneath both floated elements - the float breaks. +The `clearfix` hack helped solve the issue of overlaps and collapsing in the layouts when multiple floated elements were stacked next to each other. ### --question-- #### --text-- -When does an element with `z-index: auto` create a new stacking context? +Which of the following is a correct example for using the `clearfix` hack? #### --distractors-- -When combined with `position: absolute` or `position: relative`. +```css +.clearfix::before { + position: fixed; + top: 0; + width: 100%; + clear: both; +} +``` --- -When its parent element has `z-index: auto` and `position: fixed`. +```css +.clearfix::after { + position: relative; + top: 30px; + left: 30px; + clear: all; +} +``` --- -When it is combined with `float: left`, if two sibling elements are of the same `z-index` and absolutely positioned. +```css +.clearfix::before { + top: 30px; + clear: none; +} +``` #### --answer-- -In combination with `position: fixed` or `position: sticky`. +```css +.clearfix::after { + content: ""; + display: block; + clear: both; +} +``` ### --question-- #### --text-- -If two sibling elements have the same `z-index` and are both positioned absolutely using `position: absolute`, what determines which one is on top? +What is static positioning? #### --distractors-- -It rearranges the sibling elements in relation to its new position. +This is used to remove an element from its normal flow on the page and automatically position it in the upper right hand side of the webpage. --- -Adding `z-index: auto` to the parent container. +This allows you to take an element out of the normal document flow, making it behave independently from other elements. --- -Using `position: relative` on the parent container. +This allows an element to stick to a defined position only when you scroll past a certain point. #### --answer-- -The document source order (HTML position). +This is the normal flow for the document. Elements are positioned from top to bottom and left to right one after another. ### --question-- #### --text-- -In what way will the property `position: relative` exert an effect on sibling elements in regards to document flow? +Which of the following is an example of setting the navbar to the top of the page using fixed positioning? #### --distractors-- -It removes the element from the normal document flow, which affects the positions of siblings. +```css +.navbar { + fixed: top; + top: 0; + width: 100%; +} +``` --- -The relative element will move by the parent's top and left properties. +```css +.navbar { + upper: fixed; + width: 100%; +} +``` --- -It creates a new stacking context which lifts the element in relation to any siblings. +```css +.navbar { + position: fixed-top; + top: 0; + width: 100%; +} +``` #### --answer-- -It allows the element to shift without affecting the document flow of sibling elements. +```css +.navbar { + position: fixed; + top: 0; + width: 100%; +} +``` ### --question-- #### --text-- -What happens when a `position: relative` element is nested inside of a `position: absolute` parent, with `top` and `left` values set? +Which of the following is a valid value to use for the `z-index` property? #### --distractors-- -It moves relative to the parent element's original position. +`12.0` --- -It moves with respect to the absolute coordinates of the containing parent element. +`none` --- -It will never create a new stacking context regardless of the `z-index` value. +`up` #### --answer-- -It ignores the positioning of the parent and moves relative to its normal position. +`1` ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index 3e9e2dd892..d4d8054993 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -7,7 +7,7 @@ dashedName: quiz-css-pseudo-classes # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -33,13 +33,13 @@ They are selector used to add movement effects to an element during interactions #### --answer-- -They are keywords added to a selector that change how an element looks or behaves when it's in a specific state. +They are keywords added to a selector that style an element based on its state. ### --question-- #### --text-- -Which pseudo-class applies when you hover over an element? +Which pseudo-class applies when a pointing device is being positioned over an element? #### --distractors-- @@ -83,7 +83,7 @@ Which pseudo-element allows you to style the first letter of a paragraph? #### --text-- -Which pseudo-class changes the style of an element when you click on it? +Which pseudo-class changes the style of an element while it is being clicked? #### --distractors-- @@ -105,7 +105,7 @@ Which pseudo-class changes the style of an element when you click on it? #### --text-- -Which pseudo-class is used to select and style an element when it's focused? +Which pseudo-class is used to style an element when it is ready to receive user input, such as a text field being clicked or tabbed into? #### --distractors-- @@ -127,29 +127,45 @@ Which pseudo-class is used to select and style an element when it's focused? #### --text-- -What does the `:hover` pseudo-class do? +Which of the following CSS rules correctly adds the text `Note:` in front of each paragraph element with a class of `note`? #### --distractors-- -It styles your element when you click on it. +```css +.note::before { + content: "Note:"; +} +``` --- -It makes your element float around the screen. +```css +p.note::after { + content: "Note:"; +} +``` --- -It hides elements on click. +```css +p::before { + content: "Note:"; +} +``` #### --answer-- -It styles an element when you hover over it. +```css +p.note::before { + content: "Note:"; +} +``` ### --question-- #### --text-- -Which pseudo-class is used for an input field that is checked? +Which pseudo-class applies to an input field when it is selected or toggled on? #### --distractors-- @@ -209,7 +225,7 @@ li:last-child { #### --text-- -Which pseudo-class applies when an input field is optional? +Which pseudo-class targets input fields that are not required to fill out? #### --distractors-- @@ -253,7 +269,7 @@ It styles elements that are not available for user interaction. #### --text-- -Which pseudo-class is triggered when a form input is valid? +Which pseudo-class applies when a form input meets its validation criteria? #### --distractors-- @@ -283,7 +299,7 @@ Which one of these is not a location pseudo-class? --- -`:scope` +`:any-link` --- @@ -335,23 +351,41 @@ li:nth-child(3) { #### --text-- -Which pseudo-class is used for the current active link? +Which elements will have a `color` of `blue` with the following CSS? + +```css +p:is(.blue, .highlight) { + color: blue; +} +``` #### --distractors-- -`:focus` +```html +

Paragraph 1

+

Paragraph 2

+``` --- -`:hover` +```html +
Paragraph 1
+
Paragraph 2
+``` --- -`:visited` +```html +

Paragraph 1

+Paragraph 2 +``` #### --answer-- -`:active` +```html +

Paragraph 1

+

Paragraph 2

+``` ### --question-- @@ -379,23 +413,29 @@ It selects elements that do not match a given selector. #### --text-- -What does the `:nth-child(4)` pseudo-class do? +What does the following CSS rule do? + +```css +p:first-of-type { + font-style: italic; +} +``` #### --distractors-- -It selects the last child. +It selects the first `p` element in the document. --- -It selects all children. +It selects all `p` elements in the document. --- -It styles odd children. +It selects the first child of every `p` element. #### --answer-- -It selects the fourth child. +It selects the first `p` element within a parent container. ### --question-- @@ -405,19 +445,19 @@ What does the `:last-of-type` pseudo class do? #### --distractors-- -It selects the first child element. +It selects the first child element of a specific type within its parent. --- -It selects the middle element. +It selects the middle child element of a specific type within its parent. --- -It selects every element in a group. +It selects every child element of a specific type within its parent. #### --answer-- -It selects the last sibling element. +It selects the last child element of a specific type within its parent. ### --question-- @@ -453,7 +493,7 @@ Which one of these is a functional pseudo-class? --- -`:last-of-type` +`:match()` --- @@ -483,5 +523,4 @@ Which one of these is not a functional pseudo-class? #### --answer-- -`::before` - +`:contains()` diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md index 0ee4e9ffcf..e979353934 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md @@ -7,7 +7,7 @@ dashedName: quiz-css-relative-and-absolute-units # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,23 +17,23 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -If the body text is `16px`, how much is `1em` in most child elements? +What is an absolute unit? #### --distractors-- -`18px` +Units that adjust dynamically based on screen size. --- -`12px` +Units that depend on the font size of the parent element. --- -It depends on the parent's font size +Units measured in percentages of the viewport. #### --answer-- -`16px` +Fixed length units that are not relative to anything else. ### --question-- @@ -43,41 +43,41 @@ What does `100vw` cover in terms of screen width? #### --distractors-- -100% of the screen width +`100%` of the screen width. --- -100% of the viewport height +`100%` of the viewport height. --- -100% of the parent's width +`100%` of the parent's width. #### --answer-- -100% of the viewport width +`100%` of the viewport width. ### --question-- #### --text-- -If a container is `1000px` wide, how wide is 5% of it? +Which of the following is a relative unit? #### --distractors-- -`100px` +`pt` --- -`500px` +`cm` --- -`5px` +`mm` #### --answer-- -`50px` +`em` ### --question-- @@ -109,41 +109,41 @@ What can the `calc()` function do in CSS? #### --distractors-- -Modify colors dynamically +Modify colors dynamically. --- -Set a fixed width +Set a fixed width. --- -Only work with percentages +Only work with percentages. #### --answer-- -Add, subtract, multiply, or divide different units +Add, subtract, multiply, or divide different units. ### --question-- #### --text-- -On a typical screen with 96 DPI resolution, how many points (`pt`) are in 1 pixel (`px`)? +Which unit is the most commonly used absolute unit in CSS? #### --distractors-- -`1.33pt` +`inch` --- -`1pt` +`rem` --- -`2pt` +`%` #### --answer-- -`0.75pt` +`px` ### --question-- @@ -215,23 +215,23 @@ It adds `10px` to `20%` of the parent's width. #### --text-- -If the parent element's text size is `20px`, how big is `1.5em`? +Which unit is relative to the font size of the root element? #### --distractors-- -`25px` +`px` --- -`15px` +`pt` --- -`20px` +`%` #### --answer-- -`30px` +`rem` ### --question-- @@ -259,45 +259,45 @@ With a root font size of `16px`, how big is `10rem`? #### --text-- -Why might you use `pt` instead of `px` in design? +Why might you use `point` instead of `pixels` in design? #### --distractors-- -Points are scalable +Points are scalable. --- -Points are better for responsive layouts +Points are better for responsive layouts. --- -Points are easier to manage on screens +Points are easier to manage on screens. #### --answer-- -Points are for print design +Points are for print design. ### --question-- #### --text-- -How does `calc(10vh + 50px)` work for height? +Why are `rem` units preferred over `pixels` in typography? #### --distractors-- -It adds `50px` to 10% of the viewport width. +Because they provide fixed sizing regardless of screen resolution. --- -It adds `10px` to 50% of the parent's height. +Because they ensure compatibility with older browsers. --- -It adds `10vh` to 50% of the document width. +Because they are easier to implement in responsive designs. #### --answer-- -It adds `50px` to 10% of the viewport height. +Because they scale proportionally with the user’s browser settings. ### --question-- @@ -307,11 +307,11 @@ How much screen space does `80vw` take? #### --distractors-- -80% of the parent's width +`80%` of the parent's width. --- -100% of the viewport height +`100%` of the viewport height. --- @@ -319,51 +319,51 @@ How much screen space does `80vw` take? #### --answer-- -80% of the viewport width +`80%` of the viewport width. ### --question-- #### --text-- -If the root font size is `18px`, how big is `2rem`? +Which units should you use if you want to make an element occupy a certain width or height by the percentage of the screen? #### --distractors-- -`24px` +`pt` and `px` --- -`18px` +`rem` and `em` --- -`20px` +`pt` and `pc` #### --answer-- -`36px` +`vw` and `vh` ### --question-- #### --text-- -What does `calc(50% + 20px)` do for width? +What does `vw` stand for? #### --distractors-- -It adds `20px` to 50% of the screen width. +Vertical Width. --- -It adds `50px` to the screen width. +Virtual Width. --- -It adds `50%` of the height to `20px`. +Variable Width. #### --answer-- -It adds `50%` of the parent's width to `20px`. +Viewport Width. ### --question-- @@ -373,41 +373,41 @@ What's the key difference between `rem` and `em` in CSS? #### --distractors-- -`rem` is only used for fonts. +`em` is relative to the root element, while rem is relative to the parent element. --- -`rem` is for width, `em` is for fonts. +`rem` is relative to desktop width, while `em` is relative to mobile width. --- -`rem` is always smaller than `em`. +`rem` is relative to the user-defined width, while `em` is relative to the browser width. #### --answer-- -`rem` is based on the root font size, `em` is based on the parent's font size. +`em` is relative to the font size of the parent element, while rem is relative to the root element. ### --question-- #### --text-- -How does `calc(100px + 10%)` work for width? +What is a `vh` unit? #### --distractors-- -It adds `10%` of the screen width to `100px`. +A unit based on the width of the viewport. --- -It adds `10%` of the height to `100px`. +A unit based on the height of the element. --- -It adds `100px` to `10%` of the document. +A unit that adjusts based on font size. #### --answer-- -It adds `10%` of the parent's width to `100px`. +A unit equal to 1% of the viewport height. ### --question-- @@ -435,21 +435,21 @@ It allows the browser to determine the width based on the content and container. #### --text-- -What happens when you use `calc(30vh - 10px)` for height? +What’s a key advantage of the `calc()` function? #### --distractors-- -It subtracts `10px` from the parent's height. +It automatically minifies your CSS files for better performance. --- -It subtracts `30px` from the screen height. +It enables the use of variables within CSS without any preprocessors. --- -It adds `30%` of the parent's height minus `10px`. +It allows embedding JavaScript expressions directly within CSS rules. #### --answer-- -It subtracts `10px` from `30%` of the viewport height. +It lets you determine the value of a CSS property dynamically based on different aspects of the application or viewport. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md index 45ba4f942a..be96efaaee 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md @@ -7,7 +7,7 @@ dashedName: quiz-css-typography # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -43,19 +43,19 @@ What is the purpose of the offset values in the `text-shadow` property, and how #### --distractors-- -They adjust the text's size and weight +They adjust the text's size and weight. --- -They change the shadow color +They change the shadow color. --- -They remove text from the shadow's path +They remove text from the shadow's path. #### --answer-- -They control the horizontal and vertical position of the shadow relative to the text +They control the horizontal and vertical position of the shadow relative to the text. ### --question-- @@ -65,19 +65,19 @@ What does "kerning" mean in typography? #### --distractors-- -The space between lines of text +The space between lines of text. --- -The overall spacing of a text block +The overall spacing of a text block. --- -The size of the font +The size of the font. #### --answer-- -The space between individual letters +The space between individual letters. ### --question-- @@ -87,19 +87,19 @@ What's the most common way to add Google Fonts to a website? #### --distractors-- -Use the `` tag in the HTML file +Use the `` tag in the HTML file. --- -Use the `@import` rule in JavaScript +Use the `@import` rule in JavaScript. --- -Embed the font within an image +Embed the font within an image. #### --answer-- -Use the `` tag in the HTML file +Use the `` tag in the HTML file. ### --question-- @@ -131,7 +131,7 @@ Which one of the following is a web-safe font? #### --distractors-- -Comic Sans MS +Comic Sans MS. --- @@ -143,7 +143,7 @@ Impact #### --answer-- -Times New Roman +Times New Roman. ### --question-- @@ -153,19 +153,19 @@ What does the `@font-face` rule do in CSS? #### --distractors-- -It defines the font size +It defines the font size. --- -It creates a fallback font for web pages +It creates a fallback font for web pages. --- -It adjusts the line height for text +It adjusts the line height for text. #### --answer-- -It allows you to use custom fonts by importing them +It allows you to use custom fonts by importing them. ### --question-- @@ -179,15 +179,15 @@ Typekit --- -Adobe Fonts +Adobe Fonts. --- -Font Universe +Font Universe. #### --answer-- -Google Fonts +Google Fonts. ### --question-- @@ -197,19 +197,19 @@ Why is it important to include multiple font options in the `font-family` proper #### --distractors-- -It reduces page load times +It reduces page load times. --- -It prevents browser compatibility issues +It prevents browser compatibility issues. --- -It gives the page more visual variety +It gives the page more visual variety. #### --answer-- -It ensures a consistent experience in case the custom font doesn't load +It ensures a consistent experience in case the custom font doesn't load. ### --question-- @@ -219,19 +219,19 @@ What is the purpose of the `text-shadow` property in CSS, and how does it enhanc #### --distractors-- -Changes the text color +Changes the text color. --- -Adds a background color to text +Adds a background color to text. --- -Makes text bold +Makes text bold. #### --answer-- -Adds a shadow effect to text, making it stand out or appear 3D +Adds a shadow effect to text, making it stand out or appear 3D. ### --question-- @@ -253,7 +253,7 @@ What CSS property is used to set the font family for an element, and how should #### --answer-- -`font-family`, with multiple fonts listed to ensure compatibility across devices +`font-family`, with multiple fonts listed to ensure compatibility across devices. ### --question-- @@ -263,19 +263,19 @@ Why is typographic hierarchy important in design? #### --distractors-- -It improves the readability of large blocks of text +It improves the readability of large blocks of text. --- -It ensures consistency across different devices +It ensures consistency across different devices. --- -It allows decorative fonts to be used effectively +It allows decorative fonts to be used effectively. #### --answer-- -It helps organize content and guide users through the information +It helps organize content and guide users through the information. ### --question-- @@ -329,19 +329,19 @@ In the `text-shadow` property, how do the horizontal and vertical offsets affect #### --distractors-- -They control the shadow's color +They control the shadow's color. --- -They define the shadow's blur radius +They define the shadow's blur radius. --- -They adjust the opacity of the shadow +They adjust the opacity of the shadow. #### --answer-- -They determine the position of the shadow relative to the text on the x and y axes +They determine the position of the shadow relative to the text on the x and y axes. ### --question-- @@ -351,19 +351,19 @@ For body text, why is a sans-serif font generally considered easier to read on s #### --distractors-- -Serif fonts are more decorative +Serif fonts are more decorative. --- -Sans-serif fonts are thicker +Sans-serif fonts are thicker. --- -Sans-serif fonts use fewer colors +Sans-serif fonts use fewer colors. #### --answer-- -Sans-serif fonts are typically simpler and more legible at smaller sizes on screens +Sans-serif fonts are typically simpler and more legible at smaller sizes on screens. ### --question-- @@ -373,19 +373,19 @@ How do you list multiple font families in the `font-family` property? #### --distractors-- -Separate them with spaces, and list the preferred font first +Separate them with spaces, and list the preferred font first. --- -Enclose them in parentheses +Enclose them in parentheses. --- -Enclose them in curly braces +Enclose them in curly braces. #### --answer-- -Separate them with commas, and list the preferred font first +Separate them with commas, and list the preferred font first. ### --question-- @@ -417,19 +417,19 @@ Which of the following is a good practice when using fonts in web design? #### --distractors-- -Use only one font family throughout the website +Use only one font family throughout the website. --- -Always use decorative fonts for both headings and body text +Always use decorative fonts for both headings and body text. --- -Avoid using fallback fonts at all costs +Avoid using fallback fonts at all costs. #### --answer-- -Combine no more than two or three font families for balance +Combine no more than two or three font families for balance. ### --question-- @@ -439,17 +439,17 @@ What is the purpose of the `line-height` property in CSS? #### --distractors-- -It sets the width of the text +It sets the width of the text. --- -It specifies the text alignment +It specifies the text alignment. --- -It changes the text color +It changes the text color. #### --answer-- -It controls the amount of space between lines of text +It controls the amount of space between lines of text. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md index 7eee5f9ae0..016dbb599c 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md @@ -7,7 +7,7 @@ dashedName: quiz-css-variables # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,29 +17,29 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -If you've declared a custom property for animation speed using `@property`, and a user adjusts their settings for animations in their browser, how would that affect your custom property? Would they be able to see the changes, or does it stick to the value you've set? +Which of the following is NOT a valid descriptor in the `@property` rule? #### --distractors-- -The animations will run slower regardless of user settings +`syntax` --- -The user's settings override your defined speed +`inherits` --- -The animations will completely stop if the user disables them +`initial-value` #### --answer-- -The user's preferences will take priority, and they can adjust how the animations play out +`animation` ### --question-- #### --text-- -In the following code, which value will color have if `--main-color` is not defined? +In the following code, which value will `color` have if `--main-color` is not defined? ```css p { @@ -49,19 +49,19 @@ p { #### --distractors-- -Undefined +`Undefined` --- -No color will be applied +No color will be applied. --- -main-color +`--main-color` #### --answer-- -pink +`pink` ### --question-- @@ -75,7 +75,7 @@ Which of the following is a valid way to declare a custom property in CSS? --- -`custom-variable: #333;` +`@property: #333` --- @@ -93,47 +93,47 @@ What is the main purpose of using custom properties in CSS? #### --distractors-- -To change the DOM structure +To change the DOM structure. --- -To create dynamic selectors +To create dynamic selectors. --- -To improve accessibility +To improve accessibility. #### --answer-- -To define reusable styles across a project +To define reusable styles. ### --question-- #### --text-- -Custom properties defined in the `:root` selector are considered as? +What does the `:root` selector represent? #### --distractors-- -Locally scoped +The first child element of the `body`. --- -Non-inheritable +The parent element of all `header` elements. --- -Element-specific +The first child of the `html` tag. #### --answer-- -Globally scoped +The highest-level element in the DOM tree. ### --question-- #### --text-- -How do you apply a previously defined custom property `--foreground` in CSS? +How do you apply a `--foreground` custom property as the `color` in CSS? #### --distractors-- @@ -155,67 +155,67 @@ How do you apply a previously defined custom property `--foreground` in CSS? #### --text-- -What happens if you use a custom property that is not defined in the current scope? +What is the purpose of the `@property` rule in CSS? #### --distractors-- -It results in an error +To define a media query. --- -It uses the value `inherit` +To control CSS animations and their timing. --- -The property is ignored +To group CSS properties into one rule. #### --answer-- -The browser applies the default value, if provided +To define how custom properties behave. ### --question-- #### --text-- -What is the purpose of the `@property` rule in CSS? +When declaring a custom `@property`, what is the purpose of the `syntax` in its definition? #### --distractors-- -To define a media query +It specifies the default value of the custom property. --- -To control CSS animations +It determines whether the property can be inherited by child elements. --- -To group CSS properties +It defines whether the property is applied to all elements. #### --answer-- -To define how custom properties behave +It enforces a specific data type or value pattern for the custom property. ### --question-- #### --text-- -What should you be cautious of when using custom properties in terms of browser compatibility? +What should you be cautious of when using custom properties? #### --distractors-- -Custom properties are automatically converted to `px` units +Custom properties are automatically converted to `px` units. --- -Custom properties always override inline styles +Custom properties always override inline styles. --- -Custom properties can cause layout shifts +Custom properties cannot be used to set font values. #### --answer-- -Older browsers may not support custom properties +Custom properties may not be supported in older browsers. ### --question-- @@ -225,19 +225,19 @@ What is the purpose of providing a fallback value in the `var()` function for CS #### --distractors-- -To reduce the amount of CSS code +To reduce the amount of CSS code. --- -To improve performance in modern browsers +To improve performance in modern browsers. --- -To optimize rendering time on slow networks +To optimize rendering time on slow networks. #### --answer-- -To ensure a valid value is applied if the custom property is undefined +To ensure a valid value is applied if the custom property is undefined. ### --question-- @@ -247,215 +247,238 @@ When defining a variable `--foreground` inside a media query, what happens when #### --distractors-- -The custom property is preserved and continues to apply +The custom property is preserved and continues to apply. --- -The custom property reverts to its initial value +The custom property reverts to its initial value. --- -The custom property is recalculated based on the viewport +The custom property is recalculated based on the viewport. #### --answer-- -The custom property is no longer available as it is scoped to the media query +The custom property is no longer available as it is scoped to the media query. ### --question-- #### --text-- -Which of the following is not true when defining custom properties? +How would the following declaration behave? + +```css +color: var(--main-color, var(--fallback-color, #000)); +``` #### --distractors-- -Custom properties can be inherited by child elements +It will apply `--main-color` even if it is not defined, defaulting to that value. --- -Custom properties can be defined at any level in the DOM hierarchy +It will apply `--main-color` and `--fallback-color` simultaneously, resulting in a blend of the two colors. --- -Custom properties can be updated dynamically using JavaScript +It will always default to `#000`, regardless of whether `--main-color` or `--fallback-color` is defined. #### --answer-- -Custom properties can override user agent styles by default +It applies `--main-color` if defined; otherwise, checks `--fallback-color;` and if both are undefined, it uses `#000`. ### --question-- #### --text-- -How would the following declaration behave: `color: var(--main-color, var(--fallback-color, #000));`? +What is one benefit of using `@property` in CSS? #### --distractors-- -It will apply `--main-color` even if it is not defined, defaulting to that value +It improves performance by precomputing custom property values. --- -It will apply `--main-color` and `--fallback-color` simultaneously, resulting in a blend of the two colors +It automatically prefixes custom properties for better browser support. --- -It will always default to `#000`, regardless of whether `--main-color` or `--fallback-color` is defined +It restricts the use of custom properties to specific elements. #### --answer-- -It applies `--main-color` if defined; otherwise, checks `--fallback-color;` and if both are undefined, it uses `#000` +It allows for animations of custom properties. ### --question-- #### --text-- -What is the primary use case for the `@property` rule when working with CSS animations? +What does the `inherits` property in a custom `@property` declaration control? #### --distractors-- -To modify keyframe sequences based on variable values +Whether the custom property will have an initial value. --- -To control custom property inheritance during animation +Whether the property can have a shorthand version. --- -To ensure that custom properties maintain compatibility with media queries +Whether the property accepts fallback values. #### --answer-- -To define which custom properties are allowed to animate and set their initial values +Whether the custom property's value is passed to child elements. ### --question-- #### --text-- -Which CSS pseudo-class can be used to detect if a custom property (CSS Variable) is defined or not? +In the declaration of a custom `@property`, what does the `initial-value` specify? #### --distractors-- -`:defined` +The acceptable values the property can accept. --- -`:not(--var)` +The priority of the property in the cascade. --- -`:is-var` +The type of value the property must have. #### --answer-- -None of the above +The fallback value for the property. ### --question-- #### --text-- -In which scenario might defining a custom property in a media query cause unexpected behavior? +Given the following HTML and CSS code, what will be the value of the `color` property for the `.box` element? + +```html +
+
Text
+
+``` + +```css +:root { + --main-color: red; +} + +.container { + --main-color: blue; +} + +.box { + color: var(--main-color, black); +} +``` #### --distractors-- -When the property is defined using a `px` unit +`black` --- -When the property is defined outside of the `:root` +`red` --- -When the property is defined at the bottom of the stylesheet +`green` #### --answer-- -When the media query condition no longer applies, and the custom property is no longer valid +`blue` ### --question-- #### --text-- -What is the advantage of using CSS variables over traditional hard-coded values in a stylesheet? +Which property should a CSS gradient be applied to? #### --distractors-- -CSS variables reduce the size of the HTML file +`color` --- -CSS variables are automatically minified by the browser +`border-radius` --- -CSS variables only work for colors, not other properties +`box-shadow` #### --answer-- -CSS variables allow for dynamic changes via JavaScript, making the code more flexible +`background` ### --question-- #### --text-- -When using custom properties with CSS Grid or Flexbox, what should you be cautious about? +What is the purpose of color stops in CSS gradients? #### --distractors-- -Custom properties override grid or flex properties by default +To define the transparency level of the gradient. --- -Flexbox and Grid ignore custom properties during layout calculations +To specify the direction of the gradient. --- -Custom properties can cause layout shifts when recalculated +To repeat the gradient in a fixed pattern. #### --answer-- -Custom properties should be managed carefully, as they are recalculated with each layout pass, potentially impacting performance +To define the specific points where colors change in the gradient. ### --question-- #### --text-- -When using a custom property (CSS variable) with the `calc()` function, which of the following is a correct way to apply it to set the `width` of an element? +What happens if no angle or direction is specified in a CSS linear gradient? #### --distractors-- -`width: calc(--main-width + 20px);` +The gradient defaults to a diagonal direction. --- -`width: var(--main-width) calc(20px);` +The gradient defaults to moving from bottom to top. --- -`width: var(calc(--main-width) + 20px);` +The gradient defaults to moving from left to right. #### --answer-- -`width: calc(var(--main-width) + 20px);` +The gradient defaults to moving from top to bottom. ### --question-- #### --text-- -Which of the following is the correct way to define a fallback value for a CSS variable when the custom property is not available? +Which CSS gradient function allows you to create a gradient that radiates outward from a central point? #### --distractors-- -`color: var(--primary-color && inherit);` +`linear-gradient()` --- -`color: var(--primary-color || inherit);` +`conic-gradient()` --- -`color: fallback(var(--primary-color), inherit);` +`repeating-linear-gradient()` #### --answer-- -`color: var(--primary-color, inherit);` - +`radial-gradient()` diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md b/curriculum/challenges/korean/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md index eab6ee36ca..f48a053528 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md @@ -7,7 +7,7 @@ dashedName: quiz-debugging-javascript # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,19 +21,19 @@ What type of error occurs when a variable is used before it is defined? #### --distractors-- -Syntax error +Syntax error. --- -Logical error +Logical error. --- -Range error +Range error. #### --answer-- -Reference error +Reference error. ### --question-- @@ -87,19 +87,19 @@ Which of the following errors does `try...catch` handle? #### --distractors-- -Syntax errors +Syntax errors. --- -Infinite loops +Infinite loops. --- -Logical errors +Logical errors. #### --answer-- -Runtime errors +Runtime errors. ### --question-- @@ -135,7 +135,7 @@ Using `const` instead of `let` --- -Calling a function that doesn't exist +Calling a function that doesn't exist. --- @@ -143,7 +143,7 @@ Writing `==` instead of `===` #### --answer-- -Incorrectly calculating a sum +Incorrectly calculating a sum. ### --question-- @@ -153,19 +153,19 @@ What is the purpose of breakpoints in JavaScript debugging? #### --distractors-- -Automatically correct code mistakes +Automatically correct code mistakes. --- -Prevent code from being executed +Prevent code from being executed. --- -Log messages to the console +Log messages to the console. #### --answer-- -Pause execution at a specific point +Pause execution at a specific point. ### --question-- @@ -175,19 +175,19 @@ What happens when the `throw` statement is executed? #### --distractors-- -The code after `throw` continues running +The code after `throw` continues running. --- -It triggers the `finally` block directly +It triggers the `finally` block directly. --- -It pauses code execution until resumed +It pauses code execution until resumed. #### --answer-- -An exception is thrown and the `catch` block (if present) is executed +An exception is thrown and the `catch` block (if present) is executed. ### --question-- @@ -219,19 +219,19 @@ What kind of error is likely to occur if a function is called with an incorrect #### --distractors-- -Reference error +Reference error. --- -Syntax error +Syntax error. --- -Logical error +Logical error. #### --answer-- -Type error +Type error. ### --question-- @@ -249,11 +249,11 @@ Which tool is commonly used to step through code line by line during debugging? --- -`throw` statement +`throw` statement. #### --answer-- -Breakpoints in Developer Tools +Breakpoints in Developer Tools. ### --question-- @@ -263,19 +263,19 @@ What type of error occurs when attempting to access a property of `undefined`? #### --distractors-- -Syntax error +Syntax error. --- -Logical error +Logical error. --- -Range error +Range error. #### --answer-- -Type error +Type error. ### --question-- @@ -285,19 +285,19 @@ What does the `finally` block do in a `try...catch` statement? #### --distractors-- -Only executes if there's an error +Only executes if there's an error. --- -Skips execution if `catch` is triggered +Skips execution if `catch` is triggered. --- -Exits the code block immediately +Exits the code block immediately. #### --answer-- -Always executes, regardless of errors +Always executes, regardless of errors. ### --question-- @@ -307,19 +307,19 @@ Which of the following could be used to avoid runtime errors in JavaScript? #### --distractors-- -Skipping error handling +Skipping error handling. --- -Ignoring exceptions +Ignoring exceptions. --- -Using no `try...catch` statements +Using no `try...catch` statements. #### --answer-- -Using conditionals to check data validity +Using conditionals to check data validity. ### --question-- @@ -329,19 +329,19 @@ What is a common cause of a syntax error? #### --distractors-- -Running out of memory +Running out of memory. --- -Missing `return` statement +Missing `return` statement. --- -Declaring an unused variable +Declaring an unused variable. #### --answer-- -Missing a closing bracket +Missing a closing bracket. ### --question-- @@ -373,19 +373,19 @@ What is a "watcher" in the context of debugging? #### --distractors-- -A tool for pausing code execution +A tool for pausing code execution. --- -A built-in function for logging errors +A built-in function for logging errors. --- -A JavaScript method for handling exceptions +A JavaScript method for handling exceptions. #### --answer-- -A tool for monitoring the value of variables +A tool for monitoring the value of variables. ### --question-- @@ -395,19 +395,19 @@ When should you use `console.error()` instead of `console.log()`? #### --distractors-- -To display table data +To display table data. --- -To log messages only during debugging +To log messages only during debugging. --- -To log information about the browser +To log information about the browser. #### --answer-- -To log error messages +To log error messages. ### --question-- @@ -417,19 +417,19 @@ What does the `Error()` constructor do in JavaScript? #### --distractors-- -Logs error messages to the console +Logs error messages to the console. --- -Runs code in a sandbox +Runs code in a sandbox. --- -Terminates the program +Terminates the program. #### --answer-- -Creates a new error object that can be thrown +Creates a new error object that can be thrown. ### --question-- @@ -439,17 +439,17 @@ What will happen if a `catch` block is not provided with a `try` block? #### --distractors-- -The code will stop executing +The code will stop executing. --- -The error will be logged but ignored +The error will be logged but ignored. --- -The program will continue with default values +The program will continue with default values. #### --answer-- -An uncaught exception error will occur +An uncaught exception error will occur. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md b/curriculum/challenges/korean/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md index c687e078a1..98c5ee21fb 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md @@ -7,7 +7,7 @@ dashedName: quiz-design-fundamentals # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,29 +21,29 @@ What are some reasons why whitespace is important for good design? #### --distractors-- -Improves readability by placing many elements on the page +Improves readability by placing many elements on the page. --- -Focuses the viewer's attention by having elements placed close together +Focuses the viewer's attention by having elements placed close together. --- -Creates breathing space in the design to make users scroll for more information +Creates breathing space in the design to make users scroll for more information. #### --answer-- -Creates visual hierarchy, improves readability, focuses the viewer's attention on different elements +Creates visual hierarchy, improves readability, focuses the viewer's attention on different elements. ### --question-- #### --text-- -What is the design principle of carefully choosing the size of elements in relation to each other and the layout? +What is the design principle of carefully choosing the size of elements in relation to each other? #### --distractors-- -Visual hierarchy +Visual hierarchy. --- @@ -83,45 +83,45 @@ A complex e-commerce site with multiple categories and subcategories. #### --text-- -What design pattern allows users to access and interact with specific elements and content on a website without or while deferring registration? +Which design pattern allows users to access and interact with elements and content on a website without requiring immediate registration? #### --distractors-- -Captcha validation +Captcha validation. --- -Lazy loading +Lazy loading. --- -Progressive enhancement +Progressive enhancement. #### --answer-- -Deferred/lazy registration +Deferred/lazy registration. ### --question-- #### --text-- -What are the three main types of text alignment? +What are three types of text alignment? #### --distractors-- -Vertical, center, horizontal +Top, center, horizontal. --- -Left, right, justified +Left, right, middle. --- -Vertical, horizontal, justified +Vertical, horizontal, equal. #### --answer-- -Left, right, center +Left, right, center. ### --question-- @@ -131,19 +131,19 @@ Which interaction design pattern reduces the complexity of interaction by hiding #### --distractors-- -Extended discoverability +Extended discoverability. --- -Delayed implementation +Delayed implementation. --- -Gradual engagement +Gradual engagement. #### --answer-- -Progressive disclosure +Progressive disclosure. ### --question-- @@ -153,37 +153,37 @@ What is contrast in design? #### --distractors-- -Elements that are visually similar +Elements that are visually similar. --- -The difference in saturation between two colors +The difference in saturation between two colors. --- -Matching elements on a page +Matching elements on a page. #### --answer-- -Elements that are strikingly different from each other visually +Elements that are strikingly different from each other visually. ### --question-- #### --text-- -In the examples below, which one is an example of visual hierarchy in design? +Which of the following is an example of visual hierarchy in design? #### --distractors-- -Headline and title text are a similar color to the background and other elements to blend in +Headline and title text are a similar color to the background and other elements to blend in. --- -Text and images are all the same size on the page +Text and images are all the same size on the page. --- -The logo banner is smaller than all the minor images on the main landing page +The logo banner is smaller than all the minor images on the main landing page. #### --answer-- @@ -201,7 +201,7 @@ To increase the number of new users. --- -To test new features with existing users +To test new features with existing users. --- @@ -219,19 +219,19 @@ What is user centered design? #### --distractors-- -A design process where once the design is completed, designers test the product by getting user feedback +A design process where once the design is completed, designers test the product by getting user feedback. --- -A design process where designers consider user accessibility requirements +A design process where designers consider user accessibility requirements. --- -A design process focused on client requirements at every stage of the process +A design process focused on client requirements at every stage of the process. #### --answer-- -An iterative design process where designers design a product considering user requirements at every stage of the process +An iterative design process where designers design a product considering user requirements at every stage of the process. ### --question-- @@ -263,19 +263,19 @@ What are some colors to consider when designing dark mode? #### --distractors-- -Pure white +Pure white. --- -Highly saturated colors +Highly saturated colors. --- -Bright highly contrasting colors +Bright highly contrasting colors. #### --answer-- -Dark colors and muted light colors for contrast in dim lighting conditions +Dark colors and muted light colors for contrast in dim lighting conditions. ### --question-- @@ -325,45 +325,45 @@ To confirm that all stakeholders agree on the project's objectives and requireme #### --text-- -What is one bad practice method for implementing infinite scroll? +What is considered bad practice when implementing infinite scroll? #### --distractors-- -Allow users to jump to a page or section through the navbar or a pagination drop down menu +Allowing users to jump to a page or section through the navbar or a pagination drop down menu. --- -Add a load more indicator or symbol after a certain point in the page along with the infinite scroll +Adding a load more indicator or symbol after a certain point in the page along with the infinite scroll. --- -Integrate a footer reveal at the bottom +Integrating a footer reveal at the bottom. #### --answer-- -No back to top button, alternative methods of navigating the page, and very long inefficient scrolling +Not adding alternative methods of navigating the page. ### --question-- #### --text-- -What is one bad practice for working with images? +Which of the following is a best practice when designing progress indicators for forms? #### --distractors-- -Make important images stand out by being larger in size +Requiring users to restart the form if they navigate away from the page. --- -Separate text and images into columns or rows +Keeping the progress indicator small and discreet. --- -Put images outside the layout and important ones on their own or full screen +Making sure the progress is just displayed visually without any text. #### --answer-- -Images placed in the middle of text paragraphs with very little margin space for separation +Breaking the progress indicator into labeled sections. ### --question-- @@ -373,41 +373,41 @@ What is one way to make shopping cart design intuitive and user friendly? #### --distractors-- -Use a new shopping cart icon that no other website has used before +Use a new shopping cart icon that no other website has used before. --- -Do not allow users to add or remove items from the cart +Do not allow users to add or remove items from the cart. --- -Include a checkout summary on another page +Automatically add products to the cart without user interaction. #### --answer-- -Include thumbnail images of products in the cart +Include thumbnail images of products in the cart. ### --question-- #### --text-- -Dark mode doesn't mean pure black. What are some colors and good techniques to create a good dark mode color scheme? +Dark mode doesn't mean pure black. What is a good technique to create an effective dark mode color scheme? #### --distractors-- -Make images and elements darker and reduce contrast between different elements to have them blend in +Make images and elements darker and reduce contrast between different elements to have them blend in. --- -Invert the color scheme +Invert the color scheme. --- -Use many saturated colors +Use many saturated colors. #### --answer-- -Use dark gray or a dark shade of the brand color instead of pure black +Use dark gray or a dark shade of the brand color instead of pure black. ### --question-- @@ -417,19 +417,19 @@ What is one good design practice when creating modals? #### --distractors-- -Put a lot of important information inside a modal +Put a lot of important information inside a modal. --- -Have multiple modals on the same screen +Have multiple modals on the same screen. --- -Ensure the modal draws the user's attention away from it +Ensure the modal draws the user's attention away from it. #### --answer-- -Make the modal dismiss icon visible +Make the modal dismiss icon visible. ### --question-- @@ -439,17 +439,17 @@ What is a design brief? #### --distractors-- -A design brief is a document outlining the programming and design standards of the project +A document outlining the programming and design standards of the project. --- -A design brief is a document explaining how to replicate a design +A document explaining how to replicate a design. --- -A design brief is a document with detailed information of icons, colors, and assets the designer should use +A document with detailed information of icons, colors, and assets the designer should use. #### --answer-- -A design brief states the goals and project scope, budget, design requirements, and other important details of the project +A document stating the goals and project scope, budget and design requirements. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md b/curriculum/challenges/korean/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md index 73d4b048ea..2fbd8026d7 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md @@ -7,7 +7,7 @@ dashedName: quiz-dom-manipulation-and-click-event-with-javascript # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -186,7 +186,7 @@ Which of the following statements is false? `window` is an alias for `navigator.window`: ```js -window === navigator.window // returns true +window === navigator.window // returns true. ``` --- @@ -198,7 +198,7 @@ You can use the user screen properties (like position and size) using the `Windo `navigation` is an alias for `window.navigation`: ```js -navigation === window.navigation // returns true +navigation === window.navigation // returns true. ``` #### --answer-- @@ -276,7 +276,7 @@ Which of these does not set the element text color to `red`. #### --text-- -In the case of a click event, which `Event` property returns the clicked sub-element that triggerred the parent's callback? +In the case of a click event, which `Event` property returns the clicked sub-element that triggered the parent's callback? #### --distractors-- @@ -427,7 +427,7 @@ The first parameter is the function callback and the second is the delay duratio --- -`setTimeout` calls a function once after a delay and `setInterval` call a function continously after an interval delay. +`setTimeout` calls a function once after a delay and `setInterval` call a function continuously after an interval delay. --- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/korean/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md index 6a20dd01ac..e31ff7b3a5 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md @@ -7,7 +7,7 @@ dashedName: quiz-form-validation-with-javascript # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -43,19 +43,19 @@ What happens if the `checkValidity()` method finds an invalid `input`? #### --distractors-- -The form is automatically submitted +The form is automatically submitted. --- -Nothing happens +Nothing happens. --- -The `input` value is cleared +The `input` value is cleared. #### --answer-- -The browser displays a validation message +The browser displays a validation message. ### --question-- @@ -87,19 +87,19 @@ What is the default validation behavior for required fields when the form is sub #### --distractors-- -The form is submitted even if required fields are empty +The form is submitted even if required fields are empty. --- -The form submits but gives a warning +The form submits but gives a warning. --- -The form resets the `input` values +The form resets the `input` values. #### --answer-- -The browser stops the form submission if required fields are empty +The browser stops the form submission if required fields are empty. ### --question-- @@ -109,11 +109,11 @@ Which actions does not cause an HTML form to be checked for errors? #### --distractors-- -Changing the `input` value +Changing the `input` value. --- -Submitting the form +Submitting the form. --- @@ -121,7 +121,7 @@ Calling `reportValidity()` #### --answer-- -Clicking a reset button +Clicking a reset button. ### --question-- @@ -153,15 +153,15 @@ When does the `checkValidity()` method stop form submission? #### --distractors-- -When the form has no submit button +When the form has no submit button. --- -When the form `action` is empty +When the form `action` is empty. --- -When the form method is POST +When the form method is POST. #### --answer-- @@ -175,19 +175,19 @@ What happens if `checkValidity()` is called, but a field fails validation? #### --distractors-- -The form submits without error +The form submits without error. --- -The `input` values are cleared +The `input` values are cleared. --- -The form closes immediately +The form closes immediately. #### --answer-- -The invalid field is highlighted and a message appears +The invalid field is highlighted and a message appears. ### --question-- @@ -197,19 +197,19 @@ Which action will make `checkValidity()` run? #### --distractors-- -Resetting the form +Resetting the form. --- -Changing an `input` value +Changing an `input` value. --- -Clicking an anchor tag +Clicking an anchor tag. #### --answer-- -Submitting the form manually +Submitting the form manually. ### --question-- @@ -219,19 +219,19 @@ What is the purpose of calling `checkValidity()` before submitting a form? #### --distractors-- -To automatically submit the form +To automatically submit the form. --- -To reload the page +To reload the page. --- -To clear all `input` fields +To clear all `input` fields. #### --answer-- -To check if all `input` elements meet their specified constraints +To check if all `input` elements meet their specified constraints. ### --question-- @@ -241,19 +241,19 @@ What is the main purpose of `e.preventDefault()`? #### --distractors-- -To reload the form +To reload the form. --- -To clear form data +To clear form data. --- -To reset the form values +To reset the form values. #### --answer-- -To stop the default action of an event +To stop the default action of an event. ### --question-- @@ -263,19 +263,19 @@ When used on a form's submit event, what does `e.preventDefault()` do? #### --distractors-- -It submits the form +It submits the form. --- -It clears all form fields +It clears all form fields. --- -It disables the form temporarily +It disables the form temporarily. #### --answer-- -It prevents the form from being submitted +It prevents the form from being submitted. ### --question-- @@ -285,19 +285,19 @@ In which scenario is `e.preventDefault()` most useful? #### --distractors-- -When handling a button click that submits a form +When handling a button click that submits a form. --- -When closing a modal dialog +When closing a modal dialog. --- -When opening a new page +When opening a new page. #### --answer-- -When submitting a form via AJAX and preventing a page reload +When submitting a form via AJAX and preventing a page reload. ### --question-- @@ -307,19 +307,19 @@ What happens if you forget to call `e.preventDefault()` on a form submit event? #### --distractors-- -The form is submitted via AJAX +The form is submitted via AJAX. --- -The form does not submit +The form does not submit. --- -The form data is lost +The form data is lost. #### --answer-- -The form submits and refreshes the page +The form submits and refreshes the page. ### --question-- @@ -329,15 +329,15 @@ Which default behavior can be prevented using `e.preventDefault()`? #### --distractors-- -Editing a form +Editing a form. --- -Rendering the form +Rendering the form. --- -Reloading the form +Reloading the form. #### --answer-- @@ -351,19 +351,19 @@ What triggers the form's submit event? #### --distractors-- -When an input field changes +When an input field changes. --- -When the form is reset +When the form is reset. --- -When the form's action is cleared +When the form's action is cleared. #### --answer-- -When a form's submit button is clicked or Enter is pressed +When a form's submit button is clicked or Enter is pressed. ### --question-- @@ -373,19 +373,19 @@ Where do you usually handle the submit event in JavaScript? #### --distractors-- -On a text input element +On a text input element. --- -On any field in the form +On any field in the form. --- -On a button element outside the form +On a button element outside the form. #### --answer-- -On the form element itself +On the form element itself. ### --question-- @@ -395,19 +395,19 @@ What does the submit event do by default? #### --distractors-- -It validates the form but doesn't submit it +It validates the form but doesn't submit it. --- -It clears the form fields +It clears the form fields. --- -It cancels form submission +It cancels form submission. #### --answer-- -It sends form data to the server specified in the form's action +It sends form data to the server specified in the form's action. ### --question-- @@ -443,7 +443,7 @@ Call `submit.preventDefault()` --- -Stop the form from being displayed +Stop the form from being displayed. --- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md b/curriculum/challenges/korean/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md index bad816f377..cca45d2d7b 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md @@ -7,7 +7,7 @@ dashedName: quiz-git # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -29,7 +29,7 @@ Administrators --- -Subscribers/Premium Users +Subscribers/Premium Users. #### --answer-- @@ -43,11 +43,11 @@ Why is using version control software a best practice for high performing softwa #### --distractors-- -A complete long-term change history of every file +A complete long-term change history of every file. --- -Branching and merging +Branching and merging. --- @@ -55,7 +55,7 @@ Traceability #### --answer-- -All of the options +All of the options. ### --question-- @@ -143,7 +143,7 @@ Strangers #### --answer-- -All of the options +All of the options. ### --question-- @@ -205,7 +205,7 @@ What is the correct way to contribute to other people's repositories? --- -None of the options +None of the options. #### --answer-- @@ -289,15 +289,15 @@ GitHub.com --- -GitHub Codespaces +GitHub Codespaces. --- -GitHub Mobile +GitHub Mobile. #### --answer-- -All of the options +All of the options. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md b/curriculum/challenges/korean/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md index 0b7b3e0703..1bbaa8b1e7 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md @@ -7,7 +7,7 @@ dashedName: quiz-html-accessibility # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,41 +21,74 @@ What is accessibility? #### --distractors-- -Accessibility focuses on making websites faster to load. +Accessibility is a set of standardized practices that ensures your code is free from all security risks. --- -Accessibility is a belief to make websites compatible with older browsers. +Accessibility is a set of standardized practices that enhances the speed and performance for your web applications. --- -Accessibility is a type of coding style. +Accessibility is a set of standardized practices that ensures your code meets 100% test coverage. #### --answer-- -Accessibility is a set of standardized practices that help make online content more usable by people with disabilities. +Accessibility is a set of standardized practices to ensure your web applications can be used by everyone, including those with disabilities. + ### --question-- #### --text-- -What is a best practice for creating accessible headings? +Which of the following is a good example for proper heading level structure? #### --distractors-- -Add SEO-friendly keywords. +```html +

Heading 3

+

Heading 3

+

Heading 3

+ +

Heading 1

+

Heading 2

+

Heading 4

+``` --- -Create humorous headings. +```html +
Heading 6
+ +

Heading 1

+

Heading 1

+ +
Heading 5
+ +

Heading 2

+

Heading 2

+``` --- -Place `h6` headings at the beginning of your webpage. +```html +
Heading 6
+
Heading 5
+

Heading 4

+

Heading 3

+

Heading 2

+

Heading 1

+``` #### --answer-- -Put headings in hierarchical order. +```html +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+``` ### --question-- @@ -65,19 +98,19 @@ What are the six main categories of ARIA roles? #### --distractors-- -Document Structure, Landmark, Window, Explicit, Fidget, and Footer +Document Structure, Landmark, Window, Explicit, Fidget, and Footer. --- -Landmark, House, Live Region, Application, Window, and Extension +Landmark, House, Live Region, Application, Window, and Extension. --- -Window, Alert Dialog, Article, Cell, Banner, and Button +Window, Alert Dialog, Article, Cell, Banner, and Button. #### --answer-- -Document Structure, Landmark, Window, Abstract, Widget, and Live Region +Document Structure, Landmark, Window, Abstract, Widget, and Live Region. ### --question-- @@ -113,89 +146,91 @@ alt="" #### --text-- -What is WAI-ARIA? +What does WAI-ARIA stand for? #### --distractors-- -WAI-ARIA is a programming language specifically designed for creating animated web graphics. +Website Accessible Initiative - Accessible Rust Internet Applications. --- -WAI-ARIA is a set of guidelines for making websites more visually appealing and colorful. +Web Anchor Initiative - Anchor Rich Internet Applications. --- -WAI-ARIA is a tool for optimizing website loading speeds and server performance. +Web Accessibility Initial - Accessible Ready Internet Applications. #### --answer-- -WAI-ARIA is a set of standardized practices that helps make online content more accessible to people with disabilities. +Web Accessibility Initiative - Accessible Rich Internet Applications. ### --question-- #### --text-- -What is the function of the `hidden` attribute? +What is the role of the `aria-hidden` attribute? #### --distractors-- -To shrink the focused elements. +This attribute is used to hide elements only for users with visual impairments. --- -To add tabs. +This attribute is used to hide and add label text for an element. --- -To hide an HTML form. +This attribute is used to hide an element only to keyboard users. #### --answer-- -To prevent an element from being rendered. +This attribute is used to hide an element from people using assistive technologies. ### --question-- #### --text-- -What is the function of the `tabindex` attribute? +Which attribute makes elements focusable and defines the relative order in which they are navigated using the keyboard? #### --distractors-- -To change the color of focused elements. +`keyboardindex` --- -To shrink the focused elements. +`tabbingindex` --- -To add tabs. +`indextab` #### --answer-- -To control keyboard navigation order and allow programmatic focus on elements that aren't accessible via keyboard. +`tabindex` ### --question-- #### --text-- -Which of the following is a best practice for creating accessible data tables? +Why is it a good practice to include the `caption` element inside an HTML table? #### --distractors-- -Add a caption by using the `` tag. +It enhances the table's appearance by adding a decorative header. --- -Use the `aria-label` attribute to make sure that the data cells associate with the proper header. +It allows users to easily sort and filter the table's data. --- -Use absolute sizing to make sure that the data cells are not too large. +It helps improve the table's responsiveness on mobile devices. + #### --answer-- -Designate row and/or column headers by using ` + + + + + + + + +``` --- -`max` +```html +
+ +

User information

+ + + + + + + + +``` --- -`maximumLen` +```html +
+
+ User information + + + + + + +
+ +``` #### --answer-- -`maxlength` +```html +
+
+ User information + + + + + + +
+ +``` ### --question-- @@ -346,25 +394,25 @@ Which of the following is the correct way to disable an input? #### --distractors-- ```html - + ``` --- ```html - + ``` --- ```html - + ``` #### --answer-- ```html - + ``` ### --question-- @@ -376,25 +424,25 @@ Which of the following is a valid value for the `type` attribute? #### --distractors-- ```html - + ``` --- ```html - + ``` --- ```html - + ``` #### --answer-- ```html - + ``` ### --question-- @@ -431,23 +479,23 @@ Which of the following is the correct use of the `size` attribute? #### --text-- -Which of the following attributes is used to specify the minimum number of characters required in an input field? +Which of the following attributes are used to specify the minimum and maximum number of characters required in an input field? #### --distractors-- -`minlen` +`minlen` and `maxlen` --- -`Mlength` +`min` and `max` --- -`minimumLen` +`minimumLen` and `maximumLen` #### --answer-- -`minlength` +`minlength` and `maxlength` ### --question-- @@ -483,7 +531,7 @@ Which of the following button examples does **NOT** use a correct value for the #### --text-- -Which attribute is used to specify the value for a button? +Which of the following attributes is used to specify the value for a button? #### --distractors-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md index e86f0e3326..060bea2423 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-arrays # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,45 +17,62 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is the correct way to declare a JavaScript array? +What will be the output for the following code? + +```js +const numbers = [1, 2, 3]; +console.log(numbers[10]); +``` #### --distractors-- -`let arr = array(1, 2, 3);` +`[1, 2, 3]` --- -`let arr = "1, 2, 3";` +`null` --- -`let arr = {1, 2, 3};` +`10` #### --answer-- -`let arr = [1, 2, 3];` +`undefined` ### --question-- #### --text-- -What is the key difference between primitive and non-primitive data types? +Which of the following is the correct way access the string `"Jessica"` from the `developers` array? #### --distractors-- -Primitives can store multiple values. +```js +const developers = ["Jessica", "Naomi", "Tom"]; +developers[1] +``` --- -Non-primitives cannot hold references to other objects. +```js +const developers = ["Jessica", "Naomi", "Tom"]; +developers[2] +``` --- -Non-primitives store values directly. +```js +const developers = ["Jessica", "Naomi", "Tom"]; +developers[-1] +``` #### --answer-- -Primitives hold direct values, non-primitives hold references. +```js +const developers = ["Jessica", "Naomi", "Tom"]; +developers[0] +``` ### --question-- @@ -89,316 +106,291 @@ console.log(index); #### --text-- -What value will be assigned to the `arr2` variable? - -```js -const arr1 = [1, 2, 3]; -const arr2 = [...arr1, 4, 5]; -console.log(arr2); -``` +What does the rest syntax do? #### --distractors-- -`[4, 5, 1, 2, 3]` +It is used to divide a string into an array of substrings. --- -`[1, 2, [3, 4, 5]]` +It is used to add or remove elements from any position in an array. --- -`[1, 2, 3]` +It is used to add elements to the end of the array and will return the new length. #### --answer-- -`[1, 2, 3, 4, 5]` +It captures the remaining elements of an array into a new array. ### --question-- #### --text-- -What will this code print to the console? - -```js -const colors = ['red', 'blue', 'green', 'yellow']; -colors.splice(1, 2, 'purple'); -console.log(colors); -``` +What is array destructuring? #### --distractors-- -`['red', 'purple', 'green', 'yellow']` +It is used to concatenate all of the elements of an array into a single string. --- -`['red', 'blue', 'yellow']` +It is used to check if an array contains a specific value. --- -`['red', 'blue', 'green', 'yellow']` +It is used to remove the last element from an array and will return that removed element. #### --answer-- -`['red', 'purple', 'yellow']` +It is used to extract values from arrays and assign them to variables in a more concise and readable way. ### --question-- #### --text-- -What value will be assigned to the `slicedArr` variable? +What value will be assigned to the `arr2` variable? ```js -const arr = ['apple', 'banana', 'cherry', 'date']; -const slicedArr = arr.slice(1, 3); -console.log(slicedArr); +const arr1 = [1, 2, 3]; +const arr2 = [...arr1, 4, 5]; +console.log(arr2); ``` #### --distractors-- -`['apple', 'banana']` +`[4, 5, 1, 2, 3]` --- -`['cherry', 'date']` +`[1, 2, [3, 4, 5]]` --- -`['apple', 'cherry']` +`[1, 2, 3]` #### --answer-- -`['banana', 'cherry']` +`[1, 2, 3, 4, 5]` ### --question-- #### --text-- -Which method returns the first index of a given element in an array? +What will this code log to the console? + +```js +const colors = ["red", "blue", "green", "yellow"]; +colors.splice(1, 2, "purple"); +console.log(colors); +``` #### --distractors-- -`findIndex()` +`["red", "blue", "green", "yellow"]` --- -`lastIndexOf()` +`["red", "blue", "yellow"]` --- -`slice()` +`["red", "yellow"]` #### --answer-- -`indexOf()` +`["red", "purple", "yellow"]` ### --question-- #### --text-- -Which method removes the first element from an array and shifts all other elements down? +What value will be assigned to the `slicedArr` variable? + +```js +const arr = ["apple", "banana", "cherry", "date"]; +const slicedArr = arr.slice(1, 3); +console.log(slicedArr); +``` #### --distractors-- -`pop()` +`["apple", "banana"]` --- -`slice()` +`["cherry", "date"]` --- -`splice()` +`["apple", "cherry"]` #### --answer-- -`shift()` +`["banana", "cherry"]` ### --question-- #### --text-- -What does `Array.prototype.concat()` do? +Which method returns the first index of a given element in an array? #### --distractors-- -Joins array elements into a string. +`firstIndex()` --- -Adds an element to the beginning of an array. +`lastIndex()` --- -Removes an element from the array. +`searchIndex()` #### --answer-- -Merges two arrays into a new array. +`indexOf()` ### --question-- #### --text-- -What happens if you set an array's length to a value smaller than the current length? +Which method is used to remove the first element from an array and returns that removed element? #### --distractors-- -It throws a syntax error. +`pop()` --- -The extra space is filled with `undefined`. +`slice()` --- -Nothing happens; the array remains the same size. +`splice()` #### --answer-- -The array gets truncated, removing elements beyond the new length. +`shift()` ### --question-- #### --text-- -What will be the output of this code ? - -```js -const fruits = ['apple', 'banana', 'cherry', 'apple', 'orange']; -const index = fruits.indexOf('apple'); -if (index !== -1) { - fruits.splice(index, 1); -} -console.log(fruits); -``` +What does the `concat()` method do? #### --distractors-- -`['banana', 'cherry', 'orange']` +Joins array elements into a string. --- -`['apple', 'cherry', 'apple', 'orange']` +Adds an element to the beginning of an array. --- -`['banana', 'cherry', 'apple']` +Removes an element from the array. #### --answer-- -`['banana', 'cherry', 'apple', 'orange']` +Merges two arrays into a new array. ### --question-- #### --text-- -What is the final value of `result` in the following code? +What will be the output of this code? ```js -const arr1 = [1, 2]; -const arr2 = [3, 4, 5]; -const combined = arr1.concat(arr2); -const result = combined.includes(3); -console.log(result); +const fruits = ["apple", "banana", "cherry", "apple", "orange"]; + +fruits.splice(0, 1); + +console.log(fruits); ``` #### --distractors-- -`false` +`["apple", "banana", "cherry", "apple", "orange"]` --- -`[1, 2, 3, 4, 5]` +`["apple", "banana", "cherry"]` --- -`undefined` +`["cherry", 'apple']` #### --answer-- -`true` +`["banana", "cherry", "apple", "orange"]` ### --question-- #### --text-- -What does the following code output? - -```js -const nums = [1, 2, 3, 4]; -const doubled = nums.map(n => n * 2); -console.log(doubled.includes(8)); -``` +What does the `includes()` method do? #### --distractors-- -`false` +It is used to divide a string into an array of substrings. --- -`[2, 4, 6, 8]` +It is used to concatenate all of the elements of an array into a single string. --- -`Error` +It is used to add or remove elements from any position in an array. #### --answer-- -`true` +It is used to check if an array contains a specific value. ### --question-- #### --text-- -What is the output when using `splice()` to remove elements from a 2D array? - -```js -let matrix = [ - [1, 2, 3], - [4, 5, 6], - [7, 8, 9] -]; -matrix.splice(1, 1); -console.log(matrix); -``` +Which of the following methods is used to reverse an array in place? #### --distractors-- -`[[1, 2, 3], [4, 5, 6]]` +`reversed()` --- -`[[1, 2], [4, 5], [7, 8]]` +`reverseArr()` --- -`[[7, 8, 9]]` +`reversing()` #### --answer-- -`[[1, 2, 3], [7, 8, 9]]` +`reverse()` ### --question-- #### --text-- -Which of the following statements about `.length` is correct? +What is a two dimensional array? #### --distractors-- -It counts the number of values in a 2D array. +An array that only contains object literals. --- -It returns `undefined` for empty arrays. +An array of fixed length. --- -It gives the total number of elements in a 2D array. +An array of floating point numbers. #### --answer-- -It counts the number of top-level elements in a 2D array. +An array of arrays. ### --question-- @@ -426,75 +418,73 @@ It returns `-1` if the element is not found. #### --text-- -What is the main difference between `push()` and `concat()` when working with arrays? +Which of the following is NOT an array method? #### --distractors-- -`push()` adds multiple arrays together, while `concat()` adds a single element. +`includes()` --- -`concat()` modifies the original array, while `push()` creates a new array. +`pop()` --- -Both `push()` and `concat()` are immutable methods. +`push()` #### --answer-- -`push()` modifies the original array, while `concat()` creates a new array. +`keys()` ### --question-- #### --text-- -How does the rest parameter `...rest` work in array destructuring in JavaScript? +What will be the output for the following code? + +```js +const arr = ["o", "l", "l", "e", "h"]; +console.log(arr.join("")); +``` #### --distractors-- -It is used to add extra elements to the array. +`["o", "l", "l", "e", "h"]` --- -It allows you to access elements outside the array's bounds. +`"hello"` --- -It removes the last element of the array. +`undefined` #### --answer-- -It collects the remaining elements into a new array after the initial elements are assigned to variables. +`"olleh"` ### --question-- #### --text-- -What will be the result of this code ? +What will be the result of using the `shift()` method on an empty array? -```js -const numbers = [10, 20, 30]; -numbers.push(40); -numbers.pop(); -const length = numbers.length; -console.log(length); -``` #### --distractors-- -2 +`TypeError` --- -5 +`[]` --- -4 +`null` #### --answer-- -3 +`undefined` ### --question-- @@ -504,7 +494,7 @@ Which method will return a new array without changing the original array? #### --distractors-- -`splice()` +`shift()` --- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md index 01af9a24ea..c7d0c7c52e 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-audio-and-video # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,19 +21,19 @@ What is the purpose of the `Audio()` constructor in JavaScript? #### --distractors-- -Create a new audio file +Create a new audio file. --- -Play an existing audio file +Play an existing audio file. --- -Modify audio files +Modify audio files. #### --answer-- -Create and manipulate a new `audio` element +Create and manipulate a new `audio` element. ### --question-- @@ -65,19 +65,19 @@ What is the difference between `pause()` and `stop()` methods for media elements #### --distractors-- -There is no difference, they are synonyms +There is no difference, they are synonyms. --- -`pause()` stops playback permanently, while `stop()` allows resuming +`pause()` stops playback permanently, while `stop()` allows resuming. --- -`pause()` allows resuming playback, while `stop()` resets to the beginning +`pause()` allows resuming playback, while `stop()` resets to the beginning. #### --answer-- -`stop()` is not a valid method for media elements +`stop()` is not a valid method for media elements. ### --question-- @@ -109,19 +109,19 @@ What is the purpose of the `source` element within an `audio` or `video` element #### --distractors-- -Specify the volume of the media +Specify the volume of the media. --- -Add subtitles to the media +Add subtitles to the media. --- -Link to an external audio processor +Link to an external audio processor. #### --answer-- -Specify multiple media sources for different formats +Specify multiple media sources for different formats. ### --question-- @@ -153,19 +153,19 @@ What does a codec do in the context of audio and video? #### --distractors-- -Increases the volume of the media +Increases the volume of the media. --- -Changes the file format of the media +Changes the file format of the media. --- -Encrypts the media for secure transmission +Encrypts the media for secure transmission. #### --answer-- -Compresses and decompresses digital media +Compresses and decompresses digital media. ### --question-- @@ -175,19 +175,19 @@ Which API provides a way to create, process, and analyze audio in web applicatio #### --distractors-- -Audio Processing API +Audio Processing API. --- -Sound Manipulation API +Sound Manipulation API. --- -Media Stream API +Media Stream API. #### --answer-- -Web Audio API +Web Audio API. ### --question-- @@ -197,19 +197,19 @@ What is the purpose of the `getUserMedia()` method? #### --distractors-- -Authenticate users with a media service +Authenticate users with a media service. --- -Retrieve user preferences for media playback +Retrieve user preferences for media playback. --- -Download media files to the user's device +Download media files to the user's device. #### --answer-- -Access the user's camera and/or microphone +Access the user's camera and/or microphone. ### --question-- @@ -246,19 +246,19 @@ audio.loop = true; #### --distractors-- -Plays the audio file once +Plays the audio file once. --- -Increases the volume of the audio +Increases the volume of the audio. --- -Pauses the audio after one loop +Pauses the audio after one loop. #### --answer-- -Sets the audio to repeat indefinitely +Sets the audio to repeat indefinitely. ### --question-- @@ -290,19 +290,19 @@ What is the purpose of the `MediaRecorder` API? #### --distractors-- -To play audio and video files +To play audio and video files. --- -To edit existing media files +To edit existing media files. --- -To create visual representations of audio +To create visual representations of audio. #### --answer-- -To record audio and video from a media stream +To record audio and video from a media stream. ### --question-- @@ -334,19 +334,19 @@ What does the `preload` attribute do when used with audio or video elements? #### --distractors-- -Automatically starts playing the media +Automatically starts playing the media. --- -Loads the media file before loading the rest of the page +Loads the media file before loading the rest of the page. --- -Applies a filter to the media +Applies a filter to the media. #### --answer-- -Specifies how much of the media file should be loaded when the page loads +Specifies how much of the media file should be loaded when the page loads. ### --question-- @@ -378,19 +378,19 @@ What is the purpose of the Media Source Extensions API? #### --distractors-- -Add visual effects to video +Add visual effects to video. --- -Convert between different media formats +Convert between different media formats. --- -Enable JavaScript to synchronize multiple audio tracks +Enable JavaScript to synchronize multiple audio tracks. #### --answer-- -Enable JavaScript to generate media streams for playback +Enable JavaScript to generate media streams for playback. ### --question-- @@ -427,19 +427,19 @@ navigator.mediaDevices.enumerateDevices() #### --distractors-- -Plays all available media devices +Plays all available media devices. --- -Stops all active media streams +Stops all active media streams. --- -Counts the number of connected displays +Counts the number of connected displays. #### --answer-- -Lists all available media input and output devices +Lists all available media input and output devices. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md index 0dfe06296f..f63aabe8b3 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-classes # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -87,7 +87,7 @@ What does `this` represent inside a class constructor? #### --distractors-- -The global object. +The global class object. --- @@ -99,7 +99,7 @@ An undefined reference. #### --answer-- -The instance of the class being created. +An instance of the class. ### --question-- @@ -109,7 +109,7 @@ Which of the following describes how `this` behaves in an arrow function inside #### --distractors-- -It refers to the method calling the arrow function. +It inherits the value of `this` from the nearest function in a different scope. --- @@ -117,11 +117,11 @@ It refers to a newly created instance of the class. --- -It refers to `undefined` by default. +It inherits the value of `this` from the global object in strict mode. #### --answer-- -It inherits the value of `this` from the enclosing scope where they are defined. +It inherits the value of `this` from the enclosing scope where it is defined. ### --question-- @@ -131,7 +131,7 @@ What is the primary purpose of the `extends` keyword? #### --distractors-- -To define static methods in a class. +To define static methods in a parent class constructor. --- @@ -139,11 +139,11 @@ To create a method in a class. --- -To initialize properties in the parent class. +To initialize default properties in the parent class. #### --answer-- -To create a subclass that inherits methods from a parent class. +To create a subclass that inherits from a parent class. ### --question-- @@ -222,15 +222,15 @@ What is the function of the `super` keyword in a subclass? #### --distractors-- -To define a new instance of a class. +To define a new instance of the parent class. --- -To delete properties from a class. +To delete methods and properties from the parent class. --- -To access only the static methods of a class. +To access only the static methods of the parent class. #### --answer-- @@ -490,7 +490,7 @@ An undefined variable. #### --answer-- -The specific instance of `Animal` being created. +The instance of `Animal`. ### --question-- @@ -500,7 +500,7 @@ What is the primary use of static properties? #### --distractors-- -To set default values for each instance. +To define default propeties for each class instance. --- @@ -512,4 +512,4 @@ To define instance-specific data. #### --answer-- -To store class-wide data that remains constant across instances. +To store class-wide data shared across instances. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md index b01389747e..95252e677e 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-comparisons-and-conditionals # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -287,7 +287,7 @@ Nothing gets printed to the console. ```js if (2 == "2") { - // Statement + // Statement. } ``` diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md index 13af765c56..23bf2405bd 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-dates # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md index 74b23bfcb7..0ae9ac774e 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-events # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -53,19 +53,19 @@ parentList.addEventListener('click', function(event) { #### --distractors-- -DOM Manipulation +DOM Manipulation. --- -Event Bubbling +Event Bubbling. --- -Callback Function +Callback Function. #### --answer-- -Event Delegation +Event Delegation. ### --question-- @@ -75,19 +75,19 @@ What is the term for a function that runs in response to an event? #### --distractors-- -Middleware function +Middleware function. --- -Promise function +Promise function. --- -Asynchronous function +Asynchronous function. #### --answer-- -Callback function +Callback function. ### --question-- @@ -97,19 +97,19 @@ What does the `event.target` property return? #### --distractors-- -The parent of the event object +The parent of the event object. --- -The HTML document +The HTML document. --- -The window object +The window object. #### --answer-- -The element that triggered the event +The element that triggered the event. ### --question-- @@ -163,19 +163,19 @@ What is the main advantage of using `addEventListener()` over inline event handl #### --distractors-- -It supports synchronous handling +It supports synchronous handling. --- -It reduces CSS file size +It reduces CSS file size. --- -It can't be removed once added +It can't be removed once added. #### --answer-- -It allows multiple event listeners to be attached to a single element +It allows multiple event listeners to be attached to a single element. ### --question-- @@ -185,19 +185,19 @@ What is the purpose of the `event.preventDefault()` method? #### --distractors-- -To stop the event from propagating to other listeners +To stop the event from propagating to other listeners. --- -To set a default value to the event +To set a default value to the event. --- -To remove the event handler +To remove the event handler. #### --answer-- -To prevent the default action associated with an event from being executed +To prevent the default action associated with an event from being executed. ### --question-- @@ -207,19 +207,19 @@ What does the term "event propagation" refer to? #### --distractors-- -Events can only be handled by inline handlers +Events can only be handled by inline handlers. --- -Events are triggered by CSS changes +Events are triggered by CSS changes. --- -Events are copied to a new window +Events are copied to a new window. #### --answer-- -Events travel through the DOM in phases +Events travel through the DOM in phases. ### --question-- @@ -273,19 +273,19 @@ Which of the following is a common use case for event delegation? #### --distractors-- -Preventing default browser behaviors +Preventing default browser behaviors. --- -Canceling event propagation +Canceling event propagation. --- -Creating custom events +Creating custom events. #### --answer-- -Handling click events on dynamically created elements +Handling click events on dynamically created elements. ### --question-- @@ -295,19 +295,19 @@ What is meant by the "default action" of an event in JavaScript? #### --distractors-- -The event's propagation is stopped automatically +The event's propagation is stopped automatically. --- -An external stylesheet is applied +An external stylesheet is applied. --- -The event listener is called twice +The event listener is called twice. #### --answer-- -The browser's predefined behavior that occurs after an event is triggered +The browser's predefined behavior that occurs after an event is triggered. ### --question-- @@ -317,19 +317,19 @@ Why is the once option in `addEventListener()` useful? #### --distractors-- -It makes the event listener asynchronous +It makes the event listener asynchronous. --- -It allows capturing to be the default phase +It allows capturing to be the default phase. --- -It stops the event from bubbling up +It stops the event from bubbling up. #### --answer-- -It ensures that the event listener is removed after being triggered once +It ensures that the event listener is removed after being triggered once. ### --question-- @@ -361,19 +361,19 @@ How does the concept of event delegation improve performance? #### --distractors-- -It creates separate listeners for each child +It creates separate listeners for each child. --- -It prevents child elements from triggering events +It prevents child elements from triggering events. --- -It limits event propagation to the capturing phase +It limits event propagation to the capturing phase. #### --answer-- -It reduces the number of event listeners by using a single listener on a parent element +It reduces the number of event listeners by using a single listener on a parent element. ### --question-- @@ -383,19 +383,19 @@ Why is it important to remove event listeners when they are no longer needed? #### --distractors-- -It makes the page load slower +It makes the page load slower. --- -It prevents CSS styles from being applied +It prevents CSS styles from being applied. --- -It breaks JavaScript execution +It breaks JavaScript execution. #### --answer-- -It improves performance and reduces memory leaks +It improves performance and reduces memory leaks. ### --question-- @@ -405,19 +405,19 @@ What does the `DOMContentLoaded` event indicate? #### --distractors-- -The page fully loaded with all images +The page fully loaded with all images. --- -Only external styles are loaded +Only external styles are loaded. --- -The page is still loading +The page is still loading. #### --answer-- -The HTML document has been completely loaded and parsed +The HTML document has been completely loaded and parsed. ### --question-- @@ -427,19 +427,19 @@ What is the role of `stopPropagation()` in event handling? #### --distractors-- -To execute the default behavior of the event +To execute the default behavior of the event. --- -To start event capturing +To start event capturing. --- -To bind the event handler to multiple events +To bind the event handler to multiple events. #### --answer-- -To stop the event from propagating to parent elements +To stop the event from propagating to parent elements. ### --question-- @@ -461,5 +461,5 @@ How can you remove all event listeners attached to an element? #### --answer-- -There is no direct way to remove all event listeners +There is no direct way to remove all event listeners. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md index 26d0998da5..1bbea0f79f 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-functional-programming # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 9 of the 10 questions below. # --quizzes-- @@ -21,41 +21,19 @@ What is a pure function? #### --distractors-- -A function that modifies global variables +A function that modifies global variables and returns either `undefined` or `null`. --- -A function that prints to the console +A function that logs an output to the console. --- -A function that changes its behavior based on external factors +A function that changes its behavior based on external factors and returns `null`. #### --answer-- -A function that always returns the same output for the same input and produces no side effects - -### --question-- - -#### --text-- - -Which of the following is a characteristic of a pure function? - -#### --distractors-- - -It has side effects - ---- - -It relies on global state - ---- - -It modifies its input parameters - -#### --answer-- - -Its output depends solely on its input arguments +A function that always returns the same output for the same input and produces no side effects. ### --question-- @@ -65,41 +43,19 @@ What is a side effect in functional programming? #### --distractors-- -An unexpected error in the code +An unexpected `TypeError` in your code. --- -A function that takes too long to execute +A function that takes too long to execute and crashes the program. --- -A recursive function call +A recursive function call that produces an infinite loop and crashes the program. #### --answer-- -A change in program state or interaction with the outside world - -### --question-- - -#### --text-- - -Which of the following is an example of a side effect? - -#### --distractors-- - -Returning a value from a function - ---- - -Creating a new object within a function - ---- - -Using a local variable - -#### --answer-- - -Writing to a file +A change to the state of the program that are observable outside the function. ### --question-- @@ -109,71 +65,27 @@ What is currying in functional programming? #### --distractors-- -A technique for cooking functions +A technique for designing tests to help you ensure your code is 100% error free. --- -A method for optimizing recursive functions +A more optimized way to write recursive functions so they run twice as fast as other functions. --- -A way to combine multiple functions into one +The process of building, designing and testing your code to ensure that it meets the standards laid out by ECMAScript. #### --answer-- -The process of transforming a function with multiple arguments into a sequence of functions, each with a single argument +The process of transforming a function with multiple arguments into a sequence of functions, each with a single argument. ### --question-- #### --text-- -In the context of pure functions, what does "referential transparency" mean? - -#### --distractors-- - -The function's code is visible to other parts of the program - ---- - -The function references external variables transparently - ---- - -The function's name clearly indicates its purpose - -#### --answer-- +What will be the output for the following pure function? -The function can be replaced with its corresponding value without changing the program's behavior - -### --question-- - -#### --text-- - -Which of the following is NOT a benefit of using pure functions? - -#### --distractors-- - -Easier to test - ---- - -More predictable behavior - ---- - -Easier to reason about - -#### --answer-- - -Improved performance in all cases - -### --question-- - -#### --text-- - -What is the output of this pure function? - -```javascript +```js const add = (a, b) => a + b; console.log(add(2, 5)); ``` @@ -198,291 +110,182 @@ console.log(add(2, 5)); #### --text-- -Which statement about currying is true? +Which of the following is an example of currying? #### --distractors-- -Currying always improves performance - ---- - -Curried functions are always pure functions - ---- - -Currying is only possible in functional programming languages - -#### --answer-- - -Currying transforms a function with multiple arguments into a sequence of functions - -### --question-- - -#### --text-- - -What is a potential side effect of the following function? - -```javascript -const greet = (name) => { - console.log(`Hello, ${name}!`); -}; +```js +const curriedAverage = (a, b, c) => a + b + c / 3 ``` -#### --distractors-- - -It modifies a global variable - ---- - -It changes the input parameter - --- -It returns a value - -#### --answer-- - -It interacts with the console (I/O operation) - -### --question-- - -#### --text-- - -In functional programming, what is function composition? - -#### --distractors-- - -Writing functions with multiple arguments - ---- - -Declaring functions inside other functions - ---- - -Using arrow function syntax - -#### --answer-- - -Combining two or more functions to create a new function - -### --question-- - -#### --text-- - -Which of the following is an example of a pure function? - -#### --distractors-- - -```javascript -const random = () => Math.random(); +```js +const curriedAverage = (a, b, c) => a + b + c ``` --- -```javascript -const log = (x) => console.log(x); -``` - ---- +```js +function curriedAverage(a) { + return a +} -```javascript -let count = 0; -const increment = () => ++count; +function curried(c) { + return c +} ``` #### --answer-- -```javascript -const double = (x) => x * 2; +```js +function curriedAverage(a) { + return function(b) { + return function(c) { + return (a + b + c) / 3; + }; + }; +} ``` ### --question-- #### --text-- -What is the primary goal of currying? +Which of the following is a key principle of functional programming? #### --distractors-- -To improve code readability +Modifying global variables frequently. --- -To create functions with fewer arguments +Using mutable data structures extensively. --- -To eliminate the need for higher-order functions +Emphasizing object-oriented inheritance. #### --answer-- -To enable partial application of functions +Avoiding side effects and using immutable data. ### --question-- #### --text-- -Which statement about side effects is FALSE? +What is an impure function? #### --distractors-- -Side effects make code harder to test +A function that returns an object. --- -Modifying a global variable is a side effect +A function without side effects. --- -Reading from a database can be considered a side effect +A function that returns `null` #### --answer-- -Pure functions can have side effects +A function with side effects. ### --question-- #### --text-- -What is the result of currying the following function? - -```javascript -const add = (a, b, c) => a + b + c; -``` +Which of the following is the correct way to call a curried function? #### --distractors-- -```javascript -const curried = (a, b, c) => a() + b() + c(); +```js +curriedAverage(2 3 4); ``` --- -```javascript -const curried = a => (b, c) => a + b + c; +```js +curriedAverage(2)==(3)==(4); ``` --- -```javascript -const curried = (a, b) => c => a + b + c; +```js +curriedAverage(2)=>(3)=>(4); ``` #### --answer-- -```javascript -const curried = a => b => c => a + b + c; +```js +curriedAverage(2)(3)(4); ``` -### --question-- - -#### --text-- - -Which of the following is NOT a side effect? - -#### --distractors-- - -Modifying the DOM - ---- - -Sending an HTTP request - ---- - -Changing the value of a global variable - -#### --answer-- - -Creating a new object and returning it - -### --question-- - -#### --text-- - -What is a higher-order function? - -#### --distractors-- - -A function that takes longer to execute - ---- - -A function with more than three arguments - ---- - -A function that uses advanced JavaScript features - -#### --answer-- - -A function that returns another function ### --question-- #### --text-- -Which of the following is a key principle of functional programming? +Which of the following is an example of an impure function? #### --distractors-- -Modifying global variables frequently +```js +function example(num) { + return num; +} +``` --- -Using mutable data structures extensively +```js +function sum(num1, num2) { + return num1 + num2 +} +``` --- -Emphasizing object-oriented inheritance +```js +function addToTotal(value) { + let total = 0; + total += value; + return total; +} +``` #### --answer-- -Avoiding side effects and using immutable data +```js +let total = 0; +function addToTotal(value) { + total += value; + return total; +} +``` ### --question-- #### --text-- -What is the main advantage of using pure functions? +Which of the following is NOT an example of a side effect? #### --distractors-- -They always execute faster than impure functions +Writing to a file. --- -They can access and modify global state easily +Modifying a global variable. --- -They can perform I/O operations more efficiently +Making an API call. #### --answer-- -They are easier to test and reason about - -### --question-- - -#### --text-- - -In the context of functional programming, what does "immutability" mean? - -#### --distractors-- - -Variables can be declared but not assigned - ---- - -Functions cannot be modified at runtime - ---- - -Objects cannot have methods - -#### --answer-- +Returning the sum of two values. -Data cannot be changed after it's created diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md index 623be232b7..6ea8777a41 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-functions # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,468 +17,543 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is the correct syntax for a function declaration? +Which of the following is the correct way to declare a function in JavaScript? #### --distractors-- -`var myFunction = function() {};` +```js +func greet () { + console.log("Hello there!"); +} +``` --- -`myFunction: function() {}` +```js +defineFunction greet () { + console.log("Hello there!"); +} +``` --- -`function = myFunction();` +```js +def greet () { + console.log("Hello there!"); +} +``` #### --answer-- -`function myFunction() {}` +```js +function greet () { + console.log("Hello there!"); +} +``` ### --question-- #### --text-- -Which of the following is a valid function expression? +What happens when you call (or execute) a function? #### --distractors-- -```js -function getSum(x, y) { - return x + y; -}; -``` +The code inside the function will run and `null` will always be returned. --- -```js -getSum: function(x, y) { - return x + y; -}; -``` +Nothing will happen when you call a function. --- -```js -function = getSum(x, y) { - return x + y; -}; -``` +A `TypeError` will be thrown and the program will crash. #### --answer-- -```js -getSum = function(x, y) { - return x + y; -}; -``` +The code inside the function will run and a value will be returned. ### --question-- #### --text-- -Where can function expressions be used? +Which of the following is the correct way to call a function? #### --distractors-- -Only within other functions +```js +exampleFunction; +``` --- -Only as part of an object literal +```js +exampleFunction>>; +``` --- -Only in the global scope +```js +()exampleFunction(); +``` #### --answer-- -Anywhere a variable can be used +```js +exampleFunction(); +``` ### --question-- #### --text-- -What is the difference between a function expression and a function declaration? +What is the role of the `return` keyword? #### --distractors-- -Function expressions can be hoisted, while function declarations cannot. +The `return` keyword will execute the function. --- -Both function expressions and function declarations can be hoisted. +The `return` keyword will throw a type error. --- -Neither function expressions nor function declarations can be hoisted. +The `return` keyword serves no purpose in functions. #### --answer-- -Function declarations can be hoisted, while function expressions cannot. +The `return` keyword returns a value from the function. ### --question-- #### --text-- -What does it mean for functions to be first-class citizens in JavaScript? +Which of the following is a valid function expression? #### --distractors-- -They can be assigned to variables. +```js +expression function getSum(x, y) { + return x + y; +}; +``` --- -They can be passed as arguments to other functions. +```js +getSum: function(x, y) { + return x + y; +}; +``` --- -They can be returned from functions. +```js +function = getSum(x, y) { + return x + y; +}; +``` #### --answer-- -All of the answers are correct. +```js +const getSum = function(x, y) { + return x + y; +}; +``` ### --question-- #### --text-- -Which of the following is a common use case for first-class functions in JavaScript? +What are function arguments? #### --distractors-- -Implementing object-oriented programming +Values that represents the absence of a value. --- -Defining global variables +Special values that act similar to anonymous functions. --- -Creating custom data types +Placeholder values used inside of the function. #### --answer-- -Creating higher-order functions +Real values passed to a function when it is called. ### --question-- #### --text-- -Which of the following is an example of a first-class function? +What are function parameters? #### --distractors-- -```js -function greet(name) { - console.log("Hello, " + name); -} -``` +Floating point values used inside of the function. --- -```js -var greet = function(name) { - console.log("Hello, " + name); -}; -``` +Values passed to a function when it is called. --- -```js -const greet = (name) => { - console.log("Hello, " + name); -} -``` +Values that represent the intentional absence of the value. #### --answer-- -All of the answers are correct. +Values listed inside the function definition. ### --question-- #### --text-- -Which of the following is not a common use case for first-class functions? +What value will be returned in the following code example? + +```js +function greet () { + console.log("Hello there!"); +} + +greet(); +``` #### --distractors-- -Defining object methods +`NaN` --- -Implementing closures +`TypeError` --- -Creating callbacks +`null` #### --answer-- -Creating custom data types +`undefined` ### --question-- #### --text-- -What is the syntax for an arrow function? +Which of the following is the correct syntax for an arrow function? #### --distractors-- -`myFunction: function() {}` +```js +const sum <<>> (num1, num2) => num1 + num2 +``` --- -`function myFunction() {}` +```js +const sum === (num1, num2) === num1 + num2 +``` --- -`const myFunction = function() {};` +```js +const sum >=> (num1, num2) => num1 + num2 +``` #### --answer-- -`myFunction = () => { ... };` +```js +const sum = (num1, num2) => num1 + num2 +``` ### --question-- #### --text-- -What is the difference between a regular function and an arrow function? +What will be result for the following code? + +```js +function greet() { + const developer = "Jessica"; + console.log("Hello there!"); +} + +console.log(developer); +``` #### --distractors-- -Arrow functions do not have their own 'this' binding. +Nothing will happen and the code will run normally. --- -Arrow functions cannot be used as constructors. +The string `"Hello there!"` will be logged to the console. --- -Arrow functions cannot be used with the 'new' keyword. +The string `"Hello!"` will be logged to the console. #### --answer-- -All of the answers are correct. +You will get a reference error because `developer` is not defined globally. ### --question-- #### --text-- -You can also call arrow function as +When can you omit a set of parentheses around a parameter list for an arrow function? #### --distractors-- -Lambda function +You should always omit the parentheses around a parameter list. --- -Fat arrow function +You are never supposed to omit the parentheses for an arrow function. --- -Neither Lambda function or Fat arrow function +You should only omit the parentheses when you are working with multiple parameters. #### --answer-- -Both Lambda function and Fat arrow function +You should only omit the parentheses when you only have one parameter. ### --question-- #### --text-- -What is the benefit of using arrow functions? +When can you omit the curly braces and `return` keyword for an arrow function? #### --distractors-- -You can omit curly braces and return keyword if your output is going to be a single line. +You should always omit the curly braces and `return` keyword. --- -They provide easy syntax while writing promises and callbacks. +You should never omit the curly braces and `return` keyword. --- -They have short syntax and increase readability. +When the function body has multiple lines of code. #### --answer-- -All of the answers are correct. +When the function body consists of a single expression. ### --question-- #### --text-- -What is the difference between a function and a method? +What will be the result for the following code? + +```js +function exampleFunction () { + +} +exampleFunction(); +``` #### --distractors-- -There is no difference between functions and methods. +The program will crash. --- -Functions and methods are properties of objects +JavaScript will skip over that piece of code. --- -Functions are properties of objects, while methods are standalone functions. +An error message will display. #### --answer-- -Methods are properties of objects, while functions are standalone functions. +Nothing will happen. ### --question-- #### --text-- -Can a method be used outside of its object? +Which of the following is the correct way to use default parameters? #### --distractors-- -Yes, methods can be used anywhere a function can be used. +```js +function sum (num1, num2 <<>> 12) { + return num1 + num2 +} +``` --- -Methods can be used outside of their object, but only if they are bound to a specific 'this' value. +```js +function sum (num1, num2 === 12) { + return num1 + num2 +} +``` --- -Methods can be used outside of their object, but only if they are defined as arrow functions. +```js +function sum (num1, num2 >> 12) { + return num1 + num2 +} +``` #### --answer-- -No, methods can only be used within their object. +```js +function sum (num1, num2 = 12) { + return num1 + num2 +} +``` ### --question-- #### --text-- -Which of the following is an example of a method? - -#### --distractors-- +What will be the result for the following code? ```js -function greet(name) { - console.log("Hello, " + name); +const developer = "Jessica"; + +function greet() { + console.log("Hello, " + developer) } + +greet(); ``` +#### --distractors-- + +The string `"Hello, developer"` will be logged to the console. + --- -```js -var greet = function(name) { - console.log("Hello, " + name); -}; -``` +An error message will display in the console. --- -All of them. +Nothing will display in the console. #### --answer-- -```js -const person = { - name: "Alice", - greet: function() { - console.log("Hello, my name is " + this.name); - } -}; -``` +The string `"Hello, Jessica"` will be logged to the console. ### --question-- #### --text-- -What is the benefit of using methods instead of functions? +What happens if you try to remove the curly braces for a regular function? #### --distractors-- -Methods provide a more organized way to group related functionality. +An alert box will display on the page with an error. --- -Methods can be accessed using dot notation, which can make code more readable. +The program will crash and not start again. --- -Methods have access to the properties and methods of their object. +Nothing will happen. #### --answer-- -All of the answers are correct. +You will get a syntax error. ### --question-- #### --text-- -What is the difference between arguments and parameters? +What will be the result for the following code? + +```js +const sum = (num1, num2) => num1 + num2 +console.log(sum(0, 0) + 10); +``` #### --distractors-- -There is no difference between arguments and parameters. +An error message will display in the console. --- -Parameters are the actual values passed to a function when it is called, while arguments are the names of variables used in a function definition. +The number `0` will be logged to the console. --- -Arguments and parameters are used interchangeably. +Nothing will be logged to the console. #### --answer-- -Parameters are the names of variables used in a function definition, while arguments are the actual values passed to the function when it is called. +The number `10` will be logged to the console. ### --question-- #### --text-- -What happens if a function is called with more arguments than it expects? +What will be the output for the following code? + +```js +const exampleFunction = (param1, param2) => param1 + param2; +console.log(exampleFunction(3, "Something")); +``` #### --distractors-- -The extra arguments will be assigned to the remaining parameters. +`null` --- -The function will throw an error. +`undefined` --- -The function will use the default values specified in the function definition. +`3 + "Something"` #### --answer-- -The extra arguments will be ignored. +`"3Something"` ### --question-- #### --text-- -What is the correct syntax for defining a function with default parameter values? +What will be the result for the following code? + +```js +const sum = (num1, num2) => num1 + num2 +console.log(sum(0, 0) + num2); +``` #### --distractors-- -`function myFunction(param1 = value1, param2) { ... }` +An error message saying `num1` is not defined. --- -`function myFunction(param1, param2 = value2) { ... }` +The number `0` will be displayed in the console. --- -`function myFunction(param1: value1, param2: value2) { ... }` +`undefined` will be displayed in the console. #### --answer-- -`function myFunction(param1 = value1, param2 = value2) { ... }` +An error message saying `num2` is not defined. ### --question-- #### --text-- -What is the default value for a missing argument in a function call? +What will be the output for the following code? + +```js +const divideTwoNumbers = (num1, num2) => num1 / num2; +console.log(divideTwoNumbers(3, 0)); +``` #### --distractors-- @@ -494,5 +569,5 @@ What is the default value for a missing argument in a function call? #### --answer-- -`undefined` +`Infinity` diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md index 43ab730256..75e25e9214 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-fundamentals # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,19 +21,19 @@ What are default parameters? #### --distractors-- -Parameters that should always be present in a function +Parameters that should always be present in a function. --- -Parameters that are passed in an array +Parameters that are passed in an array. --- -Parameters that are destructured from an object +Parameters that are destructured from an object. #### --answer-- -Parameters that are optional and have a default value when not provided +Parameters that are optional and have a default value when not provided. ### --question-- @@ -65,19 +65,19 @@ What does the rest parameter syntax allow you to do in JavaScript? #### --distractors-- -Pass parameters by reference +Pass parameters by reference. --- -Provide a set default parameters +Provide a set default parameters. --- -Destructure an object into parameters +Destructure an object into parameters. #### --answer-- -Capture all arguments into one array +Capture all arguments into one array. ### --question-- @@ -109,19 +109,19 @@ What does destructuring allows you to do in JavaScript? #### --distractors-- -Build complex objects +Build complex objects. --- -Serialize objects +Serialize objects. --- -Merge arrays or objects +Merge arrays or objects. #### --answer-- -Extract properties from objects and elements from arrays +Extract properties from objects and elements from arrays. ### --question-- @@ -153,19 +153,19 @@ Which of these is NOT a good practice for naming variables and functions in Java #### --distractors-- -Use camelCase notation +Use camelCase notation. --- -Start variable names with a letter, $ or _ +Start variable names with a letter, $ or _. --- -Using meaningful names +Using meaningful names. #### --answer-- -Using reserved keywords as variable names +Using reserved keywords as variable names. ### --question-- @@ -175,19 +175,19 @@ What is the primary purpose of a linter in JavaScript development? #### --distractors-- -To format code automatically +To format code automatically. --- -To optimize code for performance +To optimize code for performance. --- -To create documentation for code +To create documentation for code. #### --answer-- -To detect potential errors and style issues in code +To detect potential errors and style issues in code. ### --question-- @@ -219,15 +219,15 @@ Which of these describes accessibility? #### --distractors-- -Making sure code is accessible to other developers +Making sure code is accessible to other developers. --- -Writing secure code +Writing secure code. --- -Controlling who can access certain data +Controlling who can access certain data. #### --answer-- @@ -245,15 +245,15 @@ It's slower than `let` and `const` --- -It causes a syntax error +It causes a syntax error. --- -It doesn't allow type checking +It doesn't allow type checking. #### --answer-- -It has function scope instead of block scope, which can lead to unexpected behaviors +It has function scope instead of block scope, which can lead to unexpected behaviors. ### --question-- @@ -263,19 +263,19 @@ In JavaScript, how is memory for variables typically allocated? #### --distractors-- -Manually by the developer +Manually by the developer. --- -By the browser +By the browser. --- -By the server +By the server. #### --answer-- -Automatically by the runtime engine +Automatically by the runtime engine. ### --question-- @@ -285,19 +285,19 @@ What is hoisting in JavaScript? #### --distractors-- -Raising errors to the top of the code +Raising errors to the top of the code. --- -The process of creating new variables +The process of creating new variables. --- -Automatically moving `var` declarations to the top of the block +Automatically moving `var` declarations to the top of the block. #### --answer-- -The process of moving variable declarations to the top of their scope +The process of moving variable declarations to the top of their scope. ### --question-- @@ -307,19 +307,19 @@ What is the purpose of modules in JavaScript? #### --distractors-- -To improve code performance +To improve code performance. --- -To make code more difficult to understand +To make code more difficult to understand. --- -To create new programming languages +To create new programming languages. #### --answer-- -To organize code into reusable units +To organize code into reusable units. ### --question-- @@ -329,19 +329,19 @@ In the context of JavaScript modules, what does `export` do? #### --distractors-- -Save the code to disk +Save the code to disk. --- -Include external libraries in your code +Include external libraries in your code. --- -Publish your code to a public repository +Publish your code to a public repository. #### --answer-- -Make variables, functions or classes available to be imported by other modules +Make variables, functions or classes available to be imported by other modules. ### --question-- @@ -373,19 +373,19 @@ In the context of JavaScript memory management, what are memory leaks? #### --distractors-- -Oversized memory use +Oversized memory use. --- -Coding errors leading to application crashes +Coding errors leading to application crashes. --- -Part of the garbage collection process +Part of the garbage collection process. #### --answer-- -Memory allocations which are never properly made unreachable +Memory allocations which are never properly made unreachable. ### --question-- @@ -395,19 +395,19 @@ What is the main difference between `import` and `require` in JavaScript? #### --distractors-- -`import` is used in Node.js, while `require` is used in the browser +`import` is used in Node.js, while `require` is used in the browser. --- -`import` supports asynchronous loading, while `require` does not +`import` supports asynchronous loading, while `require` does not. --- -`import` is used for CSS and image files, while `require` is used for JavaScript files +`import` is used for CSS and image files, while `require` is used for JavaScript files. #### --answer-- -`import` is part of ES6 syntax, while `require` is an older module loading syntax +`import` is part of ES6 syntax, while `require` is an older module loading syntax. ### --question-- @@ -417,11 +417,11 @@ What does `let` provide that `var` does not? #### --distractors-- -Global scope +Global scope. --- -Read-only variables +Read-only variables. --- @@ -429,7 +429,7 @@ Unlimited re-declaration #### --answer-- -Block scope +Block scope. ### --question-- @@ -439,17 +439,17 @@ What is the purpose of a module bundler like Webpack or Rollup? #### --distractors-- -To optimize code for performance +To optimize code for performance. --- -It translates JavaScript code into machine language +It translates JavaScript code into machine language. --- -To format code automatically +To format code automatically. #### --answer-- -To combine multiple JavaScript modules into a single file +To combine multiple JavaScript modules into a single file. diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-higher-order-functions/66edcdd18a4ef8df16e6bb7e.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-higher-order-functions/66edcdd18a4ef8df16e6bb7e.md index 7be9dba11e..de53f54549 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-higher-order-functions/66edcdd18a4ef8df16e6bb7e.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-higher-order-functions/66edcdd18a4ef8df16e6bb7e.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-higher-order-functions # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md index 8f79dade85..c76929783d 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-loops # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -77,7 +77,7 @@ Array #### --answer-- -Math object +Math object. ### --question-- @@ -87,19 +87,19 @@ Which of the following is not a type of loop supported in JavaScript? #### --distractors-- -`for` loop +`for` loop. --- -`while` loop +`while` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`if...else` loop +`if...else` loop. ### --question-- @@ -143,19 +143,19 @@ Which loop executes the code block once, before checking if the condition is tru #### --distractors-- -`while` loop +`while` loop. --- -`for...of` loop +`for...of` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`do...while` loop +`do...while` loop. ### --question-- @@ -165,19 +165,19 @@ Which loop loops over the values of an iterable object? #### --distractors-- -`for...in` loop +`for...in` loop. --- -`for` loop +`for` loop. --- -`do...while` loop +`do...while` loop. #### --answer-- -`for...of` loop +`for...of` loop. ### --question-- @@ -209,19 +209,19 @@ For iterating over an array, which loop is not the best? #### --distractors-- -`for` loop +`for` loop. --- -`for...of` loop +`for...of` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`while` loop +`while` loop. ### --question-- @@ -231,19 +231,19 @@ Which loop is the best for iterating objects? #### --distractors-- -`for...of` loop +`for...of` loop. --- -`do...while` loop +`do...while` loop. --- -`for` loop +`for` loop. #### --answer-- -`for...in` loop +`for...in` loop. ### --question-- @@ -297,19 +297,19 @@ What statement can be used to break out of a loop completely? #### --distractors-- -The `continue` statement +The `continue` statement. --- -The `label` statement +The `label` statement. --- -The `skip` statement +The `skip` statement. #### --answer-- -The `break` statement +The `break` statement. ### --question-- @@ -319,19 +319,19 @@ Which statement can be used to skip the current iteration and move to the next i #### --distractors-- -The `break` statement +The `break` statement. --- -The `label` statement +The `label` statement. --- -The `return` statement +The `return` statement. #### --answer-- -The `continue` statement +The `continue` statement. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-maps-and-sets/67358be1c7903489c0a7db78.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-maps-and-sets/67358be1c7903489c0a7db78.md index 9f9c01a60e..0c9007b514 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-maps-and-sets/67358be1c7903489c0a7db78.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-maps-and-sets/67358be1c7903489c0a7db78.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-maps-and-sets # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md index 23c49152c8..1458c1b88a 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-math # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,53 +17,33 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is the result of this code? - -``` js -const num1 = Number('888'); -const num2 = new Number('777'); - -console.log(num1 === 888); -console.log(num2 === 777); -``` +What does `NaN` stand for? #### --distractors-- -```js -true -true -``` +`Numeric and Number` --- -```js -false -false -``` +`Not a Null` --- -```js -false -true -``` +`Null and Number` #### --answer-- -```js -true -false -``` +`Not a Number` ### --question-- #### --text-- -Which of the following is not an arithmetic operator in JavaScript? +Which of the following is NOT an arithmetic operator in JavaScript? #### --distractors-- -`%` +`*` --- @@ -71,71 +51,55 @@ Which of the following is not an arithmetic operator in JavaScript? --- -`--` +`-` #### --answer-- -`==` +`??` ### --question-- #### --text-- -Which of the following will log the correct gross profit? +What happens if you try to divide by zero in JavaScript? #### --distractors-- -``` js -let store1_sales = 7500; -let store2_sales = 6000; -console.log("Total Sales: " + store1_sales + store2_sales); -``` +JavaScript will output 0. --- -``` js -let store1_sales = 7500; -let store2_sales = 6000; -console.log("Total Sales: " + store1_sales - store2_sales); -``` +Nothing will happen. --- -``` js -let store1_sales = 7500; -let store2_sales = 6000; -console.log("Total Sales: " + (store1_sales - store2_sales)); -``` +JavaScript will throw an error. #### --answer-- -``` js -let store1_sales = 7500; -let store2_sales = 6000; -console.log("Total Sales: " + (store1_sales + store2_sales)); -``` +JavaScript will output `Infinity` ### --question-- #### --text-- -What is the result of the statement `25 * 4 - 16 / (2 * 4) + 8`? +Which of the following is the correct use of the exponentiation operator? #### --distractors-- -`18.5` +`2*3` --- -`107.5` +`2#3` --- -`17` +`2%3` #### --answer-- -`106` +`2**3` ### --question-- @@ -163,7 +127,7 @@ Which operator should you use when decrementing a variable in JavaScript? #### --text-- -Which of the following is not a bitwise operator? +Which of the following is NOT a bitwise operator? #### --distractors-- @@ -229,89 +193,89 @@ The `==` operator only compares values whereas the `===` operator compares value #### --text-- -Which of the following statements are false about unary plus (`+`) operators? +What is the unary plus operator (`+`) used for? #### --distractors-- -It tries to convert the operand into a number. +It is used to decrement a value by one. --- -It is the fastest way to convert an operand to a number. +It is used to get the remainder from an operation. --- -It can convert operands with negative numbers except for hexadecimals. +It is used to invert the binary representation of a number. #### --answer-- -It can't convert `true`, `false`, or `null` into a number. +It is used to convert its operand into a number. ### --question-- #### --text-- -Which method in the built-in Math object is used to round up a number? +Which of the following `Math` methods rounds a value to the nearest whole integer? #### --distractors-- -`Math.round(num)` +`Math.trunc()` --- -`Math.floor(num)` +`Math.max()` --- -`Math.fround(num)` +`Math.min()` #### --answer-- -`Math.ceil(num)` +`Math.round()` ### --question-- #### --text-- -Which of the following Math object methods are used to raise a base to a power? +What does the `Math.sqrt()` method do? #### --distractors-- -`Math.exp(base, power)` +This method returns a random floating point number. --- -`Math.raise(base, power)` +This method returns the absolute value for a number. --- -`Math.e(base, power)` +This method returns the cube of a number. #### --answer-- -`Math.pow(base, power)` +This method returns the square root of a number. ### --question-- #### --text-- -Which of the following is the correct method for generating a random number in JavaScript? +Which of the following is NOT a valid method for the `Math` object? #### --distractors-- -`Math.rand(1,10)` +`Math.ceil()` --- -`Math.rand()` +`Math.pow()` --- -`Math.random(1,10)` +`Math.abs()` #### --answer-- -`Math.random()` +`Math.extend()` ### --question-- @@ -321,11 +285,11 @@ Which of the following will return `false`? #### --distractors-- -`isNaN("1998", "1999")` +`isNaN("Matt")` --- -`isNaN({})` +`isNaN()` --- @@ -333,105 +297,114 @@ Which of the following will return `false`? #### --answer-- -`isNaN(null)` +`isNaN(7)` ### --question-- #### --text-- -Which of the following will convert `172` to its hexadecimal equivalent? +What does the `parseFloat()` method do? #### --distractors-- -`(-0xa5).toString(2);` +It parses a string argument and performs a bitwise operation on it. --- -`(172).string(0x);` +It parses a string argument and returns `false`. --- -`(172).parseString(0x);` +It parses a string argument and returns an integer. #### --answer-- -`(172).toString(16);` +It parses a string argument and returns a floating-point number. ### --question-- #### --text-- -Which of the following is the right way to convert a string to an integer? +What will be logged to the console? + +```js +const num = 5; +console.log(++num); +``` #### --distractors-- -`parseINT("300")` +`error` --- -`int("300")` +`null` --- -`integer("300")` +`5` #### --answer-- -`parseInt("300")` +`6` ### --question-- #### --text-- -Which of the following statements is false? +What would be the output for the following code? + +```js +console.log(5 == '5'); +``` #### --distractors-- -`parseFloat()` ignores trailing invalid characters +`undefined` --- -`parseFloat()` can parse a string that begins with `Infinity` or `-Infinity` +`false` --- -`parseFloat("0x1f")` will return `0` +`null` #### --answer-- -`parseFloat()` requires two parameters +`true` ### --question-- #### --text-- -Which of the following is false? +What is operator precedence? #### --distractors-- -A number greater than 100 as an argument to the `Number.prototype.toFixed()` method will result to a range error +Operator precedence is used to check if the value on the left is less than the one on the right. --- -`Number.prototype.toFixed(numDecimalPlaces)` is used to return a number converted to a string with decimals places depending on the argument +Operator precedence is used to raise a variable to the power of the specified number and reassigns the result to the variable. --- -Calling the `Number.prototype.toFixed()` method on a number object with decimal points and no argument will round the number to the nearest ones +Operator precedence is used to to increase the value by one. #### --answer-- -Using `Number.prototype.toFixed()` without an argument will by default add a decimal point followed by a zero +Operator precedence determines the order in which operations are evaluated in an expression. ### --question-- #### --text-- -Which of the following is not a comparison operator? +Which of the following is NOT a comparison operator? #### --distractors-- -`!=` +`>` --- @@ -439,7 +412,7 @@ Which of the following is not a comparison operator? --- -`===` +`<` #### --answer-- @@ -449,43 +422,75 @@ Which of the following is not a comparison operator? #### --text-- -Which of the following is false? +What does the unary negation operator (`-`) do? #### --distractors-- -Exponentiation has a lower operator precedence than the grouping operator `()`. +It flips the boolean value of its operand. --- -Postfix operators like `x++` or `x--` has higher precedence than prefix operators. +It decreases the value by one. --- -Relational operators like `>` or `<` has higher precedence than equality operators. +It increases the value by one. #### --answer-- -Logical operator like `AND` and `OR` have higher precedence than bitwise operators. +It negates the operand. ### --question-- #### --text-- -`Math.random()` returns a number in what range? +Which of the following is an example of using the nullish coalescing operator? #### --distractors-- -`Math.random()` returns a number between 0 (inclusive) and 1 (inclusive) +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +userSettings.theme () 'light'; +``` --- -`Math.random()` returns a number between 0 (exclusive) and 1 (inclusive) +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +userSettings.theme ** 'light'; +``` --- -`Math.random()` returns a number between 0 (exclusive) and 1 (exclusive) +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +userSettings.theme \\ 'light'; +``` #### --answer-- -`Math.random()`returns a number between 0 (inclusive) and 1 (exclusive) +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +userSettings.theme ?? 'light'; +``` diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md index 04ccf94347..52a8c63c7c 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-objects # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,23 +17,23 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -Which of the following does not describe an object in Javascript? +Which of the following does not describe an object in JavaScript? #### --distractors-- -A collection of key-value pairs +A collection of key-value pairs. --- -A container for properties and methods +A container for properties and methods. --- -One of Javascript's data types +One of JavaScript's data types. #### --answer-- -One of Javascript's primitives +One of JavaScript's primitives. ### --question-- @@ -90,10 +90,10 @@ const obj = { key: "some-value" } Which of the following correctly accesses the value of the `street` property in the object below? ```js -const person = { - address: { +const person = { + address: { street: "sample-street" - } + } } ``` @@ -121,19 +121,19 @@ Which of the following property keys can only be used with a bracket notation as #### --distractors-- -A property key that is known and static +A property key that is known and static. --- -A property key nested in multiple levels of the object +A property key nested in multiple levels of the object. --- -A property key that might not exist in the object +A property key that might not exist in the object. #### --answer-- -A property key that is dynamic +A property key that is dynamic. ### --question-- @@ -168,10 +168,10 @@ const person = { name: "John" } Which of the following correctly accesses the value of `street` property via destructuring in the object below? ```js -const person = { - address: { +const person = { + address: { street: "sample-street" - } + } } ``` @@ -337,19 +337,19 @@ Which of the following is true about object setters? #### --distractors-- -An object setter must be called with a parenthesis +An object setter must be called with a parenthesis. --- -An object setter must be defined with the same name as the property it sets +An object setter must be defined with the same name as the property it sets. --- -An object setter must be accompanied by a getter +An object setter must be accompanied by a getter. #### --answer-- -An object setter must be defined with exactly one argument +An object setter must be defined with exactly one argument. ### --question-- @@ -389,11 +389,11 @@ Enumerable properties are defined by the object while non-enumerable properties --- -Enumerable properties can be accessed via dot notation while non-enumerable properties can only be accessed via bracket notation +Enumerable properties can be accessed via dot notation while non-enumerable properties can only be accessed via bracket notation. #### --answer-- -Enumerable properties are properties whose internal enumerable flag is set to true while non-enumerable properties' internal enumerable flag is set to false +Enumerable properties are properties whose internal enumerable flag is set to true while non-enumerable properties' internal enumerable flag is set to false. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md index 3ba595809d..9a372d5f6d 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-regular-expressions # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md index b8c343bfbe..4a89fdc6d1 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-strings # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -65,19 +65,19 @@ Which of the following options is the newline character? #### --distractors-- -`'\newline'` +`\newline` --- -`'\new'` +`\new` --- -`'\line'` +`\line` #### --answer-- -`'\n'` +`\n` ### --question-- @@ -205,57 +205,56 @@ developer[2]; #### --text-- -How can you obtain the ASCII value of a character in a string? +How can you obtain the ASCII value of the first character in the string `"hello"`? #### --distractors-- -`str.charCode()` +`"hello".charCode(0)` --- -`str.codeAt()` +`"hello".codeAt(0)` --- -`str.getCharIndex()` +`"hello".getCharIndex(0)` #### --answer-- -`str.charCodeAt()` +`"hello".charCodeAt(0)` ### --question-- #### --text-- -How can you obtain the character corresponding to an ASCII value? +Which method can you use to obtain the character corresponding to an ASCII value? #### --distractors-- -`String.toASCII()` +`toASCII()` --- -`String.toChar()` +`toChar()` --- -`String.toCode()` +`toCode()` #### --answer-- -`String.fromCharCode()` +`fromCharCode()` ### --question-- #### --text-- -Which of the following `indexOf` examples will correctly return -1? +Which of the following `indexOf` examples will log `-1` to the console? #### --distractors-- ```js const organization = "freeCodeCamp"; - console.log(organization.indexOf("e")); ``` @@ -263,7 +262,6 @@ console.log(organization.indexOf("e")); ```js const organization = "freeCodeCamp"; - console.log(organization.indexOf("f")); ``` @@ -271,7 +269,6 @@ console.log(organization.indexOf("f")); ```js const organization = "freeCodeCamp"; - console.log(organization.indexOf("C")); ``` @@ -279,7 +276,6 @@ console.log(organization.indexOf("C")); ```js const organization = "freeCodeCamp"; - console.log(organization.indexOf("c")); ``` @@ -287,23 +283,23 @@ console.log(organization.indexOf("c")); #### --text-- -How can you check if the string `"JavaScript"` contains a specific substring? +How can you check if the string `"JavaScript"` contains `"Script"`? #### --distractors-- -`"JavaScript".has()` +`"JavaScript".has("Script")` --- -`"JavaScript".contains()` +`"JavaScript".contains("Script")` --- -`"JavaScript".exists()` +`"JavaScript".exists("Script")` #### --answer-- -`"JavaScript".includes()` +`"JavaScript".includes("Script")` ### --question-- @@ -313,7 +309,7 @@ Which of the following extracts the substring `"Script"` from the string `"JavaS #### --distractors-- -`"JavaScript".remove(3)` +`"JavaScript".find(5)` --- @@ -321,7 +317,7 @@ Which of the following extracts the substring `"Script"` from the string `"JavaS --- -`"JavaScript".cut(3)` +`"JavaScript".cut(5)` #### --answer-- @@ -375,23 +371,23 @@ How do you convert the string `"JavaScript"` to lowercase? #### --text-- -Which of the following methods is used to find a specified value in a string and replace it with another value? +Which of the following will replace `"dogs"` with `"cats"` in the string `"I love dogs"`. #### --distractors-- -`indexOf()` +`"I love dogs".slice("dogs", "cats")` --- -`replaceWith()` +`"I love dogs".replaceWith("dogs", "cats")` --- -`find()` +`"I love dogs".find("dogs", "cats")` #### --answer-- -`replace()` +`"I love dogs".replace("dogs", "cats")` ### --question-- @@ -401,25 +397,25 @@ Which method is used to repeat a string a specified number of times? #### --distractors-- -`str.times()` +`times()` --- -`str.repeatTimes()` +`repeatTimes()` --- -`str.repeatNumber()` +`repeatNumber()` #### --answer-- -`str.repeat()` +`repeat()` ### --question-- #### --text-- -What will the following code return: `'abc'.repeat(3)`? +What will the following code return: `"abc".repeat(3)`? #### --distractors-- @@ -441,23 +437,23 @@ It will throw an error. #### --text-- -How do you remove whitespace from the beginning and end of a string? +Which method will remove whitespace from the beginning and end of a string? #### --distractors-- -`str.strip()` +`strip()` --- -`str.removeWhitespace()` +`removeWhitespace()` --- -`str.trimWhitespace()` +`trimWhitespace()` #### --answer-- -`str.trim()` +`trim()` ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md index c84a01b0e9..f318d04f85 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-variables-and-data-types # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is JavaScript? +Which of the following best describes JavaScript? #### --distractors-- @@ -33,7 +33,7 @@ A database management system. #### --answer-- -A programming language primarily used for web development. +A programming language used for web development. ### --question-- @@ -43,19 +43,19 @@ Which of the following is NOT a JavaScript data type? #### --distractors-- -`null` +`Number` --- -`undefined` +`Undefined` --- -`bigInt` +`Object` #### --answer-- -`double` +`Double` ### --question-- @@ -77,29 +77,29 @@ Which of the following is NOT a valid JavaScript variable declaration? #### --answer-- -`public final Long x;` +`public Int x;` ### --question-- #### --text-- -Which of the following is a conventional variable name in JavaScript? +Which of the following is a common naming convention for variables in JavaScript? #### --distractors-- -`my_var` +JavaScript case. --- -`my-var` +Lightning case. --- -`MyVar` +Giraffe case. #### --answer-- -`myVar` +Camel case. ### --question-- @@ -127,28 +127,23 @@ What is the difference between `let` and `const` variable declarations in JavaSc #### --text-- -What would be the outcome of the following code? - -```js -let name = "Andy"; -name[0] = "M"; -``` +Why are strings considered immutable in JavaScript? #### --distractors-- -The value of `name` would be `"MAndy"`. +You cannot create strings using variables. --- -The value of `name` would be `"Mndy"`. +Strings can only be created using literals. --- -The value of `name` would still be `"Andy"`. +You can change strings, but only through global variables. #### --answer-- -It would throw an error. +Once a string is created, you cannot change its characters directly. ### --question-- @@ -186,7 +181,7 @@ console.log(hello); #### --distractors-- -Reassigns `world` to the variable `hello`, and prints it out in the console. +Reassigns `" world"` to the variable `hello`, and prints it out in the console. --- @@ -194,33 +189,33 @@ Prints out the number of characters in `Hello world` in the console. --- -Adds the string `world` to the variable `hello`, and prints it out in the console. +Combines `"Hello"` and `" world"` into a new string and prints it, but the value of `hello` remains `"Hello"`. #### --answer-- -Creates a new string that is made of the values of `hello` and `" world"` combined together, and assigns this new string back to `hello` and then prints it out in the console. +Combines the current value of `hello` with the string `" world"`, reassigns it to `hello`, and prints it to the console. ### --question-- #### --text-- -Are semicolons required in JavaScript? +Which JavaScript character is used to mark the end of a statement? #### --distractors-- -Yes. The code won't work without semicolons. +`:` --- -Semicolons are sometimes required in JavaScript. +`,` --- -No. It's recommended not to use semicolons in JavaScript. +`.` #### --answer-- -No, but it is generally recommended to use semicolons consistently to avoid potential issues in code. +`;` ### --question-- @@ -264,7 +259,7 @@ JavaScript performs type checking before execution, meaning type related errors #### --answer-- -You don't need to declare the data type of a variable before using it. JavaScript infers the type based on the value assigned to the variable. +JavaScript infers the type based on the value assigned to the variable. ### --question-- @@ -328,7 +323,7 @@ Which of the following is a valid multi-line comment in JavaScript? ```py ''' -This is a +This is a multi-line comment ''' @@ -410,7 +405,7 @@ Which of the following is NOT a valid string concatenation method in JavaScript? --- -``console.log(`${string1} ${string2}`);`` +`console.log("string1 " + string2);` --- @@ -424,7 +419,7 @@ Which of the following is NOT a valid string concatenation method in JavaScript? #### --text-- -Which of the following variable names uses camelCase correctly? +Which of the following variable names uses camel case correctly? #### --distractors-- @@ -446,23 +441,23 @@ Which of the following variable names uses camelCase correctly? #### --text-- -Which character JavaScript uses to mark the end of a statement? +Why is it beneficial to use semicolons explicitly even though JavaScript has Automatic Semicolon Insertion? #### --distractors-- -`:` +To increase the execution speed of the code. --- -`,` +To maintain consistency with other programming languages. --- -`.` +To allow for better debugging and error tracing. #### --answer-- -`;` +To improve code readability and reliability. ### --question-- @@ -485,4 +480,3 @@ Which of the following is NOT a JavaScript data type? #### --answer-- `Float` - diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md b/curriculum/challenges/korean/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md index 516d98c4d5..5a49dda885 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md @@ -7,7 +7,7 @@ dashedName: quiz-local-storage-and-crud # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -201,15 +201,15 @@ Which of the following values can be directly converted to JSON using `JSON.stri --- -A Function +A Function. --- -A DOM Element +A DOM Element. #### --answer-- -An Object +An Object. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md b/curriculum/challenges/korean/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md index c64fbf7b45..bc6153e7d4 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md @@ -7,7 +7,7 @@ dashedName: quiz-nano # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -43,19 +43,19 @@ How do you run or start nano from a terminal? #### --distractors-- -Type `run nano`, then press the **Enter** key +Type `run nano`, then press the **Enter** key. --- -Type `start nano`, then press the **Enter** key +Type `start nano`, then press the **Enter** key. --- -Type `nano.exe`, then press the **Enter** key +Type `nano.exe`, then press the **Enter** key. #### --answer-- -Type `nano`, then press the **Enter** key +Type `nano`, then press the **Enter** key. ### --question-- @@ -65,19 +65,19 @@ How do you open a text file using nano? #### --distractors-- -Type `nano.exe [FILE]`, then press the **Enter** key +Type `nano.exe [FILE]`, then press the **Enter** key. --- -Type `emacs [FILE]`, then press the **Enter** key +Type `emacs [FILE]`, then press the **Enter** key. --- -Type `vim [FILE]`, then press the **Enter** key +Type `vim [FILE]`, then press the **Enter** key. #### --answer-- -Type `nano [FILE]`, then press the **Enter** key +Type `nano [FILE]`, then press the **Enter** key. ### --question-- @@ -87,19 +87,19 @@ What type of files is nano capable of creating and modifying? #### --distractors-- -PDF files +PDF files. --- -Word documents +Word documents. --- -Excel spreadsheets +Excel spreadsheets. #### --answer-- -Plain text files +Plain text files. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/korean/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md index c4d04944fa..25b1ae5ddd 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md @@ -7,7 +7,7 @@ dashedName: quiz-react-basics # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -43,15 +43,15 @@ Which of the following is NOT a method for conditional rendering in React? #### --distractors-- -Ternary operators +Ternary operators. --- -Logical `&&` operator +Logical `&&` operator. --- -`switch` statements +`switch` statements. #### --answer-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md b/curriculum/challenges/korean/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md index 9567f42558..ddfa29c6a6 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md @@ -7,7 +7,7 @@ dashedName: quiz-react-state-and-hooks # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -421,7 +421,7 @@ Element #### --answer-- -Functional component +Functional component. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md b/curriculum/challenges/korean/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md index 19b2f867d6..ee303bf4f7 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md @@ -7,7 +7,7 @@ dashedName: quiz-recursion # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -190,7 +190,7 @@ console.log(sayHello(3)); --- -An error +An error. --- @@ -341,7 +341,7 @@ The following recursion is missing a base case: ```js function countDownToZero(number) { - // Base case goes here + // Base case goes here. console.log(number); countDownToZero(number - 1); @@ -462,19 +462,19 @@ What HTML structure is typically traversed recursively? #### --distractors-- -Style sheets +Style sheets. --- -Meta tags +Meta tags. --- -Script tags +Script tags. #### --answer-- -The DOM tree +The DOM tree. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/korean/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md index 0d211c1fe3..c9023537dd 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md @@ -7,7 +7,7 @@ dashedName: quiz-relational-database # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -65,19 +65,19 @@ What does the `\l` command do when executed in the PostgreSQL interactive termin #### --distractors-- -Lists all schemas +Lists all schemas. --- -Lists all tables +Lists all tables. --- -Connects to a database +Connects to a database. #### --answer-- -Lists all databases +Lists all databases. ### --question-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md b/curriculum/challenges/korean/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md index 09267e343a..041c048aeb 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md @@ -7,7 +7,7 @@ dashedName: quiz-responsive-web-design # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,375 +17,429 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What CSS property is commonly used to create a flexible layout in a container? +What are breakpoints in responsive web design? #### --distractors-- -`display: block;` +Specific points in a design where floats overlap with other elements on the page. --- -`display: inline;` +Specific points used to set the columns and rows for a grid or flex layout. --- -`display: table;` +Specific points used to determine how a tabular layout will behave on the page. #### --answer-- -`display: flex;` +Specific points in a design where the layout and content adjust to accommodate different screen sizes. ### --question-- #### --text-- -What is the main purpose of media queries in responsive web design? +Which of the following is NOT a breakpoint used for smaller devices? #### --distractors-- -To change the color scheme of the page. +`600px` --- -To create animations. +`480px` --- -To adjust margins for print pages. +`320px` #### --answer-- -To apply different styles based on the screen size or device type. +`960px` ### --question-- #### --text-- -Which media feature in a media query checks the width of the browser window? +What is the main purpose of using media queries in responsive web design? #### --distractors-- -`min-height` +To change the color scheme of the page for Safari browsers. --- -`max-aspect-ratio` +To create animations for table layouts. --- -`resolution` +To adjust margins and padding for layouts using CSS flexbox. #### --answer-- -`min-width` +To apply different styles based on the screen size or device type. ### --question-- #### --text-- -Which CSS unit is relative to the width of the viewport? +Which media feature in a media query checks the width of the browser window? #### --distractors-- -`em` +`set-width` --- -`px` +`accept-width` --- -`rem` +`allow-width` #### --answer-- -`vw` +`min-width` ### --question-- #### --text-- -What does mobile-first design emphasize? +What will the following code do? + +```css +@media screen and (min-width: 768px) { + /* Styles go here */ +} +``` #### --distractors-- -Designing for desktops and scaling down for smaller devices. +This will ignore styles for screens that are `768px` wide. --- -Using only desktop breakpoints. +This will apply styles for screens that are only `768px` wide. --- -Focusing on the highest resolution devices first. +This will apply styles for screens that are smaller than `768px`. #### --answer-- -Designing for smaller screens first and scaling up for larger devices. +This will apply styles for screens that are `768px` and wider. ### --question-- #### --text-- -Which media query will apply styles when the device's width is between 600px and 1200px? +What does mobile-first design emphasize? #### --distractors-- -`@media screen and (max-width: 1200px)` +Designing for smaller devices only and ignoring the others. --- -`@media screen and (min-width: 600px)` +Designing for mobile devices built by Apple only. --- -`@media screen and (width: 800px)` +Designing for smaller Android screens first and ignoring Apple devices. #### --answer-- -`@media screen and (min-width: 600px) and (max-width: 1200px)` +Designing for smaller screens first and scaling up for larger devices. ### --question-- #### --text-- -What is the default flex-direction value in Flexbox? +Which media query will apply styles when the device's width is between 600px and 1200px? #### --distractors-- -`column` +`@media screen and (max-width: 1200px)` --- -`row-reverse` +`@media screen and (min-width: 600px)` --- -`column-reverse` +`@media screen and (width: 800px)` #### --answer-- -`row` +`@media screen and (min-width: 600px) and (max-width: 1200px)` ### --question-- #### --text-- -In Flexbox, how do you distribute space between items in a container? +Which of the following is NOT a valid media type? #### --distractors-- -`align-items` +`all` --- -`flex-grow` +`print` --- -`flex-wrap` +`screen` #### --answer-- -`justify-content` +`poster` ### --question-- #### --text-- -How do you apply a grid layout to a container in CSS? +Which of the following media types is intended for paged material and documents viewed on a screen in print preview mode? #### --distractors-- -`display: flexbox;` +`aspect-ratio` --- -`display: block;` +`flex` --- -`display: table;` +`screen` #### --answer-- -`display: grid;` +`print` ### --question-- #### --text-- -What does the `fr` unit represent in CSS Grid? +What does the `aspect-ratio` do in media queries? #### --distractors-- -Flexible ratio +It describes the ratio between flex properties in a flex layout. --- -Frame ratio +It describes the ratio between the x and y axis for grid containers. --- -Fixed region +It describes the ratio between rows and columns for table layouts. #### --answer-- -Fraction of available space +It describes the ratio between the width and height of the viewport. ### --question-- #### --text-- -Which of the following is a valid media query for targeting devices with a resolution of 2x or higher? +Which of the following is used to indicate whether the device is in landscape or portrait orientation? #### --distractors-- -`@media (resolution: 2x)` +`apply-orientation` --- -`@media (max-resolution: 2x)` +`set-orientation` --- -`@media screen and (min-width: 1200px)` +`oriente` #### --answer-- -`@media (min-resolution: 2px)` +`orientation` ### --question-- #### --text-- -Which property controls the number of columns in a grid container? +Which of the following is commonly used to target desktop screens and larger? #### --distractors-- -`grid-template-rows` +```css +@media screen and (min-width: 140000px) { + /* Styles go here */ +} +``` --- -`grid-auto-rows` +```css +@media screen and (min-width: 140px) { + /* Styles go here */ +} +``` --- -`grid-template` +```css +@media screen and (min-width: 14000px) { + /* Styles go here */ +} +``` #### --answer-- -`grid-template-columns` +```css +@media screen and (min-width: 1400px) { + /* Styles go here */ +} +``` ### --question-- #### --text-- -How do you set up a media query for screens larger than 768px? +Which of the following is used to detect if the user has requested a light or dark color theme? #### --distractors-- -`@media screen and (max-width: 768px)` +`allow-colors-scheme` --- -`@media only screen and (width > 768px)` +`apply-color-scheme` --- -`@media (screen-width: 768px)` +`set-colors-scheme` #### --answer-- -`@media screen and (min-width: 768px)` +`prefers-color-scheme` ### --question-- #### --text-- -What is the purpose of the `flex-wrap` property in Flexbox? +Which of the following is used to test whether the primary input mechanism can hover over elements? #### --distractors-- -To align items along the cross axis. +```css +@media (set: hover) { + /* Styles for devices that support hover */ +} +``` --- -To reverse the order of flex items. +```css +@media (apply: hover) { + /* Styles for devices that support hover */ +} +``` --- -To distribute space evenly between items. +```css +@media (hover: apply) { + /* Styles for devices that support hover */ +} +``` #### --answer-- -To allow flex items to wrap onto multiple lines. +```css +@media (hover: hover) { + /* Styles for devices that support hover */ +} +``` ### --question-- #### --text-- -Which of the following breakpoints is commonly used for tablets in responsive web design? +Which of the following is NOT a type of logical operator you can use with media queries? #### --distractors-- -`480px` +`only` --- -`1920px` +`not` --- -`2560px` +`and` #### --answer-- -`768px` +`accept` ### --question-- #### --text-- -How do you center an item horizontally in a flex container? +Which of the following breakpoints is commonly used for tablets in responsive web design? #### --distractors-- -`align-items: center;` +`480px` --- -`flex-direction: row;` +`1920px` --- -`flex-grow: 1;` +`2560px` #### --answer-- -`justify-content: center;` +`768px` ### --question-- #### --text-- -In mobile-first design, which media query should be used to target larger screens? +Which of the following is the correct way to apply the `aspect-ratio` in a media query? #### --distractors-- -`@media screen and (max-width: 600px)` +```css +@media screen and (aspect-ratio: 16-9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` --- -`@media screen and (height: 600px)` +```css +@media screen and (aspect-ratio: 16=9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` --- -`@media only screen` +```css +@media screen and (aspect-ratio: 16:9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` #### --answer-- -`@media screen and (min-width: 600px)` +```css +@media screen and (aspect-ratio: 16/9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` ### --question-- @@ -399,11 +453,11 @@ Which CSS property is used to create a layout that adjusts based on screen size --- -`display: block` +`display: block;` --- -`width: 100%` +`width: 100%;` #### --answer-- @@ -413,43 +467,59 @@ Which CSS property is used to create a layout that adjusts based on screen size #### --text-- -How do you prevent a flex container from shrinking smaller than its content? +Which of the following can be used to target landscape screens `768px` and larger? #### --distractors-- -`flex-shrink: 1;` +```css +@media screen and (min-width: 768px) and (landscape: orientation) { + /* Styles go here */ +} +``` --- -`flex-direction: column;` +```css +@media screen and (max-width: 768px) and (orientation: landscape) { + /* Styles go here */ +} +``` --- -`align-items: flex-start;` +```css +@media screen and (min-width: 768px) and (landscape: set) { + /* Styles go here */ +} +``` #### --answer-- -`flex-shrink: 0;` +```css +@media screen and (min-width: 768px) and (orientation: landscape) { + /* Styles go here */ +} +``` ### --question-- #### --text-- -How do you create a responsive image that scales with the width of its container? +What is the default media type if no media type is specified? #### --distractors-- -`max-height: 100%;` +`screen` --- -`object-fit: contain;` +`mobile` --- -`min-width: 100%;` +`print` #### --answer-- -`max-width: 100%;` +`all` diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md b/curriculum/challenges/korean/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md index 9ea0ef0e53..e791468957 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md @@ -7,7 +7,7 @@ dashedName: quiz-semantic-html # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -391,7 +391,7 @@ Which of the following elements represents a description term inside a descripti #### --text-- -What is the role of the idiomatic text element? +What is the role of the `i` element? #### --distractors-- diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/korean/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md index 9e01e081b0..e711a1cfdb 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md @@ -7,7 +7,7 @@ dashedName: quiz-styling-forms # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 9 of the 10 questions below. # --quizzes-- @@ -17,19 +17,19 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -Which of the following is a common issue with the `datetime-local` input type? +What is a common issue for styling the `datetime-local` input type? #### --distractors-- -It cannot be used with CSS variables. +It does not work with the `float` property. --- -It automatically submits the form upon value selection. +It is impossible to make it responsive. --- -It does not support real-time updates. +It does not work with `rem` units. #### --answer-- @@ -39,89 +39,89 @@ The input format is different across browsers. #### --text-- -Why is it important to use `box-sizing: border-box;` when styling text inputs? +Which of the following is considered best practice for styling text inputs? #### --distractors-- -It makes the text input focusable with a keyboard. +Text input font sizes need to be set with `em` units and colors should be a light gray. --- -It hides the input's placeholder text. +Text input sizes should only use dark green borders on focus and the text color should be dark gray. --- -It removes the default browser styling for inputs. +Text input font colors need to be light colors and the size should only be set using the `px` unit. #### --answer-- -It ensures padding and borders are included in the element's width and height. +Text input fonts need to be adequately sized, and the color needs to have sufficient contrast with the background. ### --question-- #### --text-- -What is a benefit of setting a max-width for text inputs? +Why is it important to not remove the ability for users to resize a `textarea` input? #### --distractors-- -It prevents users from entering long text. +Users should be able to zoom in and out and there should be no change in the input. --- -It makes the input unresponsive on larger screens. +Users should be able to zoom in and out and the input should increase to twice its size. --- -It automatically adjusts the font size. +Users should be able to zoom in and out and the input text should triple in size. #### --answer-- -It ensures the input doesn't stretch too wide on larger screens. +Users should be able to zoom in and out and the input should scale accordingly. ### --question-- #### --text-- -Why should you add `:focus` styles to text inputs? +What is a best practice for styling inputs in a focused state? #### --distractors-- -It hides the input's border. +It is important to use only light gray borders for focused inputs. --- -It disables user input. +It is important to only use dark red borders for focused inputs. --- -It forces the browser to ignore default styles. +It is important to remove any noticeable indicator. #### --answer-- -It improves accessibility by making the input easier to identify when focused. +It is important to preserve a noticeable indicator. ### --question-- #### --text-- -How can you prevent text inputs from being cut off when resized? +What is a best practice for styling inputs in an error state? #### --distractors-- -By adding `overflow: hidden;`. +Increase the font size for the input text to `3rem`. --- -By setting a fixed height and width. +Set the input to `display: none;` so it is removed from the page. --- -By removing padding from the input. +Set the input to be disabled so users can no longer interact with it. #### --answer-- -By using padding and line-height with flexible units like `em` or `rem`. +Provide a visual indicator with a message so users know that something is incorrect and needs to be fixed. ### --question-- @@ -143,313 +143,92 @@ It hides the input label, reducing visual clutter. #### --answer-- -It provides users with guidance on the expected input format without cluttering the interface. +It provides users with guidance on the expected input format. ### --question-- #### --text-- -Why should you avoid using `outline: none;` without adding a custom focus style? +What is WebKit? #### --distractors-- -It reduces the size of the text input. +It is a browser engine that ensures that there are no validation errors in your CSS. --- -It hides the input from assistive technology users. +It is a special CSS property used in CSS Grid. --- -It makes the input read-only. +It is a special CSS property used in CSS flexbox. #### --answer-- -It removes the focus outline, which may confuse users about which field is selected. +It is a browser engine that displays webpages. ### --question-- #### --text-- -What is the purpose of using Flexbox or Grid for form layout? +When is it appropriate to use `appearance: none;` for form elements? #### --distractors-- -To make form controls appear in random positions. +To remove form elements completely from the DOM and page. --- -To make the form smaller on mobile devices. +To hide form elements from those who use assistive technologies like screen readers. --- -To hide form controls on large screens. +To remove only default colors that are applied to the form elements and use your own. #### --answer-- -To create a well-structured and responsive form layout. +To remove some of the default styles that are applied to the form elements. ### --question-- #### --text-- -Why should input elements be styled with a solid border? +What are some considerations when working with `appearance: none;` on form elements? #### --distractors-- -It makes the form look more colorful. +It is important to preserve hovered and submit indicators on interactive elements. --- -It automatically increases form field size. +It is important to only use `appearance: none;` when you want to apply different styles for the Safari browser. --- -It forces users to zoom in on mobile devices. +It is important to use `appearance: none;` when you need to completely remove a form element from the page. #### --answer-- -To ensure input fields are clearly visible and easily recognizable as form controls. +It is important to preserve focus and error indicators on interactive elements. ### --question-- #### --text-- -How does increasing the margin between form elements affect form usability? +Which type of form elements are commonly styled using `appearance: none;` to remove their default look? #### --distractors-- -It decreases accessibility on mobile devices. +`label` elements. --- -It prevents users from submitting the form. +`div` elements. --- -It hides form labels. +`span` elements. #### --answer-- -It improves readability by helping users see the grouping of related form elements. - -### --question-- - -#### --text-- - -What is the primary reason for using `appearance: none` in form elements? - -#### --distractors-- - -To add new default styles to form elements. - ---- - -To enable form elements to appear larger on mobile devices. - ---- - -To disable form validation for specific elements. - -#### --answer-- - -To remove the default browser styling from form elements and apply custom styles. - -### --question-- - -#### --text-- - -Which type of form elements is commonly styled using `appearance: none` to remove their default look? - -#### --distractors-- - -` + + + + + + + + +``` --- -`max` +```html +
+ +

User information

+ + + + + + + + +``` --- -`maximumLen` +```html +
+
+ User information + + + + + + +
+ +``` #### --answer-- -`maxlength` +```html +
+
+ User information + + + + + + +
+ +``` ### --question-- @@ -346,25 +394,25 @@ Which of the following is the correct way to disable an input? #### --distractors-- ```html - + ``` --- ```html - + ``` --- ```html - + ``` #### --answer-- ```html - + ``` ### --question-- @@ -376,25 +424,25 @@ Which of the following is a valid value for the `type` attribute? #### --distractors-- ```html - + ``` --- ```html - + ``` --- ```html - + ``` #### --answer-- ```html - + ``` ### --question-- @@ -431,23 +479,23 @@ Which of the following is the correct use of the `size` attribute? #### --text-- -Which of the following attributes is used to specify the minimum number of characters required in an input field? +Which of the following attributes are used to specify the minimum and maximum number of characters required in an input field? #### --distractors-- -`minlen` +`minlen` and `maxlen` --- -`Mlength` +`min` and `max` --- -`minimumLen` +`minimumLen` and `maximumLen` #### --answer-- -`minlength` +`minlength` and `maxlength` ### --question-- @@ -483,7 +531,7 @@ Which of the following button examples does **NOT** use a correct value for the #### --text-- -Which attribute is used to specify the value for a button? +Which of the following attributes is used to specify the value for a button? #### --distractors-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md index 4359760ca2..0532cd3043 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-arrays/66edcccbba6dacdb65a59067.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-arrays # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,45 +17,62 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is the correct way to declare a JavaScript array? +What will be the output for the following code? + +```js +const numbers = [1, 2, 3]; +console.log(numbers[10]); +``` #### --distractors-- -`let arr = array(1, 2, 3);` +`[1, 2, 3]` --- -`let arr = "1, 2, 3";` +`null` --- -`let arr = {1, 2, 3};` +`10` #### --answer-- -`let arr = [1, 2, 3];` +`undefined` ### --question-- #### --text-- -What is the key difference between primitive and non-primitive data types? +Which of the following is the correct way access the string `"Jessica"` from the `developers` array? #### --distractors-- -Primitives can store multiple values. +```js +const developers = ["Jessica", "Naomi", "Tom"]; +developers[1] +``` --- -Non-primitives cannot hold references to other objects. +```js +const developers = ["Jessica", "Naomi", "Tom"]; +developers[2] +``` --- -Non-primitives store values directly. +```js +const developers = ["Jessica", "Naomi", "Tom"]; +developers[-1] +``` #### --answer-- -Primitives hold direct values, non-primitives hold references. +```js +const developers = ["Jessica", "Naomi", "Tom"]; +developers[0] +``` ### --question-- @@ -89,316 +106,291 @@ console.log(index); #### --text-- -What value will be assigned to the `arr2` variable? - -```js -const arr1 = [1, 2, 3]; -const arr2 = [...arr1, 4, 5]; -console.log(arr2); -``` +What does the rest syntax do? #### --distractors-- -`[4, 5, 1, 2, 3]` +It is used to divide a string into an array of substrings. --- -`[1, 2, [3, 4, 5]]` +It is used to add or remove elements from any position in an array. --- -`[1, 2, 3]` +It is used to add elements to the end of the array and will return the new length. #### --answer-- -`[1, 2, 3, 4, 5]` +It captures the remaining elements of an array into a new array. ### --question-- #### --text-- -What will this code print to the console? - -```js -const colors = ['red', 'blue', 'green', 'yellow']; -colors.splice(1, 2, 'purple'); -console.log(colors); -``` +What is array destructuring? #### --distractors-- -`['red', 'purple', 'green', 'yellow']` +It is used to concatenate all of the elements of an array into a single string. --- -`['red', 'blue', 'yellow']` +It is used to check if an array contains a specific value. --- -`['red', 'blue', 'green', 'yellow']` +It is used to remove the last element from an array and will return that removed element. #### --answer-- -`['red', 'purple', 'yellow']` +It is used to extract values from arrays and assign them to variables in a more concise and readable way. ### --question-- #### --text-- -What value will be assigned to the `slicedArr` variable? +What value will be assigned to the `arr2` variable? ```js -const arr = ['apple', 'banana', 'cherry', 'date']; -const slicedArr = arr.slice(1, 3); -console.log(slicedArr); +const arr1 = [1, 2, 3]; +const arr2 = [...arr1, 4, 5]; +console.log(arr2); ``` #### --distractors-- -`['apple', 'banana']` +`[4, 5, 1, 2, 3]` --- -`['cherry', 'date']` +`[1, 2, [3, 4, 5]]` --- -`['apple', 'cherry']` +`[1, 2, 3]` #### --answer-- -`['banana', 'cherry']` +`[1, 2, 3, 4, 5]` ### --question-- #### --text-- -Which method returns the first index of a given element in an array? +What will this code log to the console? + +```js +const colors = ["red", "blue", "green", "yellow"]; +colors.splice(1, 2, "purple"); +console.log(colors); +``` #### --distractors-- -`findIndex()` +`["red", "blue", "green", "yellow"]` --- -`lastIndexOf()` +`["red", "blue", "yellow"]` --- -`slice()` +`["red", "yellow"]` #### --answer-- -`indexOf()` +`["red", "purple", "yellow"]` ### --question-- #### --text-- -Which method removes the first element from an array and shifts all other elements down? +What value will be assigned to the `slicedArr` variable? + +```js +const arr = ["apple", "banana", "cherry", "date"]; +const slicedArr = arr.slice(1, 3); +console.log(slicedArr); +``` #### --distractors-- -`pop()` +`["apple", "banana"]` --- -`slice()` +`["cherry", "date"]` --- -`splice()` +`["apple", "cherry"]` #### --answer-- -`shift()` +`["banana", "cherry"]` ### --question-- #### --text-- -What does `Array.prototype.concat()` do? +Which method returns the first index of a given element in an array? #### --distractors-- -Joins array elements into a string. +`firstIndex()` --- -Adds an element to the beginning of an array. +`lastIndex()` --- -Removes an element from the array. +`searchIndex()` #### --answer-- -Merges two arrays into a new array. +`indexOf()` ### --question-- #### --text-- -What happens if you set an array's length to a value smaller than the current length? +Which method is used to remove the first element from an array and returns that removed element? #### --distractors-- -It throws a syntax error. +`pop()` --- -The extra space is filled with `undefined`. +`slice()` --- -Nothing happens; the array remains the same size. +`splice()` #### --answer-- -The array gets truncated, removing elements beyond the new length. +`shift()` ### --question-- #### --text-- -What will be the output of this code ? - -```js -const fruits = ['apple', 'banana', 'cherry', 'apple', 'orange']; -const index = fruits.indexOf('apple'); -if (index !== -1) { - fruits.splice(index, 1); -} -console.log(fruits); -``` +What does the `concat()` method do? #### --distractors-- -`['banana', 'cherry', 'orange']` +Joins array elements into a string. --- -`['apple', 'cherry', 'apple', 'orange']` +Adds an element to the beginning of an array. --- -`['banana', 'cherry', 'apple']` +Removes an element from the array. #### --answer-- -`['banana', 'cherry', 'apple', 'orange']` +Merges two arrays into a new array. ### --question-- #### --text-- -What is the final value of `result` in the following code? +What will be the output of this code? ```js -const arr1 = [1, 2]; -const arr2 = [3, 4, 5]; -const combined = arr1.concat(arr2); -const result = combined.includes(3); -console.log(result); +const fruits = ["apple", "banana", "cherry", "apple", "orange"]; + +fruits.splice(0, 1); + +console.log(fruits); ``` #### --distractors-- -`false` +`["apple", "banana", "cherry", "apple", "orange"]` --- -`[1, 2, 3, 4, 5]` +`["apple", "banana", "cherry"]` --- -`undefined` +`["cherry", 'apple']` #### --answer-- -`true` +`["banana", "cherry", "apple", "orange"]` ### --question-- #### --text-- -What does the following code output? - -```js -const nums = [1, 2, 3, 4]; -const doubled = nums.map(n => n * 2); -console.log(doubled.includes(8)); -``` +What does the `includes()` method do? #### --distractors-- -`false` +It is used to divide a string into an array of substrings. --- -`[2, 4, 6, 8]` +It is used to concatenate all of the elements of an array into a single string. --- -`Error` +It is used to add or remove elements from any position in an array. #### --answer-- -`true` +It is used to check if an array contains a specific value. ### --question-- #### --text-- -What is the output when using `splice()` to remove elements from a 2D array? - -```js -let matrix = [ - [1, 2, 3], - [4, 5, 6], - [7, 8, 9] -]; -matrix.splice(1, 1); -console.log(matrix); -``` +Which of the following methods is used to reverse an array in place? #### --distractors-- -`[[1, 2, 3], [4, 5, 6]]` +`reversed()` --- -`[[1, 2], [4, 5], [7, 8]]` +`reverseArr()` --- -`[[7, 8, 9]]` +`reversing()` #### --answer-- -`[[1, 2, 3], [7, 8, 9]]` +`reverse()` ### --question-- #### --text-- -Which of the following statements about `.length` is correct? +What is a two dimensional array? #### --distractors-- -It counts the number of values in a 2D array. +An array that only contains object literals. --- -It returns `undefined` for empty arrays. +An array of fixed length. --- -It gives the total number of elements in a 2D array. +An array of floating point numbers. #### --answer-- -It counts the number of top-level elements in a 2D array. +An array of arrays. ### --question-- @@ -426,75 +418,73 @@ It returns `-1` if the element is not found. #### --text-- -What is the main difference between `push()` and `concat()` when working with arrays? +Which of the following is NOT an array method? #### --distractors-- -`push()` adds multiple arrays together, while `concat()` adds a single element. +`includes()` --- -`concat()` modifies the original array, while `push()` creates a new array. +`pop()` --- -Both `push()` and `concat()` are immutable methods. +`push()` #### --answer-- -`push()` modifies the original array, while `concat()` creates a new array. +`keys()` ### --question-- #### --text-- -How does the rest parameter `...rest` work in array destructuring in JavaScript? +What will be the output for the following code? + +```js +const arr = ["o", "l", "l", "e", "h"]; +console.log(arr.join("")); +``` #### --distractors-- -It is used to add extra elements to the array. +`["o", "l", "l", "e", "h"]` --- -It allows you to access elements outside the array's bounds. +`"hello"` --- -It removes the last element of the array. +`undefined` #### --answer-- -It collects the remaining elements into a new array after the initial elements are assigned to variables. +`"olleh"` ### --question-- #### --text-- -What will be the result of this code ? +What will be the result of using the `shift()` method on an empty array? -```js -const numbers = [10, 20, 30]; -numbers.push(40); -numbers.pop(); -const length = numbers.length; -console.log(length); -``` #### --distractors-- -2 +`TypeError` --- -5 +`[]` --- -4 +`null` #### --answer-- -3 +`undefined` ### --question-- @@ -504,7 +494,7 @@ Which method will return a new array without changing the original array? #### --distractors-- -`splice()` +`shift()` --- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md index 0a951e48f4..4103cf62f0 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-audio-and-video/66edd3b3096349f06cf688bb.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-audio-and-video # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,19 +21,19 @@ What is the purpose of the `Audio()` constructor in JavaScript? #### --distractors-- -Create a new audio file +Create a new audio file. --- -Play an existing audio file +Play an existing audio file. --- -Modify audio files +Modify audio files. #### --answer-- -Create and manipulate a new `audio` element +Create and manipulate a new `audio` element. ### --question-- @@ -65,19 +65,19 @@ What is the difference between `pause()` and `stop()` methods for media elements #### --distractors-- -There is no difference, they are synonyms +There is no difference, they are synonyms. --- -`pause()` stops playback permanently, while `stop()` allows resuming +`pause()` stops playback permanently, while `stop()` allows resuming. --- -`pause()` allows resuming playback, while `stop()` resets to the beginning +`pause()` allows resuming playback, while `stop()` resets to the beginning. #### --answer-- -`stop()` is not a valid method for media elements +`stop()` is not a valid method for media elements. ### --question-- @@ -109,19 +109,19 @@ What is the purpose of the `source` element within an `audio` or `video` element #### --distractors-- -Specify the volume of the media +Specify the volume of the media. --- -Add subtitles to the media +Add subtitles to the media. --- -Link to an external audio processor +Link to an external audio processor. #### --answer-- -Specify multiple media sources for different formats +Specify multiple media sources for different formats. ### --question-- @@ -153,19 +153,19 @@ What does a codec do in the context of audio and video? #### --distractors-- -Increases the volume of the media +Increases the volume of the media. --- -Changes the file format of the media +Changes the file format of the media. --- -Encrypts the media for secure transmission +Encrypts the media for secure transmission. #### --answer-- -Compresses and decompresses digital media +Compresses and decompresses digital media. ### --question-- @@ -175,19 +175,19 @@ Which API provides a way to create, process, and analyze audio in web applicatio #### --distractors-- -Audio Processing API +Audio Processing API. --- -Sound Manipulation API +Sound Manipulation API. --- -Media Stream API +Media Stream API. #### --answer-- -Web Audio API +Web Audio API. ### --question-- @@ -197,19 +197,19 @@ What is the purpose of the `getUserMedia()` method? #### --distractors-- -Authenticate users with a media service +Authenticate users with a media service. --- -Retrieve user preferences for media playback +Retrieve user preferences for media playback. --- -Download media files to the user's device +Download media files to the user's device. #### --answer-- -Access the user's camera and/or microphone +Access the user's camera and/or microphone. ### --question-- @@ -246,19 +246,19 @@ audio.loop = true; #### --distractors-- -Plays the audio file once +Plays the audio file once. --- -Increases the volume of the audio +Increases the volume of the audio. --- -Pauses the audio after one loop +Pauses the audio after one loop. #### --answer-- -Sets the audio to repeat indefinitely +Sets the audio to repeat indefinitely. ### --question-- @@ -290,19 +290,19 @@ What is the purpose of the `MediaRecorder` API? #### --distractors-- -To play audio and video files +To play audio and video files. --- -To edit existing media files +To edit existing media files. --- -To create visual representations of audio +To create visual representations of audio. #### --answer-- -To record audio and video from a media stream +To record audio and video from a media stream. ### --question-- @@ -334,19 +334,19 @@ What does the `preload` attribute do when used with audio or video elements? #### --distractors-- -Automatically starts playing the media +Automatically starts playing the media. --- -Loads the media file before loading the rest of the page +Loads the media file before loading the rest of the page. --- -Applies a filter to the media +Applies a filter to the media. #### --answer-- -Specifies how much of the media file should be loaded when the page loads +Specifies how much of the media file should be loaded when the page loads. ### --question-- @@ -378,19 +378,19 @@ What is the purpose of the Media Source Extensions API? #### --distractors-- -Add visual effects to video +Add visual effects to video. --- -Convert between different media formats +Convert between different media formats. --- -Enable JavaScript to synchronize multiple audio tracks +Enable JavaScript to synchronize multiple audio tracks. #### --answer-- -Enable JavaScript to generate media streams for playback +Enable JavaScript to generate media streams for playback. ### --question-- @@ -427,19 +427,19 @@ navigator.mediaDevices.enumerateDevices() #### --distractors-- -Plays all available media devices +Plays all available media devices. --- -Stops all active media streams +Stops all active media streams. --- -Counts the number of connected displays +Counts the number of connected displays. #### --answer-- -Lists all available media input and output devices +Lists all available media input and output devices. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md index 0dfe06296f..f63aabe8b3 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-classes/67358ac128957c865dcf3ddf.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-classes # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -87,7 +87,7 @@ What does `this` represent inside a class constructor? #### --distractors-- -The global object. +The global class object. --- @@ -99,7 +99,7 @@ An undefined reference. #### --answer-- -The instance of the class being created. +An instance of the class. ### --question-- @@ -109,7 +109,7 @@ Which of the following describes how `this` behaves in an arrow function inside #### --distractors-- -It refers to the method calling the arrow function. +It inherits the value of `this` from the nearest function in a different scope. --- @@ -117,11 +117,11 @@ It refers to a newly created instance of the class. --- -It refers to `undefined` by default. +It inherits the value of `this` from the global object in strict mode. #### --answer-- -It inherits the value of `this` from the enclosing scope where they are defined. +It inherits the value of `this` from the enclosing scope where it is defined. ### --question-- @@ -131,7 +131,7 @@ What is the primary purpose of the `extends` keyword? #### --distractors-- -To define static methods in a class. +To define static methods in a parent class constructor. --- @@ -139,11 +139,11 @@ To create a method in a class. --- -To initialize properties in the parent class. +To initialize default properties in the parent class. #### --answer-- -To create a subclass that inherits methods from a parent class. +To create a subclass that inherits from a parent class. ### --question-- @@ -222,15 +222,15 @@ What is the function of the `super` keyword in a subclass? #### --distractors-- -To define a new instance of a class. +To define a new instance of the parent class. --- -To delete properties from a class. +To delete methods and properties from the parent class. --- -To access only the static methods of a class. +To access only the static methods of the parent class. #### --answer-- @@ -490,7 +490,7 @@ An undefined variable. #### --answer-- -The specific instance of `Animal` being created. +The instance of `Animal`. ### --question-- @@ -500,7 +500,7 @@ What is the primary use of static properties? #### --distractors-- -To set default values for each instance. +To define default propeties for each class instance. --- @@ -512,4 +512,4 @@ To define instance-specific data. #### --answer-- -To store class-wide data that remains constant across instances. +To store class-wide data shared across instances. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md index 637cb39721..b6b35ac7a6 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-comparisons-and-conditionals/66edc47c11492ac5cf258ad9.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-comparisons-and-conditionals # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -287,7 +287,7 @@ Nothing gets printed to the console. ```js if (2 == "2") { - // Statement + // Statement. } ``` diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md index 2735ed1707..950f6421ff 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-dates # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -297,7 +297,7 @@ How would you format a date to a locale-specific string or a more readable forma --- -`.toLocaleTimetring()` +`.toLocaleTimeString()` #### --answer-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md index 06ae8cdc54..4f1c845ca8 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-events/66edd0ac31fea6e678eb925a.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-events # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -53,19 +53,19 @@ parentList.addEventListener('click', function(event) { #### --distractors-- -DOM Manipulation +DOM Manipulation. --- -Event Bubbling +Event Bubbling. --- -Callback Function +Callback Function. #### --answer-- -Event Delegation +Event Delegation. ### --question-- @@ -75,19 +75,19 @@ What is the term for a function that runs in response to an event? #### --distractors-- -Middleware function +Middleware function. --- -Promise function +Promise function. --- -Asynchronous function +Asynchronous function. #### --answer-- -Callback function +Callback function. ### --question-- @@ -97,19 +97,19 @@ What does the `event.target` property return? #### --distractors-- -The parent of the event object +The parent of the event object. --- -The HTML document +The HTML document. --- -The window object +The window object. #### --answer-- -The element that triggered the event +The element that triggered the event. ### --question-- @@ -163,19 +163,19 @@ What is the main advantage of using `addEventListener()` over inline event handl #### --distractors-- -It supports synchronous handling +It supports synchronous handling. --- -It reduces CSS file size +It reduces CSS file size. --- -It can't be removed once added +It can't be removed once added. #### --answer-- -It allows multiple event listeners to be attached to a single element +It allows multiple event listeners to be attached to a single element. ### --question-- @@ -185,19 +185,19 @@ What is the purpose of the `event.preventDefault()` method? #### --distractors-- -To stop the event from propagating to other listeners +To stop the event from propagating to other listeners. --- -To set a default value to the event +To set a default value to the event. --- -To remove the event handler +To remove the event handler. #### --answer-- -To prevent the default action associated with an event from being executed +To prevent the default action associated with an event from being executed. ### --question-- @@ -207,19 +207,19 @@ What does the term "event propagation" refer to? #### --distractors-- -Events can only be handled by inline handlers +Events can only be handled by inline handlers. --- -Events are triggered by CSS changes +Events are triggered by CSS changes. --- -Events are copied to a new window +Events are copied to a new window. #### --answer-- -Events travel through the DOM in phases +Events travel through the DOM in phases. ### --question-- @@ -273,19 +273,19 @@ Which of the following is a common use case for event delegation? #### --distractors-- -Preventing default browser behaviors +Preventing default browser behaviors. --- -Canceling event propagation +Canceling event propagation. --- -Creating custom events +Creating custom events. #### --answer-- -Handling click events on dynamically created elements +Handling click events on dynamically created elements. ### --question-- @@ -295,19 +295,19 @@ What is meant by the "default action" of an event in JavaScript? #### --distractors-- -The event's propagation is stopped automatically +The event's propagation is stopped automatically. --- -An external stylesheet is applied +An external stylesheet is applied. --- -The event listener is called twice +The event listener is called twice. #### --answer-- -The browser's predefined behavior that occurs after an event is triggered +The browser's predefined behavior that occurs after an event is triggered. ### --question-- @@ -317,19 +317,19 @@ Why is the once option in `addEventListener()` useful? #### --distractors-- -It makes the event listener asynchronous +It makes the event listener asynchronous. --- -It allows capturing to be the default phase +It allows capturing to be the default phase. --- -It stops the event from bubbling up +It stops the event from bubbling up. #### --answer-- -It ensures that the event listener is removed after being triggered once +It ensures that the event listener is removed after being triggered once. ### --question-- @@ -361,19 +361,19 @@ How does the concept of event delegation improve performance? #### --distractors-- -It creates separate listeners for each child +It creates separate listeners for each child. --- -It prevents child elements from triggering events +It prevents child elements from triggering events. --- -It limits event propagation to the capturing phase +It limits event propagation to the capturing phase. #### --answer-- -It reduces the number of event listeners by using a single listener on a parent element +It reduces the number of event listeners by using a single listener on a parent element. ### --question-- @@ -383,19 +383,19 @@ Why is it important to remove event listeners when they are no longer needed? #### --distractors-- -It makes the page load slower +It makes the page load slower. --- -It prevents CSS styles from being applied +It prevents CSS styles from being applied. --- -It breaks JavaScript execution +It breaks JavaScript execution. #### --answer-- -It improves performance and reduces memory leaks +It improves performance and reduces memory leaks. ### --question-- @@ -405,19 +405,19 @@ What does the `DOMContentLoaded` event indicate? #### --distractors-- -The page fully loaded with all images +The page fully loaded with all images. --- -Only external styles are loaded +Only external styles are loaded. --- -The page is still loading +The page is still loading. #### --answer-- -The HTML document has been completely loaded and parsed +The HTML document has been completely loaded and parsed. ### --question-- @@ -427,19 +427,19 @@ What is the role of `stopPropagation()` in event handling? #### --distractors-- -To execute the default behavior of the event +To execute the default behavior of the event. --- -To start event capturing +To start event capturing. --- -To bind the event handler to multiple events +To bind the event handler to multiple events. #### --answer-- -To stop the event from propagating to parent elements +To stop the event from propagating to parent elements. ### --question-- @@ -461,5 +461,5 @@ How can you remove all event listeners attached to an element? #### --answer-- -There is no direct way to remove all event listeners +There is no direct way to remove all event listeners. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md index ef0f7eca0e..1a6b9cca61 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-functional-programming/66edd4f31ff19bf5573bf64b.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-functional-programming # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 9 of the 10 questions below. # --quizzes-- @@ -21,41 +21,19 @@ What is a pure function? #### --distractors-- -A function that modifies global variables +A function that modifies global variables and returns either `undefined` or `null`. --- -A function that prints to the console +A function that logs an output to the console. --- -A function that changes its behavior based on external factors +A function that changes its behavior based on external factors and returns `null`. #### --answer-- -A function that always returns the same output for the same input and produces no side effects - -### --question-- - -#### --text-- - -Which of the following is a characteristic of a pure function? - -#### --distractors-- - -It has side effects - ---- - -It relies on global state - ---- - -It modifies its input parameters - -#### --answer-- - -Its output depends solely on its input arguments +A function that always returns the same output for the same input and produces no side effects. ### --question-- @@ -65,41 +43,19 @@ What is a side effect in functional programming? #### --distractors-- -An unexpected error in the code +An unexpected `TypeError` in your code. --- -A function that takes too long to execute +A function that takes too long to execute and crashes the program. --- -A recursive function call +A recursive function call that produces an infinite loop and crashes the program. #### --answer-- -A change in program state or interaction with the outside world - -### --question-- - -#### --text-- - -Which of the following is an example of a side effect? - -#### --distractors-- - -Returning a value from a function - ---- - -Creating a new object within a function - ---- - -Using a local variable - -#### --answer-- - -Writing to a file +A change to the state of the program that are observable outside the function. ### --question-- @@ -109,71 +65,27 @@ What is currying in functional programming? #### --distractors-- -A technique for cooking functions +A technique for designing tests to help you ensure your code is 100% error free. --- -A method for optimizing recursive functions +A more optimized way to write recursive functions so they run twice as fast as other functions. --- -A way to combine multiple functions into one +The process of building, designing and testing your code to ensure that it meets the standards laid out by ECMAScript. #### --answer-- -The process of transforming a function with multiple arguments into a sequence of functions, each with a single argument +The process of transforming a function with multiple arguments into a sequence of functions, each with a single argument. ### --question-- #### --text-- -In the context of pure functions, what does "referential transparency" mean? - -#### --distractors-- - -The function's code is visible to other parts of the program - ---- - -The function references external variables transparently - ---- - -The function's name clearly indicates its purpose - -#### --answer-- +What will be the output for the following pure function? -The function can be replaced with its corresponding value without changing the program's behavior - -### --question-- - -#### --text-- - -Which of the following is NOT a benefit of using pure functions? - -#### --distractors-- - -Easier to test - ---- - -More predictable behavior - ---- - -Easier to reason about - -#### --answer-- - -Improved performance in all cases - -### --question-- - -#### --text-- - -What is the output of this pure function? - -```javascript +```js const add = (a, b) => a + b; console.log(add(2, 5)); ``` @@ -198,291 +110,182 @@ console.log(add(2, 5)); #### --text-- -Which statement about currying is true? +Which of the following is an example of currying? #### --distractors-- -Currying always improves performance - ---- - -Curried functions are always pure functions - ---- - -Currying is only possible in functional programming languages - -#### --answer-- - -Currying transforms a function with multiple arguments into a sequence of functions - -### --question-- - -#### --text-- - -What is a potential side effect of the following function? - -```javascript -const greet = (name) => { - console.log(`Hello, ${name}!`); -}; +```js +const curriedAverage = (a, b, c) => a + b + c / 3 ``` -#### --distractors-- - -It modifies a global variable - ---- - -It changes the input parameter - --- -It returns a value - -#### --answer-- - -It interacts with the console (I/O operation) - -### --question-- - -#### --text-- - -In functional programming, what is function composition? - -#### --distractors-- - -Writing functions with multiple arguments - ---- - -Declaring functions inside other functions - ---- - -Using arrow function syntax - -#### --answer-- - -Combining two or more functions to create a new function - -### --question-- - -#### --text-- - -Which of the following is an example of a pure function? - -#### --distractors-- - -```javascript -const random = () => Math.random(); +```js +const curriedAverage = (a, b, c) => a + b + c ``` --- -```javascript -const log = (x) => console.log(x); -``` - ---- +```js +function curriedAverage(a) { + return a +} -```javascript -let count = 0; -const increment = () => ++count; +function curried(c) { + return c +} ``` #### --answer-- -```javascript -const double = (x) => x * 2; +```js +function curriedAverage(a) { + return function(b) { + return function(c) { + return (a + b + c) / 3; + }; + }; +} ``` ### --question-- #### --text-- -What is the primary goal of currying? +Which of the following is a key principle of functional programming? #### --distractors-- -To improve code readability +Modifying global variables frequently. --- -To create functions with fewer arguments +Using mutable data structures extensively. --- -To eliminate the need for higher-order functions +Emphasizing object-oriented inheritance. #### --answer-- -To enable partial application of functions +Avoiding side effects and using immutable data. ### --question-- #### --text-- -Which statement about side effects is FALSE? +What is an impure function? #### --distractors-- -Side effects make code harder to test +A function that returns an object. --- -Modifying a global variable is a side effect +A function without side effects. --- -Reading from a database can be considered a side effect +A function that returns `null` #### --answer-- -Pure functions can have side effects +A function with side effects. ### --question-- #### --text-- -What is the result of currying the following function? - -```javascript -const add = (a, b, c) => a + b + c; -``` +Which of the following is the correct way to call a curried function? #### --distractors-- -```javascript -const curried = (a, b, c) => a() + b() + c(); +```js +curriedAverage(2 3 4); ``` --- -```javascript -const curried = a => (b, c) => a + b + c; +```js +curriedAverage(2)==(3)==(4); ``` --- -```javascript -const curried = (a, b) => c => a + b + c; +```js +curriedAverage(2)=>(3)=>(4); ``` #### --answer-- -```javascript -const curried = a => b => c => a + b + c; +```js +curriedAverage(2)(3)(4); ``` -### --question-- - -#### --text-- - -Which of the following is NOT a side effect? - -#### --distractors-- - -Modifying the DOM - ---- - -Sending an HTTP request - ---- - -Changing the value of a global variable - -#### --answer-- - -Creating a new object and returning it - -### --question-- - -#### --text-- - -What is a higher-order function? - -#### --distractors-- - -A function that takes longer to execute - ---- - -A function with more than three arguments - ---- - -A function that uses advanced JavaScript features - -#### --answer-- - -A function that returns another function ### --question-- #### --text-- -Which of the following is a key principle of functional programming? +Which of the following is an example of an impure function? #### --distractors-- -Modifying global variables frequently +```js +function example(num) { + return num; +} +``` --- -Using mutable data structures extensively +```js +function sum(num1, num2) { + return num1 + num2 +} +``` --- -Emphasizing object-oriented inheritance +```js +function addToTotal(value) { + let total = 0; + total += value; + return total; +} +``` #### --answer-- -Avoiding side effects and using immutable data +```js +let total = 0; +function addToTotal(value) { + total += value; + return total; +} +``` ### --question-- #### --text-- -What is the main advantage of using pure functions? +Which of the following is NOT an example of a side effect? #### --distractors-- -They always execute faster than impure functions +Writing to a file. --- -They can access and modify global state easily +Modifying a global variable. --- -They can perform I/O operations more efficiently +Making an API call. #### --answer-- -They are easier to test and reason about - -### --question-- - -#### --text-- - -In the context of functional programming, what does "immutability" mean? - -#### --distractors-- - -Variables can be declared but not assigned - ---- - -Functions cannot be modified at runtime - ---- - -Objects cannot have methods - -#### --answer-- +Returning the sum of two values. -Data cannot be changed after it's created diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md index f55aa46d5d..162e0b79fc 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-functions/66edcc779993c0da6906dbb9.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-functions # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,468 +17,543 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is the correct syntax for a function declaration? +Which of the following is the correct way to declare a function in JavaScript? #### --distractors-- -`var myFunction = function() {};` +```js +func greet () { + console.log("Hello there!"); +} +``` --- -`myFunction: function() {}` +```js +defineFunction greet () { + console.log("Hello there!"); +} +``` --- -`function = myFunction();` +```js +def greet () { + console.log("Hello there!"); +} +``` #### --answer-- -`function myFunction() {}` +```js +function greet () { + console.log("Hello there!"); +} +``` ### --question-- #### --text-- -Which of the following is a valid function expression? +What happens when you call (or execute) a function? #### --distractors-- -```js -function getSum(x, y) { - return x + y; -}; -``` +The code inside the function will run and `null` will always be returned. --- -```js -getSum: function(x, y) { - return x + y; -}; -``` +Nothing will happen when you call a function. --- -```js -function = getSum(x, y) { - return x + y; -}; -``` +A `TypeError` will be thrown and the program will crash. #### --answer-- -```js -getSum = function(x, y) { - return x + y; -}; -``` +The code inside the function will run and a value will be returned. ### --question-- #### --text-- -Where can function expressions be used? +Which of the following is the correct way to call a function? #### --distractors-- -Only within other functions +```js +exampleFunction; +``` --- -Only as part of an object literal +```js +exampleFunction>>; +``` --- -Only in the global scope +```js +()exampleFunction(); +``` #### --answer-- -Anywhere a variable can be used +```js +exampleFunction(); +``` ### --question-- #### --text-- -What is the difference between a function expression and a function declaration? +What is the role of the `return` keyword? #### --distractors-- -Function expressions can be hoisted, while function declarations cannot. +The `return` keyword will execute the function. --- -Both function expressions and function declarations can be hoisted. +The `return` keyword will throw a type error. --- -Neither function expressions nor function declarations can be hoisted. +The `return` keyword serves no purpose in functions. #### --answer-- -Function declarations can be hoisted, while function expressions cannot. +The `return` keyword returns a value from the function. ### --question-- #### --text-- -What does it mean for functions to be first-class citizens in JavaScript? +Which of the following is a valid function expression? #### --distractors-- -They can be assigned to variables. +```js +expression function getSum(x, y) { + return x + y; +}; +``` --- -They can be passed as arguments to other functions. +```js +getSum: function(x, y) { + return x + y; +}; +``` --- -They can be returned from functions. +```js +function = getSum(x, y) { + return x + y; +}; +``` #### --answer-- -All of the answers are correct. +```js +const getSum = function(x, y) { + return x + y; +}; +``` ### --question-- #### --text-- -Which of the following is a common use case for first-class functions in JavaScript? +What are function arguments? #### --distractors-- -Implementing object-oriented programming +Values that represents the absence of a value. --- -Defining global variables +Special values that act similar to anonymous functions. --- -Creating custom data types +Placeholder values used inside of the function. #### --answer-- -Creating higher-order functions +Real values passed to a function when it is called. ### --question-- #### --text-- -Which of the following is an example of a first-class function? +What are function parameters? #### --distractors-- -```js -function greet(name) { - console.log("Hello, " + name); -} -``` +Floating point values used inside of the function. --- -```js -var greet = function(name) { - console.log("Hello, " + name); -}; -``` +Values passed to a function when it is called. --- -```js -const greet = (name) => { - console.log("Hello, " + name); -} -``` +Values that represent the intentional absence of the value. #### --answer-- -All of the answers are correct. +Values listed inside the function definition. ### --question-- #### --text-- -Which of the following is not a common use case for first-class functions? +What value will be returned in the following code example? + +```js +function greet () { + console.log("Hello there!"); +} + +greet(); +``` #### --distractors-- -Defining object methods +`NaN` --- -Implementing closures +`TypeError` --- -Creating callbacks +`null` #### --answer-- -Creating custom data types +`undefined` ### --question-- #### --text-- -What is the syntax for an arrow function? +Which of the following is the correct syntax for an arrow function? #### --distractors-- -`myFunction: function() {}` +```js +const sum <<>> (num1, num2) => num1 + num2 +``` --- -`function myFunction() {}` +```js +const sum === (num1, num2) === num1 + num2 +``` --- -`const myFunction = function() {};` +```js +const sum >=> (num1, num2) => num1 + num2 +``` #### --answer-- -`myFunction = () => { ... };` +```js +const sum = (num1, num2) => num1 + num2 +``` ### --question-- #### --text-- -What is the difference between a regular function and an arrow function? +What will be result for the following code? + +```js +function greet() { + const developer = "Jessica"; + console.log("Hello there!"); +} + +console.log(developer); +``` #### --distractors-- -Arrow functions do not have their own 'this' binding. +Nothing will happen and the code will run normally. --- -Arrow functions cannot be used as constructors. +The string `"Hello there!"` will be logged to the console. --- -Arrow functions cannot be used with the 'new' keyword. +The string `"Hello!"` will be logged to the console. #### --answer-- -All of the answers are correct. +You will get a reference error because `developer` is not defined globally. ### --question-- #### --text-- -You can also call arrow function as +When can you omit a set of parentheses around a parameter list for an arrow function? #### --distractors-- -Lambda function +You should always omit the parentheses around a parameter list. --- -Fat arrow function +You are never supposed to omit the parentheses for an arrow function. --- -Neither Lambda function or Fat arrow function +You should only omit the parentheses when you are working with multiple parameters. #### --answer-- -Both Lambda function and Fat arrow function +You should only omit the parentheses when you only have one parameter. ### --question-- #### --text-- -What is the benefit of using arrow functions? +When can you omit the curly braces and `return` keyword for an arrow function? #### --distractors-- -You can omit curly braces and return keyword if your output is going to be a single line. +You should always omit the curly braces and `return` keyword. --- -They provide easy syntax while writing promises and callbacks. +You should never omit the curly braces and `return` keyword. --- -They have short syntax and increase readability. +When the function body has multiple lines of code. #### --answer-- -All of the answers are correct. +When the function body consists of a single expression. ### --question-- #### --text-- -What is the difference between a function and a method? +What will be the result for the following code? + +```js +function exampleFunction () { + +} +exampleFunction(); +``` #### --distractors-- -There is no difference between functions and methods. +The program will crash. --- -Functions and methods are properties of objects +JavaScript will skip over that piece of code. --- -Functions are properties of objects, while methods are standalone functions. +An error message will display. #### --answer-- -Methods are properties of objects, while functions are standalone functions. +Nothing will happen. ### --question-- #### --text-- -Can a method be used outside of its object? +Which of the following is the correct way to use default parameters? #### --distractors-- -Yes, methods can be used anywhere a function can be used. +```js +function sum (num1, num2 <<>> 12) { + return num1 + num2 +} +``` --- -Methods can be used outside of their object, but only if they are bound to a specific 'this' value. +```js +function sum (num1, num2 === 12) { + return num1 + num2 +} +``` --- -Methods can be used outside of their object, but only if they are defined as arrow functions. +```js +function sum (num1, num2 >> 12) { + return num1 + num2 +} +``` #### --answer-- -No, methods can only be used within their object. +```js +function sum (num1, num2 = 12) { + return num1 + num2 +} +``` ### --question-- #### --text-- -Which of the following is an example of a method? - -#### --distractors-- +What will be the result for the following code? ```js -function greet(name) { - console.log("Hello, " + name); +const developer = "Jessica"; + +function greet() { + console.log("Hello, " + developer) } + +greet(); ``` +#### --distractors-- + +The string `"Hello, developer"` will be logged to the console. + --- -```js -var greet = function(name) { - console.log("Hello, " + name); -}; -``` +An error message will display in the console. --- -All of them. +Nothing will display in the console. #### --answer-- -```js -const person = { - name: "Alice", - greet: function() { - console.log("Hello, my name is " + this.name); - } -}; -``` +The string `"Hello, Jessica"` will be logged to the console. ### --question-- #### --text-- -What is the benefit of using methods instead of functions? +What happens if you try to remove the curly braces for a regular function? #### --distractors-- -Methods provide a more organized way to group related functionality. +An alert box will display on the page with an error. --- -Methods can be accessed using dot notation, which can make code more readable. +The program will crash and not start again. --- -Methods have access to the properties and methods of their object. +Nothing will happen. #### --answer-- -All of the answers are correct. +You will get a syntax error. ### --question-- #### --text-- -What is the difference between arguments and parameters? +What will be the result for the following code? + +```js +const sum = (num1, num2) => num1 + num2 +console.log(sum(0, 0) + 10); +``` #### --distractors-- -There is no difference between arguments and parameters. +An error message will display in the console. --- -Parameters are the actual values passed to a function when it is called, while arguments are the names of variables used in a function definition. +The number `0` will be logged to the console. --- -Arguments and parameters are used interchangeably. +Nothing will be logged to the console. #### --answer-- -Parameters are the names of variables used in a function definition, while arguments are the actual values passed to the function when it is called. +The number `10` will be logged to the console. ### --question-- #### --text-- -What happens if a function is called with more arguments than it expects? +What will be the output for the following code? + +```js +const exampleFunction = (param1, param2) => param1 + param2; +console.log(exampleFunction(3, "Something")); +``` #### --distractors-- -The extra arguments will be assigned to the remaining parameters. +`null` --- -The function will throw an error. +`undefined` --- -The function will use the default values specified in the function definition. +`3 + "Something"` #### --answer-- -The extra arguments will be ignored. +`"3Something"` ### --question-- #### --text-- -What is the correct syntax for defining a function with default parameter values? +What will be the result for the following code? + +```js +const sum = (num1, num2) => num1 + num2 +console.log(sum(0, 0) + num2); +``` #### --distractors-- -`function myFunction(param1 = value1, param2) { ... }` +An error message saying `num1` is not defined. --- -`function myFunction(param1, param2 = value2) { ... }` +The number `0` will be displayed in the console. --- -`function myFunction(param1: value1, param2: value2) { ... }` +`undefined` will be displayed in the console. #### --answer-- -`function myFunction(param1 = value1, param2 = value2) { ... }` +An error message saying `num2` is not defined. ### --question-- #### --text-- -What is the default value for a missing argument in a function call? +What will be the output for the following code? + +```js +const divideTwoNumbers = (num1, num2) => num1 / num2; +console.log(divideTwoNumbers(3, 0)); +``` #### --distractors-- @@ -494,5 +569,5 @@ What is the default value for a missing argument in a function call? #### --answer-- -`undefined` +`Infinity` diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md index b7175b7d0c..95ddf35014 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-fundamentals/66edcd875b0d91de1fbbb492.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-fundamentals # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,19 +21,19 @@ What are default parameters? #### --distractors-- -Parameters that should always be present in a function +Parameters that should always be present in a function. --- -Parameters that are passed in an array +Parameters that are passed in an array. --- -Parameters that are destructured from an object +Parameters that are destructured from an object. #### --answer-- -Parameters that are optional and have a default value when not provided +Parameters that are optional and have a default value when not provided. ### --question-- @@ -65,19 +65,19 @@ What does the rest parameter syntax allow you to do in JavaScript? #### --distractors-- -Pass parameters by reference +Pass parameters by reference. --- -Provide a set default parameters +Provide a set default parameters. --- -Destructure an object into parameters +Destructure an object into parameters. #### --answer-- -Capture all arguments into one array +Capture all arguments into one array. ### --question-- @@ -109,19 +109,19 @@ What does destructuring allows you to do in JavaScript? #### --distractors-- -Build complex objects +Build complex objects. --- -Serialize objects +Serialize objects. --- -Merge arrays or objects +Merge arrays or objects. #### --answer-- -Extract properties from objects and elements from arrays +Extract properties from objects and elements from arrays. ### --question-- @@ -153,19 +153,19 @@ Which of these is NOT a good practice for naming variables and functions in Java #### --distractors-- -Use camelCase notation +Use camelCase notation. --- -Start variable names with a letter, $ or _ +Start variable names with a letter, $ or _. --- -Using meaningful names +Using meaningful names. #### --answer-- -Using reserved keywords as variable names +Using reserved keywords as variable names. ### --question-- @@ -175,19 +175,19 @@ What is the primary purpose of a linter in JavaScript development? #### --distractors-- -To format code automatically +To format code automatically. --- -To optimize code for performance +To optimize code for performance. --- -To create documentation for code +To create documentation for code. #### --answer-- -To detect potential errors and style issues in code +To detect potential errors and style issues in code. ### --question-- @@ -219,15 +219,15 @@ Which of these describes accessibility? #### --distractors-- -Making sure code is accessible to other developers +Making sure code is accessible to other developers. --- -Writing secure code +Writing secure code. --- -Controlling who can access certain data +Controlling who can access certain data. #### --answer-- @@ -245,15 +245,15 @@ It's slower than `let` and `const` --- -It causes a syntax error +It causes a syntax error. --- -It doesn't allow type checking +It doesn't allow type checking. #### --answer-- -It has function scope instead of block scope, which can lead to unexpected behaviors +It has function scope instead of block scope, which can lead to unexpected behaviors. ### --question-- @@ -263,19 +263,19 @@ In JavaScript, how is memory for variables typically allocated? #### --distractors-- -Manually by the developer +Manually by the developer. --- -By the browser +By the browser. --- -By the server +By the server. #### --answer-- -Automatically by the runtime engine +Automatically by the runtime engine. ### --question-- @@ -285,19 +285,19 @@ What is hoisting in JavaScript? #### --distractors-- -Raising errors to the top of the code +Raising errors to the top of the code. --- -The process of creating new variables +The process of creating new variables. --- -Automatically moving `var` declarations to the top of the block +Automatically moving `var` declarations to the top of the block. #### --answer-- -The process of moving variable declarations to the top of their scope +The process of moving variable declarations to the top of their scope. ### --question-- @@ -307,19 +307,19 @@ What is the purpose of modules in JavaScript? #### --distractors-- -To improve code performance +To improve code performance. --- -To make code more difficult to understand +To make code more difficult to understand. --- -To create new programming languages +To create new programming languages. #### --answer-- -To organize code into reusable units +To organize code into reusable units. ### --question-- @@ -329,19 +329,19 @@ In the context of JavaScript modules, what does `export` do? #### --distractors-- -Save the code to disk +Save the code to disk. --- -Include external libraries in your code +Include external libraries in your code. --- -Publish your code to a public repository +Publish your code to a public repository. #### --answer-- -Make variables, functions or classes available to be imported by other modules +Make variables, functions or classes available to be imported by other modules. ### --question-- @@ -373,19 +373,19 @@ In the context of JavaScript memory management, what are memory leaks? #### --distractors-- -Oversized memory use +Oversized memory use. --- -Coding errors leading to application crashes +Coding errors leading to application crashes. --- -Part of the garbage collection process +Part of the garbage collection process. #### --answer-- -Memory allocations which are never properly made unreachable +Memory allocations which are never properly made unreachable. ### --question-- @@ -395,19 +395,19 @@ What is the main difference between `import` and `require` in JavaScript? #### --distractors-- -`import` is used in Node.js, while `require` is used in the browser +`import` is used in Node.js, while `require` is used in the browser. --- -`import` supports asynchronous loading, while `require` does not +`import` supports asynchronous loading, while `require` does not. --- -`import` is used for CSS and image files, while `require` is used for JavaScript files +`import` is used for CSS and image files, while `require` is used for JavaScript files. #### --answer-- -`import` is part of ES6 syntax, while `require` is an older module loading syntax +`import` is part of ES6 syntax, while `require` is an older module loading syntax. ### --question-- @@ -417,11 +417,11 @@ What does `let` provide that `var` does not? #### --distractors-- -Global scope +Global scope. --- -Read-only variables +Read-only variables. --- @@ -429,7 +429,7 @@ Unlimited re-declaration #### --answer-- -Block scope +Block scope. ### --question-- @@ -439,17 +439,17 @@ What is the purpose of a module bundler like Webpack or Rollup? #### --distractors-- -To optimize code for performance +To optimize code for performance. --- -It translates JavaScript code into machine language +It translates JavaScript code into machine language. --- -To format code automatically +To format code automatically. #### --answer-- -To combine multiple JavaScript modules into a single file +To combine multiple JavaScript modules into a single file. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-higher-order-functions/66edcdd18a4ef8df16e6bb7e.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-higher-order-functions/66edcdd18a4ef8df16e6bb7e.md index a1efafc691..62f2c83526 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-higher-order-functions/66edcdd18a4ef8df16e6bb7e.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-higher-order-functions/66edcdd18a4ef8df16e6bb7e.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-higher-order-functions # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md index 2c3f7d1396..6600110f9e 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-loops/66edcd49e73385dd4df54ac7.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-loops # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -77,7 +77,7 @@ Array #### --answer-- -Math object +Math object. ### --question-- @@ -87,19 +87,19 @@ Which of the following is not a type of loop supported in JavaScript? #### --distractors-- -`for` loop +`for` loop. --- -`while` loop +`while` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`if...else` loop +`if...else` loop. ### --question-- @@ -143,19 +143,19 @@ Which loop executes the code block once, before checking if the condition is tru #### --distractors-- -`while` loop +`while` loop. --- -`for...of` loop +`for...of` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`do...while` loop +`do...while` loop. ### --question-- @@ -165,19 +165,19 @@ Which loop loops over the values of an iterable object? #### --distractors-- -`for...in` loop +`for...in` loop. --- -`for` loop +`for` loop. --- -`do...while` loop +`do...while` loop. #### --answer-- -`for...of` loop +`for...of` loop. ### --question-- @@ -209,19 +209,19 @@ For iterating over an array, which loop is not the best? #### --distractors-- -`for` loop +`for` loop. --- -`for...of` loop +`for...of` loop. --- -`for...in` loop +`for...in` loop. #### --answer-- -`while` loop +`while` loop. ### --question-- @@ -231,19 +231,19 @@ Which loop is the best for iterating objects? #### --distractors-- -`for...of` loop +`for...of` loop. --- -`do...while` loop +`do...while` loop. --- -`for` loop +`for` loop. #### --answer-- -`for...in` loop +`for...in` loop. ### --question-- @@ -297,19 +297,19 @@ What statement can be used to break out of a loop completely? #### --distractors-- -The `continue` statement +The `continue` statement. --- -The `label` statement +The `label` statement. --- -The `skip` statement +The `skip` statement. #### --answer-- -The `break` statement +The `break` statement. ### --question-- @@ -319,19 +319,19 @@ Which statement can be used to skip the current iteration and move to the next i #### --distractors-- -The `break` statement +The `break` statement. --- -The `label` statement +The `label` statement. --- -The `return` statement +The `return` statement. #### --answer-- -The `continue` statement +The `continue` statement. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-maps-and-sets/67358be1c7903489c0a7db78.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-maps-and-sets/67358be1c7903489c0a7db78.md index 9f9c01a60e..0c9007b514 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-maps-and-sets/67358be1c7903489c0a7db78.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-maps-and-sets/67358be1c7903489c0a7db78.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-maps-and-sets # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md index eb856009c3..f6b4a2b99d 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-math/66edc3ab8c6413c344f401bf.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-math # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,53 +17,33 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is the result of this code? - -``` js -const num1 = Number('888'); -const num2 = new Number('777'); - -console.log(num1 === 888); -console.log(num2 === 777); -``` +What does `NaN` stand for? #### --distractors-- -```js -true -true -``` +`Numeric and Number` --- -```js -false -false -``` +`Not a Null` --- -```js -false -true -``` +`Null and Number` #### --answer-- -```js -true -false -``` +`Not a Number` ### --question-- #### --text-- -Which of the following is not an arithmetic operator in JavaScript? +Which of the following is NOT an arithmetic operator in JavaScript? #### --distractors-- -`%` +`*` --- @@ -71,71 +51,55 @@ Which of the following is not an arithmetic operator in JavaScript? --- -`--` +`-` #### --answer-- -`==` +`??` ### --question-- #### --text-- -Which of the following will log the correct gross profit? +What happens if you try to divide by zero in JavaScript? #### --distractors-- -``` js -let store1_sales = 7500; -let store2_sales = 6000; -console.log("Total Sales: " + store1_sales + store2_sales); -``` +JavaScript will output 0. --- -``` js -let store1_sales = 7500; -let store2_sales = 6000; -console.log("Total Sales: " + store1_sales - store2_sales); -``` +Nothing will happen. --- -``` js -let store1_sales = 7500; -let store2_sales = 6000; -console.log("Total Sales: " + (store1_sales - store2_sales)); -``` +JavaScript will throw an error. #### --answer-- -``` js -let store1_sales = 7500; -let store2_sales = 6000; -console.log("Total Sales: " + (store1_sales + store2_sales)); -``` +JavaScript will output `Infinity` ### --question-- #### --text-- -What is the result of the statement `25 * 4 - 16 / (2 * 4) + 8`? +Which of the following is the correct use of the exponentiation operator? #### --distractors-- -`18.5` +`2*3` --- -`107.5` +`2#3` --- -`17` +`2%3` #### --answer-- -`106` +`2**3` ### --question-- @@ -163,7 +127,7 @@ Which operator should you use when decrementing a variable in JavaScript? #### --text-- -Which of the following is not a bitwise operator? +Which of the following is NOT a bitwise operator? #### --distractors-- @@ -229,89 +193,89 @@ The `==` operator only compares values whereas the `===` operator compares value #### --text-- -Which of the following statements are false about unary plus (`+`) operators? +What is the unary plus operator (`+`) used for? #### --distractors-- -It tries to convert the operand into a number. +It is used to decrement a value by one. --- -It is the fastest way to convert an operand to a number. +It is used to get the remainder from an operation. --- -It can convert operands with negative numbers except for hexadecimals. +It is used to invert the binary representation of a number. #### --answer-- -It can't convert `true`, `false`, or `null` into a number. +It is used to convert its operand into a number. ### --question-- #### --text-- -Which method in the built-in Math object is used to round up a number? +Which of the following `Math` methods rounds a value to the nearest whole integer? #### --distractors-- -`Math.round(num)` +`Math.trunc()` --- -`Math.floor(num)` +`Math.max()` --- -`Math.fround(num)` +`Math.min()` #### --answer-- -`Math.ceil(num)` +`Math.round()` ### --question-- #### --text-- -Which of the following Math object methods are used to raise a base to a power? +What does the `Math.sqrt()` method do? #### --distractors-- -`Math.exp(base, power)` +This method returns a random floating point number. --- -`Math.raise(base, power)` +This method returns the absolute value for a number. --- -`Math.e(base, power)` +This method returns the cube of a number. #### --answer-- -`Math.pow(base, power)` +This method returns the square root of a number. ### --question-- #### --text-- -Which of the following is the correct method for generating a random number in JavaScript? +Which of the following is NOT a valid method for the `Math` object? #### --distractors-- -`Math.rand(1,10)` +`Math.ceil()` --- -`Math.rand()` +`Math.pow()` --- -`Math.random(1,10)` +`Math.abs()` #### --answer-- -`Math.random()` +`Math.extend()` ### --question-- @@ -321,11 +285,11 @@ Which of the following will return `false`? #### --distractors-- -`isNaN("1998", "1999")` +`isNaN("Matt")` --- -`isNaN({})` +`isNaN()` --- @@ -333,105 +297,114 @@ Which of the following will return `false`? #### --answer-- -`isNaN(null)` +`isNaN(7)` ### --question-- #### --text-- -Which of the following will convert `172` to its hexadecimal equivalent? +What does the `parseFloat()` method do? #### --distractors-- -`(-0xa5).toString(2);` +It parses a string argument and performs a bitwise operation on it. --- -`(172).string(0x);` +It parses a string argument and returns `false`. --- -`(172).parseString(0x);` +It parses a string argument and returns an integer. #### --answer-- -`(172).toString(16);` +It parses a string argument and returns a floating-point number. ### --question-- #### --text-- -Which of the following is the right way to convert a string to an integer? +What will be logged to the console? + +```js +const num = 5; +console.log(++num); +``` #### --distractors-- -`parseINT("300")` +`error` --- -`int("300")` +`null` --- -`integer("300")` +`5` #### --answer-- -`parseInt("300")` +`6` ### --question-- #### --text-- -Which of the following statements is false? +What would be the output for the following code? + +```js +console.log(5 == '5'); +``` #### --distractors-- -`parseFloat()` ignores trailing invalid characters +`undefined` --- -`parseFloat()` can parse a string that begins with `Infinity` or `-Infinity` +`false` --- -`parseFloat("0x1f")` will return `0` +`null` #### --answer-- -`parseFloat()` requires two parameters +`true` ### --question-- #### --text-- -Which of the following is false? +What is operator precedence? #### --distractors-- -A number greater than 100 as an argument to the `Number.prototype.toFixed()` method will result to a range error +Operator precedence is used to check if the value on the left is less than the one on the right. --- -`Number.prototype.toFixed(numDecimalPlaces)` is used to return a number converted to a string with decimals places depending on the argument +Operator precedence is used to raise a variable to the power of the specified number and reassigns the result to the variable. --- -Calling the `Number.prototype.toFixed()` method on a number object with decimal points and no argument will round the number to the nearest ones +Operator precedence is used to to increase the value by one. #### --answer-- -Using `Number.prototype.toFixed()` without an argument will by default add a decimal point followed by a zero +Operator precedence determines the order in which operations are evaluated in an expression. ### --question-- #### --text-- -Which of the following is not a comparison operator? +Which of the following is NOT a comparison operator? #### --distractors-- -`!=` +`>` --- @@ -439,7 +412,7 @@ Which of the following is not a comparison operator? --- -`===` +`<` #### --answer-- @@ -449,43 +422,75 @@ Which of the following is not a comparison operator? #### --text-- -Which of the following is false? +What does the unary negation operator (`-`) do? #### --distractors-- -Exponentiation has a lower operator precedence than the grouping operator `()`. +It flips the boolean value of its operand. --- -Postfix operators like `x++` or `x--` has higher precedence than prefix operators. +It decreases the value by one. --- -Relational operators like `>` or `<` has higher precedence than equality operators. +It increases the value by one. #### --answer-- -Logical operator like `AND` and `OR` have higher precedence than bitwise operators. +It negates the operand. ### --question-- #### --text-- -`Math.random()` returns a number in what range? +Which of the following is an example of using the nullish coalescing operator? #### --distractors-- -`Math.random()` returns a number between 0 (inclusive) and 1 (inclusive) +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +userSettings.theme () 'light'; +``` --- -`Math.random()` returns a number between 0 (exclusive) and 1 (inclusive) +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +userSettings.theme ** 'light'; +``` --- -`Math.random()` returns a number between 0 (exclusive) and 1 (exclusive) +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +userSettings.theme \\ 'light'; +``` #### --answer-- -`Math.random()`returns a number between 0 (inclusive) and 1 (exclusive) +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +userSettings.theme ?? 'light'; +``` diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md index acf7c3fa29..ebca11d240 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-objects # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,23 +17,23 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -Which of the following does not describe an object in Javascript? +Which of the following does not describe an object in JavaScript? #### --distractors-- -A collection of key-value pairs +A collection of key-value pairs. --- -A container for properties and methods +A container for properties and methods. --- -One of Javascript's data types +One of JavaScript's data types. #### --answer-- -One of Javascript's primitives +One of JavaScript's primitives. ### --question-- @@ -90,10 +90,10 @@ const obj = { key: "some-value" } Which of the following correctly accesses the value of the `street` property in the object below? ```js -const person = { - address: { +const person = { + address: { street: "sample-street" - } + } } ``` @@ -121,19 +121,19 @@ Which of the following property keys can only be used with a bracket notation as #### --distractors-- -A property key that is known and static +A property key that is known and static. --- -A property key nested in multiple levels of the object +A property key nested in multiple levels of the object. --- -A property key that might not exist in the object +A property key that might not exist in the object. #### --answer-- -A property key that is dynamic +A property key that is dynamic. ### --question-- @@ -168,10 +168,10 @@ const person = { name: "John" } Which of the following correctly accesses the value of `street` property via destructuring in the object below? ```js -const person = { - address: { +const person = { + address: { street: "sample-street" - } + } } ``` @@ -337,19 +337,19 @@ Which of the following is true about object setters? #### --distractors-- -An object setter must be called with a parenthesis +An object setter must be called with a parenthesis. --- -An object setter must be defined with the same name as the property it sets +An object setter must be defined with the same name as the property it sets. --- -An object setter must be accompanied by a getter +An object setter must be accompanied by a getter. #### --answer-- -An object setter must be defined with exactly one argument +An object setter must be defined with exactly one argument. ### --question-- @@ -389,11 +389,11 @@ Enumerable properties are defined by the object while non-enumerable properties --- -Enumerable properties can be accessed via dot notation while non-enumerable properties can only be accessed via bracket notation +Enumerable properties can be accessed via dot notation while non-enumerable properties can only be accessed via bracket notation. #### --answer-- -Enumerable properties are properties whose internal enumerable flag is set to true while non-enumerable properties' internal enumerable flag is set to false +Enumerable properties are properties whose internal enumerable flag is set to true while non-enumerable properties' internal enumerable flag is set to false. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md index d4f915e7c0..2a4d4beac5 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-regular-expressions # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md index 7e5d7f6105..8bab1a7aad 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-strings # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -65,19 +65,19 @@ Which of the following options is the newline character? #### --distractors-- -`'\newline'` +`\newline` --- -`'\new'` +`\new` --- -`'\line'` +`\line` #### --answer-- -`'\n'` +`\n` ### --question-- @@ -205,57 +205,56 @@ developer[2]; #### --text-- -How can you obtain the ASCII value of a character in a string? +How can you obtain the ASCII value of the first character in the string `"hello"`? #### --distractors-- -`str.charCode()` +`"hello".charCode(0)` --- -`str.codeAt()` +`"hello".codeAt(0)` --- -`str.getCharIndex()` +`"hello".getCharIndex(0)` #### --answer-- -`str.charCodeAt()` +`"hello".charCodeAt(0)` ### --question-- #### --text-- -How can you obtain the character corresponding to an ASCII value? +Which method can you use to obtain the character corresponding to an ASCII value? #### --distractors-- -`String.toASCII()` +`toASCII()` --- -`String.toChar()` +`toChar()` --- -`String.toCode()` +`toCode()` #### --answer-- -`String.fromCharCode()` +`fromCharCode()` ### --question-- #### --text-- -Which of the following `indexOf` examples will correctly return -1? +Which of the following `indexOf` examples will log `-1` to the console? #### --distractors-- ```js const organization = "freeCodeCamp"; - console.log(organization.indexOf("e")); ``` @@ -263,7 +262,6 @@ console.log(organization.indexOf("e")); ```js const organization = "freeCodeCamp"; - console.log(organization.indexOf("f")); ``` @@ -271,7 +269,6 @@ console.log(organization.indexOf("f")); ```js const organization = "freeCodeCamp"; - console.log(organization.indexOf("C")); ``` @@ -279,7 +276,6 @@ console.log(organization.indexOf("C")); ```js const organization = "freeCodeCamp"; - console.log(organization.indexOf("c")); ``` @@ -287,23 +283,23 @@ console.log(organization.indexOf("c")); #### --text-- -How can you check if the string `"JavaScript"` contains a specific substring? +How can you check if the string `"JavaScript"` contains `"Script"`? #### --distractors-- -`"JavaScript".has()` +`"JavaScript".has("Script")` --- -`"JavaScript".contains()` +`"JavaScript".contains("Script")` --- -`"JavaScript".exists()` +`"JavaScript".exists("Script")` #### --answer-- -`"JavaScript".includes()` +`"JavaScript".includes("Script")` ### --question-- @@ -313,7 +309,7 @@ Which of the following extracts the substring `"Script"` from the string `"JavaS #### --distractors-- -`"JavaScript".remove(3)` +`"JavaScript".find(5)` --- @@ -321,7 +317,7 @@ Which of the following extracts the substring `"Script"` from the string `"JavaS --- -`"JavaScript".cut(3)` +`"JavaScript".cut(5)` #### --answer-- @@ -375,23 +371,23 @@ How do you convert the string `"JavaScript"` to lowercase? #### --text-- -Which of the following methods is used to find a specified value in a string and replace it with another value? +Which of the following will replace `"dogs"` with `"cats"` in the string `"I love dogs"`. #### --distractors-- -`indexOf()` +`"I love dogs".slice("dogs", "cats")` --- -`replaceWith()` +`"I love dogs".replaceWith("dogs", "cats")` --- -`find()` +`"I love dogs".find("dogs", "cats")` #### --answer-- -`replace()` +`"I love dogs".replace("dogs", "cats")` ### --question-- @@ -401,25 +397,25 @@ Which method is used to repeat a string a specified number of times? #### --distractors-- -`str.times()` +`times()` --- -`str.repeatTimes()` +`repeatTimes()` --- -`str.repeatNumber()` +`repeatNumber()` #### --answer-- -`str.repeat()` +`repeat()` ### --question-- #### --text-- -What will the following code return: `'abc'.repeat(3)`? +What will the following code return: `"abc".repeat(3)`? #### --distractors-- @@ -441,23 +437,23 @@ It will throw an error. #### --text-- -How do you remove whitespace from the beginning and end of a string? +Which method will remove whitespace from the beginning and end of a string? #### --distractors-- -`str.strip()` +`strip()` --- -`str.removeWhitespace()` +`removeWhitespace()` --- -`str.trimWhitespace()` +`trimWhitespace()` #### --answer-- -`str.trim()` +`trim()` ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md index 531b469e35..f6d86c8525 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md @@ -7,7 +7,7 @@ dashedName: quiz-javascript-variables-and-data-types # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is JavaScript? +Which of the following best describes JavaScript? #### --distractors-- @@ -33,7 +33,7 @@ A database management system. #### --answer-- -A programming language primarily used for web development. +A programming language used for web development. ### --question-- @@ -43,19 +43,19 @@ Which of the following is NOT a JavaScript data type? #### --distractors-- -`null` +`Number` --- -`undefined` +`Undefined` --- -`bigInt` +`Object` #### --answer-- -`double` +`Double` ### --question-- @@ -77,29 +77,29 @@ Which of the following is NOT a valid JavaScript variable declaration? #### --answer-- -`public final Long x;` +`public Int x;` ### --question-- #### --text-- -Which of the following is a conventional variable name in JavaScript? +Which of the following is a common naming convention for variables in JavaScript? #### --distractors-- -`my_var` +JavaScript case. --- -`my-var` +Lightning case. --- -`MyVar` +Giraffe case. #### --answer-- -`myVar` +Camel case. ### --question-- @@ -127,28 +127,23 @@ What is the difference between `let` and `const` variable declarations in JavaSc #### --text-- -What would be the outcome of the following code? - -```js -let name = "Andy"; -name[0] = "M"; -``` +Why are strings considered immutable in JavaScript? #### --distractors-- -The value of `name` would be `"MAndy"`. +You cannot create strings using variables. --- -The value of `name` would be `"Mndy"`. +Strings can only be created using literals. --- -The value of `name` would still be `"Andy"`. +You can change strings, but only through global variables. #### --answer-- -It would throw an error. +Once a string is created, you cannot change its characters directly. ### --question-- @@ -186,7 +181,7 @@ console.log(hello); #### --distractors-- -Reassigns `world` to the variable `hello`, and prints it out in the console. +Reassigns `" world"` to the variable `hello`, and prints it out in the console. --- @@ -194,33 +189,33 @@ Prints out the number of characters in `Hello world` in the console. --- -Adds the string `world` to the variable `hello`, and prints it out in the console. +Combines `"Hello"` and `" world"` into a new string and prints it, but the value of `hello` remains `"Hello"`. #### --answer-- -Creates a new string that is made of the values of `hello` and `" world"` combined together, and assigns this new string back to `hello` and then prints it out in the console. +Combines the current value of `hello` with the string `" world"`, reassigns it to `hello`, and prints it to the console. ### --question-- #### --text-- -Are semicolons required in JavaScript? +Which JavaScript character is used to mark the end of a statement? #### --distractors-- -Sim. The code won't work without semicolons. +`:` --- -Semicolons are sometimes required in JavaScript. +`,` --- -Não. It's recommended not to use semicolons in JavaScript. +`.` #### --answer-- -No, but it is generally recommended to use semicolons consistently to avoid potential issues in code. +`;` ### --question-- @@ -264,7 +259,7 @@ JavaScript performs type checking before execution, meaning type related errors #### --answer-- -You don't need to declare the data type of a variable before using it. JavaScript infers the type based on the value assigned to the variable. +JavaScript infers the type based on the value assigned to the variable. ### --question-- @@ -328,7 +323,7 @@ Which of the following is a valid multi-line comment in JavaScript? ```py ''' -This is a +This is a multi-line comment ''' @@ -410,7 +405,7 @@ Which of the following is NOT a valid string concatenation method in JavaScript? --- -``console.log(`${string1} ${string2}`);`` +`console.log("string1 " + string2);` --- @@ -424,7 +419,7 @@ Which of the following is NOT a valid string concatenation method in JavaScript? #### --text-- -Which of the following variable names uses camelCase correctly? +Which of the following variable names uses camel case correctly? #### --distractors-- @@ -446,23 +441,23 @@ Which of the following variable names uses camelCase correctly? #### --text-- -Which chatacter JavaScript uses to mark the end of a statement? +Why is it beneficial to use semicolons explicitly even though JavaScript has Automatic Semicolon Insertion? #### --distractors-- -`:` +To increase the execution speed of the code. --- -`,` +To maintain consistency with other programming languages. --- -`.` +To allow for better debugging and error tracing. #### --answer-- -`;` +To improve code readability and reliability. ### --question-- @@ -485,4 +480,3 @@ Which of the following is NOT a JavaScript data type? #### --answer-- `Float` - diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md index 65553d54d2..7e28f1839d 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-local-storage-and-crud/66edd3f9bef926f129990425.md @@ -7,7 +7,7 @@ dashedName: quiz-local-storage-and-crud # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -201,15 +201,15 @@ Which of the following values can be directly converted to JSON using `JSON.stri --- -A Function +A Function. --- -A DOM Element +A DOM Element. #### --answer-- -An Object +An Object. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md index dfefe1ac38..529204e9d0 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md @@ -7,7 +7,7 @@ dashedName: quiz-nano # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -43,19 +43,19 @@ How do you run or start nano from a terminal? #### --distractors-- -Type `run nano`, then press the **Enter** key +Type `run nano`, then press the **Enter** key. --- -Type `start nano`, then press the **Enter** key +Type `start nano`, then press the **Enter** key. --- -Type `nano.exe`, then press the **Enter** key +Type `nano.exe`, then press the **Enter** key. #### --answer-- -Type `nano`, then press the **Enter** key +Type `nano`, then press the **Enter** key. ### --question-- @@ -65,19 +65,19 @@ How do you open a text file using nano? #### --distractors-- -Type `nano.exe [FILE]`, then press the **Enter** key +Type `nano.exe [FILE]`, then press the **Enter** key. --- -Type `emacs [FILE]`, then press the **Enter** key +Type `emacs [FILE]`, then press the **Enter** key. --- -Type `vim [FILE]`, then press the **Enter** key +Type `vim [FILE]`, then press the **Enter** key. #### --answer-- -Type `nano [FILE]`, then press the **Enter** key +Type `nano [FILE]`, then press the **Enter** key. ### --question-- @@ -87,19 +87,19 @@ What type of files is nano capable of creating and modifying? #### --distractors-- -PDF files +PDF files. --- -Word documents +Word documents. --- -Excel spreadsheets +Excel spreadsheets. #### --answer-- -Plain text files +Plain text files. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md index 986a444811..476baadd4d 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md @@ -7,7 +7,7 @@ dashedName: quiz-react-basics # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -43,15 +43,15 @@ Which of the following is NOT a method for conditional rendering in React? #### --distractors-- -Ternary operators +Ternary operators. --- -Logical `&&` operator +Logical `&&` operator. --- -`switch` statements +`switch` statements. #### --answer-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md index 915fe31083..fa5a728beb 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md @@ -7,7 +7,7 @@ dashedName: quiz-react-state-and-hooks # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -421,7 +421,7 @@ Element #### --answer-- -Functional component +Functional component. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md index b19b840fbf..2902d249ee 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-recursion/66edd43cded6bff30944b676.md @@ -7,7 +7,7 @@ dashedName: quiz-recursion # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -190,7 +190,7 @@ console.log(sayHello(3)); --- -An error +An error. --- @@ -341,7 +341,7 @@ The following recursion is missing a base case: ```js function countDownToZero(number) { - // Base case goes here + // Base case goes here. console.log(number); countDownToZero(number - 1); @@ -462,19 +462,19 @@ What HTML structure is typically traversed recursively? #### --distractors-- -Style sheets +Style sheets. --- -Meta tags +Meta tags. --- -Script tags +Script tags. #### --answer-- -The DOM tree +The DOM tree. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md index ab97cb1ac0..56bcf46c10 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md @@ -7,7 +7,7 @@ dashedName: quiz-relational-database # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -65,19 +65,19 @@ What does the `\l` command do when executed in the PostgreSQL interactive termin #### --distractors-- -Lists all schemas +Lists all schemas. --- -Lists all tables +Lists all tables. --- -Connects to a database +Connects to a database. #### --answer-- -Lists all databases +Lists all databases. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md index d99542d041..70cfa3e700 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md @@ -7,7 +7,7 @@ dashedName: quiz-responsive-web-design # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,375 +17,429 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What CSS property is commonly used to create a flexible layout in a container? +What are breakpoints in responsive web design? #### --distractors-- -`display: block;` +Specific points in a design where floats overlap with other elements on the page. --- -`display: inline;` +Specific points used to set the columns and rows for a grid or flex layout. --- -`display: table;` +Specific points used to determine how a tabular layout will behave on the page. #### --answer-- -`display: flex;` +Specific points in a design where the layout and content adjust to accommodate different screen sizes. ### --question-- #### --text-- -What is the main purpose of media queries in responsive web design? +Which of the following is NOT a breakpoint used for smaller devices? #### --distractors-- -To change the color scheme of the page. +`600px` --- -To create animations. +`480px` --- -To adjust margins for print pages. +`320px` #### --answer-- -To apply different styles based on the screen size or device type. +`960px` ### --question-- #### --text-- -Which media feature in a media query checks the width of the browser window? +What is the main purpose of using media queries in responsive web design? #### --distractors-- -`min-height` +To change the color scheme of the page for Safari browsers. --- -`max-aspect-ratio` +To create animations for table layouts. --- -`resolution` +To adjust margins and padding for layouts using CSS flexbox. #### --answer-- -`min-width` +To apply different styles based on the screen size or device type. ### --question-- #### --text-- -Which CSS unit is relative to the width of the viewport? +Which media feature in a media query checks the width of the browser window? #### --distractors-- -`em` +`set-width` --- -`px` +`accept-width` --- -`rem` +`allow-width` #### --answer-- -`vw` +`min-width` ### --question-- #### --text-- -What does mobile-first design emphasize? +What will the following code do? + +```css +@media screen and (min-width: 768px) { + /* Styles go here */ +} +``` #### --distractors-- -Designing for desktops and scaling down for smaller devices. +This will ignore styles for screens that are `768px` wide. --- -Using only desktop breakpoints. +This will apply styles for screens that are only `768px` wide. --- -Focusing on the highest resolution devices first. +This will apply styles for screens that are smaller than `768px`. #### --answer-- -Designing for smaller screens first and scaling up for larger devices. +This will apply styles for screens that are `768px` and wider. ### --question-- #### --text-- -Which media query will apply styles when the device's width is between 600px and 1200px? +What does mobile-first design emphasize? #### --distractors-- -`@media screen and (max-width: 1200px)` +Designing for smaller devices only and ignoring the others. --- -`@media screen and (min-width: 600px)` +Designing for mobile devices built by Apple only. --- -`@media screen and (width: 800px)` +Designing for smaller Android screens first and ignoring Apple devices. #### --answer-- -`@media screen and (min-width: 600px) and (max-width: 1200px)` +Designing for smaller screens first and scaling up for larger devices. ### --question-- #### --text-- -What is the default flex-direction value in Flexbox? +Which media query will apply styles when the device's width is between 600px and 1200px? #### --distractors-- -`column` +`@media screen and (max-width: 1200px)` --- -`row-reverse` +`@media screen and (min-width: 600px)` --- -`column-reverse` +`@media screen and (width: 800px)` #### --answer-- -`row` +`@media screen and (min-width: 600px) and (max-width: 1200px)` ### --question-- #### --text-- -In Flexbox, how do you distribute space between items in a container? +Which of the following is NOT a valid media type? #### --distractors-- -`align-items` +`all` --- -`flex-grow` +`print` --- -`flex-wrap` +`screen` #### --answer-- -`justify-content` +`poster` ### --question-- #### --text-- -How do you apply a grid layout to a container in CSS? +Which of the following media types is intended for paged material and documents viewed on a screen in print preview mode? #### --distractors-- -`display: flexbox;` +`aspect-ratio` --- -`display: block;` +`flex` --- -`display: table;` +`screen` #### --answer-- -`display: grid;` +`print` ### --question-- #### --text-- -What does the `fr` unit represent in CSS Grid? +What does the `aspect-ratio` do in media queries? #### --distractors-- -Flexible ratio +It describes the ratio between flex properties in a flex layout. --- -Frame ratio +It describes the ratio between the x and y axis for grid containers. --- -Fixed region +It describes the ratio between rows and columns for table layouts. #### --answer-- -Fraction of available space +It describes the ratio between the width and height of the viewport. ### --question-- #### --text-- -Which of the following is a valid media query for targeting devices with a resolution of 2x or higher? +Which of the following is used to indicate whether the device is in landscape or portrait orientation? #### --distractors-- -`@media (resolution: 2x)` +`apply-orientation` --- -`@media (max-resolution: 2x)` +`set-orientation` --- -`@media screen and (min-width: 1200px)` +`oriente` #### --answer-- -`@media (min-resolution: 2px)` +`orientation` ### --question-- #### --text-- -Which property controls the number of columns in a grid container? +Which of the following is commonly used to target desktop screens and larger? #### --distractors-- -`grid-template-rows` +```css +@media screen and (min-width: 140000px) { + /* Styles go here */ +} +``` --- -`grid-auto-rows` +```css +@media screen and (min-width: 140px) { + /* Styles go here */ +} +``` --- -`grid-template` +```css +@media screen and (min-width: 14000px) { + /* Styles go here */ +} +``` #### --answer-- -`grid-template-columns` +```css +@media screen and (min-width: 1400px) { + /* Styles go here */ +} +``` ### --question-- #### --text-- -How do you set up a media query for screens larger than 768px? +Which of the following is used to detect if the user has requested a light or dark color theme? #### --distractors-- -`@media screen and (max-width: 768px)` +`allow-colors-scheme` --- -`@media only screen and (width > 768px)` +`apply-color-scheme` --- -`@media (screen-width: 768px)` +`set-colors-scheme` #### --answer-- -`@media screen and (min-width: 768px)` +`prefers-color-scheme` ### --question-- #### --text-- -What is the purpose of the `flex-wrap` property in Flexbox? +Which of the following is used to test whether the primary input mechanism can hover over elements? #### --distractors-- -To align items along the cross axis. +```css +@media (set: hover) { + /* Styles for devices that support hover */ +} +``` --- -To reverse the order of flex items. +```css +@media (apply: hover) { + /* Styles for devices that support hover */ +} +``` --- -To distribute space evenly between items. +```css +@media (hover: apply) { + /* Styles for devices that support hover */ +} +``` #### --answer-- -To allow flex items to wrap onto multiple lines. +```css +@media (hover: hover) { + /* Styles for devices that support hover */ +} +``` ### --question-- #### --text-- -Which of the following breakpoints is commonly used for tablets in responsive web design? +Which of the following is NOT a type of logical operator you can use with media queries? #### --distractors-- -`480px` +`only` --- -`1920px` +`not` --- -`2560px` +`and` #### --answer-- -`768px` +`accept` ### --question-- #### --text-- -How do you center an item horizontally in a flex container? +Which of the following breakpoints is commonly used for tablets in responsive web design? #### --distractors-- -`align-items: center;` +`480px` --- -`flex-direction: row;` +`1920px` --- -`flex-grow: 1;` +`2560px` #### --answer-- -`justify-content: center;` +`768px` ### --question-- #### --text-- -In mobile-first design, which media query should be used to target larger screens? +Which of the following is the correct way to apply the `aspect-ratio` in a media query? #### --distractors-- -`@media screen and (max-width: 600px)` +```css +@media screen and (aspect-ratio: 16-9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` --- -`@media screen and (height: 600px)` +```css +@media screen and (aspect-ratio: 16=9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` --- -`@media only screen` +```css +@media screen and (aspect-ratio: 16:9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` #### --answer-- -`@media screen and (min-width: 600px)` +```css +@media screen and (aspect-ratio: 16/9) { + /* Styles for screens with a 16:9 aspect ratio */ +} +``` ### --question-- @@ -399,11 +453,11 @@ Which CSS property is used to create a layout that adjusts based on screen size --- -`display: block` +`display: block;` --- -`width: 100%` +`width: 100%;` #### --answer-- @@ -413,43 +467,59 @@ Which CSS property is used to create a layout that adjusts based on screen size #### --text-- -How do you prevent a flex container from shrinking smaller than its content? +Which of the following can be used to target landscape screens `768px` and larger? #### --distractors-- -`flex-shrink: 1;` +```css +@media screen and (min-width: 768px) and (landscape: orientation) { + /* Styles go here */ +} +``` --- -`flex-direction: column;` +```css +@media screen and (max-width: 768px) and (orientation: landscape) { + /* Styles go here */ +} +``` --- -`align-items: flex-start;` +```css +@media screen and (min-width: 768px) and (landscape: set) { + /* Styles go here */ +} +``` #### --answer-- -`flex-shrink: 0;` +```css +@media screen and (min-width: 768px) and (orientation: landscape) { + /* Styles go here */ +} +``` ### --question-- #### --text-- -How do you create a responsive image that scales with the width of its container? +What is the default media type if no media type is specified? #### --distractors-- -`max-height: 100%;` +`screen` --- -`object-fit: contain;` +`mobile` --- -`min-width: 100%;` +`print` #### --answer-- -`max-width: 100%;` +`all` diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md index fd80092a85..100e4bdad2 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md @@ -7,7 +7,7 @@ dashedName: quiz-semantic-html # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -391,7 +391,7 @@ Which of the following elements represents a description term inside a descripti #### --text-- -What is the role of the idiomatic text element? +What is the role of the `i` element? #### --distractors-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md index b283beec54..05d8688913 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md @@ -7,7 +7,7 @@ dashedName: quiz-styling-forms # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 9 of the 10 questions below. # --quizzes-- @@ -17,19 +17,19 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -Which of the following is a common issue with the `datetime-local` input type? +What is a common issue for styling the `datetime-local` input type? #### --distractors-- -It cannot be used with CSS variables. +It does not work with the `float` property. --- -It automatically submits the form upon value selection. +It is impossible to make it responsive. --- -It does not support real-time updates. +It does not work with `rem` units. #### --answer-- @@ -39,89 +39,89 @@ The input format is different across browsers. #### --text-- -Why is it important to use `box-sizing: border-box;` when styling text inputs? +Which of the following is considered best practice for styling text inputs? #### --distractors-- -It makes the text input focusable with a keyboard. +Text input font sizes need to be set with `em` units and colors should be a light gray. --- -It hides the input's placeholder text. +Text input sizes should only use dark green borders on focus and the text color should be dark gray. --- -It removes the default browser styling for inputs. +Text input font colors need to be light colors and the size should only be set using the `px` unit. #### --answer-- -It ensures padding and borders are included in the element's width and height. +Text input fonts need to be adequately sized, and the color needs to have sufficient contrast with the background. ### --question-- #### --text-- -What is a benefit of setting a max-width for text inputs? +Why is it important to not remove the ability for users to resize a `textarea` input? #### --distractors-- -It prevents users from entering long text. +Users should be able to zoom in and out and there should be no change in the input. --- -It makes the input unresponsive on larger screens. +Users should be able to zoom in and out and the input should increase to twice its size. --- -It automatically adjusts the font size. +Users should be able to zoom in and out and the input text should triple in size. #### --answer-- -It ensures the input doesn't stretch too wide on larger screens. +Users should be able to zoom in and out and the input should scale accordingly. ### --question-- #### --text-- -Why should you add `:focus` styles to text inputs? +What is a best practice for styling inputs in a focused state? #### --distractors-- -It hides the input's border. +It is important to use only light gray borders for focused inputs. --- -It disables user input. +It is important to only use dark red borders for focused inputs. --- -It forces the browser to ignore default styles. +It is important to remove any noticeable indicator. #### --answer-- -It improves accessibility by making the input easier to identify when focused. +It is important to preserve a noticeable indicator. ### --question-- #### --text-- -How can you prevent text inputs from being cut off when resized? +What is a best practice for styling inputs in an error state? #### --distractors-- -By adding `overflow: hidden;`. +Increase the font size for the input text to `3rem`. --- -By setting a fixed height and width. +Set the input to `display: none;` so it is removed from the page. --- -By removing padding from the input. +Set the input to be disabled so users can no longer interact with it. #### --answer-- -By using padding and line-height with flexible units like `em` or `rem`. +Provide a visual indicator with a message so users know that something is incorrect and needs to be fixed. ### --question-- @@ -143,313 +143,92 @@ It hides the input label, reducing visual clutter. #### --answer-- -It provides users with guidance on the expected input format without cluttering the interface. +It provides users with guidance on the expected input format. ### --question-- #### --text-- -Why should you avoid using `outline: none;` without adding a custom focus style? +What is WebKit? #### --distractors-- -It reduces the size of the text input. +It is a browser engine that ensures that there are no validation errors in your CSS. --- -It hides the input from assistive technology users. +It is a special CSS property used in CSS Grid. --- -It makes the input read-only. +It is a special CSS property used in CSS flexbox. #### --answer-- -It removes the focus outline, which may confuse users about which field is selected. +It is a browser engine that displays webpages. ### --question-- #### --text-- -What is the purpose of using Flexbox or Grid for form layout? +When is it appropriate to use `appearance: none;` for form elements? #### --distractors-- -To make form controls appear in random positions. +To remove form elements completely from the DOM and page. --- -To make the form smaller on mobile devices. +To hide form elements from those who use assistive technologies like screen readers. --- -To hide form controls on large screens. +To remove only default colors that are applied to the form elements and use your own. #### --answer-- -To create a well-structured and responsive form layout. +To remove some of the default styles that are applied to the form elements. ### --question-- #### --text-- -Why should input elements be styled with a solid border? +What are some considerations when working with `appearance: none;` on form elements? #### --distractors-- -It makes the form look more colorful. +It is important to preserve hovered and submit indicators on interactive elements. --- -It automatically increases form field size. +It is important to only use `appearance: none;` when you want to apply different styles for the Safari browser. --- -It forces users to zoom in on mobile devices. +It is important to use `appearance: none;` when you need to completely remove a form element from the page. #### --answer-- -To ensure input fields are clearly visible and easily recognizable as form controls. +It is important to preserve focus and error indicators on interactive elements. ### --question-- #### --text-- -How does increasing the margin between form elements affect form usability? +Which type of form elements are commonly styled using `appearance: none;` to remove their default look? #### --distractors-- -It decreases accessibility on mobile devices. +`label` elements. --- -It prevents users from submitting the form. +`div` elements. --- -It hides form labels. +`span` elements. #### --answer-- -It improves readability by helping users see the grouping of related form elements. - -### --question-- - -#### --text-- - -What is the primary reason for using `appearance: none` in form elements? - -#### --distractors-- - -To add new default styles to form elements. - ---- - -To enable form elements to appear larger on mobile devices. - ---- - -To disable form validation for specific elements. - -#### --answer-- - -To remove the default browser styling from form elements and apply custom styles. - -### --question-- - -#### --text-- - -Which type of form elements is commonly styled using `appearance: none` to remove their default look? - -#### --distractors-- - -`
` elements. +It is helpful for users to quickly understand the table's purpose and content. + ### --question-- @@ -223,67 +258,87 @@ The `aria-labelledby` attribute allows you to give an element an accessible name #### --text-- -What is the function of the `aria-selected` attribute? +Which of the following ARIA states is used to indicate that an element is selected? #### --distractors-- -To change the font size of an element. +`aria-haspopup` --- -To change the background color of an element. +`aria-label` --- -To shrink an element. +`aria-expanded` #### --answer-- -To indicate if an element is selected. +`aria-selected` ### --question-- #### --text-- -What is the function of `aria-expanded`? +Which of the following is NOT a common ARIA state? #### --distractors-- -To change the font size of an element. +`aria-hidden` --- -To change the background color of an element. +`aria-checked` --- -To shrink an element. +`aria-disabled` #### --answer-- -To indicate whether a control is currently expanded or collapsed, and whether its associated content is displayed or hidden. +`aria-columns` ### --question-- #### --text-- -What is the correct way to give an input a label? +Which of the following examples is the correct way to associate a `label` with an `input` element? #### --distractors-- -Give the input a `name` attribute. +```html +
+ + +
+``` --- -Add placeholder text to the input. +```html +
+ + +
+``` --- -Pair the input with a `p` element. +```html +
+ + +
+``` #### --answer-- -Use the `for` attribute on `label`s and matching `id` attribute on `input`s to associate them. +```html +
+ + +
+``` ### --question-- @@ -293,7 +348,7 @@ How does a screen magnifier help visually-impaired users navigate web pages? #### --distractors-- -A screen magnifier reads the page's content aloud to the user. +A screen magnifier will enlarge only images to twice their size so they can be better viewed by visually-impaired users. --- @@ -311,7 +366,7 @@ A screen magnifier helps visually-impaired users navigate web pages by allowing #### --text-- -What is the function of the `aria-haspopup` attribute? +What is the role of the `aria-haspopup` attribute? #### --distractors-- @@ -333,45 +388,46 @@ To indicate that an element can trigger a popup like a menu or dialog. #### --text-- -What is a common keystroke to see if a website is keyboard navigation-friendly? +Which of the following is NOT a commonly used ARIA role? #### --distractors-- -Enter + 6 +`role="alert"` --- -Enter +`role="menu"` --- -Caps Lock +`role="tab"` #### --answer-- -Shift + Tab +`role="access"` ### --question-- #### --text-- -What is the function of the `aria-live` attribute? +Which of the following attributes is used to create a live region on your page which can be used to notify screen reader users of dynamic content changes? + #### --distractors-- -To record live music performances. +`aria-label` --- -To make HTML elements focusable. +`aria-region` --- -To make HTML elements smaller. +`aria-expanded` #### --answer-- -To indicate that an element's content is dynamic and will be updated, which enables assistive technology to mention those updates to the user. +`aria-live` ### --question-- @@ -381,15 +437,15 @@ What is the purpose of the `role` attribute? #### --distractors-- -To style elements with CSS animations. +To style elements with CSS animations allowing assistive technologies to better understand how the element should be interpreted and interacted with. --- -To define the visual appearance of HTML elements. +To define the visual appearance of HTML elements allowing assistive technologies to better understand how the element should be interpreted and interacted with. --- -To modify HTML tags. +To add labels to form elements allowing assistive technologies to better understand how the element should be interpreted and interacted with. #### --answer-- @@ -399,65 +455,65 @@ To specify the type and purpose of an element, allowing assistive technologies t #### --text-- -What is the best way to make a website's link accessible? +Why is it important to use descriptive link text for links? #### --distractors-- -Use phrases like "click here" to describe the link. +To make the link text stand out visually from the rest of the page content. --- -Add the site's URL to the link's text. +To ensure the link loads faster when clicked. --- -Link to two different URLs using the same words on the same page. +To ensure that search engines will always list your site as the first result in the list. #### --answer-- -Avoid linking whole paragraphs. +To ensure that everyone, including users of assistive technology understand the purpose of the link. ### --question-- #### --text-- -When recording audio for a video, it is best to: +Which of the following is a best practice for making audio and video content accessible? #### --distractors-- -Use the latest recording tool. +Providing high-quality graphics to accompany the audio and video content to make it accessible to people with visual impairments. --- -Use jargon and terms related to the topic. +Using bright colors and large text to make the content more engaging and to make it accessible to people with visual impairments. --- -Speak quickly. +Limiting the length of audio and video content to make it accessible to people with hearing impairments. #### --answer-- -Speak slowly and clearly to give users time to process and understand the presented information. +Providing captions and transcripts for audio and video content to make it accessible to people with hearing impairments. ### --question-- #### --text-- -What is the function of the `aria-checked` attribute? +Which of the following attributes is used to indicate that an element is in the checked state? #### --distractors-- -To show a checkmark. +`aria-checking` --- -To mark HTML elements. +`aria-checkbox` --- -To add a circle. +`aria-ischecked` #### --answer-- -To indicate whether an element is checked (`true`), unchecked (`false`), or in an indeterminate state (`mixed`), meaning neither checked nor unchecked. +`aria-checked` diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md b/curriculum/challenges/korean/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md index 9333d52145..d8ecfe228b 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md @@ -7,7 +7,7 @@ dashedName: quiz-html-tables-and-forms # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -83,7 +83,7 @@ It is used to define a table cell. #### --text-- -What's the function of the `colspan` attribute? +What is the function of the `colspan` attribute? #### --distractors-- @@ -99,7 +99,7 @@ It's used to define the number of columns. #### --answer-- -It merges cells across multiple columns. +It defines the number of columns a table cell should span. ### --question-- @@ -109,19 +109,19 @@ What is the role of the `placeholder` attribute? #### --distractors-- -used to send data to the server when the form is submitted +It's used to send data to the server when the form is submitted. --- -used to associate a `label` element with an `input` element +It's used to associate a `label` element with an `input` element. --- -used to specify that an input field is read-only to the user +It's used to specify that an input field is read-only to the user. #### --answer-- -used to show a hint to the user +It's used to provide a hint for an input field. ### --question-- @@ -131,19 +131,19 @@ What is the purpose of the `thead` element? #### --distractors-- -it is used to group the rows in an HTML table +It's used to group the body content in an HTML table. --- -it is used to group the columns in an HTML table +It's used to group the description of an HTML table. --- -it is used to group the footer content in an HTML table +It's used to group the footer content in an HTML table. #### --answer-- -it is used to group the header content in an HTML table +It's used to group the header content in an HTML table. ### --question-- @@ -209,7 +209,7 @@ A validator is a tool that checks the syntax of HTML code to ensure it is valid. #### --text-- -Which element is used to define a new cell in a table? +Which element is used to define a cell in a table? #### --distractors-- @@ -247,29 +247,77 @@ ChatGPT #### --answer-- -DOM inspector +DOM inspector. ### --question-- #### --text-- -Which of the following attributes is used to specify the maximum number of characters allowed in an input field? +Which of the following is the correct way to group related input fields? #### --distractors-- -`getMaxLength` +```html +
+
+
User information
` element to define header cells and the `` element to define data cells. This helps people using assistive technologies understand the structure of the table. +- **Accessibility and Tables**: When using tables, you should use the `` element to define header cells and the `` element to define data cells. This helps people using assistive technologies understand the structure of the table. With the `
` element, you can write the caption (or title) of a table, so users, especially those who use assistive technologies, can quickly understand the table's purpose and content. You should place the `` element immediately after the opening tag of the ``element. This way, screen readers and other assistive technologies can provide more context by announcing the caption before reading the content. - **Importance for inputs to have an associated label**: You should use the `
+
+ +In the table above, the first row shows the binary number `1010`, the second row shows the power of `2` represented by each binary position, and the third row shows the result of each multiplication. If you add all the values in the third row, they total `10`. + +Now, let's dive into bitwise operators. These operators perform operations on the binary representations of numbers. JavaScript provides several bitwise operators, including AND (`&`), OR (`|`), XOR (`^`), NOT (`~`), left shift (`<<`), and right shift (`>>`). + +The bitwise AND (`&`) operator returns a `1` in each bit position for which the corresponding bits of both operands are `1`. Here's an example: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a & b); // Output: 1 (Binary: 001) +``` + +In this example, we perform a bitwise AND operation on `5` (`101` in binary) and `3` (`011` in binary). The result is `1` (`001` in binary) because only the rightmost bit is `1` in both numbers. + +The bitwise OR (`|`) operator returns a `1` in each bit position for which the corresponding bits of either or both operands are `1`. For example: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a | b); // Output: 7 (Binary: 111) +``` + +Here, the result is `7` (`111` in binary) because at least one of the bits is `1` in each position. + +The bitwise XOR (`^`) operator returns a `1` in each bit position for which the corresponding bits of either, but not both, operands are `1`. For instance: + +```js +let a = 5; // Binary: 101 +let b = 3; // Binary: 011 +console.log(a ^ b); // Output: 6 (Binary: 110) +``` + +The result is `6` (`110` in binary) because the first and second bits from the right are different in the two numbers. + +The bitwise NOT (`~`) operator inverts all the bits of its operand. For example: + +```js +let a = 5; // Binary: 101 +console.log(~a); // Output: -6 +``` + +This might seem surprising, but it's because of how negative numbers are represented in binary using two's complement. + +The left shift (`<<`) operator shifts all bits to the left by a specified number of positions. For example: + +```js +let a = 5; // Binary: 101 +console.log(a << 1); // Output: 10 (Binary: 1010) +``` + +Here, all bits are shifted one position to the left, effectively multiplying the number by `2`. + +The right shift (`>>`) operator shifts all bits to the right. For example: + +```js +let a = 5; // Binary: 101 +console.log(a >> 1); // Output: 2 (Binary: 10) +``` + +Here, all bits are shifted one position to the right, effectively dividing the number by `2` and rounding down. + +Bitwise operators are often used in low-level programming and cryptography. While they may not be as commonly used in everyday JavaScript programming, understanding them can be beneficial for certain specialized tasks and can deepen your understanding of how computers work at a fundamental level. + # --questions-- ## --text-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md index 525aa9fc34..91112f2bfe 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md +++ b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271fd11d063daf0cf8d20.md @@ -10,6 +10,122 @@ dashedName: what-are-conditional-statements-and-how-do-if-else-if-else-statement Watch the lecture video and answer the questions below. +# --transcript-- + +What are conditional statements, and how do `if/else` statements work? + +Conditional statements let you make decisions in your JavaScript code. They allow your program to flow in a particular way based on certain conditions. Let's take a look at how `if`, `else if`, `else`, and the ternary operator work to let you control the flow of your code. + +An `if` statement takes a condition and runs a block of code if that condition is truthy. Truthy values are any values that result in `true` when evaluated in a Boolean context like an `if` statement. Here are examples of truthy values: + +- non-empty strings, for example, `hello` + +- any number other than `0` and `-0`, for example, `4`, `-5`, and others + +- arrays + +- objects + +- the boolean `true` + +On the other hand, falsy values are values that evaluate to `false` in a boolean context. JavaScript has few falsy values, which makes them easy to remember. Here are a few falsy values: + +- boolean `false` + +- `0` (zero) + +- `""` (empty string) + +- `null` + +- `undefined` + +- `NaN` (Not a Number) + +Now, that we have a basic understanding of truthy and falsy values, let's see how it works with `if` statements. In this first example, we are using a couple of `if` statements to check against truthy and falsy values: + +```js +if (null) { + console.log("This will not run."); +} + +if ("freeCodeCamp") { + console.log("This will run."); +} +``` + +Since `null` is a falsy value, the message inside the block will never be logged to the console. But for the second `if` statement, the string `freeCodeCamp` is a truthy value, and will be considered `true` in this boolean context of the `if` statement. As a result, the message `This will run.` will be logged to the console. + +Let's take a look at a few more examples on how `if` statements work with different comparison operators. Here is an example of using an `if` statement to check if the user is eligible to vote: + +```js +const age = 22; + +if (age >= 18) { + console.log("You're eligible to vote"); // You're eligible to vote +} +``` + +In this example, since `age` is currently `22`, this means the condition will evaluate to `true` because `22` is greater than or equal to `18`. So the message `You're eligible to vote` will be logged to the console. If we change the example so `age` is now `15`, then the condition will evaluate to `false` and the message will not be logged to the console: + +```js +const age = 15; + +if (age >= 18) { + console.log("You're eligible to vote"); // Code not running because age is less than 18 +} +``` + +When a condition is `false`, then you can use an `else` clause: + +```js +const age = 15; + +if (age >= 18) { + console.log("You're eligible to vote"); +} else { + console.log("You're not eligible to vote"); // You're not eligible to vote +} +``` + +In this example, `15` is not greater than or equal to `18`, so the condition would be `false`. The code inside the `else` block will run in this case. + +If you want to check multiple conditions, you can use an `else if` block. This allows your program to choose between more than two paths. + +```js +const score = 87; + +if (score >= 90) { + console.log('You got an A'); +} else if (score >= 80) { + console.log('You got a B'); // You got a B +} else if (score >= 70) { + console.log('You got a C'); +} else { + console.log('You failed! You need to study more!'); +} +``` + +Since the `score` is currently `87`, then the message of `You got a B` would be logged to the console. + +The ternary operator is a compact way to write simple `if/else` statements. It has three parts: a condition, a result if the condition is true, and a result if it is false. Here's the basic syntax: + +```js +condition ? expressionIfTrue : expressionIfFalse; +``` + +Here's an example dealing with weather temperatures in Celsius: + +```js +const weather = temperature > 25 ? 'sunny' : 'cool'; + +console.log(`It's a ${weather} day!`); +``` + +If `temperature` is greater than `25`, the code above logs `It's a sunny day!`. If `temperature` is ever less than `25`, it logs `It's a cool day!`. + +So, which should you use between an if statement and a ternary? Use a ternary while dealing with a single condition or single expressions, or when you want a compact syntax for simple logic. Use `if/else` statements when you're dealing with complex conditions and multiple statements, as things become unreadable if you nest ternaries.  + # --questions-- ## --text-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md index 7ecb9e7567..39825d354c 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md +++ b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732720e95f6a0db526a2e4d.md @@ -10,6 +10,101 @@ dashedName: what-are-binary-logical-operators-and-how-do-they-work Watch the lecture video and answer the questions below. +# --transcript-- + +What are binary logical operators, and how do they work? + +Binary logical operators help you evaluate two expressions and return a result based on their truthiness. Let's look at the three most common binary logical operators: logical AND, logical OR, and the nullish coalescing operator. + +The logical AND operator is represented by a double ampersand (`&&`). It checks if both operands are true and returns a result. If both operands are truthy, it returns the second value, that is, the one on the right: + +```js +const result = true && 'hello'; + +console.log(result); // hello +``` + +In the example above, the text `hello` is logged to the console because both operands are `true`. If either operand is falsy, it returns the falsy value: + +```js +const result = 0 && 3; + +console.log(result); // 0 +``` + +Since `0` is a falsy value, the number `0` is logged to the console. And if both operands are falsy, it returns the first falsy value: + +```js +const result = false && 0; + +console.log(result); // false +``` + +Since `false` is a falsey value, then `false` is logged to the console. The logical AND operator is useful when you want to check multiple conditions and ensure that all are true before proceeding. Here is an example: + +```js +if (2 < 3 && 3 < 4) { + console.log('The if block runs'); +} else { + console.log('The else block runs'); +} +``` + +In the condition, since `2` is less than `3` AND `3` is less than `4`, then the sentence `The if block runs` will be logged to the console. + +The logical OR operator checks if at least one of the operands is truthy. If the first operand is truthy, it returns that value: + +```js +const result = 'This is truthy' || false; + +console.log(result); // This is truthy +``` + +If the first operand is falsy but the second is truthy, the second value will be logged to the console: + +```js +const result = 0 || 'This is truthy'; + +console.log(result); // This is truthy +``` + +It is common to use the logical OR operator in `if/else` statements like this: + +```js +let userInput; + +if (userInput || 'Guest') { + console.log('A user is present'); +} else { + console.log('No user detected'); +} +``` + +Since we didn't assign a value to the `userInput` variable, it is currently `undefined`. The condition in the `if` statement checks if either the `userInput` variable or the string `Guest` are truthy. Since the string `Guest` is true in a boolean context like this, the string `A user is present` will be logged to the console. + +The nullish coalescing operator is more sophisticated than logical OR and logical AND. Represented by a double question mark (`??`), it helps in scenarios where you want to return a value only if the first one is `null` or `undefined`. Here is an example of working with the nullish coalescing operator: + +```js +const result = null ?? 'default'; + +console.log(result); // default +``` + +Since `null` is a falsey value, the string `default` would be logged to the console. The nullish coalescing operator is incredibly useful in situations where `null` or `undefined` are the only values that should trigger a fallback or default value. Here is an example of dealing with a user's preference settings: + +```js +const userSettings = { + theme: null, + volume: 0, + notifications: false, +}; + +let theme = userSettings.theme ?? 'light'; +console.log(theme); // light +``` + +In the example above, we have an object called `userSettings` that contains `theme`, `volume` and `notifications` properties. We are accessing the `theme` using dot notation like `userSettings.theme`. You will learn more about how to work with objects in a future lecture video. Since the user's `theme` is currently set to `null`, then the string `light` will be logged to the console. + # --questions-- ## --text-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md index aae68540df..05d94f4443 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md +++ b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327217e70ee0db7913b255.md @@ -10,6 +10,98 @@ dashedName: what-is-the-math-object-in-javascript-and-what-are-some-common-metho Watch the lecture video and answer the questions below. +# --transcript-- + +What is the `Math` object in JavaScript, and what are some common methods? + +When diving into JavaScript, you'll quickly discover that performing mathematical operations is a common task. While basic arithmetic operators can handle simple calculations, JavaScript offers a built-in `Math` object to tackle more complex math challenges. + +This handy tool provides a variety of methods that make it easier to perform advanced calculations and manipulate numbers. Let's explore these methods and see how they can simplify your coding experience. + +The `Math.random()` method generates a random floating-point number between `0` (inclusive) and `1` (exclusive). This means the possible output can be `0`, but it will never actually reach `1`. Here is an example working with the `Math.random()` method: + +```js +const randomNum = Math.random(); + +console.log(randomNum); +// any number between 0 and 1 – 0 inclusive and 1 exclusive +``` + +`Math.min()` and `Math.max()` both take a set of numbers and return the minimum and maximum value, respectively. Here is an example of working both of those methods: + +```js +const smallest = Math.min(1, 5, 3, 9); +console.log(smallest); // 1 + +const largest = Math.max(1, 5, 3, 9); +console.log(largest); // 9 +``` + +The first `console.log()` will log the number `1`, since `1` is the smallest in that list of numbers. And the second `console.log()` will log the number `9`, since `9` is the largest numbers in that list. + +If you wanted to round numbers up or down to the nearest whole integer, you could use the `Math.ceil()` and `Math.floor()` methods. Here is an example of working with `Math.ceil()`: + +```js +console.log(Math.ceil(4.3)); // 5 +``` + +`Math.ceil()` will round `4.3` up to the nearest whole integer, which is `5` in this case. Now, let's take a look at rounding a number down: + +```js +console.log(Math.floor(4.7)); // 4 +``` + +`Math.floor()` will round `4.7` down to the nearest whole integer, which is `4` in this case. `Math.round()` is the hybrid of `Math.ceil()` and `Math.floor()`. It rounds a number to its nearest integer, taking the decimal point into account: + +```js +console.log(Math.round(2.3)); // 2 +console.log(Math.round(4.5)); // 5 +console.log(Math.round(4.8)); // 5 +``` + +So, if the decimal point is less than `5`, the number is rounded down. And if the decimal point is `5` or greater, the number is rounded up. A practical application of `Math.floor()` and `Math.random()` is to generate a random number between two whole numbers. Here's the syntax for that: + +```js +Math.floor(Math.random() * (max - min)) + min; +``` + +Generating a random number between `20` and `1` would look like this: + +```js +const randomNumBtw1And20 = Math.floor(Math.random() * 20) + 1; +console.log(randomNumBtw1And20); +``` + +Another helpful `Math` method would be the `Math.trunc()` method. `Math.trunc()` removes the decimal part of a number, returning only the integer portion, without rounding: + +```js +console.log(Math.trunc(2.9)); // 2 +console.log(Math.trunc(9.1)); // 9 +``` + +If you need to get the square root or cube root of a number, you can use the `Math.sqrt()` and `Math.cbrt()` methods, respectively: + +```js +console.log(Math.sqrt(81)); // 9 +console.log(Math.cbrt(27)); // 3 +``` + +The first log statement, will log `9` because the square root of `81` is `9`, while the second log statement will log `3` because the cube root of `27` is `3`. If you need to get the absolute value of a number, you can use the `Math.abs()` method: + +```js +console.log(Math.abs(-5)); // 5 +console.log(Math.abs(5)); // 5 +``` + +`Math.abs()` returns the absolute value of a number, turning negatives into positives. The last method we will look at will be the `Math.pow()` method: + +```js +console.log(Math.pow(2, 3)); // 8 +console.log(Math.pow(8, 2)); // 64 +``` + +`Math.pow()` takes two numbers and raise the first to the power of the second. There are many more methods that belong to the `Math` object, that you can explore on your own. However, these are just a few of the more commonly used ones found in JavaScript codebases. + # --questions-- ## --text-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md index 78c2a2ef8c..05d18d4856 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md +++ b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md @@ -43,10 +43,6 @@ false true ``` -### --feedback-- - -The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardless of case, as long as the letters are the same. - --- ```js @@ -55,6 +51,10 @@ true false ``` +### --feedback-- + +The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardless of case, as long as the letters are the same. + --- ```js @@ -69,7 +69,7 @@ The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardl ## --video-solution-- -3 +2 ## --text-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md index 9999634949..4aa306a97c 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md +++ b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md @@ -2,7 +2,7 @@ id: 673263e80dd43da7df3ae565 title: How Can You Find the Position of a Substring in a String? challengeType: 11 -videoId: k2QaBPHl_00 +videoId: tTm8t9inci8 dashedName: how-can-you-find-the-position-of-a-substring-in-a-string --- diff --git a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md index 00823ca5e9..7a91f301f9 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md +++ b/curriculum/challenges/portuguese/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md @@ -10,6 +10,111 @@ dashedName: what-are-html-tables-used-for Watch the video lecture and answer the questions below. +# --transcript-- + +What are HTML tables used for, and what should they not be used for? + +HTML tables aren't used as much these days as they used to be. But, as a frontend developer, you should still be familiar with them. Tables are one of the earliest ways devs had for displaying data in a browser way back in the 1990s. + +Here's an example of code used to generate a table from the U.S. Bureau of Labor Statistics: + +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts: Software Developers, Quality Assurance Analysts, and Testers
2023 Median Pay + $130,160 per year +
$62.58 per hour +
Typical Entry-Level EducationBachelor's degree
Work Experience in a Related OccupationNone
On-the-job TrainingNone
Number of Jobs, 20221,795,300
Job Outlook, 2022-3225% (Much faster than average)
Employment Change, 2022-32451,200
If this table had a footer it would be here.
+``` + +As you can see, there's a main `table` element with an `id` set to `quickfacts`. Inside it, the table has a table head element, `thead`, table body element, `tbody`, and a table foot element, `tfoot`. + +The table head, body, and foot elements can each contain some number of table rows, `tr`. And each table row can contain a table header `th` which labels the data in that row. It can also contain some number of individual data cells, called table data, `td`. + +Now, that's a lot of HTML elements. But don't be intimidated – these follow a simple hierarchy. + +Here's the simplest table we can create that includes all of these elements: + +```html + + + + + + + + + + + + + + + + + + + + + +
The title of this table
First Row + First Data Cell +
Second Row + Second Data Cell +
The footer of this table, which might contain date of publication, author credits, or other meta information.
+``` + +So as you can see, the data itself is always within a `tr` – and within that `tr` element is a `th` element with a header, and a `td` element with data. + +Some websites will choose to use `div`s to build their own tables instead of using the more appropriate `table` element. + +While it is possible to display tabular data using generic `div` elements, it is still better to use the `table` element instead. + +Many years ago, developers might have used a `table` to position non-data elements on a webpage. This was never considered a best practice. But you may encounter some codebases where tables are still used like this. + +Nowadays, developers use CSS flexbox and grid to layout their designs. freeCodeCamp will cover these tools in depth later. + +For now, just use HTML tables for their original intended purpose: displaying tabular data. + # --questions-- ## --text-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md index 30b78640e1..aa8931b83d 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md @@ -7,7 +7,7 @@ dashedName: quiz-advanced-react # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,439 +17,439 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. ### --question-- #### --text-- -Placeholder question +Placeholder question. #### --distractors-- -Placeholder distractor 1 +Placeholder distractor 1. --- -Placeholder distractor 2 +Placeholder distractor 2. --- -Placeholder distractor 3 +Placeholder distractor 3. #### --answer-- -Placeholder answer +Placeholder answer. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md index bb779b18bd..13c247ca54 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md @@ -7,7 +7,7 @@ dashedName: quiz-asynchronous-javascript # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -363,7 +363,7 @@ A synchronous response. #### --answer-- -A `Promise` that resolves to a `Response` object +A `Promise` that resolves to a `Response` object. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-and-sql/66f1affc0ef4fcca423d4688.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-and-sql/66f1affc0ef4fcca423d4688.md index 44f9594140..23a1a43924 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-and-sql/66f1affc0ef4fcca423d4688.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-and-sql/66f1affc0ef4fcca423d4688.md @@ -7,7 +7,7 @@ dashedName: quiz-bash-and-sql # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-commands/66f1af4fedf643c78d024c5e.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-commands/66f1af4fedf643c78d024c5e.md index 21162d0330..42cc6c77c0 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-commands/66f1af4fedf643c78d024c5e.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-commands/66f1af4fedf643c78d024c5e.md @@ -7,7 +7,7 @@ dashedName: quiz-bash-commands # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md index a389f0e0a6..d03035fd6a 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-bash-scripting/66f1afbd9998e9c985d8e73b.md @@ -7,7 +7,7 @@ dashedName: quiz-bash-scripting # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -388,19 +388,19 @@ What does the command `echo $?` do? #### --distractors-- -Prints the value of the last used variable +Prints the value of the last used variable. --- -Prints the value of the last used arithmetic operation +Prints the value of the last used arithmetic operation. --- -Prints the value of the last executed condition +Prints the value of the last executed condition. #### --answer-- -Prints the exit code of the last executed command +Prints the exit code of the last executed command. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md index 461ffa61b7..702372a16b 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md @@ -7,7 +7,7 @@ dashedName: quiz-basic-css # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -39,7 +39,7 @@ Cascading Style Sheets #### --text-- -Which answer uses the correct structure of using a CSS rule? +Which of the following is a correct CSS rule? #### --distractors-- @@ -65,19 +65,19 @@ What does `` do? #### --distractors-- -Establishes flexbox within the device. +It links external stylesheets to a webpage for responsive design. --- -Creates the font for the device. +It specifies the metadata used by search engines to index a webpage. --- -Makes the website automatically responsive. +It specifies the character encoding used on the webpage. #### --answer-- -Controls the shape and size of the web page from a user's device. +It controls the shape and size of a web page on different screen sizes. ### --question-- @@ -109,19 +109,19 @@ When using internal CSS, where is the `style` element placed within the HTML? #### --distractors-- -In the `meta` element +In the `meta` element. --- -In the `script` element +In the `script` element. --- -In the `body` element +In the `body` element. #### --answer-- -In the `head` element +In the `head` element. ### --question-- @@ -241,19 +241,19 @@ What statement is TRUE about block-level elements? #### --distractors-- -Block-level elements don't start on new lines. +Block-level elements stack horizontally by default. --- -Block-level elements only takes up as much as it needs. +`width` and `height` properties usually do not apply to block-level elements unless you set their `display` property to `inline-block`. --- -Block-level elements come with no margin. +Block-level elements cannot contain inline elements inside them. #### --answer-- -Block-level elements start on a new line with margin before and after the element. +Block-level elements start on a new line and take up the full width of their container. ### --question-- @@ -263,19 +263,19 @@ What statement is TRUE when using the `inline-block` value? #### --distractors-- -Doesn't allow you to set the height and width. +Elements stack vertically, always taking up the full width of their container. --- -Top and bottom margins not respected. +Elements align horizontally but cannot apply vertical padding or margin. --- -Adds a line break after an element. +Elements respect width and height settings but cannot contain other elements inside them. #### --answer-- -Allows you to place elements next to each other while letting you set the height and width. +Elements retain inline flow but allow setting width and height. ### --question-- @@ -351,19 +351,19 @@ What does `!important` do in CSS? #### --distractors-- -It doesn't effect the code. +It makes the CSS rule work exclusively for inline styles and ignores styles defined in external or internal stylesheets. --- -Applies to all properties in the code. +It disables all other CSS properties applied to the same element, effectively making it the only rule that affects the element's styling. --- -Applies on to a certain selector or group of elements. +It applies on to a certain selector or group of elements. #### --answer-- -Overrides any other values applied to the property for that selector. +It overrides any other values applied to the property for that selector. ### --question-- @@ -373,19 +373,19 @@ How does the CSS Cascade algorithm work? #### --distractors-- -Determines styles of the element based on alphabetical order. +It determines styles of the element based on order of declaration, regardless of other factors. --- -Gives animations to the page. +It applies styles based solely on the order they are written, ignoring specificity. --- -Improves Search Emgine Optimization (SEO). +It applies styles prioritizing specificity, ignoring origin and relevance. #### --answer-- -Determines styles of the element based on specificity and order of declaration. +It determines styles of the element based on specificity and order of declaration. ### --question-- @@ -439,17 +439,17 @@ For `padding: 10px 20px 30px 40px`, what is the correct order of values? #### --distractors-- -Right, Top, Left, Bottom +Right, Top, Left, Bottom. --- -Top, Left, Bottom, Right +Top, Left, Bottom, Right. --- -Top, Bottom, Right, Left +Top, Bottom, Right, Left. #### --answer-- -Top, Right, Bottom, Left +Top, Right, Bottom, Left. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md index 4ddb8b7060..fab399e492 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md @@ -7,7 +7,7 @@ dashedName: quiz-basic-html # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -55,7 +55,7 @@ An element used for embedding sound in to the document. #### --answer-- -An element without child nodes or an end tag. +An element without any content or an end tag. ### --question-- @@ -73,7 +73,7 @@ Which of the following is a correct value for the `id` attribute? --- -`id="123content"` +`id="main~content"` #### --answer-- @@ -121,7 +121,7 @@ Boolean attributes must always have a value assigned to them, while regular attr #### --answer-- -A boolean attribute can be present or absent, indicating `true` or `false`, while a regular attribute always has a specified value. +A boolean attribute can be present or absent, while a regular attribute always has a specified value. ### --question-- @@ -275,7 +275,7 @@ It determines the font size of the anchor text inside the `link` element. #### --answer-- -It is used to specify where the linked document will be displayed when the user clicks on the link. +It is used to specify where the linked document will be opened when the user clicks on the link. ### --question-- @@ -297,7 +297,7 @@ A path that includes wildcard characters. #### --answer-- -A path used to specify the exact location of a file or directory from the root directory of the file system. +A complete path to a resource, starting from the root directory. ### --question-- @@ -533,7 +533,7 @@ JPG --- -Creative Commons +Creative Commons. --- @@ -541,7 +541,7 @@ BSD #### --answer-- -CC0 +Creative Commons 0. ### --question-- @@ -819,11 +819,11 @@ Which of the following is NOT a valid value for working with open graph properti --- -`property="og:type"` +`"og:type"` --- -`property="og:image"` +`"og:image"` #### --answer-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md index dadd9f0716..b6c3ee73f2 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md @@ -7,7 +7,7 @@ dashedName: quiz-computer-basics # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -25,7 +25,7 @@ Processor --- -Graphics Card +Graphics Card. --- @@ -39,23 +39,23 @@ Motherboard #### --text-- -Which is not a conventional way to connect a keyboard to the computer? +What are browser developer tools? #### --distractors-- -USB Receiver +Tools for editing browser settings and managing user profiles. --- -Bluetooth +Utilities for blocking ads and improving web page performance. --- -USB Cable +Software for managing browser extensions and plug-ins. #### --answer-- -Ethernet Cable +Built-in features in browsers that help developers debug and inspect websites. ### --question-- @@ -77,7 +77,7 @@ Cable #### --answer-- -Fiber Optic +Fiber Optic. ### --question-- @@ -87,25 +87,25 @@ Which of the following is NOT a safe practice when signing in? #### --distractors-- -Using a fingerprint or face scanner +Using a fingerprint or face scanner. --- -Making a long and complex password like `@ppl3_+B@nana34823` +Making a long and complex password like `@ppl3_+B@nana34823`. --- -Utilizing a physical USB security key +Setting up two-factor authentication (2FA). #### --answer-- -Saving passwords in the browser on a public computer +Using passwords based on personal information like your birthday. ### --question-- #### --text-- -Which of the following is not a Web Browser? +Which of the following is NOT a Web Browser? #### --distractors-- @@ -113,15 +113,15 @@ Safari --- -Opera GX +Opera --- -DuckDuckGo +Microsoft Edge. #### --answer-- -Google Drive +Google Drive. ### --question-- @@ -131,11 +131,11 @@ When you need to edit a piece of code, which of the following are you most likel #### --distractors-- -Node Package Manager +Node Package Manager. --- -Microsoft Edge +Microsoft Edge. --- @@ -143,13 +143,13 @@ Github #### --answer-- -Visual Studio Code +Visual Studio Code. ### --question-- #### --text-- -Which of the following stores and accesses files on the hard drive? +Which of the following is used primarily for managing files stored on a local hard drive? #### --distractors-- @@ -157,59 +157,59 @@ Dropbox --- -Microsoft OneDrive +Microsoft OneDrive. --- -Google Drive +Google Drive. #### --answer-- -Windows File Explorer +Windows File Explorer. ### --question-- #### --text-- -What is not a good practice when naming files for later use? +What is NOT a good practice when naming files? #### --distractors-- -Putting an underscore or hyphen between words +Putting an underscore or hyphen between words. --- -Use a casing style such as camelCase and sticking with it +Use a casing style such as camelCase and sticking with it. --- -Putting a version number at the end of a document like `summaryReport_v2.docx` +Putting a version number at the end of a document like `summaryReport_v2.docx`. #### --answer-- -Being lazy and pounding your keyboard like `asdfloweiueld` to get it over with +Using non-descriptive names like `file1.txt`. ### --question-- #### --text-- -Which of the following is a way to move files? +What does the term "domain name" refer to? #### --distractors-- -Using `Ctrl + X` and `Ctrl + V` (or `Command + X` and `Command + V` on Mac) +A type of software that manages website files and databases. --- -Dragging the file and dropping it at the destination +The physical location of a web server in a data center. --- -Using a terminal command such as `move` (`mv` on Mac) +None of the other choices. #### --answer-- -All of the other choices +The address used to identify websites on the internet. ### --question-- @@ -219,47 +219,47 @@ Which of the following is a way to send a file to the Recycle Bin/Trash? #### --distractors-- -All of the other choices +All of the other choices. --- -Pressing the `Backspace` key on the keyboard +Pressing the `Backspace` key on the keyboard. --- -Moving it to an Archived folder +Moving it to an Archived folder. #### --answer-- -Pressing the `Delete` key on the keyboard (`Command + Delete` on Mac) +Right-click on it and select the Delete/Move to trash option. ### --question-- #### --text-- -Which of the following is not a feature when searching for files locally? +What is a RAM? #### --distractors-- -Using boolean operators like `AND`, `OR`, and `NOT` +A network protocol used for transferring files between devices. --- -Using filters like `*.jpg` +A permanent storage device used for saving files and applications. --- -Using Cortana on Windows or Spotlight Search on Mac +A component in a computer responsible for generating graphics and rendering images. #### --answer-- -Typing the name of the file into your Web Browser and hitting `Enter` +A temporary memory for fast data access by the processor. ### --question-- #### --text-- -What file type will be best suited for writing documentation? +What file type will be best suited for writing a `README` file? #### --distractors-- @@ -281,37 +281,37 @@ What file type will be best suited for writing documentation? #### --text-- -Which of the following is not a configuration file? +What is an Integrated Development Environment (IDE)? #### --distractors-- -`.env` +A platform designed for deploying and hosting web applications. --- -`.build` +A type of hardware device used for testing and debugging electronic circuits. --- -`.yaml` or `.yml` +A version control system that helps developers track changes in source code during software development. #### --answer-- -`.log` +A program that integrates tools for writing, debugging, and running code. ### --question-- #### --text-- -A piece of software that allows you to look at online content is called a: +What is a piece of software that allows you to look at online content called? #### --distractors-- -Internet Content Displayer +Internet Content Displayer. --- -Search Engine +Search Engine. --- @@ -319,21 +319,21 @@ Website #### --answer-- -Web Browser +Web Browser. ### --question-- #### --text-- -A piece of software that lists web pages related to a user's query is a called a: +What is a piece of software that lists web pages related to a user's query called? #### --distractors-- -Page Finder +Page Finder. --- -Web Browser +Web Browser. --- @@ -341,17 +341,17 @@ Website #### --answer-- -Search Engine +Search Engine. ### --question-- #### --text-- -A set of one or more web pages under one domain name is called a: +What is a set of one or more web pages under one domain name called? #### --distractors-- -Web Browser +Web Browser. --- @@ -359,7 +359,7 @@ Hyperlink --- -Search Engine +Search Engine. #### --answer-- @@ -369,15 +369,15 @@ Website #### --text-- -To search for an exact phrase, you should use what character? +To search for an exact phrase, what should you enclose your search query with? #### --distractors-- -Backtick +Backticks --- -Parenthesis +Parentheses --- @@ -385,71 +385,71 @@ Brackets #### --answer-- -Quotation marks +Quotation marks. ### --question-- #### --text-- -Which is not a way to install a Web Browser? +Which is NOT a way to install a Web Browser? #### --distractors-- -Using a Package Manager +Using a Package Manager. --- -Directly downloading from the website +Directly downloading from the website. --- -Using an App Store like Microsoft Store +Using an App Store like Microsoft Store. #### --answer-- -Pressing the Network/Internet button in Settings +Pressing the Network/Internet button in Settings. ### --question-- #### --text-- -Which of these peripherals is an input device? +Which of the following formats does NOT preserve image quality after compression? #### --distractors-- -Projector +All of the other choices. --- -Speakers +PNG --- -Monitor +SVG #### --answer-- -Microphone +JPEG ### --question-- #### --text-- -Which of the following lists of parts can all be found in the circuit board? +Which of the following parts can be found in the circuit board? #### --distractors-- -Printer, Router, USB Ports +Printer and Router. --- -Mouse, Keyboard, Monitor +Mouse and Keyboard. --- -Motherboard, Hard Drive, GPU +Hard Drive and GPU. #### --answer-- -BIOS/UEFI Chip, CPU, RAM +CPU and RAM. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md index 0274054ff7..a9996aff1b 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md @@ -7,7 +7,7 @@ dashedName: quiz-css-accessibility # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -65,11 +65,11 @@ Which tool can help inspect element styles in a web browser? #### --distractors-- -Adobe Photoshop +Adobe Photoshop. --- -Microsoft Word +Microsoft Word. --- @@ -77,7 +77,7 @@ Notepad #### --answer-- -Chrome DevTools +Chrome DevTools. ### --question-- @@ -109,19 +109,19 @@ What does the `:hover` pseudo-class indicate? #### --distractors-- -Active state +Active state. --- -Element is focused +Element is focused. --- -Element is hidden +Element is hidden. #### --answer-- -Mouse is over the element +Mouse is over the element. ### --question-- @@ -143,7 +143,7 @@ Figma #### --answer-- -Contrast checker +Contrast checker. ### --question-- @@ -153,19 +153,19 @@ What is the purpose of the `alt` attribute in images? #### --distractors-- -To change image size +To change image size. --- -To add a title +To add a title. --- -To change image color +To change image color. #### --answer-- -To provide a text alternative +To provide a text alternative. ### --question-- @@ -175,19 +175,19 @@ What is a screen reader? #### --distractors-- -A browser for disabled users +A browser for disabled users. --- -A CSS tool +A CSS tool. --- -A web development library +A web development library. #### --answer-- -A text-to-speech software +A text-to-speech software. ### --question-- @@ -197,19 +197,19 @@ What does the 'Inspect Element' feature do? #### --distractors-- -Edits text directly +Edits text directly. --- -Downloads files +Downloads files. --- -Modifies images +Modifies images. #### --answer-- -Displays CSS and HTML +Displays CSS and HTML. ### --question-- @@ -241,19 +241,19 @@ What does the `opacity` property do in CSS? #### --distractors-- -Changes text size +Changes text size. --- -Adds a border +Adds a border. --- -Sets the element's position +Sets the element's position. #### --answer-- -Controls element transparency +Controls element transparency. ### --question-- @@ -285,19 +285,19 @@ What is a common use for `aria-hidden="true"`? #### --distractors-- -To show content +To show content. --- -To display on mobile +To display on mobile. --- -To increase visibility +To increase visibility. #### --answer-- -To hide content from screen readers +To hide content from screen readers. ### --question-- @@ -307,19 +307,19 @@ What is the `flex` property used for? #### --distractors-- -Changing text color +Changing text color. --- -Adjusting font size +Adjusting font size. --- -Adding animations +Adding animations. #### --answer-- -Creating responsive layouts +Creating responsive layouts. ### --question-- @@ -439,17 +439,17 @@ What is the `outline` property most commonly used to configure? #### --distractors-- -Border of an element +Border of an element. --- -Margin of an element +Margin of an element. --- -Padding of an element +Padding of an element. #### --answer-- -Focus indicator around an element +Focus indicator around an element. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md index 2ebe84fe08..a2f4534c58 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md @@ -7,7 +7,7 @@ dashedName: quiz-css-animations # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -43,19 +43,19 @@ What does `matrix()` allow you to control? #### --distractors-- -Only scaling +Only scaling. --- -Only translation +Only translation. --- -Only rotation +Only rotation. #### --answer-- -Multiple transformations at once +Multiple transformations at once. ### --question-- @@ -109,19 +109,19 @@ What does `@keyframes` define? #### --distractors-- -CSS colors +CSS colors. --- -CSS transitions +CSS transitions. --- -CSS text styles +CSS text styles. #### --answer-- -CSS animation sequences +CSS animation sequences. ### --question-- @@ -131,19 +131,19 @@ What does `translate()` do? #### --distractors-- -Changes opacity +Changes opacity. --- -Rotates the element +Rotates the element. --- -Skews the element +Skews the element. #### --answer-- -Moves the element +Moves the element. ### --question-- @@ -153,7 +153,7 @@ What does accessibility focus on in web design? #### --distractors-- -Color choice +Color choice. --- @@ -161,11 +161,11 @@ Responsiveness --- -Layout complexity +Layout complexity. #### --answer-- -Usability for all users +Usability for all users. ### --question-- @@ -175,19 +175,19 @@ Where is `@keyframes` written? #### --distractors-- -Inside HTML tags +Inside HTML tags. --- -Inside CSS selectors +Inside CSS selectors. --- -In JavaScript +In JavaScript. #### --answer-- -In CSS +In CSS. ### --question-- @@ -219,19 +219,19 @@ Why is providing video captions important? #### --distractors-- -To improve SEO +To improve SEO. --- -To comply with web standards +To comply with web standards. --- -To enhance visuals +To enhance visuals. #### --answer-- -To provide accessibility for hearing impaired users +To provide accessibility for hearing impaired users. ### --question-- @@ -319,7 +319,7 @@ To adjust the layout. #### --answer-- -To highlight focused elements +To highlight focused elements. ### --question-- @@ -395,19 +395,19 @@ What does the animation shorthand property include? #### --distractors-- -Only animation name +Only animation name. --- -Only animation timing +Only animation timing. --- -Only animation duration +Only animation duration. #### --answer-- -All animation properties +All animation properties. ### --question-- @@ -417,7 +417,7 @@ What is the effect of using the `ease-in-out` timing function? #### --distractors-- -The animation will start fast and end slow +The animation will start fast and end slow. --- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md index bb02fe5331..fcdd128847 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md @@ -7,7 +7,7 @@ dashedName: quiz-css-attribute-selectors # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md index 12fc03010e..368d6efc8c 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md @@ -7,7 +7,7 @@ dashedName: quiz-css-backgrounds-and-borders # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -61,23 +61,23 @@ Which property is used to control the position of the list item marker? #### --text-- -Which of the following is NOT a valid value for the `list-style-type` property? +What does the `line-height` property do? #### --distractors-- -`decimal` +It is used to set the background size for an element. --- -`disc` +It is used to style links that have not be visited by the user. --- -`square` +It is used to create space to the right of list items. #### --answer-- -`lower-arabic` +It is used to create space between lines of text. ### --question-- @@ -87,15 +87,15 @@ Which pseudo-class is used to style links when a user hovers over them? #### --distractors-- -`:active` +`:hovered` --- -`:link` +`:hovering` --- -`:visited` +`:hasHovered` #### --answer-- @@ -149,45 +149,45 @@ Which CSS property can be used to control the size of a background image? #### --text-- -How can you make a background image cover the entire element, maintaining aspect ratio? +Which of the following is the correct way to apply a solid red top border to an element? #### --distractors-- -`background-size: contain` +`set-top-border: 3px solid red;` --- -`background-repeat: stretch` +`border-top: apply 3px solid red;` --- -`background-fit: full` +`top-border: 3px solid red;` #### --answer-- -`background-size: cover` +`border-top: 3px solid red;` ### --question-- #### --text-- -What does `background-attachment: fixed` do? +Which of the following is NOT a valid `border` property? #### --distractors-- -The background moves with the scrolling content +`border-bottom` --- -The background scrolls twice as fast +`border-right` --- -The background image is resized to fill the screen +`border-top` #### --answer-- -The background stays fixed while the content scrolls +`border-side` ### --question-- @@ -215,45 +215,61 @@ Which of the following is a valid `border-style` value? #### --text-- -How can you make a link change color when clicked? +Which of the following is the correct way to apply borders using the shorthand property? #### --distractors-- -Use the `:link` pseudo-class +```css +.box { + borders: 1px solid black; +} +``` --- -Use the `:visited` pseudo-class +```css +.box { + borderShort: 1px solid black; +} +``` --- -Use the `:hover` pseudo-class +```css +.box { + border-short: 1px solid black; +} +``` #### --answer-- -Use the `:active` pseudo-class +```css +.box { + border: 1px solid black; +} +``` ### --question-- #### --text-- -What is the correct CSS property to create an outline around an element, besides using the `border` property? +What is the role of the `linear-gradient` function? #### --distractors-- -`border-wide` +It is used to set the style of an element's border. --- -`box-shadow` +It is used to determine how background images should be repeated along the horizontal and vertical axes. --- -`border-img` +It is used to style an element that was activated by the user. #### --answer-- -`outline` +It is used to create a transition between multiple colors along a straight line. ### --question-- @@ -281,95 +297,95 @@ Which value for the `background-repeat` property ensures the image repeats horiz #### --text-- -What's the purpose of the `border-radius` property? +What is the purpose of the `border-radius` property? #### --distractors-- -To create shadows around the border +To create shadows around the border. --- -To change the width of the border +To change the width of the border. --- -To make the border disappear +To make the border disappear. #### --answer-- -To round the corners of an element +To round the corners of an element. ### --question-- #### --text-- -Which property is used to add space between the border and the content? +Which of the following is NOT a valid value for the `background-position` property? #### --distractors-- -`margin` +`top` --- -`border-spacing` +`center` --- -`border-width` +`bottom` #### --answer-- -`padding` +`side` ### --question-- #### --text-- -How can you make a background image repeat only vertically? +Which of the following `background-repeat` values can be used to repeat a background image vertically? #### --distractors-- -`background-repeat: repeat-x` +`repeat-x` --- -`background-repeat: vertical-only` +`vertical-only` --- -`background-repeat: stretch` +`stretch` #### --answer-- -`background-repeat: repeat-y` +`repeat-y` ### --question-- #### --text-- -What does `background-position: center` do to a background image? +What does `background-position: center;` do to a background image? #### --distractors-- -It aligns the background image to the top of the element +It aligns the background image to the top of the element. --- -It repeats the background image horizontally and vertically +It repeats the background image horizontally and vertically. --- -It scales the background image to fill the entire element +It scales the background image to fill the entire element. #### --answer-- -It positions the background image in the center of the element +It positions the background image in the center of the element. ### --question-- #### --text-- -Which of these is NOT a valid border value? +Which of these is NOT a valid `border` value? #### --distractors-- @@ -381,7 +397,7 @@ Which of these is NOT a valid border value? --- -`2px grooved red` +`2px dashed red` #### --answer-- @@ -391,65 +407,81 @@ Which of these is NOT a valid border value? #### --text-- -How can you ensure that gradients used in web design are accessible? +What is does the `radial-gradient` function do? #### --distractors-- -Use only two colors in the gradient +It creates a background that transitions between multiple colors along a straight line. --- -Use gradients only for decorative purposes +It specifies whether the background image should scroll with the content or remain fixed in place. --- -Avoid using gradients in the background +It is used to style an element that was activated by the user. #### --answer-- -Ensure sufficient contrast between the gradient and any text. +It creates an image that radiates from a particular point and gradually transitions between multiple colors. ### --question-- #### --text-- -Which value for the `background-size` property will resize the background image to fit within the container while preserving the image's aspect ratio? +Which of the following is NOT a valid pseudo-class? #### --distractors-- -`fill` +`:focus` --- -`stretch` +`:visited` --- -`repeat` +`:link` #### --answer-- -`contain` +`:before` ### --question-- #### --text-- -How do you make an image border have rounded corners in CSS? +Which of the following shows the `background` shorthand property being used properly? #### --distractors-- -`border-style: round` +```css +body { + background: apply url("example-url-goes-here"); +} +``` --- -`border-corners: circle` +```css +body { + background: set url("example-url-goes-here"); +} +``` --- -`border-rounding: 10px` +```css +body { + background: 2px solid red url("example-url-goes-here"); +} +``` #### --answer-- -`border-radius: 10px` +```css +body { + background: no-repeat url("example-url-goes-here"); +} +``` diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md index 33a227a68d..92d68aa16f 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md @@ -7,7 +7,7 @@ dashedName: quiz-css-colors # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,111 +17,111 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -Which of the following is a valid way to represent a color in CSS? +Which of these color systems cannot be used to set a color in CSS? #### --distractors-- -`color-value: black;` +RGB --- -`text-color: blue;` +HSL --- -`font-color: red;` +HEX #### --answer-- -`#ff5733` +CMYK ### --question-- #### --text-- -What is the correct syntax for setting the background color of an element? +What are the primary colors in color theory? #### --distractors-- -`bg-color: red;` +`Green`, `Blue`, `Purple` --- -`background_color: red;` +`Orange`, `Green`, `Purple` --- -`style: background-color: red;` +`Yellow`, `Green`, `Red` #### --answer-- -`background: red;` +`Yellow`, `Blue`, `Red` ### --question-- #### --text-- -How can you set the transparency of an element to 50%? +Which type of color scheme uses colors that are opposite each other on the color wheel? #### --distractors-- -`bg-opacity: 0.5;` +Analogous --- -`transparency: 50%;` +Triadic --- -`alpha: 0.5;` +Monochromatic #### --answer-- -`opacity: 0.5;` +Complementary ### --question-- #### --text-- -What is the equivalent `HSL` value for the color `#FF0000`? +Which type of color scheme uses colors that are adjacent to each other on the color wheel? #### --distractors-- -`hsl(180%, 100%, 50%)` +Complementary --- -`hsl(180, 100%, 50%)` +Triadic --- -`hsl(360, 100%, 50%)` +Monochromatic #### --answer-- -`hsl(0, 100%, 50%)` +Analogous ### --question-- #### --text-- -How can you set the color of an element to a random color? +What is the term for colors that are created by mixing equal parts of two primary colors? #### --distractors-- -`color: random();` +Tertiary --- -`color: #random;` +Complementary --- -`color: any();` +Analogous #### --answer-- -There is no direct way to do so. +Secondary ### --question-- @@ -237,45 +237,53 @@ Which of the following hex codes represents a shade of red? #### --text-- -Which keyword sets the text color to inherit from the parent element? +How many colors are required to create a valid CSS gradient? #### --distractors-- -`null` +At least 4. --- -`auto` +Exactly 2. --- -`default` +Exactly 3. #### --answer-- -`inherit` +At least 2. ### --question-- #### --text-- -How many colors are required to create a valid CSS gradient? +Which is NOT a valid way to apply a linear-gradient? #### --distractors-- -At least `4` +```css +background: linear-gradient(to right, red, blue); +``` --- -Exactly `2` +```css +background: linear-gradient(90deg, red, green, blue); +``` --- -Exactly `3` +```css +background: linear-gradient(#F00, #00F); +``` #### --answer-- -At least `2` +```css +background: linear-gradient(up, red, blue); +``` ### --question-- @@ -285,41 +293,41 @@ What unit is used to express the lightness value in the `hsl` color model? #### --distractors-- -`Degrees` +Degrees --- -`Hex` +Hex --- -`Pixels` +Pixels #### --answer-- -`Percent (%)` +Percent ### --question-- #### --text-- -Which CSS property would you use to add a solid color around an element? +What does the `rgb()` function stand for? #### --distractors-- -`color` +`Red`, `Gray`, `Black` --- -`outline-color` +`Radiant`, `Glow`, `Blend` --- -`text-color` +`Rendered`, `Graphic`, `Background` #### --answer-- -`border-color` +`Red`, `Green`, `Blue` ### --question-- @@ -329,37 +337,37 @@ What does the `hsl()` function stand for? #### --distractors-- -`Hue, Saturation, Luminosity` +`Hue`, `Saturation`, `Luminosity` --- -`Hue, Shadow, Lightness` +`Hue`, `Shadow`, `Lightness` --- -`Hue, Shadow, Luminosity` +`Hue`, `Shadow`, `Luminosity` #### --answer-- -`Hue, Saturation, Lightness` +`Hue`, `Saturation`, `Lightness` ### --question-- #### --text-- -Which of these is a valid CSS color keyword? +Which of these is a valid CSS named color? #### --distractors-- -`purple-red` +`hsl(yellow)` --- -`electricblue` +`rgb(red)` --- -`goldy` +`#blue` #### --answer-- @@ -391,113 +399,88 @@ What is the maximum value allowed for a single color component in the `RGB` colo #### --text-- -Which color model includes the `hue` component? +Which of these correctly uses one of the color models to set the background color? #### --distractors-- -`rgb` +```css +background: rgb(50%, 255, 155); +``` --- -`hex` +```css +background: #blue; +``` --- -`cmyk` +```css +background: #0I0I0I; +``` #### --answer-- -`hsl` +```css +background: hsl(50, 50%, 50%); +``` ### --question-- #### --text-- -Which of the following is the correct syntax to create a CSS variable with a fallback value? +Which of these sets the opacity of the color? #### --distractors-- ```css -.element { - color: var(--main-color; red); -} +hsl(0, 20%, 30%, 50%) ``` --- ```css -.element { - color: var(--main-color); -} +rgb(20, 30, 80, 0.5) ``` --- ```css -.element { - color: var(--main-color: red); -} +rgba(20, 30, 80) ``` #### --answer-- ```css -.element { - color: var(--main-color, red); -} +hsla(0, 20%, 30%, 50%) ``` ### --question-- #### --text-- -How can you use CSS variables to dynamically change the color of multiple elements? +Which of the following is the correct way to give an element a top-to-bottom red-to-blue gradient background? #### --distractors-- ```css -:root { - primary-color: blue; -} - -.element1, .element2 { - color: --primary-color; -} +background: radial-gradient(red, blue) ``` --- ```css -body { - --color: blue; -} - -.element1, .element2 { - color: var(color); -} +background: radial-gradient(blue, red) ``` --- ```css -:root { - primary: blue; -} - -.element1, .element2 { - color: var(--primary); -} +background: linear-gradient(blue, red) ``` #### --answer-- ```css -:root { - --primary-color: blue; -} - -.element1, .element2 { - color: var(--primary-color); -} +background: linear-gradient(red, blue) ``` - diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md index 030321616e..fdef7ca525 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md @@ -7,7 +7,7 @@ dashedName: quiz-css-flexbox # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -44,32 +44,32 @@ What css property is set to enable the flexbox layout for the `div` element? #### --distractors-- ```css -div { - flex: 1; +div { + flex: 1; } ``` --- ```css -div { - flex-direction: row; +div { + flex-direction: row; } ``` --- ```css -div { - flex-wrap: wrap; +div { + flex-wrap: wrap; } ``` #### --answer-- ```css -div { - display: flex; +div { + display: flex; } ``` @@ -77,7 +77,7 @@ div { #### --text-- -Flexbox defaults to fit all children within a single row. What property can be modified when there are too many children within one row, and you want to spread them out into multiple rows? +Which CSS property lets flex items wrap onto a new row when the current row is full? #### --distractors-- @@ -103,19 +103,19 @@ What does the flexbox property `justify-content` control? #### --distractors-- -It controls the direction of the children elements of the flexbox container. +It controls the direction of the child elements of the flexbox container. --- -It controls the text style of the children elements of the flexbox container. +It controls the text style of the child elements of the flexbox container. --- -It controls the alignment of the children elements within the flexbox container. +It controls the alignment of the child elements within the flexbox container. #### --answer-- -It controls the distribution of the children elements on the main axis. +It controls the distribution of the child elements on the main axis. ### --question-- @@ -143,7 +143,7 @@ What property controls the direction of the elements within the flexbox containe #### --text-- -What CSS properties would you use to make a `.container` element's items flow from left to right, change lines when an item exceeds container width, and have new items go on top of the previous line? +Which CSS properties can be used to make flex items flow from left to right, and have the new flex item appear on top of the previous one if the width of the current row is exceeded? #### --distractors-- @@ -276,7 +276,7 @@ What CSS properties would you use to center an element within a flex container h #### --text-- -What value of `flex-direction` makes the children elements go from right to left? +What value of `flex-direction` makes the flex items go from right to left? #### --distractors-- @@ -324,7 +324,7 @@ What does the `stretch` value in `align-items` do? #### --distractors-- -Items are packed flush to each other toward the start edge of the container. +Items are packed directly against each other toward the start edge of the container. --- @@ -332,7 +332,7 @@ Items are aligned such that their flex container baselines align. --- -Items are packed flush to each other toward the end edge of the container. +Items are packed directly against each other toward the end edge of the container. #### --answer-- @@ -342,7 +342,7 @@ Auto-size items to be equally large to fill the container. #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, have the same spacing between each pair of adjacent items, and have items whose sides are flush againt the main axis edge? +Which `justify-content` value places the first item at the start, the last item at the end, and evenly spaces the other items between them along the main axis? #### --distractors-- @@ -364,7 +364,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, and have the same spacing between each pair of adjacent items and against the main axis edge? +Which `justify-content` value spaces items so that the gaps between every pair of adjacent items and the container’s edges are all equal? #### --distractors-- @@ -386,7 +386,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, have the same spacing between each pair of adjacent items, and have items on the sides with half the spacing against the main axis edge? +Which `justify-content` value spaces items equally along the main axis while leaving half that amount of space at the container’s edges? #### --distractors-- @@ -408,7 +408,7 @@ Which value for `justify-content` will evenly distribute items along the main ax #### --text-- -Which value for `align-items` will make it so items are flush against the cross-axis start? +Which value for `align-items` will make it so items are directly against the cross-axis start? #### --distractors-- @@ -430,7 +430,7 @@ Which value for `align-items` will make it so items are flush against the cross- #### --text-- -Which value for `align-items` will make it so items are flush against the cross-axis end? +Which value for `align-items` will make it so items are directly against the cross-axis end? #### --distractors-- @@ -452,7 +452,7 @@ Which value for `align-items` will make it so items are flush against the cross- #### --text-- -Which value for `flex-direction` will make it so items are aligned along the main axis from left to right. +Which value for `flex-direction` will make it so items are aligned along the main axis from left to right? #### --distractors-- @@ -474,7 +474,7 @@ Which value for `flex-direction` will make it so items are aligned along the mai #### --text-- -Which value for `flex-direction` will make it so items are aligned along the cross axis from top to bottom. +Which value for `flex-direction` will make it so items are aligned along the cross axis from top to bottom? #### --distractors-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md index ea9ec70fc6..e419493b1d 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-grid/66ed8fedf45ce3ece4053eb3.md @@ -7,7 +7,7 @@ dashedName: quiz-css-grid # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -39,45 +39,45 @@ A two-dimensional layout for HTML documents. #### --text-- -Which property and attribute are used to turn an element into a grid container? +Which of the following is the correct way to create a grid container? #### --distractors-- -`display: grid-area` +`display: grid-area;` --- -`grid: grid-template` +`grid: grid-template;` --- -`grid-template: set` +`grid-template: set;` #### --answer-- -`display: grid` +`display: grid;` ### --question-- #### --text-- -Which one of these options for the `grid-template-columns` property will result in a middle column that is 80 relative units wide, and two columns taking up the remaining space? +What does the `grid-template-columns` property do? #### --distractors-- -`10% 80rem 10%` +Defines two columns and three rows for a grid container. --- -`1fr 8fr 1fr` +Sets all columns for the grid layout to a fixed length. --- -`10rem 80rem 10rem` +Creates a two column grid layout container. #### --answer-- -`1fr 80rem 1fr` +Defines the number of columns in a grid layout. ### --question-- @@ -95,11 +95,11 @@ Creates a template for creating new grid rows. --- -Specifies a default row size. +Specifies a default row size in the grid container. #### --answer-- -Specifies the number and heights of the rows in a grid layout. +Specifies the number and height for each row in a grid layout. ### --question-- @@ -121,7 +121,7 @@ Sets the minimal size of the element for browser working in full-screen mode. #### --answer-- -Defines a size range between the first and second value. +Sets the minimum and maximum sizes for a track. ### --question-- @@ -149,45 +149,45 @@ What is the shorthand for the `column-gap` and `row-gap` properties? #### --text-- -Which property defines on which row line the item will start? +What is the difference between an implicit and explicit grid? #### --distractors-- -`row-start` +Implicit grids use the `grid-template-columns` property while explicit grids use the `grid-template-rows` property. --- -`grid-row-begin` +Explicit grids use the `grid-template-columns` property while implicit grids use the `grid-template-rows` property. --- -`grid-row` +Implicit grids use the `grid-template-columns` or `grid-template-rows` properties to create columns while rows and columns are automatically created in explicit grids. #### --answer-- -`grid-row-start` +Explicit grids use the `grid-template-columns` or `grid-template-rows` properties to create columns while rows and columns are automatically created in implicit grids. ### --question-- #### --text-- -Which property automatically allocates rows based on a fixed size? +Which of the following units represents a fraction of the space within the grid container? #### --distractors-- -`grid-rows-size` +`fractional` --- -`grid-template` +`frac` --- -`grid-row` +`f` #### --answer-- -`grid-auto-rows` +`fr` ### --question-- @@ -227,7 +227,7 @@ Aligns text in the grid item vertically. --- -Specifies the number of columns in a grid element. +Sets two columns for a grid container. #### --answer-- @@ -241,41 +241,41 @@ How do you create four columns of equal width? #### --distractors-- -`grid-template-columns: repeat(4)` +`grid-template-columns: repeat(4);` --- -`grid-template-columns: 1, 1, 1, 1,` +`grid-template-columns: repeat(1, 4);` --- -`grid-column: repeat(4, 1fr)` +`grid-template-columns: repeat(1fr, 4);` #### --answer-- -`grid-template-columns: repeat(4, 1fr)` +`grid-template-columns: repeat(4, 1fr);` ### --question-- #### --text-- -Which property and value will make an element span the full width of the grid? +What does the `grid-template-areas` property do? #### --distractors-- -`grid-column: 1 / 1` +It is used to specify where the item begins on a line in the grid container. --- -`width: 100%` +It is used to create gaps between tracks in the container. --- -`grid-column: 100%` +It is used to repeat sections in the track listing. #### --answer-- -`grid-column: 1 / -1` +It is used to provide a name for the items you are going to position on the grid. ### --question-- @@ -303,111 +303,182 @@ Controls how auto-placed elements get inserted to the grid. #### --text-- -What does the secondary value `dense` do in the `grid-auto-flow` property? +Which of the following is the correct way to use the `grid-template-areas` property? #### --distractors-- -Narrows the grid container to fit to its content width. - ---- - -Groups grid items of the same size. - ---- - -Sorts grid items based on their size. +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: set( + "header header" + "sidebar main" + "footer footer" + ); + gap: 20px; +} +``` + +--- + +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: apply( + "header header" + "sidebar main" + "footer footer" + ); + gap: 20px; +} +``` + +--- + +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: set-areas; + gap: 20px; +} +``` #### --answer-- -Place smaller items to fill gaps in the grid. +```css +.container { + display: grid; + grid-template-columns: 200px 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header" + "sidebar main" + "footer footer"; + gap: 20px; +} +``` ### --question-- #### --text-- -Which one of these options is NOT a unit used for the `gap` property? +Which of the following is the correct way to work with the `grid-auto-flow` property? #### --distractors-- -`px` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: none; + grid-auto-columns: 1fr; +} +``` --- -`%` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: allow; + grid-auto-columns: 1fr; +} +``` --- -`em` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: set; + grid-auto-columns: 1fr; +} +``` #### --answer-- -`fr` +```css +.social-icons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; +} +``` ### --question-- #### --text-- -How do you make a grid item take up 2 rows using the `grid-row-end` property? +Which of the following is NOT a valid grid property? #### --distractors-- -`grid-row-end: 2 / 2` +`gap` --- -`grid-row-end: -2` +`grid-column` --- -`grid-row-end: 2` +`grid-template-columns` #### --answer-- -`grid-row-end: span 2` +`grid-set` ### --question-- #### --text-- -Which of these properties is NOT used to align items inside a grid element? +Which of these properties can be used to center items inside a grid element? #### --distractors-- -`align-items` +`allow-items` --- -`place-items` +`set-items` --- -`justify-items` +`center-items` #### --answer-- -`center-items` +`align-items` ### --question-- #### --text-- -Which of these properties can be used as a shorthand for the `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end` properties? +Which of the following is a correct value to use with the `grid-auto-columns` property? #### --distractors-- -`grid-section` +`grid-auto-columns: unset-grid;` --- -`grid-item` +`grid-auto-columns: revert-grid;` --- -`grid-row-column` +`grid-auto-columns: set-content(20%);` #### --answer-- -`grid-area` +`grid-auto-columns: 1fr;` ### --question-- @@ -435,21 +506,45 @@ Spaces between two adjacent grid lines. #### --text-- -How can you use dev tools to debug the CSS Grid layout? +Which of the following is the correct way to use the `minmax()` function? #### --distractors-- -To resize the elements to fill out the gaps in the grid. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(apply); +} +``` --- -To drag-and-drop elements inside the grid. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(); +} +``` --- -To automatically fix overlaying grid elements. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(set); +} +``` #### --answer-- -To preview the layout of grid lines. +```css +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: minmax(150px, auto); +} +``` diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md index c71dfca111..23dd5bfa22 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md @@ -7,7 +7,7 @@ dashedName: quiz-css-layout-and-effects # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What happens when there is too much content to fit in an element box? +What term is used in CSS to describe when an element's content exceeds the size of its container? #### --distractors-- @@ -39,23 +39,23 @@ Overflow #### --text-- -What is the default behavior of CSS when there is overflow? +What is the default behavior of CSS when content overflows an element? #### --distractors-- -Content is hidden +Hiding the content. --- -Content is clipped +Clipping the content. --- -Content is resized +Resizing the content. #### --answer-- -Content is visible +Keeping the content visible. ### --question-- @@ -65,63 +65,63 @@ Why does CSS typically avoid hiding content when there is overflow? #### --distractors-- -To enhance page design by hiding irrelevant content +To maintain the original layout and design. --- -To save memory and load pages faster +To prevent performance issues in the browser. --- -To automatically fix broken layout issues +To allow for better search engine optimization. #### --answer-- -To prevent data loss and make issues noticeable +To ensure all content is accessible to users. ### --question-- #### --text-- -How can you handle overflow in CSS to hide content or add scrollbars? +How can you handle vertical overflow in CSS by hiding content or displaying scrollbars? #### --distractors-- -Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars +Use `overflow-y: visible` to hide content and `overflow-y: auto` to always display scrollbars. --- -Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars +Use `overflow-y: collapse` to hide content and `overflow-y: expand` to display scrollbars. --- -Use `overflow: none` to hide content and `overflow: show` to display scrollbars +Use `overflow-y: none` to hide content and `overflow-y: show` to display scrollbars. #### --answer-- -Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars +Use `overflow-y: hidden` to hide content and `overflow-y: scroll` to always display scrollbars. ### --question-- #### --text-- -How can you specify different scrolling behaviors for the x-axis and y-axis in CSS? +How can you specify different horizontal and vertical scrolling behaviors in CSS? #### --distractors-- -By using `scroll-x` and `scroll-y` properties +By using the `scroll-x` and `scroll-y` properties. --- -By using `overflow-x` and `overflow-y` separately in every case +By specifying the same value for `overflow-x` and `overflow-y`. --- -By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x` +By specifying two values for the `overflow` property, where the first value applies to `overflow-y` and the second value to `overflow-x`. #### --answer-- -By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y` +By specifying two values for the `overflow` property, where the first value applies to `overflow-x` and the second value to `overflow-y`. ### --question-- @@ -131,107 +131,107 @@ What does the `transform` CSS property allow you to do? #### --distractors-- -Change the color and font style of an element +Change the color and font style of an element. --- -Adjust the margin and padding of an element +Adjust the margin and padding of an element. --- -Modify the visibility and display of an element +Modify the visibility and display of an element. #### --answer-- -Rotate, scale, skew, or translate an element +Rotate, scale, skew, and translate an element. ### --question-- #### --text-- -What does the `transform-box: fill-box` property do in an animation that rotates an element? +How does the `transform: translate(15px, 200px)` property modify an element? #### --distractors-- -It resizes the element to fit the canvas during the transformation +It moves the element 15 pixels to the left and 200 pixels down from its original position. --- -It changes the background of the element during transformation +It rotates the element 15 degrees in a clockwise direction. --- -It sets the transform origin to the top-left corner of the element +It moves the element 15 pixels to the right and 200 pixels up from its original position. #### --answer-- -It sets the transform origin to the center of the element's bounding box, allowing it to spin in place +It moves the element 15 pixels to the right and 200 pixels down from its original position. ### --question-- #### --text-- -What is the purpose of the `transform-origin` property in CSS? +What is the purpose of the CSS properties `overflow-x` and `overflow-y`? #### --distractors-- -It controls the animation speed of transformed elements +They adjust the padding and margin of an element. --- -It defines the display type of transformed elements +They set the background color and font style of an element. --- -It sets the background of transformed elements +They define the visibility and display properties of an element. #### --answer-- -It specifies the point around which a transformation is applied to an element +They control the horizontal and vertical overflow of an element's content. ### --question-- #### --text-- -How does margin affect the size of an element in CSS? +What is the purpose of the `margin` property in CSS? #### --distractors-- -Margin increases the actual size of the element's box +It defines the space between the content and the border of an element. --- -Margin has no effect on the element's size or position +It defines the space between the border and the padding of an element. --- -Margin decreases the total area the element occupies on the page +It defines the width and height of an element. #### --answer-- -Margin affects the total area an element occupies but is not part of the actual size of the box +It defines the space around an element, outside of its border. ### --question-- #### --text-- -What does the content area of an element in CSS represent? +What does the content area of an element represent in CSS? #### --distractors-- -It defines the margins and padding around the element +It defines the margins and padding around the element. --- -It specifies the border thickness of the element +It defines the thickness of the element's border. --- -It controls the visibility of the element on the page +It controls the visibility of the element on the page. #### --answer-- -It contains the "real" content of the element, such as text, images, or videos +It contains the actual content of the element, such as text, images, and videos. ### --question-- @@ -241,19 +241,19 @@ What is the difference between `content-box` and `border-box` in CSS? #### --distractors-- -`content-box` includes padding and border, while `border-box` includes only content dimensions +`content-box` includes padding and border, while `border-box` includes only content dimensions. --- -Both `content-box` and `border-box` include only the border dimensions +Both `content-box` and `border-box` include only the border dimensions. --- -`content-box` is used for 2D elements, while `border-box` is used for 3D elements +`content-box` is used for 2D elements, while `border-box` is used for 3D elements. #### --answer-- -`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions +`content-box` includes only content dimensions, while `border-box` includes content, padding, and border in the dimensions. ### --question-- @@ -263,193 +263,193 @@ What is the purpose of CSS resets? #### --distractors-- -To apply default styles to all elements for faster loading +To apply default styles to all elements for faster loading. --- -To minimize the size of CSS files by removing unused styles +To minimize the size of CSS files by removing unused styles. --- -To optimize images and fonts for better performance +To optimize images and fonts for better performance. #### --answer-- -To remove default browser styling and create a consistent baseline for styling across different browsers +To remove default browser styling and ensure consistent styling across browsers. ### --question-- #### --text-- -What are the common types of CSS resets? +Which of the following is a common example of a CSS reset? #### --distractors-- -Bootstrap Reset, Tailwind Reset, and Foundation Reset +Bootstrap.css --- -Simple Reset, Comprehensive Reset, and Adaptive Reset +Reset.css --- -Minimal Reset, Advanced Reset, and Legacy Reset +Restore.css #### --answer-- -Normalize.css, Eric Meyer's Reset, and HTML5 Reset +Normalize.css ### --question-- #### --text-- -What does the `scale3d()` property value do in CSS? +Which CSS property is used to apply changes such as rotation, scaling, and translation to elements? #### --distractors-- -It rotates an element in 3D space +`box-shadow` --- -It skews an element on the x, y, and z axes +`opacity` --- -It translates an element in 3D space +`z-index` #### --answer-- -It scales an element along the x, y, and z axes +`transform` ### --question-- #### --text-- -How is the total width of an element calculated in CSS? +How is the total width of an element calculated in CSS when using the `border-box` value for the `box-sizing` property? #### --distractors-- -Total width = width + margin + padding + border +Total Width = Content Width + Border + Margin --- -Total width = width + margin + padding +Total Width = Content Width + Padding + Border + Margin --- -Total width = width + margin + border +Total Width = Content Width #### --answer-- -Total width = width + left padding + right padding + left border + right border +Total Width = Content Width + Padding + Border ### --question-- #### --text-- -What does the filter property in CSS do? +What is the purpose of the `filter` property in CSS? #### --distractors-- -It changes the layout of the element on the page +Changing the scale and rotation of an element. --- -It changes the background color and texture of an element +Changing the background color and texture of an element. --- -It alters the size and position of an element +Altering the size and position of an element. #### --answer-- -It applies visual effects like blur and saturation to an element +Modifying the visual appearance of an element by using various graphical effects. ### --question-- #### --text-- -How is the `filter` property specified in CSS? +What does the CSS property `filter: grayscale(50%);` do to an element? #### --distractors-- -As only a single function, where percentage values must be used +It increases the brightness of the element by 50%. --- -As `block` or `inline`, with values expressed in pixels +It decreases the contrast of the element by 50%. --- -As `none` or multiple functions, but only percentage values are accepted +It applies a sepia effect to the element. #### --answer-- -As `none` or one or more functions, where percentage values can also be expressed as decimals +It applies a 50% grayscale effect to the element. ### --question-- #### --text-- -What does the `contrast()` function in CSS do? +What is the purpose of the `contrast()` function in CSS? #### --distractors-- -Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white +It adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white. --- -Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it +It adjusts the contrast of the image, where `100%` makes it grey, `0%` has no effect, and values over `100%` increase contrast. --- -Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque +It adjusts the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque. #### --answer-- -Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast +It adjusts the contrast of the image, where `0%` makes it grey, `100%` has no effect, and values over `100%` increase contrast. ### --question-- #### --text-- -What does the `hue-rotate()` function in CSS do? +What is the purpose of the `hue-rotate()` function in CSS? #### --distractors-- -It changes the brightness of the input image based on degrees +It changes the brightness of an image. --- -It rotates an element's size and position in the document +It rotates an image clockwise by a certain number of degrees. --- -It adjusts the saturation and contrast of the input image +It adjusts the saturation and contrast of an image. #### --answer-- -It applies a hue rotation, where the `` value defines the degrees around the hue color circle +It applies a color shift, where the `angle` value defines the number of degrees to rotate around the color circle. ### --question-- #### --text-- -What happens when two animated filters have different function list lengths in CSS? +What is margin collapsing in CSS? #### --distractors-- -The shorter list's filters override the longer list's filters +When the margin of an element is set to a negative number and this causes issues in the layout. --- -The filters are discarded and no animation is applied +When the margin of an element is decreased by the padding and this changes the element's dimensions. --- -Only the first filter function in each list is animated +When the margin of an element is ignored by the browser, so it's not visible. #### --answer-- -The longer list's missing equivalent filter functions are added to the shorter list using their initial values +When the vertical margins of adjacent elements overlap, so they are combined into a single margin. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md index 7f69369baf..50381c0af9 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-libraries-and-frameworks/66f1aeb60b11aec5abe83c2e.md @@ -7,7 +7,7 @@ dashedName: quiz-css-libraries-and-frameworks # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,19 +21,19 @@ What is a CSS framework? #### --distractors-- -A set of CSS rules +A set of CSS rules. --- -A JavaScript library +A JavaScript library. --- -A coding language +A coding language. #### --answer-- -A library for CSS styles +A library for CSS styles. ### --question-- @@ -65,19 +65,19 @@ What is a key advantage of using a CSS framework? #### --distractors-- -Provides predefined templates +Provides predefined templates. --- -Reduces loading speed +Reduces loading speed. --- -Increases code complexity +Increases code complexity. #### --answer-- -Simplifies design consistency +Simplifies design consistency. ### --question-- @@ -87,19 +87,19 @@ What is a disadvantage of CSS frameworks? #### --distractors-- -Too few components +Too few components. --- -No customization options +No customization options. --- -Improved browser support +Improved browser support. #### --answer-- -Can bloat CSS files +Can bloat CSS files. ### --question-- @@ -131,19 +131,19 @@ What is the primary purpose of the `.container` class in Bootstrap? #### --distractors-- -To add padding to elements +To add padding to elements. --- -To apply a background color +To apply a background color. --- -To center text +To center text. #### --answer-- -To create a fixed-width responsive container +To create a fixed-width responsive container. ### --question-- @@ -153,19 +153,19 @@ What does SCSS stand for? #### --distractors-- -Super Cascading Style Sheets +Super Cascading Style Sheets. --- -Structured CSS +Structured CSS. --- -Simple CSS +Simple CSS. #### --answer-- -Sassy CSS +Sassy CSS. ### --question-- @@ -175,19 +175,19 @@ What benefit do preprocessors like Sass provide? #### --distractors-- -Adds JavaScript functionality +Adds JavaScript functionality. --- -Directly edits HTML +Directly edits HTML. --- -Eliminates CSS +Eliminates CSS. #### --answer-- -Nesting of styles +Nesting of styles. ### --question-- @@ -201,11 +201,11 @@ Comments --- -CSS variables +CSS variables. --- -Inline CSS +Inline CSS. #### --answer-- @@ -219,19 +219,19 @@ What is Bootstrap known for? #### --distractors-- -Static design +Static design. --- -Focus on accessibility +Focus on accessibility. --- -No JavaScript support +No JavaScript support. #### --answer-- -Mobile-first approach +Mobile-first approach. ### --question-- @@ -241,19 +241,19 @@ What does Tailwind CSS focus on? #### --distractors-- -Component-based styling +Component-based styling. --- -Image optimization +Image optimization. --- -Mobile responsiveness +Mobile responsiveness. #### --answer-- -Utility-first design +Utility-first design. ### --question-- @@ -263,19 +263,19 @@ What does a CSS framework typically include? #### --distractors-- -JavaScript functions +JavaScript functions. --- -HTML templates +HTML templates. --- -Database management +Database management. #### --answer-- -Predefined styles and components +Predefined styles and components. ### --question-- @@ -307,15 +307,15 @@ What is a main feature of preprocessors? #### --distractors-- -Linear CSS +Linear CSS. --- -Uncompiled styles +Uncompiled styles. --- -Built-in animations +Built-in animations. #### --answer-- @@ -329,19 +329,19 @@ Which of the following is a drawback of Tailwind CSS? #### --distractors-- -Limited utility classes +Limited utility classes. --- -Lack of documentation +Lack of documentation. --- -Hard to learn +Hard to learn. #### --answer-- -Verbose class names +Verbose class names. ### --question-- @@ -395,19 +395,19 @@ What does Bootstrap's grid system help with? #### --distractors-- -CSS animations +CSS animations. --- -JavaScript functions +JavaScript functions. --- -Image loading +Image loading. #### --answer-- -Responsive layout +Responsive layout. ### --question-- @@ -439,17 +439,17 @@ Why might developers choose Materialize? #### --distractors-- -Strong community support +Strong community support. --- -Easy integration with HTML +Easy integration with HTML. --- -Comprehensive animation support +Comprehensive animation support. #### --answer-- -Focus on material design principles +Focus on material design principles. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md index b9a567c10a..9dc95b0d13 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md @@ -7,7 +7,7 @@ dashedName: quiz-css-positioning # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,438 +17,594 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is the main purpose of the `float` property in CSS? +Which of the following is NOT a valid value for the `position` property? #### --distractors-- -To create rounded corners. +`fixed` --- -To control opacity. +`absolute` --- -To center vertically. +`relative` #### --answer-- -To align elements to either the left or the right of their container. +`above` ### --question-- #### --text-- -Which CSS property is used to set the stack order of an element? +What is the main purpose of the `float` property in CSS? #### --distractors-- -`position` +Floats are used to remove an element from its normal flow on the page and automatically position it in the upper right hand side of the webpage. --- -`bg-green` +Floats are used to remove an element from its normal flow on the page and position it to the top of its container. --- -`float` +Floats are used to remove an element from its normal flow on the page and automatically position it to the bottom right hand side of webpage. #### --answer-- -`z-index` +Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. ### --question-- #### --text-- -What happens when you apply `position: relative` to an element in CSS? +Which of the following is an example making a box element float to the left? #### --distractors-- -It removes the element from document flow. +```css +.box { + left: float; + margin-right: 15px; + width: 50px; + height: 50px; + background-color: black; +} +``` --- -It only moves the element relative to the viewport. +```css +.box { + position: float-left; + margin-right: 15px; + width: 50px; + height: 50px; + background-color: black; +} +``` --- -It positions the element in a fixed position relative to the viewport. +```css +.box { + float: left-side; + margin-right: 15px; + width: 50px; + height: 50px; + background-color: black; +} +``` #### --answer-- -It moves the element relative to its default position in the document. +```css +.box { + float: left; + margin-right: 15px; + width: 50px; + height: 50px; + background-color: black; +} +``` ### --question-- #### --text-- -Which CSS property would you use to fix an element at a certain position on the page so that it does not move when scrolling occurs? +What is the role of the `clear` property? #### --distractors-- -`position: absolute` +It is used to determine if an element needs to be moved to the bottom of the page. --- -`position: relative` +It is used to determine if an element needs to be completely cleared from the page. --- -`display: block` +It is used to determine if an element needs to be fixed to the top of the page. #### --answer-- -`position: fixed` +It is used to determine if an element needs to be moved below the floated content. ### --question-- #### --text-- -If an element has `position: absolute`, what element is it positioned relatively to? +Which CSS property is used to control the vertical stacking order of positioned elements that overlap on the page? #### --distractors-- -The closest ancestor with `position: fixed`. +`position` --- -The closest ancestor with `position: absolute`. +`bg-green` --- -The `` element. +`float` #### --answer-- -The closest positioned ancestor with `position` set to `relative`, `absolute`, or `fixed`. +`z-index` ### --question-- #### --text-- -Which positioning method allows an element to stick to a defined position only when you scroll past a certain point? +Which of the following is the correct syntax for relative positioning? #### --distractors-- -`position: float` +```css +.relative { + position: relative-position; + top: 30px; + left: 30px; +} +``` --- -`position: fixed` +```css +.relative { + relative-position: relative; + top: 30px; + left: 30px; +} +``` --- -`position: absolute` +```css +.relative { + relative: position; + top: 30px; + left: 30px; +} +``` #### --answer-- -`position: sticky` - -### --question-- - -#### --text-- - -Given the following code: - ```css -#box1 { +.relative { position: relative; - z-index: 1; + top: 30px; + left: 30px; } +``` -#box2 { - position: relative; - z-index: 2; -} +### --question-- -#box3 { - position: relative; - z-index: -1; -} -``` +#### --text-- -How will `#box3` be positioned on the page? +Which CSS property would you use to fix an element at a certain position on the page so that it does not move when scrolling occurs? #### --distractors-- -It will be stacked above all the other elements on the page. +`position: no-scroll;` --- -It will disappear from view. +`position: relative;` --- -It will stay at the bottom corner of the page. +`display: block;` #### --answer-- -It will be stacked below all the other elements on the page. +`position: fixed;` ### --question-- #### --text-- -How does a floated element affect the layout of surrounding elements? +What does absolute positioning do to an element? #### --distractors-- -Other elements are placed in relation to the floated element. +Absolute positioning is used to determine if an element needs to be moved below the floated content. --- -The surrounding elements ignore the floated element and overlap it. +Absolute positioning is used to position the element within the normal document flow. --- -It will shift surrounding elements behind the floated element. +Absolute positioning is used to control the vertical stacking order of positioned elements that overlap on the page. #### --answer-- -Block elements surrounding it flow around the floated element. +Absolute positioning allows you to take an element out of the normal document flow, making it behave independently from other elements. ### --question-- #### --text-- -What does an element with `position: sticky` require for it to work? +Which of the following is NOT a valid property that you can use for absolute positioning? #### --distractors-- -A `position: relative` parent element. +`right` --- -A `z-index` value greater than 1. +`bottom` --- -A `z-index` of 0 or greater. +`top` #### --answer-- -A declared `top`, `left`, `right`, or `bottom` property. +`side` ### --question-- #### --text-- -What happens when setting the `overflow` property of a parent to `auto` and one of its children has the property `position: sticky`? +What is the key difference between relative and absolute positioning? #### --distractors-- -The child element's sticky behavior is not affected by the `overflow` property of the parent. +Absolute positioning sets the element in a sticky position while relative positioning takes an element out of the normal document flow. --- -The sticky element will maintain its behavior regardless of scrolling. +Relative positioning sets the element in a fixed position while absolute positioning takes an element out of the normal document flow. --- -The sticky element will act as if it has `position: fixed` within the parent. +Absolute positioning positions the element within the normal document flow while relative positioning takes an element out of the normal document flow. #### --answer-- -The child will lose its sticky behavior when the parent scrolls. +Relative positioning positions the element within the normal document flow while absolute positioning takes an element out of the normal document flow. ### --question-- #### --text-- -Which of the following properties is used to offset a positioned element from its normal position? +Which of the following is an example of positioning a box in the upper left hand corner of the page? #### --distractors-- -`float` +```css +.box { + position: absolute; + bottom: 0; + left: 0; + background-color: coral; + width: 50px; + height: 50px; +} +``` --- -`padding-right` +```css +.box { + position: absolute; + top: 0; + right: 0; + background-color: coral; + width: 50px; + height: 50px; +} +``` --- -`margin-right` +```css +.box { + position: absolute; + bottom: 0; + right: 0; + background-color: coral; + width: 50px; + height: 50px; +} +``` #### --answer-- -`right` +```css +.box { + position: absolute; + top: 0; + left: 0; + background-color: coral; + width: 50px; + height: 50px; +} +``` ### --question-- #### --text-- -How does a floated element impact the height of its containing block when the containing block does not have an explicit height defined? +Which positioning method allows an element to stick to a defined position only when you scroll past a certain point? #### --distractors-- -The height of the containing block is automatically expanded to fit the floated element. +Float positioning. --- -The height will automatically adapt to fit all the floated elements. +Fixed positioning. --- -The containing block will automatically apply `clear: both` to fit the floated element. +Absolute positioning. #### --answer-- -The containing block will collapse, completely ignoring its floated element height. +Sticky positioning. ### --question-- #### --text-- -Which of the following CSS techniques is an accepted method for preventing a parent container from shrinking in size when it contains only floated elements? +Which of the following is a correct example of using sticky positioning? #### --distractors-- -Set `float: none` to the container. +```css +.box { + sticky: position; + top: 30px; + right: 30px; + width: 50px; + height: 50px; + background-color: red; +} +``` --- -Add `margin: auto` to the parent container. +```css +.box { + position: sticky-fixed; + top: 30px; + right: 30px; + width: 50px; + height: 50px; + background-color: red; +} +``` --- -Use the `position: relative` on the parent container. +```css +.box { + position: sticky-top; + right: 30px; + width: 50px; + height: 50px; + background-color: red; +} +``` #### --answer-- -Adding the property `overflow: auto` or `overflow: hidden` to the parent container. +```css +.box { + position: sticky; + top: 30px; + right: 30px; + width: 50px; + height: 50px; + background-color: red; +} +``` ### --question-- #### --text-- -When a floating element is followed by non-floating inline elements, how will their layout be affected? +What is the difference between sticky and fixed positioning? #### --distractors-- -The inline elements will be positioned below the floated element. +Sticky elements can only be used in table layouts while fixed elements can be used in any type of CSS layout. --- -Inline elements will always be on top of the floated element. +Sticky elements will always remain in the same position while fixed elements will stick to a certain point then behave like relative elements. --- -The inline elements will overlap the floated element. +Fixed elements will be positioned relative to its normal position while sticky elements will only stick to a certain point then behave like relative elements. #### --answer-- -Inline elements will wrap around the floated element if there is enough space. +Fixed elements will remain in the same position on the screen while sticky elements will only stick to a certain point then behave like relative elements. ### --question-- #### --text-- -What happens when `clear: both` is applied to an element following two floated elements - one left and one right - in a container? +What problem did the `clearfix` hack solve when working with floats? #### --distractors-- -The element will be positioned to the left of the floated elements. +The `clearfix` hack helped solve the issue of floated elements being removed from the normal document flow and being placed in a fixed position on the page. --- -The element will align between the two floated elements. +The `clearfix` hack helped solve the issue of floated elements not being responsive in mobile and tablet layouts. --- -The element will wrap around the floated elements depending on space. +The `clearfix` hack helped solve the issue of floated elements disappearing from the page. #### --answer-- -The element will be underneath both floated elements - the float breaks. +The `clearfix` hack helped solve the issue of overlaps and collapsing in the layouts when multiple floated elements were stacked next to each other. ### --question-- #### --text-- -When does an element with `z-index: auto` create a new stacking context? +Which of the following is a correct example for using the `clearfix` hack? #### --distractors-- -When combined with `position: absolute` or `position: relative`. +```css +.clearfix::before { + position: fixed; + top: 0; + width: 100%; + clear: both; +} +``` --- -When its parent element has `z-index: auto` and `position: fixed`. +```css +.clearfix::after { + position: relative; + top: 30px; + left: 30px; + clear: all; +} +``` --- -When it is combined with `float: left`, if two sibling elements are of the same `z-index` and absolutely positioned. +```css +.clearfix::before { + top: 30px; + clear: none; +} +``` #### --answer-- -In combination with `position: fixed` or `position: sticky`. +```css +.clearfix::after { + content: ""; + display: block; + clear: both; +} +``` ### --question-- #### --text-- -If two sibling elements have the same `z-index` and are both positioned absolutely using `position: absolute`, what determines which one is on top? +What is static positioning? #### --distractors-- -It rearranges the sibling elements in relation to its new position. +This is used to remove an element from its normal flow on the page and automatically position it in the upper right hand side of the webpage. --- -Adding `z-index: auto` to the parent container. +This allows you to take an element out of the normal document flow, making it behave independently from other elements. --- -Using `position: relative` on the parent container. +This allows an element to stick to a defined position only when you scroll past a certain point. #### --answer-- -The document source order (HTML position). +This is the normal flow for the document. Elements are positioned from top to bottom and left to right one after another. ### --question-- #### --text-- -In what way will the property `position: relative` exert an effect on sibling elements in regards to document flow? +Which of the following is an example of setting the navbar to the top of the page using fixed positioning? #### --distractors-- -It removes the element from the normal document flow, which affects the positions of siblings. +```css +.navbar { + fixed: top; + top: 0; + width: 100%; +} +``` --- -The relative element will move by the parent's top and left properties. +```css +.navbar { + upper: fixed; + width: 100%; +} +``` --- -It creates a new stacking context which lifts the element in relation to any siblings. +```css +.navbar { + position: fixed-top; + top: 0; + width: 100%; +} +``` #### --answer-- -It allows the element to shift without affecting the document flow of sibling elements. +```css +.navbar { + position: fixed; + top: 0; + width: 100%; +} +``` ### --question-- #### --text-- -What happens when a `position: relative` element is nested inside of a `position: absolute` parent, with `top` and `left` values set? +Which of the following is a valid value to use for the `z-index` property? #### --distractors-- -It moves relative to the parent element's original position. +`12.0` --- -It moves with respect to the absolute coordinates of the containing parent element. +`none` --- -It will never create a new stacking context regardless of the `z-index` value. +`up` #### --answer-- -It ignores the positioning of the parent and moves relative to its normal position. +`1` ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index cc79e27e7e..4aa6d56b19 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -7,7 +7,7 @@ dashedName: quiz-css-pseudo-classes # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -33,13 +33,13 @@ They are selector used to add movement effects to an element during interactions #### --answer-- -They are keywords added to a selector that change how an element looks or behaves when it's in a specific state. +They are keywords added to a selector that style an element based on its state. ### --question-- #### --text-- -Which pseudo-class applies when you hover over an element? +Which pseudo-class applies when a pointing device is being positioned over an element? #### --distractors-- @@ -83,7 +83,7 @@ Which pseudo-element allows you to style the first letter of a paragraph? #### --text-- -Which pseudo-class changes the style of an element when you click on it? +Which pseudo-class changes the style of an element while it is being clicked? #### --distractors-- @@ -105,7 +105,7 @@ Which pseudo-class changes the style of an element when you click on it? #### --text-- -Which pseudo-class is used to select and style an element when it's focused? +Which pseudo-class is used to style an element when it is ready to receive user input, such as a text field being clicked or tabbed into? #### --distractors-- @@ -127,29 +127,45 @@ Which pseudo-class is used to select and style an element when it's focused? #### --text-- -What does the `:hover` pseudo-class do? +Which of the following CSS rules correctly adds the text `Note:` in front of each paragraph element with a class of `note`? #### --distractors-- -It styles your element when you click on it. +```css +.note::before { + content: "Note:"; +} +``` --- -It makes your element float around the screen. +```css +p.note::after { + content: "Note:"; +} +``` --- -It hides elements on click. +```css +p::before { + content: "Note:"; +} +``` #### --answer-- -It styles an element when you hover over it. +```css +p.note::before { + content: "Note:"; +} +``` ### --question-- #### --text-- -Which pseudo-class is used for an input field that is checked? +Which pseudo-class applies to an input field when it is selected or toggled on? #### --distractors-- @@ -209,7 +225,7 @@ li:last-child { #### --text-- -Which pseudo-class applies when an input field is optional? +Which pseudo-class targets input fields that are not required to fill out? #### --distractors-- @@ -253,7 +269,7 @@ It styles elements that are not available for user interaction. #### --text-- -Which pseudo-class is triggered when a form input is valid? +Which pseudo-class applies when a form input meets its validation criteria? #### --distractors-- @@ -283,7 +299,7 @@ Which one of these is not a location pseudo-class? --- -`:scope` +`:any-link` --- @@ -335,23 +351,41 @@ li:nth-child(3) { #### --text-- -Which pseudo-class is used for the current active link? +Which elements will have a `color` of `blue` with the following CSS? + +```css +p:is(.blue, .highlight) { + color: blue; +} +``` #### --distractors-- -`:focus` +```html +

Paragraph 1

+

Paragraph 2

+``` --- -`:hover` +```html +
Paragraph 1
+
Paragraph 2
+``` --- -`:visited` +```html +

Paragraph 1

+Paragraph 2 +``` #### --answer-- -`:active` +```html +

Paragraph 1

+

Paragraph 2

+``` ### --question-- @@ -379,23 +413,29 @@ It selects elements that do not match a given selector. #### --text-- -What does the `:nth-child(4)` pseudo-class do? +What does the following CSS rule do? + +```css +p:first-of-type { + font-style: italic; +} +``` #### --distractors-- -It selects the last child. +It selects the first `p` element in the document. --- -It selects all children. +It selects all `p` elements in the document. --- -It styles odd children. +It selects the first child of every `p` element. #### --answer-- -It selects the fourth child. +It selects the first `p` element within a parent container. ### --question-- @@ -405,19 +445,19 @@ What does the `:last-of-type` pseudo class do? #### --distractors-- -It selects the first child element. +It selects the first child element of a specific type within its parent. --- -It selects the middle element. +It selects the middle child element of a specific type within its parent. --- -It selects every element in a group. +It selects every child element of a specific type within its parent. #### --answer-- -It selects the last sibling element. +It selects the last child element of a specific type within its parent. ### --question-- @@ -453,7 +493,7 @@ Which one of these is a functional pseudo-class? --- -`:last-of-type` +`:match()` --- @@ -483,5 +523,4 @@ Which one of these is not a functional pseudo-class? #### --answer-- -`::before` - +`:contains()` diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md index ee6fcb065a..58bd6e8f78 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md @@ -7,7 +7,7 @@ dashedName: quiz-css-relative-and-absolute-units # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,23 +17,23 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -If the body text is `16px`, how much is `1em` in most child elements? +What is an absolute unit? #### --distractors-- -`18px` +Units that adjust dynamically based on screen size. --- -`12px` +Units that depend on the font size of the parent element. --- -It depends on the parent's font size +Units measured in percentages of the viewport. #### --answer-- -`16px` +Fixed length units that are not relative to anything else. ### --question-- @@ -43,41 +43,41 @@ What does `100vw` cover in terms of screen width? #### --distractors-- -100% of the screen width +`100%` of the screen width. --- -100% of the viewport height +`100%` of the viewport height. --- -100% of the parent's width +`100%` of the parent's width. #### --answer-- -100% of the viewport width +`100%` of the viewport width. ### --question-- #### --text-- -If a container is `1000px` wide, how wide is 5% of it? +Which of the following is a relative unit? #### --distractors-- -`100px` +`pt` --- -`500px` +`cm` --- -`5px` +`mm` #### --answer-- -`50px` +`em` ### --question-- @@ -109,41 +109,41 @@ What can the `calc()` function do in CSS? #### --distractors-- -Modify colors dynamically +Modify colors dynamically. --- -Set a fixed width +Set a fixed width. --- -Only work with percentages +Only work with percentages. #### --answer-- -Add, subtract, multiply, or divide different units +Add, subtract, multiply, or divide different units. ### --question-- #### --text-- -On a typical screen with 96 DPI resolution, how many points (`pt`) are in 1 pixel (`px`)? +Which unit is the most commonly used absolute unit in CSS? #### --distractors-- -`1.33pt` +`inch` --- -`1pt` +`rem` --- -`2pt` +`%` #### --answer-- -`0.75pt` +`px` ### --question-- @@ -215,23 +215,23 @@ It adds `10px` to `20%` of the parent's width. #### --text-- -If the parent element's text size is `20px`, how big is `1.5em`? +Which unit is relative to the font size of the root element? #### --distractors-- -`25px` +`px` --- -`15px` +`pt` --- -`20px` +`%` #### --answer-- -`30px` +`rem` ### --question-- @@ -259,45 +259,45 @@ With a root font size of `16px`, how big is `10rem`? #### --text-- -Why might you use `pt` instead of `px` in design? +Why might you use `point` instead of `pixels` in design? #### --distractors-- -Points are scalable +Points are scalable. --- -Points are better for responsive layouts +Points are better for responsive layouts. --- -Points are easier to manage on screens +Points are easier to manage on screens. #### --answer-- -Points are for print design +Points are for print design. ### --question-- #### --text-- -How does `calc(10vh + 50px)` work for height? +Why are `rem` units preferred over `pixels` in typography? #### --distractors-- -It adds `50px` to 10% of the viewport width. +Because they provide fixed sizing regardless of screen resolution. --- -It adds `10px` to 50% of the parent's height. +Because they ensure compatibility with older browsers. --- -It adds `10vh` to 50% of the document width. +Because they are easier to implement in responsive designs. #### --answer-- -It adds `50px` to 10% of the viewport height. +Because they scale proportionally with the user’s browser settings. ### --question-- @@ -307,11 +307,11 @@ How much screen space does `80vw` take? #### --distractors-- -80% of the parent's width +`80%` of the parent's width. --- -100% of the viewport height +`100%` of the viewport height. --- @@ -319,51 +319,51 @@ How much screen space does `80vw` take? #### --answer-- -80% of the viewport width +`80%` of the viewport width. ### --question-- #### --text-- -If the root font size is `18px`, how big is `2rem`? +Which units should you use if you want to make an element occupy a certain width or height by the percentage of the screen? #### --distractors-- -`24px` +`pt` and `px` --- -`18px` +`rem` and `em` --- -`20px` +`pt` and `pc` #### --answer-- -`36px` +`vw` and `vh` ### --question-- #### --text-- -What does `calc(50% + 20px)` do for width? +What does `vw` stand for? #### --distractors-- -It adds `20px` to 50% of the screen width. +Vertical Width. --- -It adds `50px` to the screen width. +Virtual Width. --- -It adds `50%` of the height to `20px`. +Variable Width. #### --answer-- -It adds `50%` of the parent's width to `20px`. +Viewport Width. ### --question-- @@ -373,41 +373,41 @@ What's the key difference between `rem` and `em` in CSS? #### --distractors-- -`rem` is only used for fonts. +`em` is relative to the root element, while rem is relative to the parent element. --- -`rem` is for width, `em` is for fonts. +`rem` is relative to desktop width, while `em` is relative to mobile width. --- -`rem` is always smaller than `em`. +`rem` is relative to the user-defined width, while `em` is relative to the browser width. #### --answer-- -`rem` is based on the root font size, `em` is based on the parent's font size. +`em` is relative to the font size of the parent element, while rem is relative to the root element. ### --question-- #### --text-- -How does `calc(100px + 10%)` work for width? +What is a `vh` unit? #### --distractors-- -It adds `10%` of the screen width to `100px`. +A unit based on the width of the viewport. --- -It adds `10%` of the height to `100px`. +A unit based on the height of the element. --- -It adds `100px` to `10%` of the document. +A unit that adjusts based on font size. #### --answer-- -It adds `10%` of the parent's width to `100px`. +A unit equal to 1% of the viewport height. ### --question-- @@ -435,21 +435,21 @@ It allows the browser to determine the width based on the content and container. #### --text-- -What happens when you use `calc(30vh - 10px)` for height? +What’s a key advantage of the `calc()` function? #### --distractors-- -It subtracts `10px` from the parent's height. +It automatically minifies your CSS files for better performance. --- -It subtracts `30px` from the screen height. +It enables the use of variables within CSS without any preprocessors. --- -It adds `30%` of the parent's height minus `10px`. +It allows embedding JavaScript expressions directly within CSS rules. #### --answer-- -It subtracts `10px` from `30%` of the viewport height. +It lets you determine the value of a CSS property dynamically based on different aspects of the application or viewport. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md index acf5343d58..451d3f6a9e 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-typography/66ed9010f45ce3ece4053eb8.md @@ -7,7 +7,7 @@ dashedName: quiz-css-typography # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -43,19 +43,19 @@ What is the purpose of the offset values in the `text-shadow` property, and how #### --distractors-- -They adjust the text's size and weight +They adjust the text's size and weight. --- -They change the shadow color +They change the shadow color. --- -They remove text from the shadow's path +They remove text from the shadow's path. #### --answer-- -They control the horizontal and vertical position of the shadow relative to the text +They control the horizontal and vertical position of the shadow relative to the text. ### --question-- @@ -65,19 +65,19 @@ What does "kerning" mean in typography? #### --distractors-- -The space between lines of text +The space between lines of text. --- -The overall spacing of a text block +The overall spacing of a text block. --- -The size of the font +The size of the font. #### --answer-- -The space between individual letters +The space between individual letters. ### --question-- @@ -87,19 +87,19 @@ What's the most common way to add Google Fonts to a website? #### --distractors-- -Use the `` tag in the HTML file +Use the `` tag in the HTML file. --- -Use the `@import` rule in JavaScript +Use the `@import` rule in JavaScript. --- -Embed the font within an image +Embed the font within an image. #### --answer-- -Use the `` tag in the HTML file +Use the `` tag in the HTML file. ### --question-- @@ -131,7 +131,7 @@ Which one of the following is a web-safe font? #### --distractors-- -Comic Sans MS +Comic Sans MS. --- @@ -143,7 +143,7 @@ Impact #### --answer-- -Times New Roman +Times New Roman. ### --question-- @@ -153,19 +153,19 @@ What does the `@font-face` rule do in CSS? #### --distractors-- -It defines the font size +It defines the font size. --- -It creates a fallback font for web pages +It creates a fallback font for web pages. --- -It adjusts the line height for text +It adjusts the line height for text. #### --answer-- -It allows you to use custom fonts by importing them +It allows you to use custom fonts by importing them. ### --question-- @@ -179,15 +179,15 @@ Typekit --- -Adobe Fonts +Adobe Fonts. --- -Font Universe +Font Universe. #### --answer-- -Google Fonts +Google Fonts. ### --question-- @@ -197,19 +197,19 @@ Why is it important to include multiple font options in the `font-family` proper #### --distractors-- -It reduces page load times +It reduces page load times. --- -It prevents browser compatibility issues +It prevents browser compatibility issues. --- -It gives the page more visual variety +It gives the page more visual variety. #### --answer-- -It ensures a consistent experience in case the custom font doesn't load +It ensures a consistent experience in case the custom font doesn't load. ### --question-- @@ -219,19 +219,19 @@ What is the purpose of the `text-shadow` property in CSS, and how does it enhanc #### --distractors-- -Changes the text color +Changes the text color. --- -Adds a background color to text +Adds a background color to text. --- -Makes text bold +Makes text bold. #### --answer-- -Adds a shadow effect to text, making it stand out or appear 3D +Adds a shadow effect to text, making it stand out or appear 3D. ### --question-- @@ -253,7 +253,7 @@ What CSS property is used to set the font family for an element, and how should #### --answer-- -`font-family`, with multiple fonts listed to ensure compatibility across devices +`font-family`, with multiple fonts listed to ensure compatibility across devices. ### --question-- @@ -263,19 +263,19 @@ Why is typographic hierarchy important in design? #### --distractors-- -It improves the readability of large blocks of text +It improves the readability of large blocks of text. --- -It ensures consistency across different devices +It ensures consistency across different devices. --- -It allows decorative fonts to be used effectively +It allows decorative fonts to be used effectively. #### --answer-- -It helps organize content and guide users through the information +It helps organize content and guide users through the information. ### --question-- @@ -329,19 +329,19 @@ In the `text-shadow` property, how do the horizontal and vertical offsets affect #### --distractors-- -They control the shadow's color +They control the shadow's color. --- -They define the shadow's blur radius +They define the shadow's blur radius. --- -They adjust the opacity of the shadow +They adjust the opacity of the shadow. #### --answer-- -They determine the position of the shadow relative to the text on the x and y axes +They determine the position of the shadow relative to the text on the x and y axes. ### --question-- @@ -351,19 +351,19 @@ For body text, why is a sans-serif font generally considered easier to read on s #### --distractors-- -Serif fonts are more decorative +Serif fonts are more decorative. --- -Sans-serif fonts are thicker +Sans-serif fonts are thicker. --- -Sans-serif fonts use fewer colors +Sans-serif fonts use fewer colors. #### --answer-- -Sans-serif fonts are typically simpler and more legible at smaller sizes on screens +Sans-serif fonts are typically simpler and more legible at smaller sizes on screens. ### --question-- @@ -373,19 +373,19 @@ How do you list multiple font families in the `font-family` property? #### --distractors-- -Separate them with spaces, and list the preferred font first +Separate them with spaces, and list the preferred font first. --- -Enclose them in parentheses +Enclose them in parentheses. --- -Enclose them in curly braces +Enclose them in curly braces. #### --answer-- -Separate them with commas, and list the preferred font first +Separate them with commas, and list the preferred font first. ### --question-- @@ -417,19 +417,19 @@ Which of the following is a good practice when using fonts in web design? #### --distractors-- -Use only one font family throughout the website +Use only one font family throughout the website. --- -Always use decorative fonts for both headings and body text +Always use decorative fonts for both headings and body text. --- -Avoid using fallback fonts at all costs +Avoid using fallback fonts at all costs. #### --answer-- -Combine no more than two or three font families for balance +Combine no more than two or three font families for balance. ### --question-- @@ -439,17 +439,17 @@ What is the purpose of the `line-height` property in CSS? #### --distractors-- -It sets the width of the text +It sets the width of the text. --- -It specifies the text alignment +It specifies the text alignment. --- -It changes the text color +It changes the text color. #### --answer-- -It controls the amount of space between lines of text +It controls the amount of space between lines of text. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md index 8c1a9c4bf0..2fbf506cfc 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-variables/66ed9018f45ce3ece4053eb9.md @@ -7,7 +7,7 @@ dashedName: quiz-css-variables # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -17,29 +17,29 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -If you've declared a custom property for animation speed using `@property`, and a user adjusts their settings for animations in their browser, how would that affect your custom property? Would they be able to see the changes, or does it stick to the value you've set? +Which of the following is NOT a valid descriptor in the `@property` rule? #### --distractors-- -The animations will run slower regardless of user settings +`syntax` --- -The user's settings override your defined speed +`inherits` --- -The animations will completely stop if the user disables them +`initial-value` #### --answer-- -The user's preferences will take priority, and they can adjust how the animations play out +`animation` ### --question-- #### --text-- -In the following code, which value will color have if `--main-color` is not defined? +In the following code, which value will `color` have if `--main-color` is not defined? ```css p { @@ -49,19 +49,19 @@ p { #### --distractors-- -Undefined +`Undefined` --- -No color will be applied +No color will be applied. --- -main-color +`--main-color` #### --answer-- -pink +`pink` ### --question-- @@ -75,7 +75,7 @@ Which of the following is a valid way to declare a custom property in CSS? --- -`custom-variable: #333;` +`@property: #333` --- @@ -93,47 +93,47 @@ What is the main purpose of using custom properties in CSS? #### --distractors-- -To change the DOM structure +To change the DOM structure. --- -To create dynamic selectors +To create dynamic selectors. --- -To improve accessibility +To improve accessibility. #### --answer-- -To define reusable styles across a project +To define reusable styles. ### --question-- #### --text-- -Custom properties defined in the `:root` selector are considered as? +What does the `:root` selector represent? #### --distractors-- -Locally scoped +The first child element of the `body`. --- -Non-inheritable +The parent element of all `header` elements. --- -Element-specific +The first child of the `html` tag. #### --answer-- -Globally scoped +The highest-level element in the DOM tree. ### --question-- #### --text-- -How do you apply a previously defined custom property `--foreground` in CSS? +How do you apply a `--foreground` custom property as the `color` in CSS? #### --distractors-- @@ -155,67 +155,67 @@ How do you apply a previously defined custom property `--foreground` in CSS? #### --text-- -What happens if you use a custom property that is not defined in the current scope? +What is the purpose of the `@property` rule in CSS? #### --distractors-- -It results in an error +To define a media query. --- -It uses the value `inherit` +To control CSS animations and their timing. --- -The property is ignored +To group CSS properties into one rule. #### --answer-- -The browser applies the default value, if provided +To define how custom properties behave. ### --question-- #### --text-- -What is the purpose of the `@property` rule in CSS? +When declaring a custom `@property`, what is the purpose of the `syntax` in its definition? #### --distractors-- -To define a media query +It specifies the default value of the custom property. --- -To control CSS animations +It determines whether the property can be inherited by child elements. --- -To group CSS properties +It defines whether the property is applied to all elements. #### --answer-- -To define how custom properties behave +It enforces a specific data type or value pattern for the custom property. ### --question-- #### --text-- -What should you be cautious of when using custom properties in terms of browser compatibility? +What should you be cautious of when using custom properties? #### --distractors-- -Custom properties are automatically converted to `px` units +Custom properties are automatically converted to `px` units. --- -Custom properties always override inline styles +Custom properties always override inline styles. --- -Custom properties can cause layout shifts +Custom properties cannot be used to set font values. #### --answer-- -Older browsers may not support custom properties +Custom properties may not be supported in older browsers. ### --question-- @@ -225,19 +225,19 @@ What is the purpose of providing a fallback value in the `var()` function for CS #### --distractors-- -To reduce the amount of CSS code +To reduce the amount of CSS code. --- -To improve performance in modern browsers +To improve performance in modern browsers. --- -To optimize rendering time on slow networks +To optimize rendering time on slow networks. #### --answer-- -To ensure a valid value is applied if the custom property is undefined +To ensure a valid value is applied if the custom property is undefined. ### --question-- @@ -247,215 +247,238 @@ When defining a variable `--foreground` inside a media query, what happens when #### --distractors-- -The custom property is preserved and continues to apply +The custom property is preserved and continues to apply. --- -The custom property reverts to its initial value +The custom property reverts to its initial value. --- -The custom property is recalculated based on the viewport +The custom property is recalculated based on the viewport. #### --answer-- -The custom property is no longer available as it is scoped to the media query +The custom property is no longer available as it is scoped to the media query. ### --question-- #### --text-- -Which of the following is not true when defining custom properties? +How would the following declaration behave? + +```css +color: var(--main-color, var(--fallback-color, #000)); +``` #### --distractors-- -Custom properties can be inherited by child elements +It will apply `--main-color` even if it is not defined, defaulting to that value. --- -Custom properties can be defined at any level in the DOM hierarchy +It will apply `--main-color` and `--fallback-color` simultaneously, resulting in a blend of the two colors. --- -Custom properties can be updated dynamically using JavaScript +It will always default to `#000`, regardless of whether `--main-color` or `--fallback-color` is defined. #### --answer-- -Custom properties can override user agent styles by default +It applies `--main-color` if defined; otherwise, checks `--fallback-color;` and if both are undefined, it uses `#000`. ### --question-- #### --text-- -How would the following declaration behave: `color: var(--main-color, var(--fallback-color, #000));`? +What is one benefit of using `@property` in CSS? #### --distractors-- -It will apply `--main-color` even if it is not defined, defaulting to that value +It improves performance by precomputing custom property values. --- -It will apply `--main-color` and `--fallback-color` simultaneously, resulting in a blend of the two colors +It automatically prefixes custom properties for better browser support. --- -It will always default to `#000`, regardless of whether `--main-color` or `--fallback-color` is defined +It restricts the use of custom properties to specific elements. #### --answer-- -It applies `--main-color` if defined; otherwise, checks `--fallback-color;` and if both are undefined, it uses `#000` +It allows for animations of custom properties. ### --question-- #### --text-- -What is the primary use case for the `@property` rule when working with CSS animations? +What does the `inherits` property in a custom `@property` declaration control? #### --distractors-- -To modify keyframe sequences based on variable values +Whether the custom property will have an initial value. --- -To control custom property inheritance during animation +Whether the property can have a shorthand version. --- -To ensure that custom properties maintain compatibility with media queries +Whether the property accepts fallback values. #### --answer-- -To define which custom properties are allowed to animate and set their initial values +Whether the custom property's value is passed to child elements. ### --question-- #### --text-- -Which CSS pseudo-class can be used to detect if a custom property (CSS Variable) is defined or not? +In the declaration of a custom `@property`, what does the `initial-value` specify? #### --distractors-- -`:defined` +The acceptable values the property can accept. --- -`:not(--var)` +The priority of the property in the cascade. --- -`:is-var` +The type of value the property must have. #### --answer-- -None of the above +The fallback value for the property. ### --question-- #### --text-- -In which scenario might defining a custom property in a media query cause unexpected behavior? +Given the following HTML and CSS code, what will be the value of the `color` property for the `.box` element? + +```html +
+
Text
+
+``` + +```css +:root { + --main-color: red; +} + +.container { + --main-color: blue; +} + +.box { + color: var(--main-color, black); +} +``` #### --distractors-- -When the property is defined using a `px` unit +`black` --- -When the property is defined outside of the `:root` +`red` --- -When the property is defined at the bottom of the stylesheet +`green` #### --answer-- -When the media query condition no longer applies, and the custom property is no longer valid +`blue` ### --question-- #### --text-- -What is the advantage of using CSS variables over traditional hard-coded values in a stylesheet? +Which property should a CSS gradient be applied to? #### --distractors-- -CSS variables reduce the size of the HTML file +`color` --- -CSS variables are automatically minified by the browser +`border-radius` --- -CSS variables only work for colors, not other properties +`box-shadow` #### --answer-- -CSS variables allow for dynamic changes via JavaScript, making the code more flexible +`background` ### --question-- #### --text-- -When using custom properties with CSS Grid or Flexbox, what should you be cautious about? +What is the purpose of color stops in CSS gradients? #### --distractors-- -Custom properties override grid or flex properties by default +To define the transparency level of the gradient. --- -Flexbox and Grid ignore custom properties during layout calculations +To specify the direction of the gradient. --- -Custom properties can cause layout shifts when recalculated +To repeat the gradient in a fixed pattern. #### --answer-- -Custom properties should be managed carefully, as they are recalculated with each layout pass, potentially impacting performance +To define the specific points where colors change in the gradient. ### --question-- #### --text-- -When using a custom property (CSS variable) with the `calc()` function, which of the following is a correct way to apply it to set the `width` of an element? +What happens if no angle or direction is specified in a CSS linear gradient? #### --distractors-- -`width: calc(--main-width + 20px);` +The gradient defaults to a diagonal direction. --- -`width: var(--main-width) calc(20px);` +The gradient defaults to moving from bottom to top. --- -`width: var(calc(--main-width) + 20px);` +The gradient defaults to moving from left to right. #### --answer-- -`width: calc(var(--main-width) + 20px);` +The gradient defaults to moving from top to bottom. ### --question-- #### --text-- -Which of the following is the correct way to define a fallback value for a CSS variable when the custom property is not available? +Which CSS gradient function allows you to create a gradient that radiates outward from a central point? #### --distractors-- -`color: var(--primary-color && inherit);` +`linear-gradient()` --- -`color: var(--primary-color || inherit);` +`conic-gradient()` --- -`color: fallback(var(--primary-color), inherit);` +`repeating-linear-gradient()` #### --answer-- -`color: var(--primary-color, inherit);` - +`radial-gradient()` diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md index c623759d16..ba1318e1cf 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-debugging-javascript/66edd10913f078e7669eca81.md @@ -7,7 +7,7 @@ dashedName: quiz-debugging-javascript # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,19 +21,19 @@ What type of error occurs when a variable is used before it is defined? #### --distractors-- -Syntax error +Syntax error. --- -Logical error +Logical error. --- -Range error +Range error. #### --answer-- -Reference error +Reference error. ### --question-- @@ -87,19 +87,19 @@ Which of the following errors does `try...catch` handle? #### --distractors-- -Syntax errors +Syntax errors. --- -Infinite loops +Infinite loops. --- -Logical errors +Logical errors. #### --answer-- -Runtime errors +Runtime errors. ### --question-- @@ -135,7 +135,7 @@ Using `const` instead of `let` --- -Calling a function that doesn't exist +Calling a function that doesn't exist. --- @@ -143,7 +143,7 @@ Writing `==` instead of `===` #### --answer-- -Incorrectly calculating a sum +Incorrectly calculating a sum. ### --question-- @@ -153,19 +153,19 @@ What is the purpose of breakpoints in JavaScript debugging? #### --distractors-- -Automatically correct code mistakes +Automatically correct code mistakes. --- -Prevent code from being executed +Prevent code from being executed. --- -Log messages to the console +Log messages to the console. #### --answer-- -Pause execution at a specific point +Pause execution at a specific point. ### --question-- @@ -175,19 +175,19 @@ What happens when the `throw` statement is executed? #### --distractors-- -The code after `throw` continues running +The code after `throw` continues running. --- -It triggers the `finally` block directly +It triggers the `finally` block directly. --- -It pauses code execution until resumed +It pauses code execution until resumed. #### --answer-- -An exception is thrown and the `catch` block (if present) is executed +An exception is thrown and the `catch` block (if present) is executed. ### --question-- @@ -219,19 +219,19 @@ What kind of error is likely to occur if a function is called with an incorrect #### --distractors-- -Reference error +Reference error. --- -Syntax error +Syntax error. --- -Logical error +Logical error. #### --answer-- -Type error +Type error. ### --question-- @@ -249,11 +249,11 @@ Which tool is commonly used to step through code line by line during debugging? --- -`throw` statement +`throw` statement. #### --answer-- -Breakpoints in Developer Tools +Breakpoints in Developer Tools. ### --question-- @@ -263,19 +263,19 @@ What type of error occurs when attempting to access a property of `undefined`? #### --distractors-- -Syntax error +Syntax error. --- -Logical error +Logical error. --- -Range error +Range error. #### --answer-- -Type error +Type error. ### --question-- @@ -285,19 +285,19 @@ What does the `finally` block do in a `try...catch` statement? #### --distractors-- -Only executes if there's an error +Only executes if there's an error. --- -Skips execution if `catch` is triggered +Skips execution if `catch` is triggered. --- -Exits the code block immediately +Exits the code block immediately. #### --answer-- -Always executes, regardless of errors +Always executes, regardless of errors. ### --question-- @@ -307,19 +307,19 @@ Which of the following could be used to avoid runtime errors in JavaScript? #### --distractors-- -Skipping error handling +Skipping error handling. --- -Ignoring exceptions +Ignoring exceptions. --- -Using no `try...catch` statements +Using no `try...catch` statements. #### --answer-- -Using conditionals to check data validity +Using conditionals to check data validity. ### --question-- @@ -329,19 +329,19 @@ What is a common cause of a syntax error? #### --distractors-- -Running out of memory +Running out of memory. --- -Missing `return` statement +Missing `return` statement. --- -Declaring an unused variable +Declaring an unused variable. #### --answer-- -Missing a closing bracket +Missing a closing bracket. ### --question-- @@ -373,19 +373,19 @@ What is a "watcher" in the context of debugging? #### --distractors-- -A tool for pausing code execution +A tool for pausing code execution. --- -A built-in function for logging errors +A built-in function for logging errors. --- -A JavaScript method for handling exceptions +A JavaScript method for handling exceptions. #### --answer-- -A tool for monitoring the value of variables +A tool for monitoring the value of variables. ### --question-- @@ -395,19 +395,19 @@ When should you use `console.error()` instead of `console.log()`? #### --distractors-- -To display table data +To display table data. --- -To log messages only during debugging +To log messages only during debugging. --- -To log information about the browser +To log information about the browser. #### --answer-- -To log error messages +To log error messages. ### --question-- @@ -417,19 +417,19 @@ What does the `Error()` constructor do in JavaScript? #### --distractors-- -Logs error messages to the console +Logs error messages to the console. --- -Runs code in a sandbox +Runs code in a sandbox. --- -Terminates the program +Terminates the program. #### --answer-- -Creates a new error object that can be thrown +Creates a new error object that can be thrown. ### --question-- @@ -439,17 +439,17 @@ What will happen if a `catch` block is not provided with a `try` block? #### --distractors-- -The code will stop executing +The code will stop executing. --- -The error will be logged but ignored +The error will be logged but ignored. --- -The program will continue with default values +The program will continue with default values. #### --answer-- -An uncaught exception error will occur +An uncaught exception error will occur. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md index 185ad04466..82c3d6890e 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md @@ -7,7 +7,7 @@ dashedName: quiz-design-fundamentals # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,29 +21,29 @@ What are some reasons why whitespace is important for good design? #### --distractors-- -Improves readability by placing many elements on the page +Improves readability by placing many elements on the page. --- -Focuses the viewer's attention by having elements placed close together +Focuses the viewer's attention by having elements placed close together. --- -Creates breathing space in the design to make users scroll for more information +Creates breathing space in the design to make users scroll for more information. #### --answer-- -Creates visual hierarchy, improves readability, focuses the viewer's attention on different elements +Creates visual hierarchy, improves readability, focuses the viewer's attention on different elements. ### --question-- #### --text-- -What is the design principle of carefully choosing the size of elements in relation to each other and the layout? +What is the design principle of carefully choosing the size of elements in relation to each other? #### --distractors-- -Visual hierarchy +Visual hierarchy. --- @@ -83,45 +83,45 @@ A complex e-commerce site with multiple categories and subcategories. #### --text-- -What design pattern allows users to access and interact with specific elements and content on a website without or while deferring registration? +Which design pattern allows users to access and interact with elements and content on a website without requiring immediate registration? #### --distractors-- -Captcha validation +Captcha validation. --- -Lazy loading +Lazy loading. --- -Progressive enhancement +Progressive enhancement. #### --answer-- -Deferred/lazy registration +Deferred/lazy registration. ### --question-- #### --text-- -What are the three main types of text alignment? +What are three types of text alignment? #### --distractors-- -Vertical, center, horizontal +Top, center, horizontal. --- -Left, right, justified +Left, right, middle. --- -Vertical, horizontal, justified +Vertical, horizontal, equal. #### --answer-- -Left, right, center +Left, right, center. ### --question-- @@ -131,19 +131,19 @@ Which interaction design pattern reduces the complexity of interaction by hiding #### --distractors-- -Extended discoverability +Extended discoverability. --- -Delayed implementation +Delayed implementation. --- -Gradual engagement +Gradual engagement. #### --answer-- -Progressive disclosure +Progressive disclosure. ### --question-- @@ -153,37 +153,37 @@ What is contrast in design? #### --distractors-- -Elements that are visually similar +Elements that are visually similar. --- -The difference in saturation between two colors +The difference in saturation between two colors. --- -Matching elements on a page +Matching elements on a page. #### --answer-- -Elements that are strikingly different from each other visually +Elements that are strikingly different from each other visually. ### --question-- #### --text-- -In the examples below, which one is an example of visual hierarchy in design? +Which of the following is an example of visual hierarchy in design? #### --distractors-- -Headline and title text are a similar color to the background and other elements to blend in +Headline and title text are a similar color to the background and other elements to blend in. --- -Text and images are all the same size on the page +Text and images are all the same size on the page. --- -The logo banner is smaller than all the minor images on the main landing page +The logo banner is smaller than all the minor images on the main landing page. #### --answer-- @@ -201,7 +201,7 @@ To increase the number of new users. --- -To test new features with existing users +To test new features with existing users. --- @@ -219,19 +219,19 @@ What is user centered design? #### --distractors-- -A design process where once the design is completed, designers test the product by getting user feedback +A design process where once the design is completed, designers test the product by getting user feedback. --- -A design process where designers consider user accessibility requirements +A design process where designers consider user accessibility requirements. --- -A design process focused on client requirements at every stage of the process +A design process focused on client requirements at every stage of the process. #### --answer-- -An iterative design process where designers design a product considering user requirements at every stage of the process +An iterative design process where designers design a product considering user requirements at every stage of the process. ### --question-- @@ -263,19 +263,19 @@ What are some colors to consider when designing dark mode? #### --distractors-- -Pure white +Pure white. --- -Highly saturated colors +Highly saturated colors. --- -Bright highly contrasting colors +Bright highly contrasting colors. #### --answer-- -Dark colors and muted light colors for contrast in dim lighting conditions +Dark colors and muted light colors for contrast in dim lighting conditions. ### --question-- @@ -325,45 +325,45 @@ To confirm that all stakeholders agree on the project's objectives and requireme #### --text-- -What is one bad practice method for implementing infinite scroll? +What is considered bad practice when implementing infinite scroll? #### --distractors-- -Allow users to jump to a page or section through the navbar or a pagination drop down menu +Allowing users to jump to a page or section through the navbar or a pagination drop down menu. --- -Add a load more indicator or symbol after a certain point in the page along with the infinite scroll +Adding a load more indicator or symbol after a certain point in the page along with the infinite scroll. --- -Integrate a footer reveal at the bottom +Integrating a footer reveal at the bottom. #### --answer-- -No back to top button, alternative methods of navigating the page, and very long inefficient scrolling +Not adding alternative methods of navigating the page. ### --question-- #### --text-- -What is one bad practice for working with images? +Which of the following is a best practice when designing progress indicators for forms? #### --distractors-- -Make important images stand out by being larger in size +Requiring users to restart the form if they navigate away from the page. --- -Separate text and images into columns or rows +Keeping the progress indicator small and discreet. --- -Put images outside the layout and important ones on their own or full screen +Making sure the progress is just displayed visually without any text. #### --answer-- -Images placed in the middle of text paragraphs with very little margin space for separation +Breaking the progress indicator into labeled sections. ### --question-- @@ -373,41 +373,41 @@ What is one way to make shopping cart design intuitive and user friendly? #### --distractors-- -Use a new shopping cart icon that no other website has used before +Use a new shopping cart icon that no other website has used before. --- -Do not allow users to add or remove items from the cart +Do not allow users to add or remove items from the cart. --- -Include a checkout summary on another page +Automatically add products to the cart without user interaction. #### --answer-- -Include thumbnail images of products in the cart +Include thumbnail images of products in the cart. ### --question-- #### --text-- -Dark mode doesn't mean pure black. What are some colors and good techniques to create a good dark mode color scheme? +Dark mode doesn't mean pure black. What is a good technique to create an effective dark mode color scheme? #### --distractors-- -Make images and elements darker and reduce contrast between different elements to have them blend in +Make images and elements darker and reduce contrast between different elements to have them blend in. --- -Invert the color scheme +Invert the color scheme. --- -Use many saturated colors +Use many saturated colors. #### --answer-- -Use dark gray or a dark shade of the brand color instead of pure black +Use dark gray or a dark shade of the brand color instead of pure black. ### --question-- @@ -417,19 +417,19 @@ What is one good design practice when creating modals? #### --distractors-- -Put a lot of important information inside a modal +Put a lot of important information inside a modal. --- -Have multiple modals on the same screen +Have multiple modals on the same screen. --- -Ensure the modal draws the user's attention away from it +Ensure the modal draws the user's attention away from it. #### --answer-- -Make the modal dismiss icon visible +Make the modal dismiss icon visible. ### --question-- @@ -439,17 +439,17 @@ What is a design brief? #### --distractors-- -A design brief is a document outlining the programming and design standards of the project +A document outlining the programming and design standards of the project. --- -A design brief is a document explaining how to replicate a design +A document explaining how to replicate a design. --- -A design brief is a document with detailed information of icons, colors, and assets the designer should use +A document with detailed information of icons, colors, and assets the designer should use. #### --answer-- -A design brief states the goals and project scope, budget, design requirements, and other important details of the project +A document stating the goals and project scope, budget and design requirements. diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md index 8d669877e2..16ab54a269 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md @@ -7,7 +7,7 @@ dashedName: quiz-dom-manipulation-and-click-event-with-javascript # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -186,7 +186,7 @@ Which of the following statements is false? `window` is an alias for `navigator.window`: ```js -window === navigator.window // returns true +window === navigator.window // returns true. ``` --- @@ -198,7 +198,7 @@ You can use the user screen properties (like position and size) using the `Windo `navigation` is an alias for `window.navigation`: ```js -navigation === window.navigation // returns true +navigation === window.navigation // returns true. ``` #### --answer-- @@ -276,7 +276,7 @@ Which of these does not set the element text color to `red`. #### --text-- -In the case of a click event, which `Event` property returns the clicked sub-element that triggerred the parent's callback? +In the case of a click event, which `Event` property returns the clicked sub-element that triggered the parent's callback? #### --distractors-- @@ -427,7 +427,7 @@ The first parameter is the function callback and the second is the delay duratio --- -`setTimeout` calls a function once after a delay and `setInterval` call a function continously after an interval delay. +`setTimeout` calls a function once after a delay and `setInterval` call a function continuously after an interval delay. --- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md index ba05d303b7..d8f79aa7d6 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md @@ -7,7 +7,7 @@ dashedName: quiz-form-validation-with-javascript # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -43,19 +43,19 @@ What happens if the `checkValidity()` method finds an invalid `input`? #### --distractors-- -The form is automatically submitted +The form is automatically submitted. --- -Nothing happens +Nothing happens. --- -The `input` value is cleared +The `input` value is cleared. #### --answer-- -The browser displays a validation message +The browser displays a validation message. ### --question-- @@ -87,19 +87,19 @@ What is the default validation behavior for required fields when the form is sub #### --distractors-- -The form is submitted even if required fields are empty +The form is submitted even if required fields are empty. --- -The form submits but gives a warning +The form submits but gives a warning. --- -The form resets the `input` values +The form resets the `input` values. #### --answer-- -The browser stops the form submission if required fields are empty +The browser stops the form submission if required fields are empty. ### --question-- @@ -109,11 +109,11 @@ Which actions does not cause an HTML form to be checked for errors? #### --distractors-- -Changing the `input` value +Changing the `input` value. --- -Submitting the form +Submitting the form. --- @@ -121,7 +121,7 @@ Calling `reportValidity()` #### --answer-- -Clicking a reset button +Clicking a reset button. ### --question-- @@ -153,15 +153,15 @@ When does the `checkValidity()` method stop form submission? #### --distractors-- -When the form has no submit button +When the form has no submit button. --- -When the form `action` is empty +When the form `action` is empty. --- -When the form method is POST +When the form method is POST. #### --answer-- @@ -175,19 +175,19 @@ What happens if `checkValidity()` is called, but a field fails validation? #### --distractors-- -The form submits without error +The form submits without error. --- -The `input` values are cleared +The `input` values are cleared. --- -The form closes immediately +The form closes immediately. #### --answer-- -The invalid field is highlighted and a message appears +The invalid field is highlighted and a message appears. ### --question-- @@ -197,19 +197,19 @@ Which action will make `checkValidity()` run? #### --distractors-- -Resetting the form +Resetting the form. --- -Changing an `input` value +Changing an `input` value. --- -Clicking an anchor tag +Clicking an anchor tag. #### --answer-- -Submitting the form manually +Submitting the form manually. ### --question-- @@ -219,19 +219,19 @@ What is the purpose of calling `checkValidity()` before submitting a form? #### --distractors-- -To automatically submit the form +To automatically submit the form. --- -To reload the page +To reload the page. --- -To clear all `input` fields +To clear all `input` fields. #### --answer-- -To check if all `input` elements meet their specified constraints +To check if all `input` elements meet their specified constraints. ### --question-- @@ -241,19 +241,19 @@ What is the main purpose of `e.preventDefault()`? #### --distractors-- -To reload the form +To reload the form. --- -To clear form data +To clear form data. --- -To reset the form values +To reset the form values. #### --answer-- -To stop the default action of an event +To stop the default action of an event. ### --question-- @@ -263,19 +263,19 @@ When used on a form's submit event, what does `e.preventDefault()` do? #### --distractors-- -It submits the form +It submits the form. --- -It clears all form fields +It clears all form fields. --- -It disables the form temporarily +It disables the form temporarily. #### --answer-- -It prevents the form from being submitted +It prevents the form from being submitted. ### --question-- @@ -285,19 +285,19 @@ In which scenario is `e.preventDefault()` most useful? #### --distractors-- -When handling a button click that submits a form +When handling a button click that submits a form. --- -When closing a modal dialog +When closing a modal dialog. --- -When opening a new page +When opening a new page. #### --answer-- -When submitting a form via AJAX and preventing a page reload +When submitting a form via AJAX and preventing a page reload. ### --question-- @@ -307,19 +307,19 @@ What happens if you forget to call `e.preventDefault()` on a form submit event? #### --distractors-- -The form is submitted via AJAX +The form is submitted via AJAX. --- -The form does not submit +The form does not submit. --- -The form data is lost +The form data is lost. #### --answer-- -The form submits and refreshes the page +The form submits and refreshes the page. ### --question-- @@ -329,15 +329,15 @@ Which default behavior can be prevented using `e.preventDefault()`? #### --distractors-- -Editing a form +Editing a form. --- -Rendering the form +Rendering the form. --- -Reloading the form +Reloading the form. #### --answer-- @@ -351,19 +351,19 @@ What triggers the form's submit event? #### --distractors-- -When an input field changes +When an input field changes. --- -When the form is reset +When the form is reset. --- -When the form's action is cleared +When the form's action is cleared. #### --answer-- -When a form's submit button is clicked or Enter is pressed +When a form's submit button is clicked or Enter is pressed. ### --question-- @@ -373,19 +373,19 @@ Where do you usually handle the submit event in JavaScript? #### --distractors-- -On a text input element +On a text input element. --- -On any field in the form +On any field in the form. --- -On a button element outside the form +On a button element outside the form. #### --answer-- -On the form element itself +On the form element itself. ### --question-- @@ -395,19 +395,19 @@ What does the submit event do by default? #### --distractors-- -It validates the form but doesn't submit it +It validates the form but doesn't submit it. --- -It clears the form fields +It clears the form fields. --- -It cancels form submission +It cancels form submission. #### --answer-- -It sends form data to the server specified in the form's action +It sends form data to the server specified in the form's action. ### --question-- @@ -443,7 +443,7 @@ Call `submit.preventDefault()` --- -Stop the form from being displayed +Stop the form from being displayed. --- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md index 8f46bf99ec..f65e5809d0 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-git/66f1b06a5a5d10cc100af620.md @@ -7,7 +7,7 @@ dashedName: quiz-git # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -29,7 +29,7 @@ Administrators --- -Subscribers/Premium Users +Subscribers/Premium Users. #### --answer-- @@ -43,11 +43,11 @@ Why is using version control software a best practice for high performing softwa #### --distractors-- -A complete long-term change history of every file +A complete long-term change history of every file. --- -Branching and merging +Branching and merging. --- @@ -55,7 +55,7 @@ Traceability #### --answer-- -All of the options +All of the options. ### --question-- @@ -143,7 +143,7 @@ Strangers #### --answer-- -All of the options +All of the options. ### --question-- @@ -205,7 +205,7 @@ What is the correct way to contribute to other people's repositories? --- -None of the options +None of the options. #### --answer-- @@ -289,15 +289,15 @@ GitHub.com --- -GitHub Codespaces +GitHub Codespaces. --- -GitHub Mobile +GitHub Mobile. #### --answer-- -All of the options +All of the options. ### --question-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md index 96ce78c92e..0adce53e76 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-html-accessibility/66ed9026f45ce3ece4053ebb.md @@ -7,7 +7,7 @@ dashedName: quiz-html-accessibility # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -21,41 +21,74 @@ What is accessibility? #### --distractors-- -Accessibility focuses on making websites faster to load. +Accessibility is a set of standardized practices that ensures your code is free from all security risks. --- -Accessibility is a belief to make websites compatible with older browsers. +Accessibility is a set of standardized practices that enhances the speed and performance for your web applications. --- -Accessibility is a type of coding style. +Accessibility is a set of standardized practices that ensures your code meets 100% test coverage. #### --answer-- -Accessibility is a set of standardized practices that help make online content more usable by people with disabilities. +Accessibility is a set of standardized practices to ensure your web applications can be used by everyone, including those with disabilities. + ### --question-- #### --text-- -What is a best practice for creating accessible headings? +Which of the following is a good example for proper heading level structure? #### --distractors-- -Add SEO-friendly keywords. +```html +

Heading 3

+

Heading 3

+

Heading 3

+ +

Heading 1

+

Heading 2

+

Heading 4

+``` --- -Create humorous headings. +```html +
Heading 6
+ +

Heading 1

+

Heading 1

+ +
Heading 5
+ +

Heading 2

+

Heading 2

+``` --- -Place `h6` headings at the beginning of your webpage. +```html +
Heading 6
+
Heading 5
+

Heading 4

+

Heading 3

+

Heading 2

+

Heading 1

+``` #### --answer-- -Put headings in hierarchical order. +```html +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+``` ### --question-- @@ -65,19 +98,19 @@ What are the six main categories of ARIA roles? #### --distractors-- -Document Structure, Landmark, Window, Explicit, Fidget, and Footer +Document Structure, Landmark, Window, Explicit, Fidget, and Footer. --- -Landmark, House, Live Region, Application, Window, and Extension +Landmark, House, Live Region, Application, Window, and Extension. --- -Window, Alert Dialog, Article, Cell, Banner, and Button +Window, Alert Dialog, Article, Cell, Banner, and Button. #### --answer-- -Document Structure, Landmark, Window, Abstract, Widget, and Live Region +Document Structure, Landmark, Window, Abstract, Widget, and Live Region. ### --question-- @@ -113,89 +146,91 @@ alt="" #### --text-- -What is WAI-ARIA? +What does WAI-ARIA stand for? #### --distractors-- -WAI-ARIA is a programming language specifically designed for creating animated web graphics. +Website Accessible Initiative - Accessible Rust Internet Applications. --- -WAI-ARIA is a set of guidelines for making websites more visually appealing and colorful. +Web Anchor Initiative - Anchor Rich Internet Applications. --- -WAI-ARIA is a tool for optimizing website loading speeds and server performance. +Web Accessibility Initial - Accessible Ready Internet Applications. #### --answer-- -WAI-ARIA is a set of standardized practices that helps make online content more accessible to people with disabilities. +Web Accessibility Initiative - Accessible Rich Internet Applications. ### --question-- #### --text-- -What is the function of the `hidden` attribute? +What is the role of the `aria-hidden` attribute? #### --distractors-- -To shrink the focused elements. +This attribute is used to hide elements only for users with visual impairments. --- -To add tabs. +This attribute is used to hide and add label text for an element. --- -To hide an HTML form. +This attribute is used to hide an element only to keyboard users. #### --answer-- -To prevent an element from being rendered. +This attribute is used to hide an element from people using assistive technologies. ### --question-- #### --text-- -What is the function of the `tabindex` attribute? +Which attribute makes elements focusable and defines the relative order in which they are navigated using the keyboard? #### --distractors-- -To change the color of focused elements. +`keyboardindex` --- -To shrink the focused elements. +`tabbingindex` --- -To add tabs. +`indextab` #### --answer-- -To control keyboard navigation order and allow programmatic focus on elements that aren't accessible via keyboard. +`tabindex` ### --question-- #### --text-- -Which of the following is a best practice for creating accessible data tables? +Why is it a good practice to include the `caption` element inside an HTML table? #### --distractors-- -Add a caption by using the `` tag. +It enhances the table's appearance by adding a decorative header. --- -Use the `aria-label` attribute to make sure that the data cells associate with the proper header. +It allows users to easily sort and filter the table's data. --- -Use absolute sizing to make sure that the data cells are not too large. +It helps improve the table's responsiveness on mobile devices. + #### --answer-- -Designate row and/or column headers by using `
` elements. +It is helpful for users to quickly understand the table's purpose and content. + ### --question-- @@ -223,67 +258,87 @@ The `aria-labelledby` attribute allows you to give an element an accessible name #### --text-- -What is the function of the `aria-selected` attribute? +Which of the following ARIA states is used to indicate that an element is selected? #### --distractors-- -To change the font size of an element. +`aria-haspopup` --- -To change the background color of an element. +`aria-label` --- -To shrink an element. +`aria-expanded` #### --answer-- -To indicate if an element is selected. +`aria-selected` ### --question-- #### --text-- -What is the function of `aria-expanded`? +Which of the following is NOT a common ARIA state? #### --distractors-- -To change the font size of an element. +`aria-hidden` --- -To change the background color of an element. +`aria-checked` --- -To shrink an element. +`aria-disabled` #### --answer-- -To indicate whether a control is currently expanded or collapsed, and whether its associated content is displayed or hidden. +`aria-columns` ### --question-- #### --text-- -What is the correct way to give an input a label? +Which of the following examples is the correct way to associate a `label` with an `input` element? #### --distractors-- -Give the input a `name` attribute. +```html +
+ + +
+``` --- -Add placeholder text to the input. +```html +
+ + +
+``` --- -Pair the input with a `p` element. +```html +
+ + +
+``` #### --answer-- -Use the `for` attribute on `label`s and matching `id` attribute on `input`s to associate them. +```html +
+ + +
+``` ### --question-- @@ -293,7 +348,7 @@ How does a screen magnifier help visually-impaired users navigate web pages? #### --distractors-- -A screen magnifier reads the page's content aloud to the user. +A screen magnifier will enlarge only images to twice their size so they can be better viewed by visually-impaired users. --- @@ -311,7 +366,7 @@ A screen magnifier helps visually-impaired users navigate web pages by allowing #### --text-- -What is the function of the `aria-haspopup` attribute? +What is the role of the `aria-haspopup` attribute? #### --distractors-- @@ -333,45 +388,46 @@ To indicate that an element can trigger a popup like a menu or dialog. #### --text-- -What is a common keystroke to see if a website is keyboard navigation-friendly? +Which of the following is NOT a commonly used ARIA role? #### --distractors-- -Enter + 6 +`role="alert"` --- -Enter +`role="menu"` --- -Caps Lock +`role="tab"` #### --answer-- -Shift + Tab +`role="access"` ### --question-- #### --text-- -What is the function of the `aria-live` attribute? +Which of the following attributes is used to create a live region on your page which can be used to notify screen reader users of dynamic content changes? + #### --distractors-- -To record live music performances. +`aria-label` --- -To make HTML elements focusable. +`aria-region` --- -To make HTML elements smaller. +`aria-expanded` #### --answer-- -To indicate that an element's content is dynamic and will be updated, which enables assistive technology to mention those updates to the user. +`aria-live` ### --question-- @@ -381,15 +437,15 @@ What is the purpose of the `role` attribute? #### --distractors-- -To style elements with CSS animations. +To style elements with CSS animations allowing assistive technologies to better understand how the element should be interpreted and interacted with. --- -To define the visual appearance of HTML elements. +To define the visual appearance of HTML elements allowing assistive technologies to better understand how the element should be interpreted and interacted with. --- -To modify HTML tags. +To add labels to form elements allowing assistive technologies to better understand how the element should be interpreted and interacted with. #### --answer-- @@ -399,65 +455,65 @@ To specify the type and purpose of an element, allowing assistive technologies t #### --text-- -What is the best way to make a website's link accessible? +Why is it important to use descriptive link text for links? #### --distractors-- -Use phrases like "click here" to describe the link. +To make the link text stand out visually from the rest of the page content. --- -Add the site's URL to the link's text. +To ensure the link loads faster when clicked. --- -Link to two different URLs using the same words on the same page. +To ensure that search engines will always list your site as the first result in the list. #### --answer-- -Avoid linking whole paragraphs. +To ensure that everyone, including users of assistive technology understand the purpose of the link. ### --question-- #### --text-- -When recording audio for a video, it is best to: +Which of the following is a best practice for making audio and video content accessible? #### --distractors-- -Use the latest recording tool. +Providing high-quality graphics to accompany the audio and video content to make it accessible to people with visual impairments. --- -Use jargon and terms related to the topic. +Using bright colors and large text to make the content more engaging and to make it accessible to people with visual impairments. --- -Speak quickly. +Limiting the length of audio and video content to make it accessible to people with hearing impairments. #### --answer-- -Speak slowly and clearly to give users time to process and understand the presented information. +Providing captions and transcripts for audio and video content to make it accessible to people with hearing impairments. ### --question-- #### --text-- -What is the function of the `aria-checked` attribute? +Which of the following attributes is used to indicate that an element is in the checked state? #### --distractors-- -To show a checkmark. +`aria-checking` --- -To mark HTML elements. +`aria-checkbox` --- -To add a circle. +`aria-ischecked` #### --answer-- -To indicate whether an element is checked (`true`), unchecked (`false`), or in an indeterminate state (`mixed`), meaning neither checked nor unchecked. +`aria-checked` diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md index bebba47030..520b5e6f9a 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-html-tables-and-forms/66ed902df45ce3ece4053ebc.md @@ -7,7 +7,7 @@ dashedName: quiz-html-tables-and-forms # --description-- -To pass the quiz, you must correctly answer at least 17 of the 20 questions below. +To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- @@ -83,7 +83,7 @@ It is used to define a table cell. #### --text-- -What's the function of the `colspan` attribute? +What is the function of the `colspan` attribute? #### --distractors-- @@ -99,7 +99,7 @@ It's used to define the number of columns. #### --answer-- -It merges cells across multiple columns. +It defines the number of columns a table cell should span. ### --question-- @@ -109,19 +109,19 @@ What is the role of the `placeholder` attribute? #### --distractors-- -used to send data to the server when the form is submitted +It's used to send data to the server when the form is submitted. --- -used to associate a `label` element with an `input` element +It's used to associate a `label` element with an `input` element. --- -used to specify that an input field is read-only to the user +It's used to specify that an input field is read-only to the user. #### --answer-- -used to show a hint to the user +It's used to provide a hint for an input field. ### --question-- @@ -131,19 +131,19 @@ What is the purpose of the `thead` element? #### --distractors-- -it is used to group the rows in an HTML table +It's used to group the body content in an HTML table. --- -it is used to group the columns in an HTML table +It's used to group the description of an HTML table. --- -it is used to group the footer content in an HTML table +It's used to group the footer content in an HTML table. #### --answer-- -it is used to group the header content in an HTML table +It's used to group the header content in an HTML table. ### --question-- @@ -209,7 +209,7 @@ A validator is a tool that checks the syntax of HTML code to ensure it is valid. #### --text-- -Which element is used to define a new cell in a table? +Which element is used to define a cell in a table? #### --distractors-- @@ -247,29 +247,77 @@ ChatGPT #### --answer-- -DOM inspector +DOM inspector. ### --question-- #### --text-- -Which of the following attributes is used to specify the maximum number of characters allowed in an input field? +Which of the following is the correct way to group related input fields? #### --distractors-- -`getMaxLength` +```html +
+
+
User information
` element to define header cells and the `` element to define data cells. This helps people using assistive technologies understand the structure of the table. +- **Accessibility and Tables**: When using tables, you should use the `` element to define header cells and the `` element to define data cells. This helps people using assistive technologies understand the structure of the table. With the `
` element, you can write the caption (or title) of a table, so users, especially those who use assistive technologies, can quickly understand the table's purpose and content. You should place the `` element immediately after the opening tag of the ``element. This way, screen readers and other assistive technologies can provide more context by announcing the caption before reading the content. - **Importance for inputs to have an associated label**: You should use the `